context submenus now close when not hovering over

This commit is contained in:
2026-02-23 10:47:32 -05:00
parent 90b7661483
commit a08d59a4a0
5 changed files with 250 additions and 44 deletions
@@ -103,6 +103,10 @@ export class QueuePanel
}
};
private submenuCloseTimer: ReturnType<
typeof setTimeout
> | null = null;
private closeContextMenuHandler = () =>
this.closeContextMenu();
@@ -772,7 +776,24 @@ export class QueuePanel
}
}
private clearSubmenuCloseTimer() {
if (this.submenuCloseTimer !== null) {
clearTimeout(this.submenuCloseTimer);
this.submenuCloseTimer = null;
}
}
private scheduleSubmenuClose = () => {
this.clearSubmenuCloseTimer();
this.submenuCloseTimer = setTimeout(() => {
this.submenuCloseTimer = null;
this.closePlaylistSubmenu();
}, 150);
};
private async showPlaylistSubmenu() {
this.clearSubmenuCloseTimer();
if (this.playlistSubmenuOpen) return;
this.playlistSubmenuOpen = true;
@@ -796,6 +817,8 @@ export class QueuePanel
}
private closePlaylistSubmenu() {
this.clearSubmenuCloseTimer();
if (!this.playlistSubmenuOpen) return;
this.playlistSubmenuOpen = false;
@@ -1417,6 +1440,8 @@ export class QueuePanel
this.onContextMenuAction(
'play',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1429,6 +1454,8 @@ export class QueuePanel
this.onContextMenuAction(
'remove',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1438,8 +1465,12 @@ export class QueuePanel
</wa-dropdown-item>
<wa-dropdown-item
class="submenu-item"
@mouseenter=${() =>
this.showPlaylistSubmenu()}
@mouseenter=${() => {
this.clearSubmenuCloseTimer();
void this.showPlaylistSubmenu();
}}
@mouseleave=${this
.scheduleSubmenuClose}
@click=${(e: Event) => {
e.stopPropagation();
void this.showPlaylistSubmenu();
@@ -1464,6 +1495,8 @@ export class QueuePanel
this.onContextMenuAction(
'track-details',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1489,14 +1522,21 @@ export class QueuePanel
${this.playlistSubmenuOpen &&
this.selection.hasSelection
? html`
<playlist-picker
id="context-playlist-picker"
.filePaths=${this.getSelectedFilePaths()}
@playlist-action-complete=${this
.onContextPlaylistActionComplete}
@click=${(e: Event) =>
e.stopPropagation()}
></playlist-picker>
<div
@mouseenter=${() =>
this.clearSubmenuCloseTimer()}
@mouseleave=${this
.scheduleSubmenuClose}
>
<playlist-picker
id="context-playlist-picker"
.filePaths=${this.getSelectedFilePaths()}
@playlist-action-complete=${this
.onContextPlaylistActionComplete}
@click=${(e: Event) =>
e.stopPropagation()}
></playlist-picker>
</div>
`
: nothing}
</wa-popup>