Merge pull request #728 from maykinmedia/feature/1647-banner

[#1647] Add configurable warning banner

Author: alextreme

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

@@ -0,0 +1,15 @@
+{% load i18n icon_tags 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">
+    <span class="warning-header__icon">{% icon icon="error_outlined" icon_position="after" outlined=True %}</span>
+		<span class="warning-header__text">{{ warning_banner_text }}</span>
+	</div>
+</div>

src/open_inwoner/configurations/admin.py

@@ -109,6 +109,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"),
             {
@@ -276,6 +288,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/0050_siteconfig_warning_banner.py

@@ -0,0 +1,53 @@
+# Generated by Django 3.2.15 on 2023-08-09 06:33
+
+from django.db import migrations, models
+
+import colorfield.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("configurations", "0049_siteconfiguration_extra_css"),
+    ]
+
+    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="Whether 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

@@ -59,6 +59,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=_("Whether 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/pdc/migrations/0037_category_highlighted.py

@@ -15,7 +15,7 @@ class Migration(migrations.Migration):
             name="highlighted",
             field=models.BooleanField(
                 default=False,
-                help_text="Wether the category should be highlighted or not",
+                help_text="Whether the category should be highlighted or not",
                 verbose_name="Highlighted",
             ),
         ),

src/open_inwoner/pdc/migrations/0038_auto_20220601_1435.py

@@ -1,8 +1,9 @@
 # Generated by Django 3.2.13 on 2022-06-01 12:35
 
+import django.db.models.deletion
 from django.conf import settings
 from django.db import migrations, models
-import django.db.models.deletion
+
 import filer.fields.image
 
 
@@ -45,7 +46,7 @@ class Migration(migrations.Migration):
             name="highlighted",
             field=models.BooleanField(
                 default=False,
-                help_text="Wether the category should be highlighted or not.",
+                help_text="Whether the category should be highlighted or not.",
                 verbose_name="Highlighted",
             ),
         ),

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

@@ -0,0 +1,24 @@
+.warning-header {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--spacing-large);
+
+  .warning-header__container {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0 auto;
+
+    @media (min-width: 768px) {
+      max-width: 90%;
+    }
+
+    .warning-header__icon,
+    .warning-header__text {
+      padding: var(--spacing-small);
+    }
+    .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/templates/master.html

@@ -41,6 +41,10 @@
     </head>
 
     <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+        {% if warning_banner_enabled %}
+          {% include "components/Header/WarningHeader.html" %}
+        {% endif %}
+
         {% cms_toolbar %}
 
         {# render the cms menu and save for display in both mobile and desktop #}

src/open_inwoner/utils/context_processors.py

@@ -88,6 +88,10 @@ def settings(request):
             [(k, getattr(django_settings, k, None)) for k in public_settings]
         ),
         "hide_categories_from_anonymous_users": config.hide_categories_from_anonymous_users,
+        "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/templatetags/utils.py

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