smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-16 12:42:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(in-app-menu): fix in-app-menu tooltip position

Browse Source
This commit is contained in:
Su-Yong
2023-12-31 23:48:01 +09:00
parent 050d55c736
commit 222e78c85b
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/plugins/in-app-menu/menu/panel.ts
View File

@ -61,7 +61,18 @@ export const createPanel = (
if (item.toolTip) { if (item.toolTip) {
const menuTooltip = document.createElement('menu-item-tooltip'); const menuTooltip = document.createElement('menu-item-tooltip');
menuTooltip.append(item.toolTip); menuTooltip.append(item.toolTip);
menu.append(menuTooltip);
menu.addEventListener('mouseenter', () => {
const rect = menu.getBoundingClientRect();
menuTooltip.style.setProperty('max-width', `${rect.width - 8}px`);
menuTooltip.style.setProperty('--x', `${rect.left}px`);
menuTooltip.style.setProperty('--y', `${rect.top + rect.height}px`);
menuTooltip.classList.add('show');
});
menu.addEventListener('mouseleave', () => {
menuTooltip.classList.remove('show');
});
parent.append(menuTooltip);
} }
menu.addEventListener('click', async () => { menu.addEventListener('click', async () => {

10
src/plugins/in-app-menu/titlebar.css
View File

@ -152,10 +152,10 @@ menu-item-badge {
} }
menu-item-tooltip { menu-item-tooltip {
position: absolute; position: fixed;
left: 0; left: var(--x, 0);
top: calc(100% + 4px); top: var(--y, 0);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -176,9 +176,9 @@ menu-item-tooltip {
scale: 0.9; scale: 0.9;
transform-origin: 50% 0; transform-origin: 50% 0;
transition: all 0.225s ease-out; transition: opacity 0.225s ease-out, scale 0.225s ease-out;
} }
menu-item:hover > menu-item-tooltip { menu-item-tooltip.show {
opacity: 1; opacity: 1;
scale: 1.0; scale: 1.0;
} }