Skip to content

Improve issue list filter #24425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 30, 2023
Merged

Improve issue list filter #24425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac8eac2
fix
wxiaoguang Apr 29, 2023
0cf7c9b
Update web_src/css/repository/issue-list.css
wxiaoguang Apr 30, 2023
30fd103
Merge branch 'main' into fix-issie-list-bug
wxiaoguang Apr 30, 2023
9253bc0
Merge branch 'main' into fix-issie-list-bug
GiteaBot Apr 30, 2023
dfafd0a
Merge branch 'main' into fix-issie-list-bug
GiteaBot Apr 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/repo/actions/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
25 changes: 12 additions & 13 deletions templates/repo/issue/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down Expand Up @@ -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 -->
Expand Down
27 changes: 11 additions & 16 deletions templates/repo/issue/milestone_issues.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion templates/user/notification/notification_subscriptions.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}">
Expand Down
1 change: 1 addition & 0 deletions web_src/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
17 changes: 10 additions & 7 deletions web_src/css/repository.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down
14 changes: 14 additions & 0 deletions web_src/css/repository/issue-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 1 addition & 1 deletion web_src/js/features/repo-issue-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down