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

fix overflow bug

Browse Source
This commit is contained in:
wxiaoguang 2025-04-12 18:24:34 +08:00
parent 24bcb4997e
commit dfc139130e
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import {throttle} from 'throttle-debounce';
import {createTippy} from '../modules/tippy.ts';
import {addDelegatedEventListener, isDocumentFragmentOrElementNode, toggleClass} from '../utils/dom.ts';
import {addDelegatedEventListener, isDocumentFragmentOrElementNode} from '../utils/dom.ts';
import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg';
window.customElements.define('overflow-menu', class extends HTMLElement {
@ -14,7 +14,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
updateButtonActivationState() {
if (!this.button || !this.tippyContent) return;
toggleClass(this.button, 'active', Boolean(this.tippyContent.querySelector('.item.active')));
this.button.classList.toggle('active', Boolean(this.tippyContent.querySelector('.item.active')));
}
updateItems = throttle(100, () => {
@ -71,7 +71,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
div.classList.add('tippy-target');
this.handleItemClick(div, '.tippy-target > .item');
this.tippyContent = div;
}
} // end if: no tippyContent and create a new one
const itemFlexSpace = this.menuItemsEl.querySelector<HTMLSpanElement>('.item-flex-space');
const itemOverFlowMenuButton = this.querySelector<HTMLButtonElement>('.overflow-menu-button');
@ -93,7 +93,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
const menuRight = this.offsetLeft + this.offsetWidth;
const menuItems = this.menuItemsEl.querySelectorAll<HTMLElement>('.item, .item-flex-space');
let afterFlexSpace = false;
for (const item of menuItems) {
for (const [idx, item] of menuItems.entries()) {
if (item.classList.contains('item-flex-space')) {
afterFlexSpace = true;
continue;
@ -101,7 +101,10 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
if (afterFlexSpace) item.setAttribute('data-after-flex-space', 'true');
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);
const onlyLastItem = idx === menuItems.length - 1 && this.tippyItems.length === 0;
const lastItemFit = onlyLastItem && menuRight - itemRight > 0;
const moveToPopup = !onlyLastItem || !lastItemFit;
if (moveToPopup) this.tippyItems.push(item);
}
}
itemFlexSpace?.style.removeProperty('display');
@ -199,7 +202,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
handleItemClick(el: Element, selector: string) {
addDelegatedEventListener(el, 'click', selector, () => {
this.button?._tippy.hide();
this.button?._tippy?.hide();
this.updateButtonActivationState();
});
}