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)
go-gitea · Aug 28, 2023 · 0ab70d4 · 0ab70d4
1 parent 83208b4
commit 0ab70d4
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 17 deletions.
diff --git 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" .}}
diff --git 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
@@ -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 {