From 323c6cba20db618d48f4939d1fcaaa036ec0a0d7 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 25 Jun 2023 10:40:41 +0800
Subject: [PATCH] Fine tune "dropdown button" icon (#25442)

![image](https://github.com/go-gitea/gitea/assets/2114189/143e043d-85c9-43a4-85ae-ca55f507f738)

----

![image](https://github.com/go-gitea/gitea/assets/2114189/bcba03a5-732e-4139-bc35-96a7f8bfcb88)
---
 templates/devtest/gitea-ui.tmpl | 46 +++++++++++++++++++++------------
 templates/repo/commit_page.tmpl |  3 ++-
 web_src/css/base.css            | 11 ++++++++
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 0da443aad..2c5a54c1c 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -165,13 +165,6 @@
 					<div class="item">item</div>
 				</div>
 			</div>
-			<div class="ui button dropdown">
-				<span class="text">button dropdown</span>
-				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-				<div class="menu">
-					<div class="item">item</div>
-				</div>
-			</div>
 			<div class="ui search selection dropdown">
 				<span class="text">search ...</span>
 				<input name="value" class="search">
@@ -212,18 +205,39 @@
 
 		<div>
 			<div class="ui dropdown mini button">
-				<span class="text">small dropdown</span>
-				{{svg "octicon-triangle-down" 12 "dropdown icon"}}
-				<div class="menu">
-					<div class="item">item</div>
-				</div>
+				<span class="text">mini dropdown</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			</div>
+			<div class="ui dropdown tiny button">
+				<span class="text">tiny dropdown</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			</div>
+			<div class="ui button dropdown">
+				<span class="text">button dropdown</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			</div>
 			<div class="ui dropdown large button">
 				<span class="text">large dropdown</span>
-				{{svg "octicon-triangle-down" 18 "dropdown icon"}}
-				<div class="menu">
-					<div class="item">item</div>
-				</div>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			</div>
+		</div>
+
+		<div>
+			<div class="ui dropdown mini compact button">
+				<span class="text">mini compact</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			</div>
+			<div class="ui dropdown tiny compact button">
+				<span class="text">tiny compact</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			</div>
+			<div class="ui button compact dropdown">
+				<span class="text">button compact</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+			</div>
+			<div class="ui dropdown large compact button">
+				<span class="text">large compact</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			</div>
 		</div>
 	</div>
diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index 2e8732b40..8f8e9fa0e 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -26,7 +26,8 @@
 							{{.locale.Tr "repo.diff.browse_source"}}
 						</a>
 						{{if and ($.Permission.CanWrite $.UnitTypeCode) (not $.Repository.IsArchived) (not .IsDeleted)}}{{- /* */ -}}
-							<div class="ui primary tiny floating dropdown icon button">{{.locale.Tr "repo.commit.operations"}}
+							<div class="ui dropdown primary tiny button">
+								{{.locale.Tr "repo.commit.operations"}}
 								{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 								<div class="menu">
 									<div class="ui header">{{.locale.Tr "repo.commit.operations"}}</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 239304039..2d649cb51 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2192,6 +2192,17 @@ table th[data-sortt-desc] .svg {
 - "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
 */
 
+.ui.dropdown.mini.button,
+.ui.dropdown.tiny.button {
+  padding-right: 20px;
+}
+.ui.dropdown.button {
+  padding-right: 22px;
+}
+.ui.dropdown.large.button {
+  padding-right: 24px;
+}
+
 /* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
 .ui.ui.dropdown > .icon.icon {
   position: initial; /* plain dropdown and button dropdown use flex layout for icons */