-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#2245] Changed checkbox template and added multiple
- Loading branch information
1 parent
c844fa4
commit a7aca0b
Showing
9 changed files
with
251 additions
and
49 deletions.
There are no files selected for viewing
80 changes: 60 additions & 20 deletions
80
src/open_inwoner/accounts/templates/accounts/registration_necessary.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| 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' | ||
| ) | ||
| // Add 'selected' parentclass if checkbox is already checked onLoad | ||
| if (this.checkbox.checked) { | ||
| this.listitem.classList.add('selected') | ||
| } | ||
| // If selector exists | ||
| this.listitem.addEventListener( | ||
| 'click', | ||
| this.toggleChoiceItemBorder.bind(this) | ||
| ) | ||
| } | ||
|
|
||
| toggleChoiceItemBorder() { | ||
| if (this.checkbox.checked) { | ||
| this.listitem.classList.add('selected') | ||
| } else { | ||
| this.listitem.classList.remove('selected') | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Apply toggleChoiceItemBorder to each element matching the selector | ||
| document | ||
| .querySelectorAll(ChoiceListMultiple.selector) | ||
| .forEach((listitem) => new ChoiceListMultiple(listitem)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| import './FileInput' | ||
| import './ChoiceListMultiple' | ||
| import './ChoiceListSingle' | ||
| import './DisableContactFormButton' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,7 +51,6 @@ | |
| } | ||
|
|
||
| .divider { | ||
| background-color: yellow; | ||
| border: red solid 5px !important; | ||
| &--small { | ||
| display: none; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 29 additions & 22 deletions
51
src/open_inwoner/templates/pages/profile/notifications.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,38 @@ | ||
| {% extends 'master.html' %} | ||
| {% load i18n l10n form_tags %} | ||
| {% load i18n l10n grid_tags form_tags icon_tags button_tags %} | ||
|
|
||
| {% block content %} | ||
| <h1 class="h1" id="title"> | ||
| {% trans "Ontvang berichten over" %} | ||
| </h1> | ||
| <p class="p"> | ||
| {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %} | ||
| </p> | ||
| <h1 class="h1" id="title"> | ||
| {% trans "Ontvang berichten over" %} | ||
| </h1> | ||
| <p class="p"> | ||
| {% trans "Kies voor welk onderwerp je meldingen wilt ontvangen" %} | ||
| </p> | ||
|
|
||
| <form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form" novalidate> | ||
| {% csrf_token %} | ||
| {% render_grid %} | ||
| {% render_column start=0 span=6 %} | ||
|
|
||
| {% for field in form.fields %} | ||
| {% autorender_field form field %} | ||
| {% endfor %} | ||
| <form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form" novalidate> | ||
| {% csrf_token %} | ||
|
|
||
| <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> | ||
| {% for field in form.fields %} | ||
| {% autorender_field form field %} | ||
| {% endfor %} | ||
|
|
||
| {% 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> | ||
| <div class="choice-list choice-list-multiple"> | ||
| {# 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> | ||
| </div> | ||
|
|
||
| <div class="form__actions form__actions--fullwidth"> | ||
| {% button text="Sla wijzigingen op" primary=True type="submit" form_id="profile-edit" %} | ||
| {% button href="profile:detail" icon="west" text=_("Terug naar Mijn profiel") icon_outlined=True transparent=True %} | ||
| </div> | ||
| </form> | ||
|
|
||
| {% endrender_column %} | ||
| {% endrender_grid %} | ||
| {% endblock content %} |