feat(quick-12): add favorite icon to album dropdown track rows
- Add FavoritesController and classMap imports - Add .fav-icon CSS with compact sizing (18px/11px) for dropdown context - Insert heart/star icon between track number and title - Click toggles favorite with stopPropagation to avoid track selection
This commit is contained in:
@@ -1,7 +1,9 @@
|
|||||||
import { LitElement, html, css } from 'lit';
|
import { LitElement, html, css } from 'lit';
|
||||||
import { customElement, property } from 'lit/decorators.js';
|
import { customElement, property } from 'lit/decorators.js';
|
||||||
|
import { classMap } from 'lit/directives/class-map.js';
|
||||||
import type { library } from '@go/models';
|
import type { library } from '@go/models';
|
||||||
import { PlayerController } from '@store/controllers/player-controller';
|
import { PlayerController } from '@store/controllers/player-controller';
|
||||||
|
import { FavoritesController } from '@store/controllers/favorites-controller';
|
||||||
import { formatMilliseconds } from '@utils/time';
|
import { formatMilliseconds } from '@utils/time';
|
||||||
|
|
||||||
/** Detail payload for the track-click custom event. */
|
/** Detail payload for the track-click custom event. */
|
||||||
@@ -42,6 +44,7 @@ export interface TrackDragStartDetail {
|
|||||||
@customElement('album-dropdown')
|
@customElement('album-dropdown')
|
||||||
export class AlbumDropdown extends LitElement {
|
export class AlbumDropdown extends LitElement {
|
||||||
private player = new PlayerController(this);
|
private player = new PlayerController(this);
|
||||||
|
private favCtrl = new FavoritesController(this);
|
||||||
|
|
||||||
@property({ attribute: false })
|
@property({ attribute: false })
|
||||||
tracks: library.Track[] = [];
|
tracks: library.Track[] = [];
|
||||||
@@ -157,6 +160,28 @@ export class AlbumDropdown extends LitElement {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fav-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 18px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--yj-text-tertiary, #666);
|
||||||
|
font-size: 11px;
|
||||||
|
transition: color 0.1s ease;
|
||||||
|
}
|
||||||
|
.fav-icon:hover {
|
||||||
|
color: var(--yj-text-primary, #fff);
|
||||||
|
}
|
||||||
|
.fav-icon.favorited {
|
||||||
|
color: var(--yj-accent, #ffd43b);
|
||||||
|
}
|
||||||
|
.fav-icon.favorited:hover {
|
||||||
|
color: var(--yj-accent, #ffd43b);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/* ================================================================
|
/* ================================================================
|
||||||
@@ -325,6 +350,8 @@ export class AlbumDropdown extends LitElement {
|
|||||||
const selected = this.selectedTracks.has(
|
const selected = this.selectedTracks.has(
|
||||||
track.FilePath,
|
track.FilePath,
|
||||||
);
|
);
|
||||||
|
const isFav = this.favCtrl.isFavorited(track.FilePath);
|
||||||
|
const favVariant = isFav ? 'solid' : 'regular';
|
||||||
|
|
||||||
const classes = [
|
const classes = [
|
||||||
'track-row',
|
'track-row',
|
||||||
@@ -364,6 +391,18 @@ export class AlbumDropdown extends LitElement {
|
|||||||
<span class="track-number">
|
<span class="track-number">
|
||||||
${displayNumber}
|
${displayNumber}
|
||||||
</span>
|
</span>
|
||||||
|
<div
|
||||||
|
class=${classMap({ 'fav-icon': true, favorited: isFav })}
|
||||||
|
@click=${(e: MouseEvent) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
void this.favCtrl.toggleFavorite(track.FilePath);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<wa-icon
|
||||||
|
name=${this.favCtrl.iconName}
|
||||||
|
variant=${favVariant}
|
||||||
|
></wa-icon>
|
||||||
|
</div>
|
||||||
<span
|
<span
|
||||||
class="track-title"
|
class="track-title"
|
||||||
title="${track.TrackName}"
|
title="${track.TrackName}"
|
||||||
|
|||||||
Reference in New Issue
Block a user