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>

diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl
index 526eb1ec0448a05439aa5cd33edb61bb736de3f4..fb8f1a667e75c92384f0f32a8257cebac290331f 100644 (file)
--- 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 2d16c6e1b414f842e8539ab95fcc3101381ec131..a5ed0eef55a3371a2b9efb7526c9fbcdaaa9d72d 100644 (file)
--- 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 6ca6156d2cc871b1809966924cb374974fdfcc9d..0cbbdce7608b9d156d4cb920d7e81f63ee0cab2a 100644 (file)
--- 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 16eea23d69c83daf199665ebba1c52c490ef08a0..b3d9590d585ec7c38e8e4e8b24aa461aafec5ac3 100644 (file)
--- 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 b5a39c7af6fbbe2c4cfd972f8426bcfdc6063b4b..babbf4c89dcab3298e20fb28563a620470624f04 100644 (file)
--- 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 7307b978702b85bcbb2d7025ec5173add54185e8..12cdc4657bfdf59676938842a59e28abd7ae57d1 100644 (file)
--- 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;