nordic-dev.net/gitea
nordic-dev.net/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-04-15 05:37:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimized the overflow-menu:

Browse Source 
1. Close the tippy when a menu item inside the tippy is clicked.
2. When a menu item inside the tippy is selected, move the active state of the menu to the tippy's button.
This commit is contained in:
Kerwin Bryant 2025-04-12 00:56:56 +00:00
parent d725b78824
commit f3fa4dd1c2
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web_src/css/base.css
View File

@ -747,6 +747,14 @@ overflow-menu .overflow-menu-button {
padding: 0;
}
overflow-menu .overflow-menu-button.active {
margin: 0 0 -2px;
border-bottom: 2px solid transparent;
background-color: transparent;
border-color: currentcolor;
font-weight: var(--font-weight-medium);
}
overflow-menu .overflow-menu-button:hover {
color: var(--color-text-dark);
}

2
web_src/js/components/DashboardRepoList.vue
View File

@ -391,7 +391,7 @@ export default defineComponent({
</div>
</div>
</div>
<overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
<overflow-menu class="ui secondary pointing tabular borderless menu repos-filter" :active="reposFilter">
<div class="overflow-menu-items tw-justify-center">
<a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
{{ textAll }}

14
web_src/js/webcomponents/overflow-menu.ts
View File

@ -1,9 +1,11 @@
import {throttle} from 'throttle-debounce';
import {createTippy} from '../modules/tippy.ts';
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
import {isDocumentFragmentOrElementNode, toggleClass} from '../utils/dom.ts';
import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg';
window.customElements.define('overflow-menu', class extends HTMLElement {
static observedAttributes = ['active'];
tippyContent: HTMLDivElement;
tippyItems: Array<HTMLElement>;
button: HTMLButtonElement;
@ -151,6 +153,10 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}, 0);
},
});
this.tippyContent.querySelector('.item').addEventListener('click', () => {
this.button._tippy.hide();
});
});
init() {
@ -218,6 +224,12 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}
}
attributeChangedCallback() {
if (!this.button || !this.tippyContent) return;
const containActiveInTippy = this.tippyContent.querySelector('.item.active');
toggleClass(this.button, 'active', Boolean(containActiveInTippy));
}
disconnectedCallback() {
this.mutationObserver?.disconnect();
this.resizeObserver?.disconnect();