[#2245] Registration notifications redesign

src/open_inwoner/accounts/templates/accounts/registration_necessary.html

@@ -1,34 +1,74 @@
 {% extends 'master.html' %}
-{% load i18n static form_tags card_tags grid_tags solo_tags %}
+{% load i18n static form_tags card_tags grid_tags solo_tags icon_tags %}
 
 {% block content %}
 <div class="registration-grid">
-{% render_grid %}
-    {% render_column span=9 %}
-        {% render_card tinted=True  %}
+    {% render_grid %}
+        {% render_column start=5 span=5 %}
             {% get_solo 'configurations.SiteConfiguration' as config %}
             <h1 class="h1">{% trans "Registratie voltooien" %}</h1><br>
-            {% if config.registration_text %}<p class="p">{{ config.registration_text|urlize|linebreaksbr }}</p><br>{% endif %}
+            {% if config.registration_text %}<p class="p">{{ config.registration_text|urlize|linebreaksbr }}</p>{% endif %}
             <form method="POST" id="necessary-form" action="{{ request.get_full_path }}" class="form" novalidate>
                 {% csrf_token %}
 
-                {% for field in form.fields %}
-                    {% autorender_field form field %}
-                {% endfor %}
+                {% if form.first_name %}
+                    {% input form.first_name %}
+                {% endif %}
 
-                    <div class="form__control">
-                        {# pseudo checkbox for notifications that cannot be disabled #}
-                        <div class="checkbox">
-                            <span role="checkbox" aria-disabled="true" aria-checked="true" class="checkbox__input checkbox__pseudo checkbox__input--disabled" aria-labelledby="id_cases_notifications_action_required" tabindex="0"></span>
-                            <span class="checkbox__label checkbox__pseudo-label" id="id_cases_notifications_action_required">{% trans "Zaaknotificaties - actie is nodig" %}</span>
-                            <p class="p">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
-                        </div>
-                    </div>
+                {% if form.infix %}
+                    {% input form.infix %}
+                {% endif %}
 
-                {% form_actions primary_icon='arrow_forward' primary_text="Verzenden" %}
+                {% if form.last_name %}
+                    {% input form.last_name %}
+                {% endif %}
+
+                {% if form.email %}
+                    {% input form.email %}
+                {% endif %}
+
+                {% if form.invite %}
+                    {% input form.invite no_label=True %}
+                {% endif %}
+
+                <h3 class="h3">Notificatie voorkeuren</h3>
+
+                {# Start of multiple checkbox fields #}
+                <ul class="choice-list choice-list-multiple">
+
+                    {% if form.cases_notifications %}
+                        <li class="choice-list-multiple__item">
+                            <div class="choice-list-multiple__content">
+                                {% checkbox form.cases_notifications %}
+                            </div>
+                        </li>
+                    {% endif %}
+
+                    {% if form.messages_notifications %}
+                        <li class="choice-list-multiple__item">
+                            <div class="choice-list-multiple__content">
+                                {% checkbox form.messages_notifications %}</div>
+                        </li>
+                    {% endif %}
+
+                    {% if form.plans_notifications %}
+                        <li class="choice-list-multiple__item">
+                            <div class="choice-list-multiple__content">
+                                {% checkbox form.plans_notifications %}</div>
+                        </li>
+                    {% endif %}
+                </ul>
+                {# End of multiple checkbox fields #}
+
+                {# Info on notifications that cannot be disabled #}
+                <div class="choice-list__information">
+                    <p class="choice-list-multiple__heading-4">{% icon icon="check" outlined=True %} {% trans "Zaaknotificaties - actie is nodig" %}</p>
+                    <p class="choice-list__p">{% trans "E-mailnotificaties wanneer er actie nodig is voor een zaak (kan niet uitgeschakeld worden)" %}</p>
+                </div>
+
+                {% form_actions primary_icon='east' primary_text="Voltooi registratie" fullwidth=True %}
             </form>
-        {% endrender_card %}
-    {% endrender_column %}
-{% endrender_grid %}
+        {% endrender_column %}
+    {% endrender_grid %}
 </div>
 {% endblock content %}

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

@@ -5,7 +5,7 @@
         {{ field|addclass:"checkbox__input" }}
         {% if not no_label %}<label class="checkbox__label" for="id_{{ field.name }}">{{ field.label }}</label>{% endif %}
         {% if field.help_text %}
-            <p class="p{{ help_extra_cls }}">{{ field.help_text }}</p>
+            <p class="checkbox__p">{{ field.help_text }}</p>
         {% endif %}
 
         {% if field.errors %}

src/open_inwoner/js/components/form/ChoiceListMultiple.js

@@ -0,0 +1,34 @@
+export class ChoiceListMultiple {
+  static selector = '.choice-list-multiple .choice-list-multiple__item'
+
+  constructor(listitem) {
+    this.listitem = listitem
+    this.checkbox = listitem.querySelector(
+      '.choice-list-multiple input[type="checkbox"]'
+    )
+    this.label = listitem.querySelector(
+      '.choice-list-multiple .choice-list-multiple__item .checkbox__label'
+    )
+
+    if (this.checkbox.checked) {
+      this.listitem.classList.add('selected')
+    }
+
+    this.listitem.addEventListener(
+      'click',
+      this.toggleChoiceItemBorder.bind(this)
+    )
+  }
+
+  toggleChoiceItemBorder() {
+    if (this.checkbox.checked) {
+      this.listitem.classList.add('selected')
+    } else {
+      this.listitem.classList.remove('selected')
+    }
+  }
+}
+
+document
+  .querySelectorAll(ChoiceListMultiple.selector)
+  .forEach((listitem) => new ChoiceListMultiple(listitem))

src/open_inwoner/js/components/form/index.js

@@ -1,3 +1,4 @@
 import './FileInput'
+import './ChoiceListMultiple'
 import './ChoiceListSingle'
 import './DisableContactFormButton'

src/open_inwoner/js/components/siteimprove/tracking.js

@@ -235,18 +235,20 @@ const selectorMap = {
       'check',
       'Enable',
     ],
-    '.form#change-notifications a.button[title="Terug"]': [
-      'click',
-      'Communicatievoorkeuren',
-      'Click',
-      'No Save (terug naar mijn profiel)',
-    ],
-    '.form#change-notifications a.button .material-icons': [
-      'click',
-      'Communicatievoorkeuren',
-      'Click',
-      'No Save (terug naar mijn profiel)',
-    ],
+    '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button':
+      [
+        'click',
+        'Communicatievoorkeuren',
+        'Click',
+        'No Save (terug naar mijn profiel)',
+      ],
+    '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button .material-icons-outlined':
+      [
+        'click',
+        'Communicatievoorkeuren',
+        'Click',
+        'No Save (terug naar mijn profiel)',
+      ],
     '.form#change-notifications button.button--primary': [
       'click',
       'Communicatievoorkeuren',

src/open_inwoner/scss/components/Filter/Filter.scss

@@ -51,7 +51,6 @@
   }
 
   .divider {
-    background-color: yellow;
     border: red solid 5px !important;
     &--small {
       display: none;

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

@@ -32,18 +32,15 @@
       width: var(--font-line-height-body-small);
       height: var(--font-line-height-body-small);
       border: var(--border-width) solid var(--color-gray-dark);
-      border-radius: 1px; // intended-var-change.
+      border-radius: var(--border-radius);
       background-color: var(--color-white);
     }
-
-    &.checkbox__pseudo-label {
-      padding-left: calc(var(--gutter-width) + 4px);
-    }
   }
 
   .checkbox__input:checked ~ .checkbox__label:before {
-    background-color: var(--color-secondary);
-    color: var(--color-font-secondary);
+    background-color: var(--color-white);
+    border: var(--border-width) solid var(--color-secondary);
+    color: var(--color-secondary);
     font-family: 'Material Icons';
     content: '\e876';
   }
@@ -56,22 +53,12 @@
     content: '\e876';
   }
 
-  /// Mimic checked-styles for pseudo checkboxes
-
-  &__pseudo ~ .checkbox__label:before {
-    background-color: var(--color-secondary);
-    color: var(--color-font-secondary);
-    font-family: 'Material Icons';
-    left: 4px;
-    content: '\e876';
-  }
-
-  &__pseudo.checkbox__input--disabled ~ .checkbox__label:before {
-    border-color: var(--color-gray) !important;
-    background-color: var(--color-gray);
-    color: var(--color-white);
-    font-family: 'Material Icons';
-    left: 3px;
-    content: '\e876';
+  &__p {
+    color: var(--font-color-body);
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-body);
+    line-height: var(--font-line-height-body);
+    font-weight: normal;
+    margin: 0;
   }
 }