Skip to content

Fix some dropdown problems on the issue sidebar #34308

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 3 commits into from
Apr 30, 2025
Merged

Fix some dropdown problems on the issue sidebar #34308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ff648b
fix
wxiaoguang Apr 29, 2025
909e135
fine tune
wxiaoguang Apr 29, 2025
f2df2d6
Merge branch 'main' into fix-sidebar-dropdown
wxiaoguang Apr 30, 2025
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
6 changes: 3 additions & 3 deletions templates/repo/issue/sidebar/assignee_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/assignee?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="assignee_ids" type="hidden" value="{{$data.SelectedAssigneeIDs}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="fixed-text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>
<div class="menu">
Expand All @@ -16,7 +16,7 @@
<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_assignees"}}">
</div>
<div class="scrolling menu flex-items-block">
<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
<div class="item clear-selection" data-text="">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
<div class="divider"></div>
{{range $data.CandidateAssignees}}
<a class="item" href="#" data-value="{{.ID}}">
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/sidebar/label_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/labels?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="fixed-text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>
<div class="menu">
Expand All @@ -17,7 +17,7 @@
<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
</div>
<div class="scrolling menu">
<a class="item clear-selection" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
<a class="item clear-selection" data-text="" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>
<div class="divider"></div>
{{$previousExclusiveScope := "_no_scope"}}
{{range $data.RepoLabels}}
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/sidebar/milestone_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/milestone?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="milestone_id" type="hidden" value="{{$data.SelectedMilestoneID}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="fixed-text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>
<div class="menu">
Expand All @@ -19,7 +19,7 @@
<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_milestones"}}">
</div>
<div class="scrolling menu">
<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
<div class="item clear-selection" data-text="">{{ctx.Locale.Tr "repo.issues.new.clear_milestone"}}</div>
<div class="divider"></div>
{{if $data.OpenMilestones}}
<div class="header">{{ctx.Locale.Tr "repo.issues.filter_milestone_open"}}</div>
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/sidebar/project_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input class="combo-value" name="project_id" type="hidden" value="{{$data.SelectedProjectID}}">
<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="text muted">
<div class="ui dropdown full-width {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
<a class="fixed-text muted">
<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
</a>
<div class="menu">
Expand All @@ -18,7 +18,7 @@
</div>
{{end}}
<div class="scrolling menu">
<div class="item clear-selection">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
<div class="item clear-selection" data-text="">{{ctx.Locale.Tr "repo.issues.new.clear_projects"}}</div>
<div class="divider"></div>
{{if $data.OpenProjects}}
<div class="header">{{ctx.Locale.Tr "repo.issues.new.open_projects"}}</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/repo/issue/sidebar/reviewer_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/request_review?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
>
<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
<div class="ui dropdown text-flex-grow {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
<a class="text muted">
<div class="ui dropdown full-width {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
<a class="fixed-text muted">
<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
</a>
<div class="menu flex-items-menu">
Expand Down
7 changes: 4 additions & 3 deletions templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
<div class="divider"></div>
<div>
<div class="ui dropdown text-flex-grow jump">
<a class="text muted">
<div class="ui dropdown full-width jump">
<a class="fixed-text muted">
<div>
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
</div>
{{svg "octicon-gear"}}
</a>
Expand Down
10 changes: 0 additions & 10 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
18 changes: 14 additions & 4 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 .ui.dropdown.full-width > .fixed-text {
display: flex;
flex-grow: 1;
justify-content: space-between;
}

.issue-content-right .dropdown > .menu {
.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 {
Expand Down
2 changes: 1 addition & 1 deletion web_src/fomantic/build/components/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
},

Expand Down
15 changes: 5 additions & 10 deletions web_src/js/features/repo-issue-sidebar-combolist.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -22,7 +22,7 @@ function issueSidebarReloadConfirmDraftComment() {
window.location.reload();
}

class IssueSidebarComboList {
export class IssueSidebarComboList {
updateUrl: string;
updateAlgo: string;
selectionMode: string;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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();
}
4 changes: 2 additions & 2 deletions web_src/js/features/repo-issue-sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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<HTMLElement>(document, '.issue-sidebar-combo', (el) => initIssueSidebarComboList(el));
queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
}
9 changes: 5 additions & 4 deletions web_src/js/modules/fomantic/dropdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLElement>(':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();
}
}
});

Expand Down