From 07373f1d5dd315966bc2f6085a8dd8cca193ec5c Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 21 Nov 2024 11:31:54 +0800
Subject: [PATCH] Improve issue sidebar UI (#32587)

1. remove duplicate dividers
2. align reviewer items
3. merge & remove unused CSS styles


Before:

<details>


![image](https://github.com/user-attachments/assets/1b3121ee-b5fa-4fe9-b0f2-344d96dc5fbc)


![image](https://github.com/user-attachments/assets/ba8b97e6-114d-488c-adee-48f6c7a3b580)

</details>

After:

<details>


![image](https://github.com/user-attachments/assets/978eab3e-a5d7-4b68-90ce-079b61994d25)


![image](https://github.com/user-attachments/assets/a8b58a27-dd05-4c8d-be60-816439ce77c6)


![image](https://github.com/user-attachments/assets/b7e6a16c-bf98-4465-a805-9f4a642d366e)

</details>
---
 templates/repo/issue/sidebar/label_list.tmpl     |  2 +-
 templates/repo/issue/sidebar/milestone_list.tmpl |  3 +--
 templates/repo/issue/sidebar/project_list.tmpl   |  3 +--
 templates/repo/issue/sidebar/reviewer_list.tmpl  |  2 +-
 web_src/css/base.css                             |  4 ++++
 web_src/css/repo.css                             | 10 ----------
 6 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl
index 526eb1ec04..fb8f1a667e 100644
--- a/templates/repo/issue/sidebar/label_list.tmpl
+++ b/templates/repo/issue/sidebar/label_list.tmpl
@@ -27,7 +27,7 @@
 						{{$previousExclusiveScope = $exclusiveScope}}
 						{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}
 					{{end}}
-					<div class="divider"></div>
+					{{if and $data.RepoLabels $data.OrgLabels}}<div class="divider"></div>{{end}}
 					{{$previousExclusiveScope = "_no_scope"}}
 					{{range $data.OrgLabels}}
 						{{$exclusiveScope := .ExclusiveScope}}
diff --git a/templates/repo/issue/sidebar/milestone_list.tmpl b/templates/repo/issue/sidebar/milestone_list.tmpl
index 2d16c6e1b4..a5ed0eef55 100644
--- a/templates/repo/issue/sidebar/milestone_list.tmpl
+++ b/templates/repo/issue/sidebar/milestone_list.tmpl
@@ -22,7 +22,6 @@
 				<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
 				<div class="scrolling menu">
 					{{if $data.OpenMilestones}}
-						<div class="divider"></div>
 						<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_milestone"}}</div>
 						{{range $data.OpenMilestones}}
 							<a class="item muted" data-value="{{.ID}}" href="{{$pageMeta.RepoLink}}/issues?milestone={{.ID}}">
@@ -30,8 +29,8 @@
 							</a>
 						{{end}}
 					{{end}}
+					{{if and $data.OpenMilestones $data.ClosedMilestones}}<div class="divider"></div>{{end}}
 					{{if $data.ClosedMilestones}}
-						<div class="divider"></div>
 						<div class="header">{{ctx.Locale.Tr "repo.issues.new.closed_milestone"}}</div>
 						{{range $data.ClosedMilestones}}
 							<a class="item muted" data-value="{{.ID}}" href="{{$pageMeta.RepoLink}}/issues?milestone={{.ID}}">
diff --git a/templates/repo/issue/sidebar/project_list.tmpl b/templates/repo/issue/sidebar/project_list.tmpl
index 6ca6156d2c..0cbbdce760 100644
--- a/templates/repo/issue/sidebar/project_list.tmpl
+++ b/templates/repo/issue/sidebar/project_list.tmpl
@@ -20,7 +20,6 @@
 			<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
 			<div class="scrolling menu">
 				{{if $data.OpenProjects}}
-					<div class="divider"></div>
 					<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_projects"}}</div>
 					{{range $data.OpenProjects}}
 						<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">
@@ -28,8 +27,8 @@
 						</a>
 					{{end}}
 				{{end}}
+				{{if and $data.OpenProjects $data.ClosedProjects}}<div class="divider"></div>{{end}}
 				{{if $data.ClosedProjects}}
-					<div class="divider"></div>
 					<div class="header">{{ctx.Locale.Tr "repo.issues.new.closed_projects"}}</div>
 					{{range $data.ClosedProjects}}
 						<a class="item muted" data-value="{{.ID}}" href="{{.Link ctx}}">
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index 16eea23d69..b3d9590d58 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -17,7 +17,7 @@
 					<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_reviewers"}}">
 				</div>
 			{{end}}
-			<div class="scrolling menu">
+			<div class="scrolling menu flex-items-menu">
 				{{range $data.Reviewers}}
 					{{if .User}}
 						<a class="item muted {{if .Requested}}checked{{end}}" href="{{.User.HomeLink}}" data-value="{{.ItemID}}" data-can-change="{{.CanChange}}"
diff --git a/web_src/css/base.css b/web_src/css/base.css
index b5a39c7af6..babbf4c89d 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1397,6 +1397,10 @@ table th[data-sortt-desc] .svg {
   gap: .5rem;
   min-width: 0;
 }
+.ui.dropdown .menu.flex-items-menu > .item img,
+.ui.dropdown .menu.flex-items-menu > .item svg {
+  margin: 0; /* use gap, but not margin */
+}
 
 .ui.dropdown.ellipsis-items-nowrap > .text {
   overflow: hidden;
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 7307b97870..12cdc4657b 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -53,11 +53,6 @@
 .issue-sidebar-combo .ui.dropdown .item:not(.checked) .item-check-mark {
   visibility: hidden;
 }
-/* ideally, we should move these styles to ".ui.dropdown .menu.flex-items-menu > .item ...", could be done later */
-.issue-sidebar-combo .ui.dropdown .menu > .item > img,
-.issue-sidebar-combo .ui.dropdown .menu > .item > svg {
-  margin: 0;
-}
 
 .issue-content-right .dropdown > .menu {
   max-width: 270px;
@@ -79,11 +74,6 @@
   }
 }
 
-.repository .issue-content-right .filter.menu {
-  max-height: 500px;
-  overflow-x: auto;
-}
-
 .repository .filter.menu.labels .label-filter .menu .info {
   display: inline-block;
   padding: 0.5rem 0;