diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-08-29 07:49:21 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-28 23:49:21 +0000 |
| commit | 0ab70d4f2f47c3580ba960d239aec015b862ae0f (patch) | |
| tree | 4aba619317592c04b441953d865b371c5618519c /templates | |
| parent | 83208b499174b63ad1b9fb7a91296ad0a0400b6d (diff) | |
| download | gitea-0ab70d4f2f47c3580ba960d239aec015b862ae0f.tar.gz gitea-0ab70d4f2f47c3580ba960d239aec015b862ae0f.zip | |
Improve modal dialog UI (#26764)
1. Fine tune the CSS styles, and add more examples
2. Add necessary "dimmer" animation for modal dialogs, otherwise the UI
seems flicking (follow #26469)
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/devtest/fomantic-modal.tmpl | 34 |
1 files changed, 24 insertions, 10 deletions
diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl index 799bab7594..b91b29f3cc 100644 --- a/templates/devtest/fomantic-modal.tmpl +++ b/templates/devtest/fomantic-modal.tmpl @@ -2,16 +2,33 @@ <div class="page-content devtest ui container"> {{template "base/alert" .}} - <button class="show-modal" data-modal="#test-modal-form">show modal form</button> - <div id="test-modal-form" class="ui mini modal"> - <div class="header">Form dialog</div> + <div id="test-modal-form-1" class="ui mini modal"> + <div class="header">Form dialog (layout 1)</div> <form class="content" method="post"> - <div class="ui input"><input name="user_input"></div> + <div class="ui input gt-w-100"><input name="user_input"></div> {{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}} </form> </div> - <div class="divider"></div> + <div id="test-modal-form-2" class="ui mini modal"> + <div class="header">Form dialog (layout 2)</div> + <form method="post"> + <div class="content"> + <div class="ui input gt-w-100"><input name="user_input"></div> + {{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}} + </div> + </form> + </div> + + <div id="test-modal-form-3" class="ui mini modal"> + <div class="header">Form dialog (layout 3)</div> + <form method="post"> + <div class="content"> + <div class="ui input gt-w-100"><input name="user_input"></div> + </div> + {{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}} + </form> + </div> <div class="ui g-modal-confirm modal" id="test-modal-default"> <div class="header">{{svg "octicon-file"}} Default dialog <span>title</span></div> @@ -46,17 +63,14 @@ {{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do this is dangerous operation")}} </div> - <div class="modal-buttons"></div> + <div class="modal-buttons flex-text-block gt-fw"></div> <script type="module"> for (const el of $('.ui.modal')) { - const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => { + const $btn = $('<button>').text(`${el.id}`).on('click', () => { $(el).modal({onApprove() {alert('confirmed')}}).modal('show'); }); $('.modal-buttons').append($btn); } </script> - <style> - .modal-buttons button { margin: 5px; } - </style> </div> {{template "base/footer" .}} |