aboutsummaryrefslogtreecommitdiffstats
path: root/web_src
diff options
context:
space:
mode:
Diffstat (limited to 'web_src')
-rw-r--r--web_src/css/base.css11
-rw-r--r--web_src/css/repo.css18
-rw-r--r--web_src/fomantic/build/components/dropdown.js2
-rw-r--r--web_src/js/components/DiffFileTreeItem.vue16
-rw-r--r--web_src/js/components/RepoBranchTagSelector.vue3
-rw-r--r--web_src/js/components/RepoContributors.vue2
-rw-r--r--web_src/js/features/repo-issue-sidebar-combolist.ts15
-rw-r--r--web_src/js/features/repo-issue-sidebar.ts4
-rw-r--r--web_src/js/modules/diff-file.test.ts6
-rw-r--r--web_src/js/modules/diff-file.ts10
-rw-r--r--web_src/js/modules/fomantic/dropdown.ts9
11 files changed, 47 insertions, 49 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css
index bf7639859d..a28fb7b92a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1150,6 +1150,7 @@ table th[data-sortt-desc] .svg {
min-width: 0;
}
+.ui.dropdown > .ui.button,
.flex-text-block > .ui.button,
.flex-text-inline > .ui.button {
margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
@@ -1187,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 .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 {
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/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index d6d5506155..24bf590082 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -22,13 +22,6 @@ function getIconForDiffStatus(pType: DiffStatus) {
};
return diffTypes[pType] ?? diffTypes[''];
}
-
-function entryIcon(entry: DiffTreeEntry) {
- if (entry.EntryMode === 'commit') {
- return 'octicon-file-submodule';
- }
- return 'octicon-file';
-}
</script>
<template>
@@ -36,10 +29,8 @@ function entryIcon(entry: DiffTreeEntry) {
<div class="item-directory" :class="{ 'viewed': item.IsViewed }" :title="item.DisplayName" @click.stop="collapsed = !collapsed">
<!-- directory -->
<SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
- <SvgIcon
- class="text primary"
- :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"
- />
+ <!-- eslint-disable-next-line vue/no-v-html -->
+ <span class="tw-contents" v-html="collapsed ? store.folderIcon : store.folderOpenIcon"/>
<span class="gt-ellipsis">{{ item.DisplayName }}</span>
</div>
@@ -53,7 +44,8 @@ function entryIcon(entry: DiffTreeEntry) {
:title="item.DisplayName" :href="'#diff-' + item.NameHash"
>
<!-- file -->
- <SvgIcon :name="entryIcon(item)"/>
+ <!-- eslint-disable-next-line vue/no-v-html -->
+ <span class="tw-contents" v-html="item.FileIcon"/>
<span class="gt-ellipsis tw-flex-1">{{ item.DisplayName }}</span>
<SvgIcon
:name="getIconForDiffStatus(item.DiffStatus).name"
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index aaef8045a0..8e3a29a0e0 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -222,7 +222,8 @@ export default defineComponent({
<template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>
<template v-else>
<svg-icon v-if="currentRefType === 'tag'" name="octicon-tag"/>
- <svg-icon v-else name="octicon-git-branch"/>
+ <svg-icon v-else-if="currentRefType === 'branch'" name="octicon-git-branch"/>
+ <svg-icon v-else name="octicon-git-commit"/>
<strong ref="dropdownRefName" class="tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
</template>
</span>
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 969a869e0d..1006ea30bb 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -354,7 +354,7 @@ export default defineComponent({
<div>
<!-- Contribution type -->
<div class="ui floating dropdown jump" id="repo-contributors">
- <div class="ui basic compact button tw-mr-0">
+ <div class="ui basic compact button">
<span class="not-mobile">{{ locale.filterLabel }}</span> <strong>{{ locale.contributionType[type] }}</strong>
<svg-icon name="octicon-triangle-down" :size="14"/>
</div>
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<HTMLElement>(document, '.issue-sidebar-combo', (el) => initIssueSidebarComboList(el));
+ queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
}
diff --git a/web_src/js/modules/diff-file.test.ts b/web_src/js/modules/diff-file.test.ts
index 1f956a7d86..f0438538a0 100644
--- a/web_src/js/modules/diff-file.test.ts
+++ b/web_src/js/modules/diff-file.test.ts
@@ -9,6 +9,7 @@ test('diff-tree', () => {
'IsViewed': false,
'NameHash': '....',
'DiffStatus': '',
+ 'FileIcon': '',
'Children': [
{
'FullName': 'dir1',
@@ -17,6 +18,7 @@ test('diff-tree', () => {
'IsViewed': false,
'NameHash': '....',
'DiffStatus': '',
+ 'FileIcon': '',
'Children': [
{
'FullName': 'dir1/test.txt',
@@ -25,6 +27,7 @@ test('diff-tree', () => {
'NameHash': '....',
'EntryMode': '',
'IsViewed': false,
+ 'FileIcon': '',
'Children': null,
},
],
@@ -36,11 +39,12 @@ test('diff-tree', () => {
'DiffStatus': 'added',
'EntryMode': '',
'IsViewed': false,
+ 'FileIcon': '',
'Children': null,
},
],
},
- });
+ }, '', '');
diffTreeStoreSetViewed(store, 'dir1/test.txt', true);
expect(store.fullNameMap['dir1/test.txt'].IsViewed).toBe(true);
expect(store.fullNameMap['dir1'].IsViewed).toBe(true);
diff --git a/web_src/js/modules/diff-file.ts b/web_src/js/modules/diff-file.ts
index 5d06f8a333..2cec7bc6b3 100644
--- a/web_src/js/modules/diff-file.ts
+++ b/web_src/js/modules/diff-file.ts
@@ -13,7 +13,7 @@ export type DiffTreeEntry = {
EntryMode: string,
IsViewed: boolean,
Children: DiffTreeEntry[],
-
+ FileIcon: string,
ParentEntry?: DiffTreeEntry,
}
@@ -22,6 +22,8 @@ type DiffFileTreeData = {
};
type DiffFileTree = {
+ folderIcon: string;
+ folderOpenIcon: string;
diffFileTree: DiffFileTreeData;
fullNameMap?: Record<string, DiffTreeEntry>
fileTreeIsVisible: boolean;
@@ -31,7 +33,7 @@ type DiffFileTree = {
let diffTreeStoreReactive: Reactive<DiffFileTree>;
export function diffTreeStore() {
if (!diffTreeStoreReactive) {
- diffTreeStoreReactive = reactiveDiffTreeStore(pageData.DiffFileTree);
+ diffTreeStoreReactive = reactiveDiffTreeStore(pageData.DiffFileTree, pageData.FolderIcon, pageData.FolderOpenIcon);
}
return diffTreeStoreReactive;
}
@@ -55,9 +57,11 @@ function fillFullNameMap(map: Record<string, DiffTreeEntry>, entry: DiffTreeEntr
}
}
-export function reactiveDiffTreeStore(data: DiffFileTreeData): Reactive<DiffFileTree> {
+export function reactiveDiffTreeStore(data: DiffFileTreeData, folderIcon: string, folderOpenIcon: string): Reactive<DiffFileTree> {
const store = reactive({
diffFileTree: data,
+ folderIcon,
+ folderOpenIcon,
fileTreeIsVisible: false,
selectedItem: '',
fullNameMap: {},
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<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();
+ }
}
});
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-30 19:11:15 +0000