[#1647] add configurable warning banner

Author: pi-sigma

src/open_inwoner/components/templates/components/Header/WarningHeader.html

@@ -0,0 +1,15 @@
+{% load i18n link_tags static %}
+
+<style nonce="{{ request.csp_nonce }}"> 
+	.warning-header {
+		background-color: {{ warning_banner_background_color }};
+    color: {{ warning_banner_font_color }};
+	}
+</style>
+
+<div class="warning-header">
+	<div class="warning-header__container">
+		<img class="warning-header__icon" alt="Vignet" src="{% static 'img/exclamation-encircled.svg' %}"/>
+		<span class="warning-header__text">{{ warning_banner_text }}</span>
+	</div>
+</div>

src/open_inwoner/configurations/admin.py

@@ -102,6 +102,18 @@ class SiteConfigurarionAdmin(OrderedInlineModelAdminMixin, SingletonModelAdmin):
                 )
             },
         ),
+        (
+            _("Warning banner"),
+            {
+                "classes": ("collapse",),
+                "fields": (
+                    "warning_banner_enabled",
+                    "warning_banner_text",
+                    "warning_banner_background_color",
+                    "warning_banner_font_color",
+                ),
+            },
+        ),
         (
             _("Page texts"),
             {
@@ -228,6 +240,13 @@ def check_contrast_ratio(label1, color1, label2, color2, expected_ratio):
             obj.accent_font_color,
             ACCESSIBLE_CONTRAST_RATIO,
         )
+        check_contrast_ratio(
+            _("Warning banner background color"),
+            obj.warning_banner_background_color,
+            _("Warning banner font color"),
+            obj.warning_banner_font_color,
+            ACCESSIBLE_CONTRAST_RATIO,
+        )
 
     def save_model(self, request, obj, form, change):
         super().save_model(request, obj, form, change)

src/open_inwoner/configurations/migrations/0047_auto_20230809_0833.py

@@ -0,0 +1,52 @@
+# Generated by Django 3.2.15 on 2023-08-09 06:33
+
+import colorfield.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("configurations", "0046_siteconfiguration_cookie_consent"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_background_color",
+            field=colorfield.fields.ColorField(
+                default="#FFDBAD",
+                help_text="The background color for the warning banner",
+                max_length=18,
+                verbose_name="Warning banner background",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_enabled",
+            field=models.BooleanField(
+                default=False,
+                help_text="Wether the warning banner should be displayed",
+                verbose_name="Show warning banner",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_font_color",
+            field=colorfield.fields.ColorField(
+                default="#000000",
+                help_text="The font color for the warning banner",
+                max_length=18,
+                verbose_name="Warning banner font",
+            ),
+        ),
+        migrations.AddField(
+            model_name="siteconfiguration",
+            name="warning_banner_text",
+            field=models.TextField(
+                blank=True,
+                help_text="Text will be displayed on the warning banner",
+                verbose_name="Warning banner text",
+            ),
+        ),
+    ]

src/open_inwoner/configurations/models.py

@@ -57,6 +57,26 @@ class SiteConfiguration(SingletonModel):
         default=ColorTypeChoices.dark,
         help_text=_("The font color for when the background is the accent color"),
     )
+    warning_banner_enabled = models.BooleanField(
+        verbose_name=_("Show warning banner"),
+        default=False,
+        help_text=_("Wether the warning banner should be displayed"),
+    )
+    warning_banner_text = models.TextField(
+        verbose_name=_("Warning banner text"),
+        blank=True,
+        help_text=_("Text will be displayed on the warning banner"),
+    )
+    warning_banner_background_color = ColorField(
+        verbose_name=_("Warning banner background"),
+        default="#FFDBAD",
+        help_text=_("The background color for the warning banner"),
+    )
+    warning_banner_font_color = ColorField(
+        verbose_name=_("Warning banner font"),
+        default="#000000",
+        help_text=_("The font color for the warning banner"),
+    )
     logo = FilerImageField(
         verbose_name=_("Logo"),
         null=True,

src/open_inwoner/scss/components/WarningHeader/WarningHeader.scss

@@ -0,0 +1,20 @@
+.warning-header {
+  display: flex;
+  box-sizing: border-box;
+  padding: 1rem;
+
+  .warning-header__container {
+    display: flex;
+    align-items: center;
+    padding: 0 4rem;
+    margin: 0 auto;
+
+    .warning-header__icon,
+    .warning-header__text {
+      padding: 0.25rem;
+    }
+    .warning-header__icon {
+      width: 20px;
+    }
+  }
+}

src/open_inwoner/scss/components/_index.scss

@@ -97,3 +97,4 @@
 @import './Emoji/Emoji.scss';
 @import './Profile/personal-information';
 @import './Profile/edit.scss';
+@import './WarningHeader/WarningHeader.scss';

src/open_inwoner/static/img/exclamation-encircled.svg

@@ -37,6 +37,10 @@
     </head>
 
     <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+				{% if warning_banner_enabled %}
+          {% include "components/Header/WarningHeader.html" %}
+				{% endif %}
+
         {% cms_toolbar %}
         {% header categories=menu_categories request=request breadcrumbs=breadcrumbs search_form=search_form has_general_faq_questions=has_general_faq_questions cms_apps=cms_apps %}
 

src/open_inwoner/templates/master.html

@@ -86,6 +86,10 @@ def settings(request):
         "settings": dict(
             [(k, getattr(django_settings, k, None)) for k in public_settings]
         ),
+        "warning_banner_enabled": config.warning_banner_enabled,
+        "warning_banner_text": config.warning_banner_text,
+        "warning_banner_background_color": config.warning_banner_background_color,
+        "warning_banner_font_color": config.warning_banner_font_color,
     }
 
     if hasattr(django_settings, "SENTRY_CONFIG"):

src/open_inwoner/utils/context_processors.py

@@ -5,6 +5,8 @@
 
 from humanfriendly import format_size
 
+from open_inwoner.configurations.models import SiteConfiguration
+
 register = template.Library()