mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-05 23:34:19 -04:00
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.
This commit is contained in:
parent
e8173c2c33
commit
14c142b0bc
@ -20,7 +20,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="twelve wide column content">
|
<div class="twelve wide column content">
|
||||||
<div id="issue-filters" class="ui stackable grid">
|
<div class="ui stackable grid">
|
||||||
<div class="six wide column">
|
<div class="six wide column">
|
||||||
{{template "repo/actions/openclose" .}}
|
{{template "repo/actions/openclose" .}}
|
||||||
</div>
|
</div>
|
||||||
|
@ -17,18 +17,20 @@
|
|||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ui divider"></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}}
|
{{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}}
|
{{end}}
|
||||||
{{template "repo/issue/openclose" .}}
|
{{template "repo/issue/openclose" .}}
|
||||||
</div>
|
</div>
|
||||||
<div class="ten wide right aligned column">
|
<div class="issue-list-toolbar-right">
|
||||||
<div class="ui secondary filter menu labels gt-overflow-x-auto gt-overflow-y-hidden">
|
<div class="ui secondary filter stackable menu labels">
|
||||||
<!-- Label -->
|
<!-- 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">
|
<span class="text">
|
||||||
{{.locale.Tr "repo.issues.filter_label"}}
|
{{.locale.Tr "repo.issues.filter_label"}}
|
||||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||||
@ -206,15 +208,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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" .}}
|
{{template "repo/issue/openclose" .}}
|
||||||
</div>
|
</div>
|
||||||
{{/* Ten wide does not cope well and makes the columns stack.
|
<div class="issue-list-toolbar-right">
|
||||||
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="ui secondary filter stackable menu">
|
<div class="ui secondary filter stackable menu">
|
||||||
{{if not .Repository.IsArchived}}
|
{{if not .Repository.IsArchived}}
|
||||||
<!-- Action Button -->
|
<!-- Action Button -->
|
||||||
|
@ -2,12 +2,10 @@
|
|||||||
<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
|
<div role="main" aria-label="{{.Title}}" class="page-content repository milestone-issue-list">
|
||||||
{{template "repo/header" .}}
|
{{template "repo/header" .}}
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="ui two column stackable grid">
|
<div class="gt-df">
|
||||||
<div class="column">
|
<h1>{{.Milestone.Name}}</h1>
|
||||||
<h1>{{.Milestone.Name}}</h1>
|
|
||||||
</div>
|
|
||||||
{{if not .Repository.IsArchived}}
|
{{if not .Repository.IsArchived}}
|
||||||
<div class="column right aligned">
|
<div class="text right gt-f1">
|
||||||
{{if or .CanWriteIssues .CanWritePulls}}
|
{{if or .CanWriteIssues .CanWritePulls}}
|
||||||
{{if .Milestone.IsClosed}}
|
{{if .Milestone.IsClosed}}
|
||||||
<a class="ui green basic button link-action" href data-url="{{$.RepoLink}}/milestones/{{.MilestoneID}}/open">{{$.locale.Tr "repo.milestones.open"}}
|
<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>
|
</div>
|
||||||
<div class="ui divider"></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" .}}
|
{{template "repo/issue/openclose" .}}
|
||||||
</div>
|
</div>
|
||||||
<div class="ten wide right aligned column">
|
<div class="issue-list-toolbar-right">
|
||||||
<div class="ui secondary filter stackable menu labels">
|
<div class="ui secondary filter stackable menu labels">
|
||||||
<!-- Label -->
|
<!-- 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" style="margin-left: auto">
|
||||||
@ -145,16 +144,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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" .}}
|
{{template "repo/issue/openclose" .}}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="issue-list-toolbar-right">
|
||||||
{{/* 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="ui secondary filter stackable menu">
|
<div class="ui secondary filter stackable menu">
|
||||||
<!-- Action Button -->
|
<!-- Action Button -->
|
||||||
{{if .IsShowClosed}}
|
{{if .IsShowClosed}}
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="ui bottom attached active tab segment">
|
<div class="ui bottom attached active tab segment">
|
||||||
{{if eq .Status 1}}
|
{{if eq .Status 1}}
|
||||||
<div id="issue-filters" class="ui stackable grid">
|
<div class="ui stackable grid">
|
||||||
<div class="six wide column">
|
<div class="six wide column">
|
||||||
<div class="small-pill-buttons ui compact tiny menu">
|
<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}}">
|
<a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
|
||||||
|
@ -32,6 +32,7 @@
|
|||||||
@import "./repository.css";
|
@import "./repository.css";
|
||||||
@import "./repository/release-tag.css";
|
@import "./repository/release-tag.css";
|
||||||
@import "./repository/issue-label.css";
|
@import "./repository/issue-label.css";
|
||||||
|
@import "./repository/issue-list.css";
|
||||||
@import "./repository/list-header.css";
|
@import "./repository/list-header.css";
|
||||||
@import "./editor.css";
|
@import "./editor.css";
|
||||||
@import "./editor/combomarkdowneditor.css";
|
@import "./editor/combomarkdowneditor.css";
|
||||||
|
@ -141,12 +141,19 @@
|
|||||||
font-size: 11px;
|
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-height: 500px;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
right: 0 !important;
|
right: 0;
|
||||||
left: auto !important;
|
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 {
|
.repository .select-label .desc {
|
||||||
@ -2394,10 +2401,6 @@
|
|||||||
margin: 6px 0;
|
margin: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#issue-actions {
|
|
||||||
margin-top: -1rem !important; /* counteract padding from Semantic */
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.menu .item > img:not(.ui) {
|
.ui.menu .item > img:not(.ui) {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
14
web_src/css/repository/issue-list.css
Normal file
14
web_src/css/repository/issue-list.css
Normal file
@ -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;
|
||||||
|
}
|
@ -23,7 +23,7 @@ function initRepoIssueListCheckboxes() {
|
|||||||
toggleElem($('#issue-filters'), !anyChecked);
|
toggleElem($('#issue-filters'), !anyChecked);
|
||||||
toggleElem($('#issue-actions'), anyChecked);
|
toggleElem($('#issue-actions'), anyChecked);
|
||||||
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
|
// 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);
|
$issueCheckboxes.on('change', syncIssueSelectionState);
|
||||||
|
Loading…
Reference in New Issue
Block a user