This commit is contained in:
Kerwin Bryant 2025-04-12 08:17:58 +00:00
parent 8bab94aacb
commit be93e1597a
2 changed files with 10 additions and 15 deletions

View File

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

View File

@ -4,8 +4,6 @@ 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;
@ -104,7 +102,16 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
const itemRight = item.offsetLeft + item.offsetWidth;
if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button with some extra space
this.tippyItems.push(item);
// close tippy when clicking item of tippy
item.addEventListener('click', () => {
this.button?._tippy.hide();
});
}
// refresh overflow-button active state
item.addEventListener('click', () => {
this.updateButtonActivationState();
});
}
itemFlexSpace?.style.removeProperty('display');
itemOverFlowMenuButton?.style.removeProperty('display');
@ -130,14 +137,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
this.tippyContent.append(item);
}
// close tippy when clicking item of tippy
const items = this.tippyContent.querySelectorAll<HTMLElement>('.item');
for (const item of items) {
item.addEventListener('click', () => {
this.button?._tippy.hide();
});
}
// update existing tippy
if (this.button?._tippy) {
this.button._tippy.setContent(this.tippyContent);
@ -235,10 +234,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}
}
attributeChangedCallback() {
this.updateButtonActivationState();
}
disconnectedCallback() {
this.mutationObserver?.disconnect();
this.resizeObserver?.disconnect();