Merge pull request #398 from maykinmedia/issue/993-notifications-posi…

…tion-and-icon

[#993,#994,#1001] Fix/notifications layout and icons

src/open_inwoner/accounts/forms.py

@@ -316,8 +316,8 @@ def clean(self):
         file = cleaned_data.get("file")
 
         if not file and not content:
-            raise ValidationError(
-                _("Either message content or file should be filled in")
+            self.add_error(
+                "content", _("Either message content or file should be filled in")
             )
 
         return cleaned_data

src/open_inwoner/components/templates/components/Form/Error.html

@@ -1,2 +1,2 @@
 {% load notification_tags %}
-{% notifications messages=messages %}
+{% notifications messages=messages compact=True %}

src/open_inwoner/components/templates/components/Notification/Notification.html

@@ -1,8 +1,8 @@
 {% load icon_tags button_tags icon_tags %}
-<div class="notification{% if contents %} notification--contents{% endif %}{% if type %} notification--{{ type }}{% endif %}">
+<div class="notification{% if contents %} notification--contents{% endif %}{% if type %} notification--{{ type }}{% endif %}{% if compact %} notification--compact{% endif %}">
     {% if not icon == False %}
         <div class="notification__icon">
-            {% icon icon|default:'change_history' %}
+            {% icon icon %}
         </div>
     {% endif %}
 

src/open_inwoner/components/templates/components/Notification/Notifications.html

@@ -2,6 +2,6 @@
 
 <div class="notifications">
     {% for message in messages %}
-        {% notification icon=message.icon type=message.level_tag message=message.message closable=True %}
+        {% notification icon=message.icon type=message.level_tag message=message.message closable=True compact=compact %}
     {% endfor %}
 </div>

src/open_inwoner/components/templatetags/notification_tags.py

@@ -15,6 +15,7 @@ def notifications(messages, **kwargs):
 
     Variables:
         + messages: list | A list of messages that need to be displayed.
+        - compact: boolean | Whether to use compact styling or not.
         - icon: string | The icon, can be false.
     """
     if kwargs.get("icon") is not None:
@@ -41,9 +42,21 @@ def notification(type, message, **kwargs):
         - action: string | The href of the button.
         - action_text: string | The text of the button.
         - closable: bool | If a close button should be shown.
+        - compact: boolean | Whether to use compact styling or not.
     """
+    message_types = {
+        "debug": "bug_report",
+        "error": "error",
+        "info": "info",
+        "success": "check_circle",
+        "warning": "warning",
+    }
+
+    if kwargs.get("icon") is not False:
+        kwargs["icon"] = message_types[type]
+
     return {
-        "icon": kwargs.get("icon", "change_history"),
+        "icon": kwargs.get("icon"),
         "type": type,
         "message": message,
         **kwargs,

src/open_inwoner/scss/components/Autocomplete/Autocomplete.scss

@@ -10,7 +10,7 @@
   left: 0;
   right: 0;
   padding: 0;
-  z-index: 1000;
+  z-index: 1005;
 
   // color
   background-color: var(--color-white);

src/open_inwoner/scss/components/Container/Container.scss

@@ -6,4 +6,10 @@
   ); //FIXME
   max-width: var(--container-width);
   position: relative;
+
+  &--no-margin {
+    min-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }

src/open_inwoner/scss/components/Form/Form.scss

@@ -3,6 +3,7 @@
   display: grid;
   gap: var(--gutter-width);
   padding: var(--gutter-width) 0;
+  position: relative;
 
   @media (min-width: 768px) {
     gap: var(--gutter-width);
@@ -79,6 +80,10 @@
     width: 100%;
   }
 
+  &__control > .label .material-icons-outlined {
+    pointer-events: none;
+  }
+
   &__grid-box {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -153,7 +158,14 @@
       right: 5px;
       top: 50%;
       transform: translateY(-50%);
-      pointer-events: none;
+    }
+
+    .notification > *[class*='icon'],
+    .notification > *[class*='Icon'] {
+      width: auto !important;
+      position: absolute;
+      right: var(--spacing-small);
+      top: var(--spacing-large);
     }
   }
 }

src/open_inwoner/scss/components/Notification/_Notification.scss

@@ -9,6 +9,7 @@
   gap: var(--spacing-extra-large);
   margin: var(--row-height) 0;
   padding: var(--spacing-extra-large);
+  box-sizing: border-box;
   position: relative;
 
   &--contents {
@@ -25,6 +26,14 @@
     --notification-color-text: var(--color-success);
   }
 
+  &--compact {
+    margin: var(--spacing-medium) 0;
+
+    p {
+      font-size: var(--font-size-body) !important;
+    }
+  }
+
   &__icon {
     flex-shrink: 0;
     width: 24px;

src/open_inwoner/scss/components/Notification/_Notifications.scss

@@ -4,6 +4,5 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-extra-large);
-  padding: 0 var(--spacing-extra-large);
   z-index: 1004;
 }

src/open_inwoner/templates/master.html

@@ -40,7 +40,11 @@
 
         {% block header_image %}{% endblock header_image %}
 
-        {% block notifications %}{% notifications messages %}{% endblock %}
+        {% block notifications %}
+            <div class="container container--no-margin">
+                {% notifications messages %}
+            </div>
+        {% endblock %}
 
         {% block main_outer %}
             <main class="container">