From 14c142b0bca2af79f30fcf221479fb66d63dbdf8 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 30 Apr 2023 23:51:20 +0800
Subject: [PATCH] Improve issue list filter (#24425)
Partial regression of #24393, not only regression, but broken for long
time, 24393 didn't really improve it but used wrong `overflow: scroll`.
Actually, that "ui secondary filter menu labels" shouldn't be set as
scrollable (I missed that at that time), the problem is: if a "ui menu"
has "dropdown" items, then it should not be scrollable. Otherwise the
dropdown menu can't be shown correctly.
And there are more problems:
* The "issue-filters" shouldn't be used anywhere else (copying&pasting
problem again ....)
* There is also an "issue-actions" container, it should also be fixed.
* There are similar problems on the milestone page.
* The old comment in code: "grid column" doesn't work well.
The major changes of this PR are: use "flex: 1" instead of "ui grid
column".
After this PR, not 100% perfect but much better than before.
---
templates/repo/actions/list.tmpl | 2 +-
templates/repo/issue/list.tmpl | 25 +++++++++--------
templates/repo/issue/milestone_issues.tmpl | 27 ++++++++-----------
.../notification_subscriptions.tmpl | 2 +-
web_src/css/index.css | 1 +
web_src/css/repository.css | 17 +++++++-----
web_src/css/repository/issue-list.css | 14 ++++++++++
web_src/js/features/repo-issue-list.js | 2 +-
8 files changed, 51 insertions(+), 39 deletions(-)
create mode 100644 web_src/css/repository/issue-list.css
diff --git a/templates/repo/actions/list.tmpl b/templates/repo/actions/list.tmpl
index 0f44630201..c75e81948e 100644
--- a/templates/repo/actions/list.tmpl
+++ b/templates/repo/actions/list.tmpl
@@ -20,7 +20,7 @@
</div>
</div>
<div class="twelve wide column content">
- <div id="issue-filters" class="ui stackable grid">
+ <div class="ui stackable grid">
<div class="six wide column">
{{template "repo/actions/openclose" .}}
</div>
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index fb2d8ee3bd..8e553ee7bb 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -17,18 +17,20 @@
{{end}}
{{end}}
</div>
+
<div class="ui divider"></div>
- <div id="issue-filters" class="ui stackable grid">
- <div class="six wide column">
+
+ <div id="issue-filters" class="issue-list-toolbar">
+ <div class="issue-list-toolbar-left">
{{if $.CanWriteIssuesOrPulls}}
- <input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-vm gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
+ <input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
{{end}}
{{template "repo/issue/openclose" .}}
</div>
- <div class="ten wide right aligned column">
- <div class="ui secondary filter menu labels gt-overflow-x-auto gt-overflow-y-hidden">
+ <div class="issue-list-toolbar-right">
+ <div class="ui secondary filter stackable menu labels">
<!-- Label -->
- <div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
+ <div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter">
<span class="text">
{{.locale.Tr "repo.issues.filter_label"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -206,15 +208,12 @@
</div>
</div>
</div>
- <div id="issue-actions" class="ui stackable grid gt-hidden">
- <div class="six wide column">
+
+ <div id="issue-actions" class="issue-list-toolbar gt-hidden">
+ <div class="issue-list-toolbar-left">
{{template "repo/issue/openclose" .}}
</div>
- {{/* Ten wide does not cope well and makes the columns stack.
- This seems to be related to jQuery's hide/show: in fact, switching
- issue-actions and issue-filters and having this ten wide will show
- this one correctly, but not the other one. */}}
- <div class="nine wide right aligned right floated column">
+ <div class="issue-list-toolbar-right">
<div class="ui secondary filter stackable menu">
{{if not .Repository.IsArchived}}
<!-- Action Button -->
diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
index 472bebb33f..a1fc245887 100644
--- a/templates/repo/issue/milestone_issues.tmpl
+++ b/templates/repo/issue/milestone_issues.tmpl
@@ -2,12 +2,10 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
{{template "repo/header" .}}
<div class="ui container">
- <div class="ui two column stackable grid">
- <div class="column">
- <h1>{{.Milestone.Name}}</h1>
- </div>
+ <div class="gt-df">
+ <h1>{{.Milestone.Name}}</h1>
{{if not .Repository.IsArchived}}
- <div class="column right aligned">
+ <div class="text right gt-f1">
{{if or .CanWriteIssues .CanWritePulls}}
{{if .Milestone.IsClosed}}
<a class="ui green basic button link-action" href data-url="{{$.RepoLink}}/milestones/{{.MilestoneID}}/open">{{$.locale.Tr "repo.milestones.open"}}
@@ -45,11 +43,12 @@
</div>
</div>
<div class="ui divider"></div>
- <div id="issue-filters" class="ui stackable grid">
- <div class="six wide column">
+
+ <div id="issue-filters" class="issue-list-toolbar">
+ <div class="issue-list-toolbar-left">
{{template "repo/issue/openclose" .}}
</div>
- <div class="ten wide right aligned column">
+ <div class="issue-list-toolbar-right">
<div class="ui secondary filter stackable menu labels">
<!-- Label -->
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
@@ -145,16 +144,12 @@
</div>
</div>
</div>
- <div id="issue-actions" class="ui stackable grid gt-hidden">
- <div class="six wide column">
+
+ <div id="issue-actions" class="issue-list-toolbar gt-hidden">
+ <div class="issue-list-toolbar-left">
{{template "repo/issue/openclose" .}}
</div>
-
- {{/* Ten wide does not cope well and makes the columns stack.
- This seems to be related to jQuery's hide/show: in fact, switching
- issue-actions and issue-filters and having this ten wide will show
- this one correctly, but not the other one. */}}
- <div class="nine wide right aligned right floated column">
+ <div class="issue-list-toolbar-right">
<div class="ui secondary filter stackable menu">
<!-- Action Button -->
{{if .IsShowClosed}}
diff --git a/templates/user/notification/notification_subscriptions.tmpl b/templates/user/notification/notification_subscriptions.tmpl
index ce46919236..6d3262ad6d 100644
--- a/templates/user/notification/notification_subscriptions.tmpl
+++ b/templates/user/notification/notification_subscriptions.tmpl
@@ -11,7 +11,7 @@
</div>
<div class="ui bottom attached active tab segment">
{{if eq .Status 1}}
- <div id="issue-filters" class="ui stackable grid">
+ <div class="ui stackable grid">
<div class="six wide column">
<div class="small-pill-buttons ui compact tiny menu">
<a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
diff --git a/web_src/css/index.css b/web_src/css/index.css
index cdd0c51a54..d6ef1da9b9 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -32,6 +32,7 @@
@import "./repository.css";
@import "./repository/release-tag.css";
@import "./repository/issue-label.css";
+@import "./repository/issue-list.css";
@import "./repository/list-header.css";
@import "./editor.css";
@import "./editor/combomarkdowneditor.css";
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 6ad6ba88a8..259cfda3a1 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -141,12 +141,19 @@
font-size: 11px;
}
-.repository .filter.menu .menu {
+/* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */
+.repository .filter.menu .ui.dropdown .menu {
max-height: 500px;
max-width: 300px;
overflow-x: hidden;
- right: 0 !important;
- left: auto !important;
+ right: 0;
+ left: auto;
+}
+
+/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */
+.repository .filter.menu .ui.dropdown.label-filter .menu {
+ right: unset;
+ left: 0;
}
.repository .select-label .desc {
@@ -2394,10 +2401,6 @@
margin: 6px 0;
}
-#issue-actions {
- margin-top: -1rem !important; /* counteract padding from Semantic */
-}
-
.ui.menu .item > img:not(.ui) {
width: auto;
}
diff --git a/web_src/css/repository/issue-list.css b/web_src/css/repository/issue-list.css
new file mode 100644
index 0000000000..2c2d3572e0
--- /dev/null
+++ b/web_src/css/repository/issue-list.css
@@ -0,0 +1,14 @@
+.issue-list-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+.issue-list-toolbar-left {
+ display: flex;
+}
+
+.issue-list-toolbar-right {
+ margin-left: auto;
+}
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 915cd2e132..af0e80af81 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -23,7 +23,7 @@ function initRepoIssueListCheckboxes() {
toggleElem($('#issue-filters'), !anyChecked);
toggleElem($('#issue-actions'), anyChecked);
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
- $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
+ $('#issue-filters, #issue-actions').filter(':visible').find('.issue-list-toolbar-left').prepend($issueSelectAll);
};
$issueCheckboxes.on('change', syncIssueSelectionState);