mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-25 10:43:11 +00:00
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)
This commit is contained in:
parent
83208b4991
commit
0ab70d4f2f
3 changed files with 44 additions and 17 deletions
|
@ -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" .}}
|
||||
|
|
|
@ -99,8 +99,9 @@ code.language-math.is-loading::after {
|
|||
animation: pulse 2s linear;
|
||||
}
|
||||
|
||||
.ui.modal {
|
||||
.ui.modal,
|
||||
.ui.dimmer.transition {
|
||||
animation-name: fadein;
|
||||
animation-duration: 300ms;
|
||||
animation-duration: 100ms;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
|
|
@ -30,29 +30,41 @@
|
|||
box-shadow: 1px 3px 3px 0 var(--color-shadow), 1px 3px 15px 2px var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly */
|
||||
/* Gitea sometimes use a form in a modal dialog, then the "positive" button could submit the form directly
|
||||
Fomantic UI only supports the layout: <div .modal><div .content/><div .actions/></div>
|
||||
However, Gitea uses the following layouts:
|
||||
* <div .modal><div .content><div .actions/></div></div>
|
||||
* <div .modal><form><div .content/><div .actions/></form></div>
|
||||
* <div .modal><div .content><form><div .actions/></form></div></div>
|
||||
* ...
|
||||
These inconsistent layouts should be refactored to simple ones.
|
||||
*/
|
||||
|
||||
.ui.modal > .content,
|
||||
.ui.modal > form > .content {
|
||||
.ui.modal form > .content {
|
||||
padding: 1.5em;
|
||||
background: var(--color-body);
|
||||
}
|
||||
|
||||
.ui.modal > .actions,
|
||||
.ui.modal > form > .actions {
|
||||
.ui.modal .content + .actions {
|
||||
background: var(--color-secondary-bg);
|
||||
border-color: var(--color-secondary);
|
||||
|
||||
/* these styles are from Fomantic UI */
|
||||
padding: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui.modal .content > .actions {
|
||||
padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* positive/negative action buttons */
|
||||
.ui.modal .actions > .ui.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui.modal .actions > .ui.button.danger {
|
||||
|
|
Loading…
Reference in a new issue