nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Right align the "Settings" menu item in overflow-menu (#30764)

Browse source 
I guess there could be enough people liking to make the Settings menu
item right aligned. As a site admin, I found it's easier to find the
right-aligned Settings menu item.

Tested with various sizes:

![image](92836527-2cb2-4531-9296-233c5bd698f4)

![image](3a0729fc-5e33-44b5-9fb4-3a4e787405b5)

![image](9845ab6b-88e3-4e5a-8d6d-2b8af259d593)
This commit is contained in:
wxiaoguang 2024-04-30 12:26:13 +08:00 • committed by GitHub
parent 7ad5031328
commit 059b2718a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 39 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web_src/js/webcomponents/overflow-menu.js
View file

@ -8,7 +8,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
if (!this.tippyContent) {
const div = document.createElement('div');
div.classList.add('tippy-target');
div.tabIndex = '-1'; // for initial focus, programmatic focus only
div.tabIndex = -1; // for initial focus, programmatic focus only
div.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
const items = this.tippyContent.querySelectorAll('[role="menuitem"]');
@ -60,21 +60,35 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
this.tippyContent = div;
}
const itemFlexSpace = this.menuItemsEl.querySelector('.item-flex-space');
// move items in tippy back into the menu items for subsequent measurement
for (const item of this.tippyItems || []) {
this.menuItemsEl.append(item);
if (!itemFlexSpace || item.getAttribute('data-after-flex-space')) {
this.menuItemsEl.append(item);
} else {
itemFlexSpace.insertAdjacentElement('beforebegin', item);
}
}
// measure which items are partially outside the element and move them into the button menu
itemFlexSpace?.style.setProperty('display', 'none', 'important');
this.tippyItems = [];
const menuRight = this.offsetLeft + this.offsetWidth;
const menuItems = this.menuItemsEl.querySelectorAll('.item');
const menuItems = this.menuItemsEl.querySelectorAll('.item, .item-flex-space');
let afterFlexSpace = false;
for (const item of menuItems) {
if (item.classList.contains('item-flex-space')) {
afterFlexSpace = true;
continue;
}
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
if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button with some extra space
this.tippyItems.push(item);
}
}
itemFlexSpace?.style.removeProperty('display');
// if there are no overflown items, remove any previously created button
if (!this.tippyItems?.length) {
@ -105,7 +119,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
// create button initially
const btn = document.createElement('button');
btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
btn.classList.add('overflow-menu-button');
btn.setAttribute('aria-label', window.config.i18n.more_items);
btn.innerHTML = octiconKebabHorizontal;
this.append(btn);