-
Notifications
You must be signed in to change notification settings - Fork 146
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
More realistic alternative to `current` Add custom elements scaffold looks right, doesn't open found a way to use import, but not have icons modal texts displayed before script is loaded fix usage of custom elements prototype before it was loaded make it open the modal dont know some progess with native dialogs make it look somewhat like bootstrap progress? make animations work implement confirmation logic ough, now the slots inherit values from the .card-header bar Use `:defined` instead of `.loaded` class more modals and fix blocktrans
- Loading branch information
1 parent
93cf241
commit 6edafce
Showing
10 changed files
with
253 additions
and
69 deletions.
There are no files selected for viewing
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
27 changes: 27 additions & 0 deletions
27
evap/evaluation/templates/confirmation_modal_template.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 |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| {% load static %} | ||
|
|
||
| <template id="confirmation-modal-template"> | ||
| <link rel="stylesheet" href="{% static 'css/evap.css' %}" /> | ||
|
|
||
| <dialog class="evap-modal-dialog"> | ||
| <form method="dialog"> | ||
| <div class="evap-modal-container"> | ||
| <header> | ||
| <h5><slot name="title"></slot></h5> | ||
| <button class="btn-close"></button> | ||
| </header> | ||
| <section class="question-area"> | ||
| <slot name="question"></slot> | ||
| </section> | ||
| <section class="button-area"> | ||
| <button class="btn btn-light" autofocus>{% trans 'Cancel' %}</button> | ||
| <button class="btn ms-2" data-event-type="confirm"> | ||
| <slot name="action-text"></slot> | ||
| </button> | ||
| </section> | ||
| </div> | ||
| </form> | ||
| </dialog> | ||
|
|
||
| <slot name="show-button"></slot> | ||
| </template> |
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,9 @@ | ||
| {% load static %} | ||
|
|
||
| {% include "confirmation_modal_template.html" %} | ||
|
|
||
| <script type="module"> | ||
| import { ConfirmationModal } from "{% static 'js/confirmation-modal.js' %}"; | ||
|
|
||
| customElements.define("confirmation-modal", ConfirmationModal); | ||
| </script> |
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
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,77 @@ | ||
| confirmation-modal:not(:defined) > :not([slot="show-button"]) { | ||
| // Without this, the elements that are slotted into the dialog element show up as if they are just normal child | ||
| // elements and disappear once the custom element registration is done. To avoid a short flicker of these elements, | ||
| // we hide them until the constructor of the custom element has run. | ||
| display: none; | ||
| } | ||
|
|
||
| dialog.evap-modal-dialog { | ||
| padding: 0; | ||
| border: 1px solid $dark-gray; | ||
| border-radius: 0.5rem; | ||
| z-index: 1050; | ||
| inset-block-start: -70vh; | ||
|
|
||
| font-weight: initial; | ||
| line-height: initial; | ||
|
|
||
| // https://youtu.be/4prVdA7_6u0 | ||
| &[open] { | ||
| animation: modal-enter 300ms forwards; | ||
| } | ||
|
|
||
| &[closing] { | ||
| display: block; | ||
| pointer-events: none; | ||
| animation: modal-exit 300ms forwards; | ||
| } | ||
|
|
||
| @keyframes modal-enter { | ||
| from { | ||
| transform: translateY(-100%); | ||
| opacity: 0; | ||
| } | ||
| to { | ||
| transform: translateY(0%); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @keyframes modal-exit { | ||
| from { | ||
| transform: translateY(0%); | ||
| opacity: 1; | ||
| } | ||
| to { | ||
| transform: translateY(-100%); | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| &::backdrop { | ||
| background-color: black; | ||
| opacity: 50%; | ||
| } | ||
|
|
||
| .evap-modal-container { | ||
| > * { | ||
| padding: 1rem; | ||
| } | ||
|
|
||
| > :not(:first-child) { | ||
| border-top: 1px solid $light-gray; | ||
| } | ||
|
|
||
| header { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .button-area { | ||
| display: flex; | ||
| flex-flow: wrap; | ||
| justify-content: center; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.