From 059b2718a5615c01b897283f6ae53c9702f11239 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 30 Apr 2024 12:26:13 +0800 Subject: [PATCH] Right align the "Settings" menu item in overflow-menu (#30764) 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](https://github.com/go-gitea/gitea/assets/2114189/92836527-2cb2-4531-9296-233c5bd698f4) ![image](https://github.com/go-gitea/gitea/assets/2114189/3a0729fc-5e33-44b5-9fb4-3a4e787405b5) ![image](https://github.com/go-gitea/gitea/assets/2114189/9845ab6b-88e3-4e5a-8d6d-2b8af259d593) --- templates/org/menu.tmpl | 3 ++- templates/repo/header.tmpl | 1 + web_src/css/base.css | 17 ++++++++++++ web_src/css/modules/container.css | 32 ----------------------- web_src/js/webcomponents/overflow-menu.js | 24 +++++++++++++---- 5 files changed, 39 insertions(+), 38 deletions(-) diff --git a/templates/org/menu.tmpl b/templates/org/menu.tmpl index c519606d1f63a..698a9559c5287 100644 --- a/templates/org/menu.tmpl +++ b/templates/org/menu.tmpl @@ -40,8 +40,9 @@ {{end}} {{if .IsOrganizationOwner}} + - {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} + {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} {{end}} diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 775aa300639f4..c0d833a187cd4 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -216,6 +216,7 @@ {{template "custom/extra_tabs" .}} {{if .Permission.IsAdmin}} + {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} diff --git a/web_src/css/base.css b/web_src/css/base.css index df9028b50aa59..1d65bb37e7c19 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -938,6 +938,23 @@ overflow-menu .overflow-menu-items .item { margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */ } +overflow-menu .overflow-menu-items .item-flex-space { + flex: 1; +} + +overflow-menu .overflow-menu-button { + background: transparent; + border: none; + color: inherit; + text-align: center; + width: 32px; + padding: 0; +} + +overflow-menu .overflow-menu-button:hover { + color: var(--color-text-dark); +} + overflow-menu .ui.label { margin-left: 7px !important; /* save some space */ } diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css index f394d6c06de5f..9f67ceb8d5e36 100644 --- a/web_src/css/modules/container.css +++ b/web_src/css/modules/container.css @@ -6,38 +6,6 @@ max-width: 100%; } -@media (max-width: 767.98px) { - .ui.ui.ui.container:not(.fluid) { - width: auto; - margin-left: 1em; - margin-right: 1em; - } -} - -@media (min-width: 768px) and (max-width: 991.98px) { - .ui.ui.ui.container:not(.fluid) { - width: 723px; - margin-left: auto; - margin-right: auto; - } -} - -@media (min-width: 992px) and (max-width: 1199.98px) { - .ui.ui.ui.container:not(.fluid) { - width: 933px; - margin-left: auto; - margin-right: auto; - } -} - -@media (min-width: 1200px) { - .ui.ui.ui.container:not(.fluid) { - width: 1127px; - margin-left: auto; - margin-right: auto; - } -} - .ui.fluid.container { width: 100%; } diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 604fce7d4bb4d..0778c5990feb7 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -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);