-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9efe927
commit a46d569
Showing
4 changed files
with
105 additions
and
60 deletions.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
ckanext/nswdesignsystem/templates/macros/nswdesignsystem/dialog.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,43 @@ | ||
|
|
||
| {% macro dialog(id, title=null, dismissible=false) %} | ||
| <div class="nsw-dialog js-dialog" id="{{ id }}" role="dialog"> | ||
| <div class="nsw-dialog__wrapper"> | ||
| <div class="nsw-dialog__container"> | ||
|
|
||
| <div class="nsw-dialog__top"> | ||
| <div class="nsw-dialog__title"> | ||
| {% if title %} | ||
| <h2>{{ title }}</h2> | ||
| {% else %} | ||
| {{ caller("title") }} | ||
| {% endif %} | ||
| </div> | ||
|
|
||
|
|
||
| {% if dismissible %} | ||
| <div class="nsw-dialog__close"> | ||
| <button class="nsw-icon-button js-close-dialog"> | ||
| <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span> | ||
| <span class="sr-only">Close</span> | ||
| </button> | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
|
|
||
| <div class="nsw-dialog__content"> | ||
| {{ caller("content") }} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="nsw-dialog__bottom"> | ||
| {{ caller("footer") }} | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| {% endmacro %} | ||
|
|
||
| {% macro trigger(id, label) %} | ||
| <button class="nsw-button nsw-button--dark js-open-dialog-{{ id }}" aria-haspopup="dialog">{{ label }}</button> | ||
| {% endmacro %} |
37 changes: 19 additions & 18 deletions
37
ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_danger.preview.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,22 +1,23 @@ | ||
| {% from "macros/nswdesignsystem/dialog.html" import dialog with context %} | ||
|
|
||
| {% set id = "dialog" %} | ||
|
|
||
| <div class="nsw-block"> | ||
| <button class="nsw-button nsw-button--dark js-open-dialog-danger" aria-haspopup="dialog">Launch dialog</button> | ||
| <button class="nsw-button nsw-button--dark js-open-dialog-{{ id }}" aria-haspopup="dialog">Launch dialog</button> | ||
| </div> | ||
|
|
||
| <div class="nsw-dialog js-dialog" id="danger" role="dialog" aria-labelledby="danger-title"> | ||
| <div class="nsw-dialog__wrapper"> | ||
| <div class="nsw-dialog__container"> | ||
| <div class="nsw-dialog__top"> | ||
| <div class="nsw-dialog__title"> | ||
| <h2 id="danger-title">Delete file permanently?</h2> | ||
| </div> | ||
| </div> | ||
| <div class="nsw-dialog__content"> | ||
| {% call(part) dialog(id) %} | ||
| {% if part == "title" %} | ||
| <h2> | ||
| Delete file permanently? | ||
| </h2> | ||
|
|
||
| {% elif part == "content" %} | ||
| <p>If you delete this file, you will not be able to recover it. Do you want to delete?</p> | ||
| </div> | ||
| </div> | ||
| <div class="nsw-dialog__bottom"> | ||
| <button class="nsw-button nsw-button--dark nsw-button--danger js-close-dialog">Delete</button> | ||
| <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">Cancel</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {% elif part == "footer" %} | ||
| <button class="nsw-button nsw-button--dark nsw-button--danger js-close-dialog">Delete</button> | ||
| <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">Cancel</button> | ||
|
|
||
| {% endif %} | ||
| {% endcall %} |
45 changes: 22 additions & 23 deletions
45
ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_dismissible.preview.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,28 +1,27 @@ | ||
| {% from "macros/nswdesignsystem/dialog.html" import dialog with context %} | ||
|
|
||
| {% set id = "dismissible" %} | ||
|
|
||
| <div class="nsw-block"> | ||
| <button class="nsw-button nsw-button--dark js-open-dialog-dismissible" aria-haspopup="dialog">Launch dialog</button> | ||
| <button class="nsw-button nsw-button--dark js-open-dialog-{{ id }}" aria-haspopup="dialog">Launch dialog</button> | ||
| </div> | ||
|
|
||
| <div class="nsw-dialog js-dialog js-dialog-dismiss" id="dismissible" role="dialog" aria-labelledby="dismissible-title"> | ||
| <div class="nsw-dialog__wrapper"> | ||
| <div class="nsw-dialog__container"> | ||
| <div class="nsw-dialog__top"> | ||
| <div class="nsw-dialog__title"> | ||
| <h2 id="dismissible-title">Changes will be lost</h2> | ||
| </div> | ||
| <div class="nsw-dialog__close"> | ||
| <button class="nsw-icon-button js-close-dialog"> | ||
| <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span> | ||
| <span class="sr-only">Close</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="nsw-dialog__content"> | ||
| <p>This form contains unsaved changes. By exiting, all unsaved changes will be permanently lost. If you wish to save your changes, return to form and follow the prompts to save your progress. If you do not wish to keep any unsaved changes you can proceed to exit the form. </p> | ||
| </div> | ||
| </div> | ||
| <div class="nsw-dialog__bottom"> | ||
|
|
||
|
|
||
| {% call(part) dialog(id, title="Changes will be lost", dismissible=true) %} | ||
| {% if part == "title" %} | ||
| <h2> | ||
| Delete file permanently? | ||
| </h2> | ||
|
|
||
| {% elif part == "content" %} | ||
| <p> | ||
| This form contains unsaved changes. By exiting, all unsaved changes will be permanently lost. If you wish to save your changes, return to form and follow the prompts to save your progress. If you do not wish to keep any unsaved changes you can proceed to exit the form. | ||
| </p> | ||
|
|
||
| {% elif part == "footer" %} | ||
| <button class="nsw-button nsw-button--dark nsw-button--danger js-close-dialog">Exit form</button> | ||
| <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">Return to form</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {% endif %} | ||
| {% endcall %} |
40 changes: 21 additions & 19 deletions
40
ckanext/nswdesignsystem/templates/nswdesignsystem/demo/dialog_transactional.preview.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,22 +1,24 @@ | ||
| {% from "macros/nswdesignsystem/dialog.html" import dialog, trigger with context %} | ||
|
|
||
| {% set id = "transactional" %} | ||
|
|
||
| <div class="nsw-block"> | ||
| <button class="nsw-button nsw-button--dark js-open-dialog-transactional" aria-haspopup="dialog">Launch dialog</button> | ||
| {{ trigger(id, "Launch dialog") }} | ||
| </div> | ||
|
|
||
| <div class="nsw-dialog js-dialog" id="transactional" role="dialog" aria-labelledby="transactional-title"> | ||
| <div class="nsw-dialog__wrapper"> | ||
| <div class="nsw-dialog__container"> | ||
| <div class="nsw-dialog__top"> | ||
| <div class="nsw-dialog__title"> | ||
| <h2 id="transactional-title">Your submission was successful</h2> | ||
| </div> | ||
| </div> | ||
| <div class="nsw-dialog__content"> | ||
| <p>Thank you for your submission, it has been successfully received. We aim to respond within 3 business days by your preferred contact method. You can now make another submission or view your active submission.</p> | ||
| </div> | ||
| </div> | ||
| <div class="nsw-dialog__bottom"> | ||
| <button class="nsw-button nsw-button--dark js-close-dialog">Make new submission</button> | ||
| <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">View submissions</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {% call(part) dialog(id, title="Changes will be lost") %} | ||
| {% if part == "title" %} | ||
| <h2> | ||
| Delete file permanently? | ||
| </h2> | ||
|
|
||
| {% elif part == "content" %} | ||
| <p>Thank you for your submission, it has been successfully received. We aim to respond within 3 business days by your preferred contact method. You can now make another submission or view your active submission.</p> | ||
|
|
||
| {% elif part == "footer" %} | ||
| <button class="nsw-button nsw-button--dark js-close-dialog">Make new submission</button> | ||
| <button class="nsw-button nsw-button--dark-outline-solid js-close-dialog">View submissions</button> | ||
|
|
||
| {% endif %} | ||
| {% endcall %} |