remove ModalButtonColors, fix modal close icon

go-gitea · Apr 14, 2024 · 3b0f6d6 · 3b0f6d6
1 parent 8476113
commit 3b0f6d6
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 26 deletions.
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
@@ -54,7 +54,7 @@
 											<input type="hidden" name="action" value="delete">
 											<input type="hidden" name="q" value="{{$.Keyword}}">
 											<input type="hidden" name="page" value="{{$.CurrentPage}}">
-											{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
+											{{template "base/modal_actions_confirm"}}
 										</form>
 									</div>
 								</div>

diff --git a/templates/base/modal_actions_confirm.tmpl b/templates/base/modal_actions_confirm.tmpl
@@ -1,7 +1,6 @@
 {{/*
 Two buttons (negative, positive):
 * ModalButtonTypes: "yes" (default) or "confirm"
-* ModalButtonColors: "primary" (default) / "blue" / "yellow"
 * ModalButtonCancelText
 * ModalButtonOkText
 
@@ -22,14 +21,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal
 		{{end}}
 		{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
 		{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
-
-		{{$stylePositive := "primary"}}
-		{{if eq .ModalButtonColors "blue"}}
-			{{$stylePositive = "blue"}}
-		{{else if eq .ModalButtonColors "yellow"}}
-			{{$stylePositive = "yellow"}}
-		{{end}}
 		<button class="ui cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
-		<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
+		<button class="ui primary ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
 	{{end}}
 </div>
diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
@@ -54,29 +54,17 @@
 		{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
 	</div>
 
-	<div class="ui g-modal-confirm modal" id="test-modal-blue">
-		<div class="header">Blue dialog</div>
-		<div class="content">hello, this is the modal dialog content</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "blue")}}
-	</div>
-
-	<div class="ui g-modal-confirm modal" id="test-modal-yellow">
-		<div class="header">yellow dialog</div>
-		<div class="content">hello, this is the modal dialog content</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
-	</div>
-
 	<div class="ui g-modal-confirm modal" id="test-modal-danger">
 		{{svg "octicon-x" 16 "inside close"}}
 		<div class="header">dangerous action dialog</div>
 		<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
 		{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do  this is dangerous operation")}}
 	</div>
 
-	<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
+	<div class="modal-buttons flex-text-block tw-flex-wrap tw-p-3"></div>
 	<script type="module">
 		for (const el of $('.ui.modal')) {
-			const $btn = $('<button>').text(`${el.id}`).on('click', () => {
+			const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
 				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
 			});
 			$('.modal-buttons').append($btn);

diff --git a/templates/repo/settings/lfs.tmpl b/templates/repo/settings/lfs.tmpl
@@ -44,7 +44,7 @@
 					</p>
 					<form class="ui form" action="{{$.Link}}/delete/{{.Oid}}" method="post">
 						{{$.CsrfTokenHtml}}
-						{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
+						{{template "base/modal_actions_confirm"}}
 					</form>
 				</div>
 			</div>

diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
@@ -109,7 +109,7 @@
 	<div class="content">
 		<p>{{ctx.Locale.Tr "settings.access_token_deletion_desc"}}</p>
 	</div>
-	{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
+	{{template "base/modal_actions_confirm"}}
 </div>
 
 {{template "user/settings/layout_footer" .}}
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
@@ -10,6 +10,11 @@
   top: 1.2em;
 }
 
+.ui.modal > .close.inside,
+.ui.fullscreen.modal > .close {
+  color: inherit;
+}
+
 .ui.modal > .close.icon[height="16"] {
   top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
   color: var(--color-text-dark);