From f3fa4dd1c2061d9d718ca58bb910b74b11a49e4c Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Sat, 12 Apr 2025 00:56:56 +0000
Subject: [PATCH] Optimized the overflow-menu: 1. Close the tippy when a menu
item inside the tippy is clicked. 2. When a menu item inside the tippy is
selected, move the active state of the menu to the tippy's button.
---
web_src/css/base.css | 8 ++++++++
web_src/js/components/DashboardRepoList.vue | 2 +-
web_src/js/webcomponents/overflow-menu.ts | 14 +++++++++++++-
3 files changed, 22 insertions(+), 2 deletions(-)
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 37ee7f5832..a4fc94ad2e 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -747,6 +747,14 @@ overflow-menu .overflow-menu-button {
padding: 0;
}
+overflow-menu .overflow-menu-button.active {
+ margin: 0 0 -2px;
+ border-bottom: 2px solid transparent;
+ background-color: transparent;
+ border-color: currentcolor;
+ font-weight: var(--font-weight-medium);
+}
+
overflow-menu .overflow-menu-button:hover {
color: var(--color-text-dark);
}
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index fc6a7bd281..bbe226ee6e 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -391,7 +391,7 @@ export default defineComponent({
</div>
</div>
</div>
- <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
+ <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter" :active="reposFilter">
<div class="overflow-menu-items tw-justify-center">
<a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
{{ textAll }}
diff --git a/web_src/js/webcomponents/overflow-menu.ts b/web_src/js/webcomponents/overflow-menu.ts
index 4e729a268a..cfcd3e3a4f 100644
--- a/web_src/js/webcomponents/overflow-menu.ts
+++ b/web_src/js/webcomponents/overflow-menu.ts
@@ -1,9 +1,11 @@
import {throttle} from 'throttle-debounce';
import {createTippy} from '../modules/tippy.ts';
-import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
+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;
@@ -151,6 +153,10 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}, 0);
},
});
+
+ this.tippyContent.querySelector('.item').addEventListener('click', () => {
+ this.button._tippy.hide();
+ });
});
init() {
@@ -218,6 +224,12 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
}
}
+ attributeChangedCallback() {
+ if (!this.button || !this.tippyContent) return;
+ const containActiveInTippy = this.tippyContent.querySelector('.item.active');
+ toggleClass(this.button, 'active', Boolean(containActiveInTippy));
+ }
+
disconnectedCallback() {
this.mutationObserver?.disconnect();
this.resizeObserver?.disconnect();