From 6747e3e0eb9e710eddbbba725e7b0cb03ed680cc Mon Sep 17 00:00:00 2001 From: Giteabot Date: Fri, 2 May 2025 00:24:18 +0800 Subject: [PATCH] Fix some dropdown problems on the issue sidebar (#34308) (#34327) Backport #34308 by wxiaoguang Also fix #34300 Co-authored-by: wxiaoguang --- .../repo/issue/sidebar/assignee_list.tmpl | 6 +++--- templates/repo/issue/sidebar/label_list.tmpl | 6 +++--- .../repo/issue/sidebar/milestone_list.tmpl | 6 +++--- templates/repo/issue/sidebar/project_list.tmpl | 6 +++--- .../repo/issue/sidebar/reviewer_list.tmpl | 4 ++-- .../issue/sidebar/stopwatch_timetracker.tmpl | 7 ++++--- web_src/css/base.css | 10 ---------- web_src/css/repo.css | 18 ++++++++++++++---- web_src/fomantic/build/components/dropdown.js | 2 +- .../features/repo-issue-sidebar-combolist.ts | 15 +++++---------- web_src/js/features/repo-issue-sidebar.ts | 4 ++-- web_src/js/modules/fomantic/dropdown.ts | 9 +++++---- 12 files changed, 45 insertions(+), 48 deletions(-) diff --git a/templates/repo/issue/sidebar/assignee_list.tmpl b/templates/repo/issue/sidebar/assignee_list.tmpl index 19927cbd41..95105dd184 100644 --- a/templates/repo/issue/sidebar/assignee_list.tmpl +++ b/templates/repo/issue/sidebar/assignee_list.tmpl @@ -6,8 +6,8 @@ {{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/assignee?issue_ids={{$pageMeta.Issue.ID}}"{{end}} > -
- +
+ {{ctx.Locale.Tr "repo.issues.new.assignees"}} {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
@@ -16,7 +16,7 @@
-
{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}
+
{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}
{{range $data.CandidateAssignees}} diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl index 7d4ad264c2..ed514f6725 100644 --- a/templates/repo/issue/sidebar/label_list.tmpl +++ b/templates/repo/issue/sidebar/label_list.tmpl @@ -4,8 +4,8 @@ {{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/labels?issue_ids={{$pageMeta.Issue.ID}}"{{end}} > -
- +
+ {{ctx.Locale.Tr "repo.issues.new.labels"}} {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
@@ -17,7 +17,7 @@
- {{ctx.Locale.Tr "repo.issues.new.clear_labels"}} + {{ctx.Locale.Tr "repo.issues.new.clear_labels"}}
{{$previousExclusiveScope := "_no_scope"}} {{range $data.RepoLabels}} diff --git a/templates/repo/issue/sidebar/milestone_list.tmpl b/templates/repo/issue/sidebar/milestone_list.tmpl index 4ca0d1bd3a..5bc961ed3c 100644 --- a/templates/repo/issue/sidebar/milestone_list.tmpl +++ b/templates/repo/issue/sidebar/milestone_list.tmpl @@ -6,8 +6,8 @@ {{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/milestone?issue_ids={{$pageMeta.Issue.ID}}"{{end}} > -
- +
+ {{ctx.Locale.Tr "repo.issues.new.milestone"}} {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
@@ -19,7 +19,7 @@
-
{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}
+
{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}
{{if $data.OpenMilestones}}
{{ctx.Locale.Tr "repo.issues.filter_milestone_open"}}
diff --git a/templates/repo/issue/sidebar/project_list.tmpl b/templates/repo/issue/sidebar/project_list.tmpl index 0d8a88e8fa..a212261a22 100644 --- a/templates/repo/issue/sidebar/project_list.tmpl +++ b/templates/repo/issue/sidebar/project_list.tmpl @@ -6,8 +6,8 @@ {{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}} > -
- +
+ {{ctx.Locale.Tr "repo.issues.new.projects"}} {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
@@ -18,7 +18,7 @@
{{end}}
-
{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}
+
{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}
{{if $data.OpenProjects}}
{{ctx.Locale.Tr "repo.issues.new.open_projects"}}
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl index 82e3c0c86a..9cb11ec7ee 100644 --- a/templates/repo/issue/sidebar/reviewer_list.tmpl +++ b/templates/repo/issue/sidebar/reviewer_list.tmpl @@ -6,8 +6,8 @@ {{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/request_review?issue_ids={{$pageMeta.Issue.ID}}"{{end}} > {{/* match CreateIssueForm */}} -
- +
+ {{ctx.Locale.Tr "repo.issues.review.reviewers"}} {{if $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
diff --git a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl index a72749a9f3..0176aede7a 100644 --- a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl +++ b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl @@ -2,10 +2,11 @@ {{if and .CanUseTimetracker (not .Repository.IsArchived)}}
-
- +
+
- {{ctx.Locale.Tr "repo.issues.tracker"}} {{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}} + {{ctx.Locale.Tr "repo.issues.tracker"}} + {{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
{{svg "octicon-gear"}} diff --git a/web_src/css/base.css b/web_src/css/base.css index dc79f2f322..a28fb7b92a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1188,16 +1188,6 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil text-overflow: ellipsis !important; } -.ui.dropdown.text-flex-grow { - display: flex; -} - -.ui.dropdown.text-flex-grow > .text { - display: flex; - flex-grow: 1; - justify-content: space-between; -} - .svg.octicon-file-directory-fill, .svg.octicon-file-directory-open-fill, .svg.octicon-file-submodule { diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 0044b6b04d..306db34300 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -50,23 +50,33 @@ width: 300px; } -.issue-sidebar-combo .ui.dropdown .item:not(.checked) .item-check-mark { - visibility: hidden; +.issue-content-right .ui.dropdown.full-width { + width: 100%; } -.issue-content-right .dropdown > .menu { +.issue-content-right .ui.dropdown.full-width > .fixed-text { + display: flex; + flex-grow: 1; + justify-content: space-between; +} + +.issue-content-right .ui.dropdown > .menu { max-width: 270px; min-width: 0; max-height: 500px; overflow-x: auto; } -.issue-content-right .dropdown > .menu .item-secondary-info small { +.issue-content-right .ui.dropdown > .menu .item-secondary-info small { display: block; text-overflow: ellipsis; overflow: hidden; } +.issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark { + visibility: hidden; +} + @media (max-width: 767.98px) { .issue-content-left, .issue-content-right { diff --git a/web_src/fomantic/build/components/dropdown.js b/web_src/fomantic/build/components/dropdown.js index 163de9f751..9d0e07b33b 100644 --- a/web_src/fomantic/build/components/dropdown.js +++ b/web_src/fomantic/build/components/dropdown.js @@ -4080,7 +4080,7 @@ $.fn.dropdown.settings = { search : 'input.search, .menu > .search > input, .menu input.search', sizer : '> span.sizer', text : '> .text:not(.icon)', - unselectable : '.disabled, .filtered', + unselectable : '.disabled, .filtered, .tw-hidden', // GITEA-PATCH: tw-hidden hides the item so it is also unselectable clearIcon : '> .remove.icon' }, diff --git a/web_src/js/features/repo-issue-sidebar-combolist.ts b/web_src/js/features/repo-issue-sidebar-combolist.ts index c30d4fe50d..f25c0a77c6 100644 --- a/web_src/js/features/repo-issue-sidebar-combolist.ts +++ b/web_src/js/features/repo-issue-sidebar-combolist.ts @@ -1,6 +1,6 @@ import {fomanticQuery} from '../modules/fomantic/base.ts'; import {POST} from '../modules/fetch.ts'; -import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts'; +import {addDelegatedEventListener, queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts'; // if there are draft comments, confirm before reloading, to avoid losing comments function issueSidebarReloadConfirmDraftComment() { @@ -22,7 +22,7 @@ function issueSidebarReloadConfirmDraftComment() { window.location.reload(); } -class IssueSidebarComboList { +export class IssueSidebarComboList { updateUrl: string; updateAlgo: string; selectionMode: string; @@ -95,9 +95,7 @@ class IssueSidebarComboList { } } - async onItemClick(e: Event) { - const elItem = (e.target as HTMLElement).closest('.item'); - if (!elItem) return; + async onItemClick(elItem: HTMLElement, e: Event) { e.preventDefault(); if (elItem.hasAttribute('data-can-change') && elItem.getAttribute('data-can-change') !== 'true') return; @@ -146,16 +144,13 @@ class IssueSidebarComboList { } this.initialValues = this.collectCheckedValues(); - this.elDropdown.addEventListener('click', (e) => this.onItemClick(e)); + addDelegatedEventListener(this.elDropdown, 'click', '.item', (el, e) => this.onItemClick(el, e)); fomanticQuery(this.elDropdown).dropdown('setting', { action: 'nothing', // do not hide the menu if user presses Enter fullTextSearch: 'exact', + hideDividers: 'empty', onHide: () => this.onHide(), }); } } - -export function initIssueSidebarComboList(container: HTMLElement) { - new IssueSidebarComboList(container).init(); -} diff --git a/web_src/js/features/repo-issue-sidebar.ts b/web_src/js/features/repo-issue-sidebar.ts index f84bed127f..290e1ae000 100644 --- a/web_src/js/features/repo-issue-sidebar.ts +++ b/web_src/js/features/repo-issue-sidebar.ts @@ -1,6 +1,6 @@ import {POST} from '../modules/fetch.ts'; import {queryElems, toggleElem} from '../utils/dom.ts'; -import {initIssueSidebarComboList} from './repo-issue-sidebar-combolist.ts'; +import {IssueSidebarComboList} from './repo-issue-sidebar-combolist.ts'; function initBranchSelector() { // TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl" @@ -48,5 +48,5 @@ export function initRepoIssueSidebar() { initRepoIssueDue(); // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions - queryElems(document, '.issue-sidebar-combo', (el) => initIssueSidebarComboList(el)); + queryElems(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init()); } diff --git a/web_src/js/modules/fomantic/dropdown.ts b/web_src/js/modules/fomantic/dropdown.ts index 1b05939cf3..0360b8ef95 100644 --- a/web_src/js/modules/fomantic/dropdown.ts +++ b/web_src/js/modules/fomantic/dropdown.ts @@ -228,12 +228,13 @@ function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HT dropdown.addEventListener('keydown', (e: KeyboardEvent) => { // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler if (e.key === 'Enter') { - const dropdownCall = fomanticDropdownFn.bind($(dropdown)); - let $item = dropdownCall('get item', dropdownCall('get value')); - if (!$item) $item = $(menu).find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item + const elItem = menu.querySelector(':scope > .item.selected, .menu > .item.selected'); // if the selected item is clickable, then trigger the click event. // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click. - if ($item?.[0]?.matches('a, .js-aria-clickable')) $item[0].click(); + if (elItem?.matches('a, .js-aria-clickable') && !elItem.matches('.tw-hidden, .filtered')) { + e.preventDefault(); + elItem.click(); + } } });