Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6747e3e

Browse files
GiteaBotwxiaoguang
GiteaBot
and
wxiaoguang
authored
Fix some dropdown problems on the issue sidebar (#34308) (#34327)
Backport #34308 by wxiaoguang Also fix #34300 Co-authored-by: wxiaoguang <[email protected]>
1 parent a12b5b3 commit 6747e3e

File tree

12 files changed

+45
-48
lines changed

12 files changed

+45
-48
lines changed

‎templates/repo/issue/sidebar/assignee_list.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/assignee?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input class="combo-value" name="assignee_ids" type="hidden" value="{{$data.SelectedAssigneeIDs}}">
9-
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
10-
<a class="text muted">
9+
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
10+
<a class="fixed-text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1212
</a>
1313
<div class="menu">
@@ -16,7 +16,7 @@
1616
<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_assignees"}}">
1717
</div>
1818
<div class="scrolling menu flex-items-block">
19-
<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
19+
<div class="item clear-selection" data-text="">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
2020
<div class="divider"></div>
2121
{{range $data.CandidateAssignees}}
2222
<a class="item" href="#" data-value="{{.ID}}">

‎templates/repo/issue/sidebar/label_list.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/labels?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
55
>
66
<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
7-
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
8-
<a class="text muted">
7+
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
8+
<a class="fixed-text muted">
99
<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1010
</a>
1111
<div class="menu">
@@ -17,7 +17,7 @@
1717
<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
1818
</div>
1919
<div class="scrolling menu">
20-
<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
20+
<a class="item clear-selection" data-text="" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
2121
<div class="divider"></div>
2222
{{$previousExclusiveScope := "_no_scope"}}
2323
{{range $data.RepoLabels}}

‎templates/repo/issue/sidebar/milestone_list.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/milestone?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input class="combo-value" name="milestone_id" type="hidden" value="{{$data.SelectedMilestoneID}}">
9-
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
10-
<a class="text muted">
9+
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
10+
<a class="fixed-text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1212
</a>
1313
<div class="menu">
@@ -19,7 +19,7 @@
1919
<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_milestones"}}">
2020
</div>
2121
<div class="scrolling menu">
22-
<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
22+
<div class="item clear-selection" data-text="">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
2323
<div class="divider"></div>
2424
{{if $data.OpenMilestones}}
2525
<div class="header">{{ctx.Locale.Tr "repo.issues.filter_milestone_open"}}</div>

‎templates/repo/issue/sidebar/project_list.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input class="combo-value" name="project_id" type="hidden" value="{{$data.SelectedProjectID}}">
9-
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
10-
<a class="text muted">
9+
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
10+
<a class="fixed-text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
1212
</a>
1313
<div class="menu">
@@ -18,7 +18,7 @@
1818
</div>
1919
{{end}}
2020
<div class="scrolling menu">
21-
<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
21+
<div class="item clear-selection" data-text="">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
2222
<div class="divider"></div>
2323
{{if $data.OpenProjects}}
2424
<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_projects"}}</div>

‎templates/repo/issue/sidebar/reviewer_list.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/request_review?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
77
>
88
<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
9-
<div class="ui dropdown text-flex-grow {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
10-
<a class="text muted">
9+
<div class="ui dropdown full-width {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
10+
<a class="fixed-text muted">
1111
<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
1212
</a>
1313
<div class="menu flex-items-menu">

‎templates/repo/issue/sidebar/stopwatch_timetracker.tmpl

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
33
<div class="divider"></div>
44
<div>
5-
<div class="ui dropdown text-flex-grow jump">
6-
<a class="text muted">
5+
<div class="ui dropdown full-width jump">
6+
<a class="fixed-text muted">
77
<div>
8-
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
8+
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
9+
{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
910
</div>
1011
{{svg "octicon-gear"}}
1112
</a>

‎web_src/css/base.css

-10
Original file line numberDiff line numberDiff line change
@@ -1188,16 +1188,6 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
11881188
text-overflow: ellipsis !important;
11891189
}
11901190

1191-
.ui.dropdown.text-flex-grow {
1192-
display: flex;
1193-
}
1194-
1195-
.ui.dropdown.text-flex-grow > .text {
1196-
display: flex;
1197-
flex-grow: 1;
1198-
justify-content: space-between;
1199-
}
1200-
12011191
.svg.octicon-file-directory-fill,
12021192
.svg.octicon-file-directory-open-fill,
12031193
.svg.octicon-file-submodule {

‎web_src/css/repo.css

+14-4
Original file line numberDiff line numberDiff line change
@@ -50,23 +50,33 @@
5050
width: 300px;
5151
}
5252

53-
.issue-sidebar-combo .ui.dropdown .item:not(.checked) .item-check-mark {
54-
visibility: hidden;
53+
.issue-content-right .ui.dropdown.full-width {
54+
width: 100%;
55+
}
56+
57+
.issue-content-right .ui.dropdown.full-width > .fixed-text {
58+
display: flex;
59+
flex-grow: 1;
60+
justify-content: space-between;
5561
}
5662

57-
.issue-content-right .dropdown > .menu {
63+
.issue-content-right .ui.dropdown > .menu {
5864
max-width: 270px;
5965
min-width: 0;
6066
max-height: 500px;
6167
overflow-x: auto;
6268
}
6369

64-
.issue-content-right .dropdown > .menu .item-secondary-info small {
70+
.issue-content-right .ui.dropdown > .menu .item-secondary-info small {
6571
display: block;
6672
text-overflow: ellipsis;
6773
overflow: hidden;
6874
}
6975

76+
.issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark {
77+
visibility: hidden;
78+
}
79+
7080
@media (max-width: 767.98px) {
7181
.issue-content-left,
7282
.issue-content-right {

‎web_src/fomantic/build/components/dropdown.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4080,7 +4080,7 @@ $.fn.dropdown.settings = {
40804080
search : 'input.search, .menu > .search > input, .menu input.search',
40814081
sizer : '> span.sizer',
40824082
text : '> .text:not(.icon)',
4083-
unselectable : '.disabled, .filtered',
4083+
unselectable : '.disabled, .filtered, .tw-hidden', // GITEA-PATCH: tw-hidden hides the item so it is also unselectable
40844084
clearIcon : '> .remove.icon'
40854085
},
40864086

‎web_src/js/features/repo-issue-sidebar-combolist.ts

+5-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {fomanticQuery} from '../modules/fomantic/base.ts';
22
import {POST} from '../modules/fetch.ts';
3-
import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
3+
import {addDelegatedEventListener, queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
44

55
// if there are draft comments, confirm before reloading, to avoid losing comments
66
function issueSidebarReloadConfirmDraftComment() {
@@ -22,7 +22,7 @@ function issueSidebarReloadConfirmDraftComment() {
2222
window.location.reload();
2323
}
2424

25-
class IssueSidebarComboList {
25+
export class IssueSidebarComboList {
2626
updateUrl: string;
2727
updateAlgo: string;
2828
selectionMode: string;
@@ -95,9 +95,7 @@ class IssueSidebarComboList {
9595
}
9696
}
9797

98-
async onItemClick(e: Event) {
99-
const elItem = (e.target as HTMLElement).closest('.item');
100-
if (!elItem) return;
98+
async onItemClick(elItem: HTMLElement, e: Event) {
10199
e.preventDefault();
102100
if (elItem.hasAttribute('data-can-change') && elItem.getAttribute('data-can-change') !== 'true') return;
103101

@@ -146,16 +144,13 @@ class IssueSidebarComboList {
146144
}
147145
this.initialValues = this.collectCheckedValues();
148146

149-
this.elDropdown.addEventListener('click', (e) => this.onItemClick(e));
147+
addDelegatedEventListener(this.elDropdown, 'click', '.item', (el, e) => this.onItemClick(el, e));
150148

151149
fomanticQuery(this.elDropdown).dropdown('setting', {
152150
action: 'nothing', // do not hide the menu if user presses Enter
153151
fullTextSearch: 'exact',
152+
hideDividers: 'empty',
154153
onHide: () => this.onHide(),
155154
});
156155
}
157156
}
158-
159-
export function initIssueSidebarComboList(container: HTMLElement) {
160-
new IssueSidebarComboList(container).init();
161-
}

‎web_src/js/features/repo-issue-sidebar.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {POST} from '../modules/fetch.ts';
22
import {queryElems, toggleElem} from '../utils/dom.ts';
3-
import {initIssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
3+
import {IssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
44

55
function initBranchSelector() {
66
// TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl"
@@ -48,5 +48,5 @@ export function initRepoIssueSidebar() {
4848
initRepoIssueDue();
4949

5050
// init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
51-
queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => initIssueSidebarComboList(el));
51+
queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
5252
}

‎web_src/js/modules/fomantic/dropdown.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -228,12 +228,13 @@ function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HT
228228
dropdown.addEventListener('keydown', (e: KeyboardEvent) => {
229229
// here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler
230230
if (e.key === 'Enter') {
231-
const dropdownCall = fomanticDropdownFn.bind($(dropdown));
232-
let $item = dropdownCall('get item', dropdownCall('get value'));
233-
if (!$item) $item = $(menu).find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item
231+
const elItem = menu.querySelector<HTMLElement>(':scope > .item.selected, .menu > .item.selected');
234232
// if the selected item is clickable, then trigger the click event.
235233
// we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click.
236-
if ($item?.[0]?.matches('a, .js-aria-clickable')) $item[0].click();
234+
if (elItem?.matches('a, .js-aria-clickable') && !elItem.matches('.tw-hidden, .filtered')) {
235+
e.preventDefault();
236+
elItem.click();
237+
}
237238
}
238239
});
239240

0 commit comments

Comments
 (0)