+ {{$queryLink := QueryBuild "?" "type" $.ViewType "sort" $.SortType "state" $.State "q" $.Keyword "fuzzy" $.IsFuzzy}}
+
+ {{$queryLinkWithFilter := QueryBuild $queryLink "poster" $.SearchFilterPosterUsername "assignee" $.SearchFilterAssigneeID}}
@@ -539,6 +559,11 @@ export function initRepositoryActionView() {
overflow-wrap: anywhere;
}
+.action-info-summary .ui.button {
+ margin: 0;
+ white-space: nowrap;
+}
+
.action-commit-summary {
display: flex;
flex-wrap: wrap;
diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts
index 93b2042fa92..62bfccd1393 100644
--- a/web_src/js/features/codeeditor.ts
+++ b/web_src/js/features/codeeditor.ts
@@ -1,11 +1,30 @@
import tinycolor from 'tinycolor2';
import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
import {onInputDebounce} from '../utils/dom.ts';
+import type MonacoNamespace from 'monaco-editor';
-const languagesByFilename = {};
-const languagesByExt = {};
+type Monaco = typeof MonacoNamespace;
+type IStandaloneCodeEditor = MonacoNamespace.editor.IStandaloneCodeEditor;
+type IEditorOptions = MonacoNamespace.editor.IEditorOptions;
+type IGlobalEditorOptions = MonacoNamespace.editor.IGlobalEditorOptions;
+type ITextModelUpdateOptions = MonacoNamespace.editor.ITextModelUpdateOptions;
+type MonacoOpts = IEditorOptions & IGlobalEditorOptions & ITextModelUpdateOptions;
-const baseOptions = {
+type EditorConfig = {
+ indent_style?: 'tab' | 'space',
+ indent_size?: string | number, // backend emits this as string
+ tab_width?: string | number, // backend emits this as string
+ end_of_line?: 'lf' | 'cr' | 'crlf',
+ charset?: 'latin1' | 'utf-8' | 'utf-8-bom' | 'utf-16be' | 'utf-16le',
+ trim_trailing_whitespace?: boolean,
+ insert_final_newline?: boolean,
+ root?: boolean,
+}
+
+const languagesByFilename: Record = {};
+const languagesByExt: Record = {};
+
+const baseOptions: MonacoOpts = {
fontFamily: 'var(--fonts-monospace)',
fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242
guides: {bracketPairs: false, indentation: false},
@@ -15,21 +34,23 @@ const baseOptions = {
overviewRulerLanes: 0,
renderLineHighlight: 'all',
renderLineHighlightOnlyWhenFocus: true,
- rulers: false,
+ rulers: [],
scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
scrollBeyondLastLine: false,
automaticLayout: true,
};
-function getEditorconfig(input: HTMLInputElement) {
+function getEditorconfig(input: HTMLInputElement): EditorConfig | null {
+ const json = input.getAttribute('data-editorconfig');
+ if (!json) return null;
try {
- return JSON.parse(input.getAttribute('data-editorconfig'));
+ return JSON.parse(json);
} catch {
return null;
}
}
-function initLanguages(monaco) {
+function initLanguages(monaco: Monaco): void {
for (const {filenames, extensions, id} of monaco.languages.getLanguages()) {
for (const filename of filenames || []) {
languagesByFilename[filename] = id;
@@ -40,35 +61,26 @@ function initLanguages(monaco) {
}
}
-function getLanguage(filename) {
+function getLanguage(filename: string): string {
return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
}
-function updateEditor(monaco, editor, filename, lineWrapExts) {
+function updateEditor(monaco: Monaco, editor: IStandaloneCodeEditor, filename: string, lineWrapExts: string[]): void {
editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
const model = editor.getModel();
+ if (!model) return;
const language = model.getLanguageId();
const newLanguage = getLanguage(filename);
if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
}
// export editor for customization - https://github.com/go-gitea/gitea/issues/10409
-function exportEditor(editor) {
+function exportEditor(editor: IStandaloneCodeEditor): void {
if (!window.codeEditors) window.codeEditors = [];
if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
}
-export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, editorOpts: Record) {
- const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
-
- initLanguages(monaco);
- let {language, ...other} = editorOpts;
- if (!language) language = getLanguage(filename);
-
- const container = document.createElement('div');
- container.className = 'monaco-editor-container';
- textarea.parentNode.append(container);
-
+function updateTheme(monaco: Monaco): void {
// https://github.com/microsoft/monaco-editor/issues/2427
// also, monaco can only parse 6-digit hex colors, so we convert the colors to that format
const styles = window.getComputedStyle(document.documentElement);
@@ -80,6 +92,7 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
rules: [
{
background: getColor('--color-code-bg'),
+ token: '',
},
],
colors: {
@@ -101,6 +114,26 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
'focusBorder': '#0000', // prevent blue border
},
});
+}
+
+type CreateMonacoOpts = MonacoOpts & {language?: string};
+
+export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, opts: CreateMonacoOpts): Promise<{monaco: Monaco, editor: IStandaloneCodeEditor}> {
+ const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
+
+ initLanguages(monaco);
+ let {language, ...other} = opts;
+ if (!language) language = getLanguage(filename);
+
+ const container = document.createElement('div');
+ container.className = 'monaco-editor-container';
+ if (!textarea.parentNode) throw new Error('Parent node absent');
+ textarea.parentNode.append(container);
+
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ updateTheme(monaco);
+ });
+ updateTheme(monaco);
const editor = monaco.editor.create(container, {
value: textarea.value,
@@ -114,8 +147,12 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
]);
const model = editor.getModel();
+ if (!model) throw new Error('Unable to get editor model');
model.onDidChangeContent(() => {
- textarea.value = editor.getValue({preserveBOM: true});
+ textarea.value = editor.getValue({
+ preserveBOM: true,
+ lineEnding: '',
+ });
textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
});
@@ -127,13 +164,13 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
return {monaco, editor};
}
-function getFileBasedOptions(filename: string, lineWrapExts: string[]) {
+function getFileBasedOptions(filename: string, lineWrapExts: string[]): MonacoOpts {
return {
wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
};
}
-function togglePreviewDisplay(previewable: boolean) {
+function togglePreviewDisplay(previewable: boolean): void {
const previewTab = document.querySelector('a[data-tab="preview"]');
if (!previewTab) return;
@@ -145,19 +182,19 @@ function togglePreviewDisplay(previewable: boolean) {
// then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
if (previewTab.classList.contains('active')) {
const writeTab = document.querySelector('a[data-tab="write"]');
- writeTab.click();
+ writeTab?.click();
}
}
}
-export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement) {
+export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement): Promise {
const filename = basename(filenameInput.value);
const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(','));
const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
- const previewable = previewableExts.has(extname(filename));
+ const isPreviewable = previewableExts.has(extname(filename));
const editorConfig = getEditorconfig(filenameInput);
- togglePreviewDisplay(previewable);
+ togglePreviewDisplay(isPreviewable);
const {monaco, editor} = await createMonaco(textarea, filename, {
...baseOptions,
@@ -175,14 +212,22 @@ export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameIn
return editor;
}
-function getEditorConfigOptions(ec: Record): Record {
- if (!isObject(ec)) return {};
+function getEditorConfigOptions(ec: EditorConfig | null): MonacoOpts {
+ if (!ec || !isObject(ec)) return {};
- const opts: Record = {};
+ const opts: MonacoOpts = {};
opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
- if ('indent_size' in ec) opts.indentSize = Number(ec.indent_size);
- if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize;
- if ('max_line_length' in ec) opts.rulers = [Number(ec.max_line_length)];
+
+ if ('indent_size' in ec) {
+ opts.indentSize = Number(ec.indent_size);
+ }
+ if ('tab_width' in ec) {
+ opts.tabSize = Number(ec.tab_width) || Number(ec.indent_size);
+ }
+ if ('max_line_length' in ec) {
+ opts.rulers = [Number(ec.max_line_length)];
+ }
+
opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
opts.insertSpaces = ec.indent_style === 'space';
opts.useTabStops = ec.indent_style === 'tab';
diff --git a/web_src/js/features/repo-issue-list.ts b/web_src/js/features/repo-issue-list.ts
index a7185e5f99c..48e22ba3c94 100644
--- a/web_src/js/features/repo-issue-list.ts
+++ b/web_src/js/features/repo-issue-list.ts
@@ -1,17 +1,17 @@
-import $ from 'jquery';
import {updateIssuesMeta} from './repo-common.ts';
-import {toggleElem, hideElem, isElemHidden} from '../utils/dom.ts';
+import {toggleElem, hideElem, isElemHidden, queryElems} from '../utils/dom.ts';
import {htmlEscape} from 'escape-goat';
import {confirmModal} from './comp/ConfirmModal.ts';
import {showErrorToast} from '../modules/toast.ts';
import {createSortable} from '../modules/sortable.ts';
import {DELETE, POST} from '../modules/fetch.ts';
import {parseDom} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
function initRepoIssueListCheckboxes() {
- const issueSelectAll = document.querySelector('.issue-checkbox-all');
+ const issueSelectAll = document.querySelector('.issue-checkbox-all');
if (!issueSelectAll) return; // logged out state
- const issueCheckboxes = document.querySelectorAll('.issue-checkbox');
+ const issueCheckboxes = document.querySelectorAll('.issue-checkbox');
const syncIssueSelectionState = () => {
const checkedCheckboxes = Array.from(issueCheckboxes).filter((el) => el.checked);
@@ -29,8 +29,8 @@ function initRepoIssueListCheckboxes() {
issueSelectAll.indeterminate = false;
}
// if any issue is selected, show the action panel, otherwise show the filter panel
- toggleElem($('#issue-filters'), !anyChecked);
- toggleElem($('#issue-actions'), anyChecked);
+ 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
const panels = document.querySelectorAll('#issue-filters, #issue-actions');
const visiblePanel = Array.from(panels).find((el) => !isElemHidden(el));
@@ -49,56 +49,55 @@ function initRepoIssueListCheckboxes() {
syncIssueSelectionState();
});
- $('.issue-action').on('click', async function (e) {
- e.preventDefault();
+ queryElems(document, '.issue-action', (el) => el.addEventListener('click',
+ async (e: MouseEvent) => {
+ e.preventDefault();
- const url = this.getAttribute('data-url');
- let action = this.getAttribute('data-action');
- let elementId = this.getAttribute('data-element-id');
- let issueIDs = [];
- for (const el of document.querySelectorAll('.issue-checkbox:checked')) {
- issueIDs.push(el.getAttribute('data-issue-id'));
- }
- issueIDs = issueIDs.join(',');
- if (!issueIDs) return;
-
- // for assignee
- if (elementId === '0' && url.endsWith('/assignee')) {
- elementId = '';
- action = 'clear';
- }
-
- // for toggle
- if (action === 'toggle' && e.altKey) {
- action = 'toggle-alt';
- }
-
- // for delete
- if (action === 'delete') {
- const confirmText = e.target.getAttribute('data-action-delete-confirm');
- if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
- return;
+ const url = el.getAttribute('data-url');
+ let action = el.getAttribute('data-action');
+ let elementId = el.getAttribute('data-element-id');
+ const issueIDList: string[] = [];
+ for (const el of document.querySelectorAll('.issue-checkbox:checked')) {
+ issueIDList.push(el.getAttribute('data-issue-id'));
}
- }
+ const issueIDs = issueIDList.join(',');
+ if (!issueIDs) return;
- try {
- await updateIssuesMeta(url, action, issueIDs, elementId);
- window.location.reload();
- } catch (err) {
- showErrorToast(err.responseJSON?.error ?? err.message);
- }
- });
+ // for assignee
+ if (elementId === '0' && url.endsWith('/assignee')) {
+ elementId = '';
+ action = 'clear';
+ }
+
+ // for toggle
+ if (action === 'toggle' && e.altKey) {
+ action = 'toggle-alt';
+ }
+
+ // for delete
+ if (action === 'delete') {
+ const confirmText = el.getAttribute('data-action-delete-confirm');
+ if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
+ return;
+ }
+ }
+
+ try {
+ await updateIssuesMeta(url, action, issueIDs, elementId);
+ window.location.reload();
+ } catch (err) {
+ showErrorToast(err.responseJSON?.error ?? err.message);
+ }
+ },
+ ));
}
-function initRepoIssueListAuthorDropdown() {
- const $searchDropdown = $('.user-remote-search');
- if (!$searchDropdown.length) return;
-
- let searchUrl = $searchDropdown[0].getAttribute('data-search-url');
- const actionJumpUrl = $searchDropdown[0].getAttribute('data-action-jump-url');
- const selectedUserId = $searchDropdown[0].getAttribute('data-selected-user-id');
+function initDropdownUserRemoteSearch(el: Element) {
+ let searchUrl = el.getAttribute('data-search-url');
+ const actionJumpUrl = el.getAttribute('data-action-jump-url');
+ const selectedUserId = el.getAttribute('data-selected-user-id');
if (!searchUrl.includes('?')) searchUrl += '?';
-
+ const $searchDropdown = fomanticQuery(el);
$searchDropdown.dropdown('setting', {
fullTextSearch: true,
selectOnKeydown: false,
@@ -111,14 +110,14 @@ function initRepoIssueListAuthorDropdown() {
for (const item of resp.results) {
let html = `${htmlEscape(item.username)}`;
if (item.full_name) html += `${htmlEscape(item.full_name)}`;
- processedResults.push({value: item.user_id, name: html});
+ processedResults.push({value: item.username, name: html});
}
resp.results = processedResults;
return resp;
},
},
action: (_text, value) => {
- window.location.href = actionJumpUrl.replace('{user_id}', encodeURIComponent(value));
+ window.location.href = actionJumpUrl.replace('{username}', encodeURIComponent(value));
},
onShow: () => {
$searchDropdown.dropdown('filter', ' '); // trigger a search on first show
@@ -160,7 +159,7 @@ function initRepoIssueListAuthorDropdown() {
function initPinRemoveButton() {
for (const button of document.querySelectorAll('.issue-card-unpin')) {
button.addEventListener('click', async (event) => {
- const el = event.currentTarget;
+ const el = event.currentTarget as HTMLElement;
const id = Number(el.getAttribute('data-issue-id'));
// Send the unpin request
@@ -205,10 +204,8 @@ async function initIssuePinSort() {
}
function initArchivedLabelFilter() {
- const archivedLabelEl = document.querySelector('#archived-filter-checkbox');
- if (!archivedLabelEl) {
- return;
- }
+ const archivedLabelEl = document.querySelector('#archived-filter-checkbox');
+ if (!archivedLabelEl) return;
const url = new URL(window.location.href);
const archivedLabels = document.querySelectorAll('[data-is-archived]');
@@ -219,7 +216,7 @@ function initArchivedLabelFilter() {
}
const selectedLabels = (url.searchParams.get('labels') || '')
.split(',')
- .map((id) => id < 0 ? `${~id + 1}` : id); // selectedLabels contains -ve ids, which are excluded so convert any -ve value id to +ve
+ .map((id) => parseInt(id) < 0 ? `${~id + 1}` : id); // selectedLabels contains -ve ids, which are excluded so convert any -ve value id to +ve
const archivedElToggle = () => {
for (const label of archivedLabels) {
@@ -241,9 +238,9 @@ function initArchivedLabelFilter() {
}
export function initRepoIssueList() {
- if (!document.querySelectorAll('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list').length) return;
+ if (!document.querySelector('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list')) return;
initRepoIssueListCheckboxes();
- initRepoIssueListAuthorDropdown();
+ queryElems(document, '.ui.dropdown.user-remote-search', (el) => initDropdownUserRemoteSearch(el));
initIssuePinSort();
initArchivedLabelFilter();
}
diff --git a/web_src/js/features/repo-issue.ts b/web_src/js/features/repo-issue.ts
index 477edbeb5f4..f5a36b7717e 100644
--- a/web_src/js/features/repo-issue.ts
+++ b/web_src/js/features/repo-issue.ts
@@ -8,6 +8,7 @@ import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
import {GET, POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
const {appSubUrl} = window.config;
@@ -31,34 +32,35 @@ export function initRepoIssueSidebarList() {
if (crossRepoSearch === 'true') {
issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${issuePageInfo.repoId}&type=${issuePageInfo.issueDependencySearchType}`;
}
- $('#new-dependency-drop-list')
- .dropdown({
- apiSettings: {
- url: issueSearchUrl,
- onResponse(response) {
- const filteredResponse = {success: true, results: []};
- const currIssueId = $('#new-dependency-drop-list').data('issue-id');
- // Parse the response from the api to work with our dropdown
- $.each(response, (_i, issue) => {
- // Don't list current issue in the dependency list.
- if (issue.id === currIssueId) {
- return;
- }
- filteredResponse.results.push({
- name: `
-
diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css
index fd8fac27e27..ca5b432804f 100644
--- a/web_src/css/repo/home.css
+++ b/web_src/css/repo/home.css
@@ -20,7 +20,7 @@
grid-row: 2;
padding-left: 1em;
}
-.repo-home-sidebar-bottom > :first-child {
+.repo-home-sidebar-bottom .flex-list > :first-child {
border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
}
@@ -43,7 +43,7 @@
grid-row: 3;
padding-left: 0;
}
- .repo-home-sidebar-bottom > :first-child {
+ .repo-home-sidebar-bottom .flex-list > :first-child {
border-top: 0;
}
}
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index eecbf7ef559..7f647b668a6 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -16,8 +16,27 @@ type LogLine = {
message: string;
};
-const LogLinePrefixGroup = '::group::';
-const LogLinePrefixEndGroup = '::endgroup::';
+const LogLinePrefixesGroup = ['::group::', '##[group]'];
+const LogLinePrefixesEndGroup = ['::endgroup::', '##[endgroup]'];
+
+type LogLineCommand = {
+ name: 'group' | 'endgroup',
+ prefix: string,
+}
+
+function parseLineCommand(line: LogLine): LogLineCommand | null {
+ for (const prefix of LogLinePrefixesGroup) {
+ if (line.message.startsWith(prefix)) {
+ return {name: 'group', prefix};
+ }
+ }
+ for (const prefix of LogLinePrefixesEndGroup) {
+ if (line.message.startsWith(prefix)) {
+ return {name: 'endgroup', prefix};
+ }
+ }
+ return null;
+}
const sfc = {
name: 'RepoActionView',
@@ -129,13 +148,13 @@ const sfc = {
return el._stepLogsActiveContainer ?? el;
},
// begin a log group
- beginLogGroup(stepIndex: number, startTime: number, line: LogLine) {
+ beginLogGroup(stepIndex: number, startTime: number, line: LogLine, cmd: LogLineCommand) {
const el = this.$refs.logs[stepIndex];
const elJobLogGroupSummary = createElementFromAttrs('summary', {class: 'job-log-group-summary'},
this.createLogLine(stepIndex, startTime, {
index: line.index,
timestamp: line.timestamp,
- message: line.message.substring(LogLinePrefixGroup.length),
+ message: line.message.substring(cmd.prefix.length),
}),
);
const elJobLogList = createElementFromAttrs('div', {class: 'job-log-list'});
@@ -147,13 +166,13 @@ const sfc = {
el._stepLogsActiveContainer = elJobLogList;
},
// end a log group
- endLogGroup(stepIndex: number, startTime: number, line: LogLine) {
+ endLogGroup(stepIndex: number, startTime: number, line: LogLine, cmd: LogLineCommand) {
const el = this.$refs.logs[stepIndex];
el._stepLogsActiveContainer = null;
el.append(this.createLogLine(stepIndex, startTime, {
index: line.index,
timestamp: line.timestamp,
- message: line.message.substring(LogLinePrefixEndGroup.length),
+ message: line.message.substring(cmd.prefix.length),
}));
},
@@ -201,11 +220,12 @@ const sfc = {
appendLogs(stepIndex: number, startTime: number, logLines: LogLine[]) {
for (const line of logLines) {
const el = this.getLogsContainer(stepIndex);
- if (line.message.startsWith(LogLinePrefixGroup)) {
- this.beginLogGroup(stepIndex, startTime, line);
+ const cmd = parseLineCommand(line);
+ if (cmd?.name === 'group') {
+ this.beginLogGroup(stepIndex, startTime, line, cmd);
continue;
- } else if (line.message.startsWith(LogLinePrefixEndGroup)) {
- this.endLogGroup(stepIndex, startTime, line);
+ } else if (cmd?.name === 'endgroup') {
+ this.endLogGroup(stepIndex, startTime, line, cmd);
continue;
}
el.append(this.createLogLine(stepIndex, startTime, line));
@@ -393,7 +413,7 @@ export function initRepositoryActionView() {
- #${issue.number} ${htmlEscape(issue.title)}
+ fomanticQuery('#new-dependency-drop-list').dropdown({
+ fullTextSearch: true,
+ apiSettings: {
+ url: issueSearchUrl,
+ onResponse(response) {
+ const filteredResponse = {success: true, results: []};
+ const currIssueId = $('#new-dependency-drop-list').data('issue-id');
+ // Parse the response from the api to work with our dropdown
+ $.each(response, (_i, issue) => {
+ // Don't list current issue in the dependency list.
+ if (issue.id === currIssueId) {
+ return;
+ }
+ filteredResponse.results.push({
+ name: `#${issue.number} ${htmlEscape(issue.title)}
${htmlEscape(issue.repository.full_name)}
`,
- value: issue.id,
- });
+ value: issue.id,
});
- return filteredResponse;
- },
- cache: false,
+ });
+ return filteredResponse;
},
+ cache: false,
+ },
+ });
+}
- fullTextSearch: true,
- });
-
- $('.menu a.label-filter-item').each(function () {
+export function initRepoIssueLabelFilter() {
+ // the "label-filter" is used in 2 templates: projects/view, issue/filter_list (issue list page including the milestone page)
+ $('.ui.dropdown.label-filter a.label-filter-item').each(function () {
$(this).on('click', function (e) {
if (e.altKey) {
e.preventDefault();
@@ -66,11 +68,9 @@ export function initRepoIssueSidebarList() {
}
});
});
-
- // FIXME: it is wrong place to init ".ui.dropdown.label-filter"
- $('.menu .ui.dropdown.label-filter').on('keydown', (e) => {
+ $('.ui.dropdown.label-filter').on('keydown', (e) => {
if (e.altKey && e.key === 'Enter') {
- const selectedItem = document.querySelector('.menu .ui.dropdown.label-filter .menu .item.selected');
+ const selectedItem = document.querySelector('.ui.dropdown.label-filter .menu .item.selected');
if (selectedItem) {
excludeLabel(selectedItem);
}
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
index f93c3495af4..2964ef55720 100644
--- a/web_src/js/index.ts
+++ b/web_src/js/index.ts
@@ -29,7 +29,7 @@ import {
initRepoIssueWipTitle,
initRepoPullRequestMergeInstruction,
initRepoPullRequestAllowMaintainerEdit,
- initRepoPullRequestReview, initRepoIssueSidebarList,
+ initRepoPullRequestReview, initRepoIssueSidebarList, initRepoIssueLabelFilter,
} from './features/repo-issue.ts';
import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
import {initRepoTopicBar} from './features/repo-home.ts';
@@ -181,6 +181,7 @@ onDomReady(() => {
initRepoGraphGit,
initRepoIssueContentHistory,
initRepoIssueList,
+ initRepoIssueLabelFilter,
initRepoIssueSidebarList,
initRepoIssueReferenceRepositorySearch,
initRepoIssueWipTitle,
diff --git a/web_src/js/modules/fomantic/dropdown.test.ts b/web_src/js/modules/fomantic/dropdown.test.ts
new file mode 100644
index 00000000000..587e0bca7c6
--- /dev/null
+++ b/web_src/js/modules/fomantic/dropdown.test.ts
@@ -0,0 +1,56 @@
+import {createElementFromHTML} from '../../utils/dom.ts';
+import {hideScopedEmptyDividers} from './dropdown.ts';
+
+test('hideScopedEmptyDividers-simple', () => {
+ const container = createElementFromHTML(`
+
+
`);
+ hideScopedEmptyDividers(container);
+ expect(container.innerHTML).toEqual(`
+
+a
+
+
+
+b
+
+a
+
+
+
+b
+
+`);
+});
+
+test('hideScopedEmptyDividers-hidden1', () => {
+ const container = createElementFromHTML(`
+
`);
+ hideScopedEmptyDividers(container);
+ expect(container.innerHTML).toEqual(`
+a
+
+b
+a
+
+b
+`);
+});
+
+test('hideScopedEmptyDividers-hidden2', () => {
+ const container = createElementFromHTML(`
+
`);
+ hideScopedEmptyDividers(container);
+ expect(container.innerHTML).toEqual(`
+a
+
+b
+
+c
+a
+
+b
+
+c
+`);
+});
diff --git a/web_src/js/modules/fomantic/dropdown.ts b/web_src/js/modules/fomantic/dropdown.ts
index d8fb4d6e6e4..6d0f12cb438 100644
--- a/web_src/js/modules/fomantic/dropdown.ts
+++ b/web_src/js/modules/fomantic/dropdown.ts
@@ -59,6 +59,12 @@ function updateSelectionLabel(label: HTMLElement) {
}
}
+function processMenuItems($dropdown, dropdownCall) {
+ const hideEmptyDividers = dropdownCall('setting', 'hideDividers') === 'empty';
+ const itemsMenu = $dropdown[0].querySelector('.scrolling.menu') || $dropdown[0].querySelector('.menu');
+ if (hideEmptyDividers) hideScopedEmptyDividers(itemsMenu);
+}
+
// delegate the dropdown's template functions and callback functions to add aria attributes.
function delegateOne($dropdown: any) {
const dropdownCall = fomanticDropdownFn.bind($dropdown);
@@ -72,6 +78,18 @@ function delegateOne($dropdown: any) {
// * If the "dropdown icon" is clicked again when the menu is visible, Fomantic calls "blurSearch", so hide the menu
dropdownCall('internal', 'blurSearch', function () { oldBlurSearch.call(this); dropdownCall('hide') });
+ const oldFilterItems = dropdownCall('internal', 'filterItems');
+ dropdownCall('internal', 'filterItems', function (...args: any[]) {
+ oldFilterItems.call(this, ...args);
+ processMenuItems($dropdown, dropdownCall);
+ });
+
+ const oldShow = dropdownCall('internal', 'show');
+ dropdownCall('internal', 'show', function (...args: any[]) {
+ oldShow.call(this, ...args);
+ processMenuItems($dropdown, dropdownCall);
+ });
+
// the "template" functions are used for dynamic creation (eg: AJAX)
const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
const dropdownTemplatesMenuOld = dropdownTemplates.menu;
@@ -271,3 +289,65 @@ function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HT
ignoreClickPreEvents = ignoreClickPreVisible = 0;
}, true);
}
+
+// Although Fomantic Dropdown supports "hideDividers", it doesn't really work with our "scoped dividers"
+// At the moment, "label dropdown items" use scopes, a sample case is:
+// * a-label
+// * divider
+// * scope/1
+// * scope/2
+// * divider
+// * z-label
+// when the "scope/*" are filtered out, we'd like to see "a-label" and "z-label" without the divider.
+export function hideScopedEmptyDividers(container: Element) {
+ const visibleItems: Element[] = [];
+ const curScopeVisibleItems: Element[] = [];
+ let curScope: string = '', lastVisibleScope: string = '';
+ const isScopedDivider = (item: Element) => item.matches('.divider') && item.hasAttribute('data-scope');
+ const hideDivider = (item: Element) => item.classList.add('hidden', 'transition'); // dropdown has its own classes to hide items
+
+ const handleScopeSwitch = (itemScope: string) => {
+ if (curScopeVisibleItems.length === 1 && isScopedDivider(curScopeVisibleItems[0])) {
+ hideDivider(curScopeVisibleItems[0]);
+ } else if (curScopeVisibleItems.length) {
+ if (isScopedDivider(curScopeVisibleItems[0]) && lastVisibleScope === curScope) {
+ hideDivider(curScopeVisibleItems[0]);
+ curScopeVisibleItems.shift();
+ }
+ visibleItems.push(...curScopeVisibleItems);
+ lastVisibleScope = curScope;
+ }
+ curScope = itemScope;
+ curScopeVisibleItems.length = 0;
+ };
+
+ // hide the scope dividers if the scope items are empty
+ for (const item of container.children) {
+ const itemScope = item.getAttribute('data-scope') || '';
+ if (itemScope !== curScope) {
+ handleScopeSwitch(itemScope);
+ }
+ if (!item.classList.contains('filtered') && !item.classList.contains('tw-hidden')) {
+ curScopeVisibleItems.push(item as HTMLElement);
+ }
+ }
+ handleScopeSwitch('');
+
+ // hide all leading and trailing dividers
+ while (visibleItems.length) {
+ if (!visibleItems[0].matches('.divider')) break;
+ hideDivider(visibleItems[0]);
+ visibleItems.shift();
+ }
+ while (visibleItems.length) {
+ if (!visibleItems[visibleItems.length - 1].matches('.divider')) break;
+ hideDivider(visibleItems[visibleItems.length - 1]);
+ visibleItems.pop();
+ }
+ // hide all duplicate dividers, hide current divider if next sibling is still divider
+ // no need to update "visibleItems" array since this is the last loop
+ for (const item of visibleItems) {
+ if (!item.matches('.divider')) continue;
+ if (item.nextElementSibling?.matches('.divider')) hideDivider(item);
+ }
+}
diff --git a/web_src/js/webcomponents/overflow-menu.ts b/web_src/js/webcomponents/overflow-menu.ts
index 777d7dc65dd..4e729a268a0 100644
--- a/web_src/js/webcomponents/overflow-menu.ts
+++ b/web_src/js/webcomponents/overflow-menu.ts
@@ -12,7 +12,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
mutationObserver: MutationObserver;
lastWidth: number;
- updateItems = throttle(100, () => { // eslint-disable-line unicorn/consistent-function-scoping -- https://github.com/sindresorhus/eslint-plugin-unicorn/issues/2088
+ updateItems = throttle(100, () => {
if (!this.tippyContent) {
const div = document.createElement('div');
div.classList.add('tippy-target');