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;