Skip to content

Commit 14c142b

Browse files
wxiaoguangwxiaoguang
authored
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.
1 parent e8173c2 commit 14c142b

File tree

8 files changed

+51
-39
lines changed

8 files changed

+51
-39
lines changed

‎templates/repo/actions/list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
<div class="twelve wide column content">
23-
<div id="issue-filters" class="ui stackable grid">
23+
<div class="ui stackable grid">
2424
<div class="six wide column">
2525
{{template "repo/actions/openclose" .}}
2626
</div>

‎templates/repo/issue/list.tmpl

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,20 @@
1717
{{end}}
1818
{{end}}
1919
</div>
20+
2021
<div class="ui divider"></div>
21-
<div id="issue-filters" class="ui stackable grid">
22-
<div class="six wide column">
22+
23+
<div id="issue-filters" class="issue-list-toolbar">
24+
<div class="issue-list-toolbar-left">
2325
{{if $.CanWriteIssuesOrPulls}}
24-
<input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-vm gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
26+
<input type="checkbox" autocomplete="off" class="issue-checkbox-all gt-mr-4" title="{{.locale.Tr "repo.issues.action_check_all"}}">
2527
{{end}}
2628
{{template "repo/issue/openclose" .}}
2729
</div>
28-
<div class="ten wide right aligned column">
29-
<div class="ui secondary filter menu labels gt-overflow-x-auto gt-overflow-y-hidden">
30+
<div class="issue-list-toolbar-right">
31+
<div class="ui secondary filter stackable menu labels">
3032
<!-- Label -->
31-
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
33+
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter">
3234
<span class="text">
3335
{{.locale.Tr "repo.issues.filter_label"}}
3436
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
@@ -206,15 +208,12 @@
206208
</div>
207209
</div>
208210
</div>
209-
<div id="issue-actions" class="ui stackable grid gt-hidden">
210-
<div class="six wide column">
211+
212+
<div id="issue-actions" class="issue-list-toolbar gt-hidden">
213+
<div class="issue-list-toolbar-left">
211214
{{template "repo/issue/openclose" .}}
212215
</div>
213-
{{/* Ten wide does not cope well and makes the columns stack.
214-
This seems to be related to jQuery's hide/show: in fact, switching
215-
issue-actions and issue-filters and having this ten wide will show
216-
this one correctly, but not the other one. */}}
217-
<div class="nine wide right aligned right floated column">
216+
<div class="issue-list-toolbar-right">
218217
<div class="ui secondary filter stackable menu">
219218
{{if not .Repository.IsArchived}}
220219
<!-- Action Button -->

‎templates/repo/issue/milestone_issues.tmpl

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22
<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
33
{{template "repo/header" .}}
44
<div class="ui container">
5-
<div class="ui two column stackable grid">
6-
<div class="column">
7-
<h1>{{.Milestone.Name}}</h1>
8-
</div>
5+
<div class="gt-df">
6+
<h1>{{.Milestone.Name}}</h1>
97
{{if not .Repository.IsArchived}}
10-
<div class="column right aligned">
8+
<div class="text right gt-f1">
119
{{if or .CanWriteIssues .CanWritePulls}}
1210
{{if .Milestone.IsClosed}}
1311
<a class="ui green basic button link-action" href data-url="{{$.RepoLink}}/milestones/{{.MilestoneID}}/open">{{$.locale.Tr "repo.milestones.open"}}
@@ -45,11 +43,12 @@
4543
</div>
4644
</div>
4745
<div class="ui divider"></div>
48-
<div id="issue-filters" class="ui stackable grid">
49-
<div class="six wide column">
46+
47+
<div id="issue-filters" class="issue-list-toolbar">
48+
<div class="issue-list-toolbar-left">
5049
{{template "repo/issue/openclose" .}}
5150
</div>
52-
<div class="ten wide right aligned column">
51+
<div class="issue-list-toolbar-right">
5352
<div class="ui secondary filter stackable menu labels">
5453
<!-- Label -->
5554
<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item label-filter" style="margin-left: auto">
@@ -145,16 +144,12 @@
145144
</div>
146145
</div>
147146
</div>
148-
<div id="issue-actions" class="ui stackable grid gt-hidden">
149-
<div class="six wide column">
147+
148+
<div id="issue-actions" class="issue-list-toolbar gt-hidden">
149+
<div class="issue-list-toolbar-left">
150150
{{template "repo/issue/openclose" .}}
151151
</div>
152-
153-
{{/* Ten wide does not cope well and makes the columns stack.
154-
This seems to be related to jQuery's hide/show: in fact, switching
155-
issue-actions and issue-filters and having this ten wide will show
156-
this one correctly, but not the other one. */}}
157-
<div class="nine wide right aligned right floated column">
152+
<div class="issue-list-toolbar-right">
158153
<div class="ui secondary filter stackable menu">
159154
<!-- Action Button -->
160155
{{if .IsShowClosed}}

‎templates/user/notification/notification_subscriptions.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</div>
1212
<div class="ui bottom attached active tab segment">
1313
{{if eq .Status 1}}
14-
<div id="issue-filters" class="ui stackable grid">
14+
<div class="ui stackable grid">
1515
<div class="six wide column">
1616
<div class="small-pill-buttons ui compact tiny menu">
1717
<a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">

‎web_src/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
@import "./repository.css";
3333
@import "./repository/release-tag.css";
3434
@import "./repository/issue-label.css";
35+
@import "./repository/issue-list.css";
3536
@import "./repository/list-header.css";
3637
@import "./editor.css";
3738
@import "./editor/combomarkdowneditor.css";

‎web_src/css/repository.css

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,12 +141,19 @@
141141
font-size: 11px;
142142
}
143143

144-
.repository .filter.menu .menu {
144+
/* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */
145+
.repository .filter.menu .ui.dropdown .menu {
145146
max-height: 500px;
146147
max-width: 300px;
147148
overflow-x: hidden;
148-
right: 0 !important;
149-
left: auto !important;
149+
right: 0;
150+
left: auto;
151+
}
152+
153+
/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */
154+
.repository .filter.menu .ui.dropdown.label-filter .menu {
155+
right: unset;
156+
left: 0;
150157
}
151158

152159
.repository .select-label .desc {
@@ -2394,10 +2401,6 @@
23942401
margin: 6px 0;
23952402
}
23962403

2397-
#issue-actions {
2398-
margin-top: -1rem !important; /* counteract padding from Semantic */
2399-
}
2400-
24012404
.ui.menu .item > img:not(.ui) {
24022405
width: auto;
24032406
}

‎web_src/css/repository/issue-list.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.issue-list-toolbar {
2+
display: flex;
3+
flex-wrap: wrap;
4+
align-items: flex-start;
5+
gap: 1rem;
6+
}
7+
8+
.issue-list-toolbar-left {
9+
display: flex;
10+
}
11+
12+
.issue-list-toolbar-right {
13+
margin-left: auto;
14+
}

‎web_src/js/features/repo-issue-list.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ function initRepoIssueListCheckboxes() {
2323
toggleElem($('#issue-filters'), !anyChecked);
2424
toggleElem($('#issue-actions'), anyChecked);
2525
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
26-
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
26+
$('#issue-filters, #issue-actions').filter(':visible').find('.issue-list-toolbar-left').prepend($issueSelectAll);
2727
};
2828

2929
$issueCheckboxes.on('change', syncIssueSelectionState);

0 commit comments

Comments
 (0)