finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move settings button back to the right in repo and org header

Browse source 
This will move the settings button back to the right, like known from
older versions.
For this, the overflow-menu was changed when a setting button is
available. If no settings button is available, the behavior will not
change.

Fixes #3301
This commit is contained in:
Beowulf 2024-04-25 22:19:24 +02:00
parent d6c36ec406
commit f9628f883d
No known key found for this signature in database
GPG key ID: 44225F5F2792841D
4 changed files with 141 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -69,13 +69,35 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
this.tippyItems = [];
const menuRight = this.offsetLeft + this.offsetWidth;
const menuItems = this.menuItemsEl.querySelectorAll('.item');
const settingItem = this.menuItemsEl.querySelector('#settings-btn');
for (const item of menuItems) {
const itemRight = item.offsetLeft + item.offsetWidth;
if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button
// Width of the settings button plus a small value to get the next item to the left if there is directly one
// If no setting button is in the menu the default threshold is 38 - roughly the width of .overflow-menu-button
const overflowBtnThreshold = 38;
const threshold = settingItem?.offsetWidth ?? overflowBtnThreshold;
// If we have a settings item on the right-hand side, we must also check if the first,
// possibly overflowing item would still fit on the left-hand side of the overflow menu
// If not, it must be added to the array (twice). The duplicate is removed with the shift.
if (settingItem && !this.tippyItems?.length && item !== settingItem && menuRight - itemRight < overflowBtnThreshold) {
this.tippyItems.push(settingItem);
}
if (menuRight - itemRight < threshold) {
this.tippyItems.push(item);
}
}
// Special handling for settings button on right. Only done if a setting item is present
if (settingItem) {
// If less than 2 items overflow, remove all items (only settings "overflowed" - because it's on the right side)
if (this.tippyItems?.length < 2) {
this.tippyItems = [];
} else {
// Remove the first item of the list, because we have always one item more in the array due to the big threshold above
this.tippyItems.shift();
}
}
// if there are no overflown items, remove any previously created button
if (!this.tippyItems?.length) {
const btn = this.querySelector('.overflow-menu-button');