yonlu/yellowjacket
1
1
Fork 0
Code Issues 48 Pull Requests Actions Packages Projects Releases 12 Wiki Activity

context submenus now close when not hovering over

Browse Source
This commit is contained in:
yonlu
2026-02-23 10:47:32 -05:00
parent 90b7661483
commit a08d59a4a0
5 changed files with 250 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/artists-view/artists-view.ts
+52 -12
View File
@@ -78,6 +78,10 @@ export class ArtistsView extends LitElement {
@query('#playlist-submenu')
private playlistSubmenuPopup!: HTMLElement;
private submenuCloseTimer: ReturnType<
typeof setTimeout
> | null = null;
// ----- Close handlers -----
private closeHandler = () =>
@@ -695,7 +699,24 @@ export class ArtistsView extends LitElement {
* Playlist submenu
* ================================================================ */
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;
const artist = this.contextMenuArtist;
@@ -729,6 +750,8 @@ export class ArtistsView extends LitElement {
}
private closePlaylistSubmenu() {
this.clearSubmenuCloseTimer();
if (!this.playlistSubmenuOpen) return;
this.playlistSubmenuOpen = false;
@@ -868,6 +891,8 @@ export class ArtistsView extends LitElement {
this.onContextMenuAction(
'play',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -880,6 +905,8 @@ export class ArtistsView extends LitElement {
this.onContextMenuAction(
'add-to-queue',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -892,6 +919,8 @@ export class ArtistsView extends LitElement {
this.onContextMenuAction(
'play-next',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -901,8 +930,12 @@ export class ArtistsView extends LitElement {
</wa-dropdown-item>
<wa-dropdown-item
class="submenu-item"
@mouseenter=${() =>
this.showPlaylistSubmenu()}
@mouseenter=${() => {
this.clearSubmenuCloseTimer();
void this.showPlaylistSubmenu();
}}
@mouseleave=${this
.scheduleSubmenuClose}
@click=${(
e: Event,
) => {
@@ -935,16 +968,23 @@ export class ArtistsView extends LitElement {
>
${this.playlistSubmenuOpen
? html`
<playlist-picker
.filePaths=${this
.playlistFilePaths}
@playlist-action-complete=${this
.onPlaylistActionComplete}
@click=${(
e: Event,
) =>
e.stopPropagation()}
></playlist-picker>
<div
@mouseenter=${() =>
this.clearSubmenuCloseTimer()}
@mouseleave=${this
.scheduleSubmenuClose}
>
<playlist-picker
.filePaths=${this
.playlistFilePaths}
@playlist-action-complete=${this
.onPlaylistActionComplete}
@click=${(
e: Event,
) =>
e.stopPropagation()}
></playlist-picker>
</div>
`
: nothing}
</wa-popup>
frontend/src/components/cover-grid/cover-grid.ts
+51 -7
View File
@@ -158,6 +158,10 @@ export class CoverGrid extends LitElement {
typeof setTimeout
> | null = null;
private submenuCloseTimer: ReturnType<
typeof setTimeout
> | null = null;
private closeHandler = () => this.closeContextMenu();
private mousedownCloseHandler = (
@@ -3139,7 +3143,24 @@ export class CoverGrid extends LitElement {
}
}
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;
if (this.contextMenuTarget.kind === 'track') {
@@ -3174,6 +3195,8 @@ export class CoverGrid extends LitElement {
}
private closePlaylistSubmenu() {
this.clearSubmenuCloseTimer();
if (!this.playlistSubmenuOpen) return;
this.playlistSubmenuOpen = false;
@@ -3548,6 +3571,8 @@ export class CoverGrid extends LitElement {
this.onContextMenuAction(
'play',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -3560,6 +3585,8 @@ export class CoverGrid extends LitElement {
this.onContextMenuAction(
'add-to-queue',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -3572,6 +3599,8 @@ export class CoverGrid extends LitElement {
this.onContextMenuAction(
'play-next',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -3581,8 +3610,12 @@ export class CoverGrid extends LitElement {
</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();
@@ -3609,6 +3642,8 @@ export class CoverGrid extends LitElement {
this.onContextMenuAction(
'track-details',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -3633,12 +3668,21 @@ export class CoverGrid extends LitElement {
>
${this.playlistSubmenuOpen
? html`
<playlist-picker
.filePaths=${this.playlistFilePaths}
@playlist-action-complete=${this.onPlaylistActionComplete}
@click=${(e: Event) =>
<div
@mouseenter=${() =>
this.clearSubmenuCloseTimer()}
@mouseleave=${this
.scheduleSubmenuClose}
>
<playlist-picker
.filePaths=${this
.playlistFilePaths}
@playlist-action-complete=${this
.onPlaylistActionComplete}
@click=${(e: Event) =>
e.stopPropagation()}
></playlist-picker>
></playlist-picker>
</div>
`
: nothing}
</wa-popup>
frontend/src/components/playlist-view/playlist-view.ts
+53 -9
View File
@@ -198,6 +198,10 @@ export class PlaylistView
@query('track-details')
private trackDetailsDialog!: TrackDetails;
private submenuCloseTimer: ReturnType<
typeof setTimeout
> | null = null;
private closeContextMenuHandler = () => {
this.closeContextMenu();
this.closePlaylistContextMenu();
@@ -1464,7 +1468,24 @@ export class PlaylistView
}
}
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;
@@ -1490,6 +1511,8 @@ export class PlaylistView
}
private closePlaylistSubmenu() {
this.clearSubmenuCloseTimer();
if (!this.playlistSubmenuOpen) return;
this.playlistSubmenuOpen = false;
@@ -1841,6 +1864,8 @@ export class PlaylistView
this.onContextMenuAction(
'play',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1853,6 +1878,8 @@ export class PlaylistView
this.onContextMenuAction(
'add-to-queue',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1865,6 +1892,8 @@ export class PlaylistView
this.onContextMenuAction(
'play-next',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1877,6 +1906,8 @@ export class PlaylistView
this.onContextMenuAction(
'remove',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1886,8 +1917,12 @@ export class PlaylistView
</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();
@@ -1912,6 +1947,8 @@ export class PlaylistView
this.onContextMenuAction(
'track-details',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1937,13 +1974,20 @@ export class PlaylistView
${this.playlistSubmenuOpen &&
this.selection.hasSelection
? html`
<playlist-picker
.filePaths=${this.getSelectedFilePaths()}
@playlist-action-complete=${this
.onPlaylistActionComplete}
@click=${(e: Event) =>
e.stopPropagation()}
></playlist-picker>
<div
@mouseenter=${() =>
this.clearSubmenuCloseTimer()}
@mouseleave=${this
.scheduleSubmenuClose}
>
<playlist-picker
.filePaths=${this.getSelectedFilePaths()}
@playlist-action-complete=${this
.onPlaylistActionComplete}
@click=${(e: Event) =>
e.stopPropagation()}
></playlist-picker>
</div>
`
: nothing}
</wa-popup>
frontend/src/components/queue-panel/queue-panel.ts
+50 -10
View File
@@ -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>
frontend/src/components/track-list/track-list.ts
+44 -6
View File
@@ -104,6 +104,10 @@ export class TrackList extends LitElement implements SelectionHost {
private lastActiveTrackPath: string | null = null;
private submenuCloseTimer: ReturnType<
typeof setTimeout
> | null = null;
private closeHandler = () => this.closeContextMenu();
private mousedownCloseHandler = (
@@ -1248,7 +1252,24 @@ export class TrackList extends LitElement implements SelectionHost {
}
}
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;
@@ -1271,6 +1292,8 @@ export class TrackList extends LitElement implements SelectionHost {
}
private closePlaylistSubmenu() {
this.clearSubmenuCloseTimer();
if (!this.playlistSubmenuOpen) return;
this.playlistSubmenuOpen = false;
@@ -1672,25 +1695,32 @@ export class TrackList extends LitElement implements SelectionHost {
<div class="context-menu-panel">
<wa-dropdown-item
@click=${() => this.onContextMenuAction('play')}
@mouseenter=${() => this.closePlaylistSubmenu()}
>
<wa-icon slot="icon" name="play"></wa-icon>
Play
</wa-dropdown-item>
<wa-dropdown-item
@click=${() => this.onContextMenuAction('add-to-queue')}
@mouseenter=${() => this.closePlaylistSubmenu()}
>
<wa-icon slot="icon" name="plus"></wa-icon>
Add to Queue
</wa-dropdown-item>
<wa-dropdown-item
@click=${() => this.onContextMenuAction('play-next')}
@mouseenter=${() => this.closePlaylistSubmenu()}
>
<wa-icon slot="icon" name="forward-step"></wa-icon>
Play Next
</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();
@@ -1707,6 +1737,8 @@ export class TrackList extends LitElement implements SelectionHost {
this.onContextMenuAction(
'track-details',
)}
@mouseenter=${() =>
this.closePlaylistSubmenu()}
>
<wa-icon
slot="icon"
@@ -1730,11 +1762,17 @@ export class TrackList extends LitElement implements SelectionHost {
>
${this.playlistSubmenuOpen && this.selection.hasSelection
? html`
<playlist-picker
.filePaths=${this.selection.getSelectedKeysOrdered()}
@playlist-action-complete=${this.onPlaylistActionComplete}
@click=${(e: Event) => e.stopPropagation()}
></playlist-picker>
<div
@mouseenter=${() =>
this.clearSubmenuCloseTimer()}
@mouseleave=${this.scheduleSubmenuClose}
>
<playlist-picker
.filePaths=${this.selection.getSelectedKeysOrdered()}
@playlist-action-complete=${this.onPlaylistActionComplete}
@click=${(e: Event) => e.stopPropagation()}
></playlist-picker>
</div>
`
: nothing}
</wa-popup>