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 /web_src | |
| 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 'web_src')
| -rw-r--r-- | web_src/css/modules/animations.css | 5 | ||||
| -rw-r--r-- | web_src/css/modules/modal.css | 22 |
2 files changed, 20 insertions, 7 deletions
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index 7b3ec360f6..cac824d87d 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -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; } diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css index 5824efb30c..31b0b5d6b9 100644 --- a/web_src/css/modules/modal.css +++ b/web_src/css/modules/modal.css @@ -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 { |