From b92e5a62bf68a4623fc86174f8b893e6482aa9df Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Wed, 7 Feb 2024 21:48:04 +0100 Subject: [PATCH 1/2] :lipstick: [#2253] Added modal props and variations --- .../templates/components/Action/Actions.html | 2 +- .../templates/components/Modal/Modal.html | 15 ++++ .../js/components/accessibility/help_modal.js | 15 +++- .../js/components/confirmation/index.js | 19 ++-- src/open_inwoner/js/components/index.js | 2 +- src/open_inwoner/js/components/modal/index.js | 65 ++++++++++++-- .../js/components/plan-preview/index.js | 28 ++++++ .../js/components/preview/index.js | 21 ----- .../js/components/session/index.js | 6 ++ .../scss/components/Button/Button.scss | 11 +++ .../scss/components/Plan/PlanCreate.scss | 19 ++++ .../components/PlanTemplate/PlanTemplate.scss | 4 +- .../Profile/_personal-overview.scss | 1 - .../scss/components/modal/_modal.scss | 90 +++++++++++++++++-- src/open_inwoner/templates/master.html | 13 +-- .../templates/pages/plans/create.html | 8 +- .../pages/profile/contacts/list.html | 4 +- .../templates/pages/profile/me.html | 3 +- 18 files changed, 257 insertions(+), 69 deletions(-) create mode 100644 src/open_inwoner/components/templates/components/Modal/Modal.html create mode 100644 src/open_inwoner/js/components/plan-preview/index.js delete mode 100644 src/open_inwoner/js/components/preview/index.js diff --git a/src/open_inwoner/components/templates/components/Action/Actions.html b/src/open_inwoner/components/templates/components/Action/Actions.html index 8e8fc7344c..31eefdb828 100644 --- a/src/open_inwoner/components/templates/components/Action/Actions.html +++ b/src/open_inwoner/components/templates/components/Action/Actions.html @@ -35,7 +35,7 @@
{% get_action_delete_url action=action plan=plan as action_url %} - {% render_form form=form method="POST" form_action=action_url extra_classes="confirm" spaceless=True data_confirm_title=_("Weet je het zeker dat je deze actie wilt verwijderen?") data_confirm_cancel=_("Nee") data_confirm_default=_("Ja") %} + {% render_form form=form method="POST" form_action=action_url extra_classes="confirm" spaceless=True data_confirm_title=_("Weet je het zeker dat je deze actie wilt verwijderen?") data_confirm_cancel=_("Nee, annuleren") data_confirm_default=_("Ja, verwijderen") %} {% csrf_token %} {% button icon="delete" text=_("Verwijderen") icon_outlined=True transparent=True %} {% endrender_form %} diff --git a/src/open_inwoner/components/templates/components/Modal/Modal.html b/src/open_inwoner/components/templates/components/Modal/Modal.html new file mode 100644 index 0000000000..fe1cb9d8ac --- /dev/null +++ b/src/open_inwoner/components/templates/components/Modal/Modal.html @@ -0,0 +1,15 @@ +{% load i18n icon_tags button_tags %} + + diff --git a/src/open_inwoner/js/components/accessibility/help_modal.js b/src/open_inwoner/js/components/accessibility/help_modal.js index 3220856044..0ecb128dae 100644 --- a/src/open_inwoner/js/components/accessibility/help_modal.js +++ b/src/open_inwoner/js/components/accessibility/help_modal.js @@ -1,6 +1,8 @@ import Modal from '../modal' -class HelpModal { +export class HelpModal { + static selector = '.accessibility--modal' + constructor(helpButton) { this.helpButton = helpButton this.modal = document.querySelector('.help-modal') @@ -11,9 +13,14 @@ class HelpModal { event.preventDefault() this.helpButton.classList.add('accessibility-header__modal--highlight') const modalId = document.getElementById('modal') + // Differentiate this modal from others + modalId.classList.add('accessibility-modal') const modal = new Modal(modalId) modal.setTitle(this.modal.dataset.helpTitle) modal.setText(this.modal.dataset.helpText) + modal.setModalIcons(false) + modal.setConfirmButtonVisibility(false) + modal.setCancelButtonVisibility(true) modal.setClose(this.modal.dataset.helpClose) modal.setModalClosedCallback(() => { this.helpButton.classList.remove('accessibility-header__modal--highlight') @@ -21,6 +28,6 @@ class HelpModal { modal.show(this.helpButton) } } - -const helpButton = document.querySelectorAll('.accessibility--modal') -;[...helpButton].forEach((button) => new HelpModal(button)) +document + .querySelectorAll(HelpModal.selector) + .forEach((helpButton) => new HelpModal(helpButton)) diff --git a/src/open_inwoner/js/components/confirmation/index.js b/src/open_inwoner/js/components/confirmation/index.js index 2dd7b877a3..77a3c3da41 100644 --- a/src/open_inwoner/js/components/confirmation/index.js +++ b/src/open_inwoner/js/components/confirmation/index.js @@ -1,6 +1,8 @@ import Modal from '../modal' -class Confirmation { +export class Confirmation { + static selector = '.form.confirm' + constructor(form) { this.real_submit = false this.form = form @@ -11,15 +13,21 @@ class Confirmation { if (!this.real_submit) { event.preventDefault() const modalId = document.getElementById('modal') + // Differentiate this modal from others + modalId.classList.add('confirm-modal') const modal = new Modal(modalId) modal.setTitle(this.form.dataset.confirmTitle) // Only show confirmation if text is set modal.setText(this.form.dataset.confirmText || '') - modal.setClose(this.form.dataset.confirmCancel) + modal.setModalIcons(true) + modal.setConfirmButtonVisibility(true) + modal.setCancelButtonVisibility(true) + modal.setButtonIconCloseVisibility(true) + modal.setClose(this.form.dataset.confirmCancel, 'button--primary-close') modal.setConfirm( this.form.dataset.confirmDefault, this.handleConfirm.bind(this), - 'button--danger' + 'button--error-confirm' ) modal.show(this.form) } @@ -32,5 +40,6 @@ class Confirmation { } } -const confirmForms = document.querySelectorAll('form.confirm') -;[...confirmForms].forEach((confirmForm) => new Confirmation(confirmForm)) +document + .querySelectorAll(Confirmation.selector) + .forEach((confirmForm) => new Confirmation(confirmForm)) diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js index 57a53952d8..83c01e7c10 100644 --- a/src/open_inwoner/js/components/index.js +++ b/src/open_inwoner/js/components/index.js @@ -23,7 +23,7 @@ import './map' import './message-file' import { Notification } from './notifications' import './plans' -import './preview' +import './plan-preview' import './questionnaire' import './readmore' import './search' diff --git a/src/open_inwoner/js/components/modal/index.js b/src/open_inwoner/js/components/modal/index.js index 98c57c273a..1180fa2ad3 100644 --- a/src/open_inwoner/js/components/modal/index.js +++ b/src/open_inwoner/js/components/modal/index.js @@ -6,6 +6,10 @@ export default class Modal { this.actions = this.node.querySelector('.modal__actions') this.close = this.node.querySelector('.modal__close') this.confirm = this.node.querySelector('.modal__confirm') + this.closeInnerText = this.node.querySelector('.modal__close .inner-text') + this.confirmInnerText = this.node.querySelector( + '.modal__confirm .inner-text' + ) this.closeTitle = this.node.querySelector('.modal__close-title') // This is for the prefilled modals so they will not be emptied @@ -19,6 +23,9 @@ export default class Modal { this.modalClosedCallback = null this.setTitle('') this.setText('') + this.setModalIcons(false) + this.setConfirmButtonVisibility(false) + this.setCancelButtonVisibility(false) if (this.confirm) { this.setConfirm('') this.confirm.className = 'button modal__button modal__confirm' @@ -43,6 +50,9 @@ export default class Modal { this.node.addEventListener('close', () => { this.hide() }) + document.addEventListener('keydown', (event) => { + this.escapeModal(event) + }) } setTitle(text) { @@ -53,13 +63,41 @@ export default class Modal { this.text.innerText = text } + setModalIcons(modalIcons) { + // Whether the modal-buttons should have icons or not + if (modalIcons) { + this.node.classList.add('show-modal-icons') + } + } + + setConfirmButtonVisibility(confirmVisibility) { + // Accessibility: whether the modal should have a confirm button or not + if (confirmVisibility) { + this.node.classList.add('show-confirm-button') + } + } + + setCancelButtonVisibility(cancelVisibility) { + // Accessibility: whether the modal should have a cancel button or not + if (cancelVisibility) { + this.node.classList.add('show-cancel-button') + } + } + + setButtonIconCloseVisibility(buttonIconCloseVisibility) { + // Whether the modal should have a top-right close button or not + if (buttonIconCloseVisibility) { + this.node.classList.add('show-button-icon-close') + } + } + setClose(text, className = 'button--primary') { - this.close.innerText = text + this.closeInnerText.innerText = text this.close.classList.add(className) } setConfirm(text, callback, className = 'button--primary') { - this.confirm.innerText = text + this.confirmInnerText.innerText = text this.confirm.onclick = (event) => { callback(event) this.hide() @@ -75,12 +113,23 @@ export default class Modal { this.node.classList.add('modal--open') this.refocusOnClose = refocusOnClose this.close.focus() - this.node.showModal() } hide() { - this.node.classList.remove('modal--open') - this.node.close() + const classesToRemove = [ + 'modal--open', + 'confirm-modal', + 'accessibility-modal', + 'session-modal', + 'show-button-icon-close', + 'show-modal-icons', + 'show-confirm-button', + 'show-cancel-button', + 'show-button-icon-close', + ] + classesToRemove.forEach((className) => + this.node.classList.remove(className) + ) if (this.refocusOnClose) { this.refocusOnClose.focus() this.refocusOnClose = null @@ -89,4 +138,10 @@ export default class Modal { this.modalClosedCallback() } } + + escapeModal(event) { + if (event.key === 'Escape') { + this.hide() + } + } } diff --git a/src/open_inwoner/js/components/plan-preview/index.js b/src/open_inwoner/js/components/plan-preview/index.js new file mode 100644 index 0000000000..af1eef2328 --- /dev/null +++ b/src/open_inwoner/js/components/plan-preview/index.js @@ -0,0 +1,28 @@ +import Modal from '../modal' + +export class Preview { + // Selector for elements triggering the preview modal + static selector = '.show-preview' + + constructor(node) { + this.node = node + this.node.addEventListener('click', this.openPreview.bind(this)) + } + + openPreview(event) { + event.stopPropagation() + event.preventDefault() + + const modalId = document.getElementById(this.node.dataset.id) + const modal = new Modal(modalId) + modal.setModalIcons(false) + modal.setConfirmButtonVisibility(false) + modal.setCancelButtonVisibility(true) + modal.setButtonIconCloseVisibility(true) + modal.show() + } +} + +document + .querySelectorAll(Preview.selector) + .forEach((previewNode) => new Preview(previewNode)) diff --git a/src/open_inwoner/js/components/preview/index.js b/src/open_inwoner/js/components/preview/index.js deleted file mode 100644 index a1e1ca6d11..0000000000 --- a/src/open_inwoner/js/components/preview/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import Modal from '../modal' - -class Preview { - constructor(node) { - this.node = node - - this.node.addEventListener('click', this.openPreview.bind(this)) - } - - openPreview(event) { - event.stopPropagation() - event.preventDefault() - - const modalId = document.getElementById(this.node.dataset.id) - const modal = new Modal(modalId) - modal.show() - } -} - -const previewNodes = document.querySelectorAll('.show-preview') -;[...previewNodes].forEach((previewNode) => new Preview(previewNode)) diff --git a/src/open_inwoner/js/components/session/index.js b/src/open_inwoner/js/components/session/index.js index f583f1098d..53482fb715 100644 --- a/src/open_inwoner/js/components/session/index.js +++ b/src/open_inwoner/js/components/session/index.js @@ -81,9 +81,15 @@ class SessionTimeout { configureModal(title, bodyText, buttonText, callback) { const modalId = document.getElementById('modal') + // Differentiate this modal from others + modalId.classList.add('session-modal') const modal = new Modal(modalId) modal.setTitle(title) modal.setText(bodyText) + modal.setModalIcons(false) + modal.setConfirmButtonVisibility(true) + modal.setCancelButtonVisibility(false) + modal.setButtonIconCloseVisibility(true) modal.setConfirm(buttonText, callback.bind(this)) modal.show() } diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss index 17c6662a97..e5b76b2875 100644 --- a/src/open_inwoner/scss/components/Button/Button.scss +++ b/src/open_inwoner/scss/components/Button/Button.scss @@ -168,6 +168,17 @@ color: var(--color-error-darker); } + &--primary-close { + background-color: var(--color-primary); + border: 1px solid var(--color-primary); + color: var(--color-font-primary); + } + + &--error-confirm { + background-color: var(--color-error-darker); + color: var(--color-white); + } + &--borderless { background-color: rgba(0, 0, 0, 0); border: none; diff --git a/src/open_inwoner/scss/components/Plan/PlanCreate.scss b/src/open_inwoner/scss/components/Plan/PlanCreate.scss index abd83e8315..31e06b2e09 100644 --- a/src/open_inwoner/scss/components/Plan/PlanCreate.scss +++ b/src/open_inwoner/scss/components/Plan/PlanCreate.scss @@ -12,5 +12,24 @@ .modal--open { background: rgba(0, 0, 0, 0.25); + + .modal__container { + padding: var(--spacing-giant); + + [class*='icon'] { + font-size: var(--font-size-body-large); + } + + .button-icon--primary { + color: var(--color-white); + font-size: var(--font-size-body); + } + + .modal__title .modal__button { + height: var(--font-size-body); + min-width: initial; + padding: 0; + } + } } } diff --git a/src/open_inwoner/scss/components/PlanTemplate/PlanTemplate.scss b/src/open_inwoner/scss/components/PlanTemplate/PlanTemplate.scss index ce57783e73..a3fbe7fc34 100644 --- a/src/open_inwoner/scss/components/PlanTemplate/PlanTemplate.scss +++ b/src/open_inwoner/scss/components/PlanTemplate/PlanTemplate.scss @@ -24,7 +24,7 @@ *[class*='icon'], *[class*='Icon'] { - color: #4b4b4b; - font-size: 14px; + color: var(--color-gray-dark); + font-size: var(--font-size-body-small); } } diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss index 1c68f4e890..6215757023 100644 --- a/src/open_inwoner/scss/components/Profile/_personal-overview.scss +++ b/src/open_inwoner/scss/components/Profile/_personal-overview.scss @@ -4,7 +4,6 @@ padding-bottom: var(--spacing-large); } - h2, .h2 { display: block; height: initial; diff --git a/src/open_inwoner/scss/components/modal/_modal.scss b/src/open_inwoner/scss/components/modal/_modal.scss index 8d4ed58011..501f85b65a 100644 --- a/src/open_inwoner/scss/components/modal/_modal.scss +++ b/src/open_inwoner/scss/components/modal/_modal.scss @@ -5,26 +5,30 @@ right: 0; bottom: 0; border: 0 solid transparent; + border-radius: var(--border-radius); z-index: 1000000; + background-color: rgba(0, 0, 0, 0.3); justify-content: center; align-items: center; display: none; &--open { display: flex; + flex-direction: column; } &__container { - max-width: 90%; + max-width: calc(100% - var(--spacing-large)); max-height: 90vh; border-radius: var(--border-radius); - padding: var(--spacing-giant); + padding: var(--spacing-large); overflow-y: auto; box-sizing: border-box; background-color: #fff; @media (min-width: 768px) { max-width: 720px; + padding: var(--spacing-giant); } } @@ -50,26 +54,94 @@ padding: 0 0 30px; } + &--align-right { + display: flex; + justify-content: flex-end; + position: relative; + width: 100%; + + .button { + height: var(--font-size-body); + padding: 0; + } + } + + .modal__button { + min-width: auto; + display: flex; + justify-content: center; + + @media (min-width: 768px) { + min-width: 150px; + } + } + &__actions { display: flex; + flex-direction: column; justify-content: center; gap: var(--spacing-medium); + @media (min-width: 768px) { + flex-direction: row; + } + + &__actions--align-right, &--align-right { - justify-content: right; + justify-content: flex-end; + width: 100%; + + .modal__button { + height: var(--font-size-body); + min-width: initial; + margin: 0; + padding: 0; + justify-content: flex-end; + + &.button-icon--primary { + padding: var(--spacing-large); + } + } } + + .button__icon-close { + color: var(--color-black); + margin: 0; + @media (min-width: 768px) { + margin: calc(-1 * var(--spacing-extra-large)) + calc(-1 * var(--spacing-extra-large)) 0 0; + } + } + } + + &.accessibility-modal .button.accessibility-header--hide { + opacity: 0.3; } - &__button:empty { + &.session-header--hide, + &.session-modal .modal__close { display: none; } - *[class*='icon'], - *[class*='Icon'] { - font-size: var(--font-size-heading-2); + /// Default hidden styles for modal variants + + .modal__visible-icon, + .button__icon-close, + .button.modal__confirm, + .button.modal__close { + display: none; } - &::backdrop { - background: rgba(0, 0, 0, 0.25); + /// Set visible styles + + &.show-modal-icons .modal__visible-icon { + display: block; + } + + &.show-button-icon-close .button__icon-close, + &.accessibility-modal.show-cancel-button .button.modal__close, + &.show-confirm-button .button.modal__confirm, + &.show-cancel-button .button.modal__close { + display: flex; } } diff --git a/src/open_inwoner/templates/master.html b/src/open_inwoner/templates/master.html index 184a617459..e771c81364 100644 --- a/src/open_inwoner/templates/master.html +++ b/src/open_inwoner/templates/master.html @@ -160,18 +160,7 @@ {% session_timeout %} - -
-

-
-
- {% spaceless %} - {% button text="" extra_classes="modal__button modal__close" %} - {% button text="" extra_classes="modal__button modal__confirm" %} - {% endspaceless %} -
-
- + {% include "components/Modal/Modal.html" %} {% render_block "js" %} {% block extra_js %}{% endblock %} diff --git a/src/open_inwoner/templates/pages/plans/create.html b/src/open_inwoner/templates/pages/plans/create.html index ab316e6e37..1e97dad2dc 100644 --- a/src/open_inwoner/templates/pages/plans/create.html +++ b/src/open_inwoner/templates/pages/plans/create.html @@ -50,13 +50,11 @@

{% trans "Start nieuwe samenwerking" %}

{{ plan_template.name }} - {% button text=_("Sluiten") hide_text=True icon="close" extra_classes="modal__button modal__close-title" %} + {% button type="button" text=_("Sluiten") hide_text=True icon="close" extra_classes="modal__button modal__close-title" %}

{{ plan_template.string_preview }}
- {% spaceless %} - {% button text=_("Sluiten") extra_classes="modal__button modal__close" primary=True %} - {% endspaceless %} +
@@ -77,4 +75,6 @@

{{ plan_template.name }}

{% endif %} + + {% include "components/Modal/Modal.html" with cancel_icon=False modal_icons=True confirm_button=False %} {% endblock %} diff --git a/src/open_inwoner/templates/pages/profile/contacts/list.html b/src/open_inwoner/templates/pages/profile/contacts/list.html index eade812029..e86f345098 100644 --- a/src/open_inwoner/templates/pages/profile/contacts/list.html +++ b/src/open_inwoner/templates/pages/profile/contacts/list.html @@ -141,9 +141,9 @@

{% trans "U bent toegevoegd als contactpersoon" %}

{% dropdown icon="settings" disabled=contact.is_not_active %}
{% url 'profile:contact_delete' uuid=contact.uuid as delete_url %} - {% render_form form=None form_action=delete_url method="POST" spaceless=True id="delete-contact-form" extra_classes="confirm" data_confirm_title=_("Are you sure you want to delete this contact?") data_confirm_cancel=_("Nee") data_confirm_default=_("Ja") %} + {% render_form form=None form_action=delete_url method="POST" spaceless=True id="delete-contact-form" extra_classes="confirm" data_confirm_title=_("Are you sure you want to delete this contact?") data_confirm_cancel=_("Nee, annuleren") data_confirm_default=_("Ja, verwijderen") %} {% csrf_token %} - {% button icon="delete" text=_("Verwijderen") transparent=True %} + {% button icon="delete" icon_outlined=True text=_("Verwijderen") transparent=True %} {% endrender_form %}
{% enddropdown %} diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html index 95c2e55c38..1e46008fae 100644 --- a/src/open_inwoner/templates/pages/profile/me.html +++ b/src/open_inwoner/templates/pages/profile/me.html @@ -294,13 +294,12 @@

{% trans "Profiel verwijderen" %}

< {% trans "Hiermee worden alleen uw persoonlijke voorkeuren verwijderd. U krijgt dan bijvoorbeeld geen e-mail meer van ons over wijzigingen van uw lopende zaken. Uw persoonsgegevens en uw lopende zaken zelf worden hiermee niet verwijderd." %}

- {% render_form form=form method="POST" id="delete-form" extra_classes="confirm" spaceless=True data_confirm_title=_("Weet u zeker dat u uw account wilt verwijderen?") data_confirm_text=_("Hiermee worden alleen uw persoonlijke voorkeuren verwijderd. U krijgt dan bijvoorbeeld geen e-mail meer van ons over wijzigingen van uw lopende zaken. Uw persoonsgegevens en uw lopende zaken zelf worden hiermee niet verwijderd.") data_confirm_cancel=_("Nee, annuleren") data_confirm_default=_("Ja, verwijderen") %} + {% render_form form=form method="POST" id="delete-form" extra_classes="confirm" spaceless=True data_confirm_title=_("Weet je zeker dat je jouw profiel wilt verwijderen?") data_confirm_text=_("Hiermee worden alleen uw persoonlijke voorkeuren verwijderd. U krijgt dan bijvoorbeeld geen e-mail meer van ons over wijzigingen van uw lopende zaken. Uw persoonsgegevens en uw lopende zaken zelf worden hiermee niet verwijderd.") data_confirm_cancel=_("Nee, annuleren") data_confirm_default=_("Ja, verwijderen") %} {% csrf_token %} {% button_row %} {% button text=_("Profiel verwijderen") icon="delete" icon_position="before" icon_outlined=True transparent=True extra_classes="button--spaceless button--error" %} {% endbutton_row %} {% endrender_form %} - {% endwith %} From 9685a2b31eb2dca640e0c29d93679549c6237c71 Mon Sep 17 00:00:00 2001 From: Jiro Ghianni Date: Tue, 26 Mar 2024 15:24:20 +0100 Subject: [PATCH 2/2] [#2253] Improved modals after PR feedback --- .../templates/components/Modal/Modal.html | 2 +- src/open_inwoner/js/components/modal/index.js | 12 ++++++++++++ .../scss/components/Plan/PlanCreate.scss | 12 ++++++++++-- src/open_inwoner/scss/components/modal/_modal.scss | 14 +++++++++++++- src/open_inwoner/templates/pages/plans/create.html | 6 +++--- 5 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/open_inwoner/components/templates/components/Modal/Modal.html b/src/open_inwoner/components/templates/components/Modal/Modal.html index fe1cb9d8ac..ebc2070b23 100644 --- a/src/open_inwoner/components/templates/components/Modal/Modal.html +++ b/src/open_inwoner/components/templates/components/Modal/Modal.html @@ -2,7 +2,7 @@