Merge pull request #1056 from maykinmedia/feature/2137-pseudo-checkbo…

…x-profile-notifications [#2137] Show disabled pseudo-checkbox for actions
maykinmedia · Feb 27, 2024 · d11a962 · d11a962
2 parents 2c3db0c + bd37813
commit d11a962
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/src/open_inwoner/accounts/templates/accounts/registration_necessary.html b/src/open_inwoner/accounts/templates/accounts/registration_necessary.html
@@ -16,12 +16,14 @@ <h1 class="h1">{% trans "Registratie voltooien" %}</h1><br>
                     {% autorender_field form field %}
                 {% endfor %}
 
-                {# pseudo checkbox for notifications that cannot be disabled #}
-                <div class="checkbox">
-                    <input type="checkbox" name="cases_notifications_action_required" disabled="" class="checkbox__input checkbox__input--disabled" checked="">
-                    <label class="checkbox__label" for="id_cases_notifications_action_required">{% trans "Zaaknotificaties - action required" %}</label>
-                    <p class="p">{% trans "E-mail notifications for case updates that require action (cannot be disabled)" %}</p>
-                </div>
+                    <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>
 
                 {% form_actions primary_icon='arrow_forward' primary_text="Verzenden" %}
             </form>

diff --git a/src/open_inwoner/scss/components/Form/Checkbox.scss b/src/open_inwoner/scss/components/Form/Checkbox.scss
@@ -35,6 +35,10 @@
       border-radius: 1px; // intended-var-change.
       background-color: var(--color-white);
     }
+
+    &.checkbox__pseudo-label {
+      padding-left: calc(var(--gutter-width) + 4px);
+    }
   }
 
   .checkbox__input:checked ~ .checkbox__label:before {
@@ -51,4 +55,23 @@
     font-family: 'Material Icons';
     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';
+  }
 }
diff --git a/src/open_inwoner/templates/pages/profile/notifications.html b/src/open_inwoner/templates/pages/profile/notifications.html
@@ -9,6 +9,23 @@ <h1 class="h1" id="title">
     {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %}
 </p>
 
-{% form form_object=form method="POST" id="change-notifications" submit_text=_("Opslaan") secondary_href='profile:detail' secondary_text=_('Terug') secondary_icon='arrow_backward' secondary_icon_position="before" %}
+<form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form" novalidate>
+    {% csrf_token %}
+
+    {% for field in form.fields %}
+        {% autorender_field form field %}
+    {% endfor %}
+
+    <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>
+
+    {% form_actions primary_text=_("Opslaan") primary_icon="arrow_forward" secondary_href='profile:detail' secondary_text=_('Terug') secondary_icon_position="before" secondary_icon='arrow_backward' %}
+</form>
 
 {% endblock content %}