Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve modal dialog UI #26764

Merged
merged 3 commits into from
Aug 28, 2023
Merged

Improve modal dialog UI #26764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ad26aa
fix
wxiaoguang Aug 28, 2023
5dfdcb7
Merge branch 'main' into improve-modal
wxiaoguang Aug 28, 2023
325bb75
Merge branch 'main' into improve-modal
wxiaoguang Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 24 additions & 10 deletions templates/devtest/fomantic-modal.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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" .}}
5 changes: 3 additions & 2 deletions web_src/css/modules/animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
22 changes: 17 additions & 5 deletions web_src/css/modules/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down