feat(menu-lecteur): refonte UI/UX professionnelle du menu FAB
CI / build-and-test (push) Successful in 14m57s
CI / build-and-test (push) Successful in 14m57s
- FAB : pastille verre depoli 40px + icone sliders (standard options) - Panneau : en-tete (titre + fermer), verre depoli, ombre profonde, coins arrondis - Animations ouverture/fermeture (fondu + slide + scale), fermeture Echap + clic exterieur - Items : hover/active/focus, icones teintees, sections + separateurs raffinés - Playlist : modale rendue HORS du panneau (backdrop-filter piegeait position:fixed)
This commit is contained in:
@@ -15,6 +15,7 @@ import { forkJoin } from 'rxjs';
|
||||
<div [class]="menuItem ? 'relative w-full text-left' : 'relative inline-block text-left'" (click)="$event.stopPropagation();">
|
||||
<button (click)="toggleOpen($event)"
|
||||
[disabled]="!isAuthenticated()"
|
||||
[style.display]="triggerHidden ? 'none' : ''"
|
||||
[class]="menuItem ? 'pm-item' : 'flex items-center space-x-2 bg-slate-700 hover:bg-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 disabled:opacity-60 disabled:cursor-not-allowed px-4 py-2 rounded-full transition text-slate-200 font-semibold'"
|
||||
[attr.aria-expanded]="open()"
|
||||
[attr.aria-haspopup]="true"
|
||||
@@ -121,6 +122,8 @@ export class AddToPlaylistComponent implements OnInit, OnDestroy {
|
||||
@Input() thumbnail?: string;
|
||||
/** Rendu « élément de menu » (menu FAB du lecteur) : plein largeur, icon + label. */
|
||||
@Input() menuItem = false;
|
||||
/** Masque le bouton déclencheur (déclenchement externe via `open()`). */
|
||||
@Input() triggerHidden = false;
|
||||
|
||||
open = signal<boolean>(false);
|
||||
loading = signal<boolean>(false);
|
||||
@@ -155,6 +158,15 @@ export class AddToPlaylistComponent implements OnInit, OnDestroy {
|
||||
this.selected.set(new Set());
|
||||
}
|
||||
|
||||
/** Ouvre la boîte de dialogue (déclenchement externe, ex. menu FAB). */
|
||||
openDialog(): void {
|
||||
if (!this.isAuthenticated()) return;
|
||||
this.open.set(true);
|
||||
if (this.playlists().length === 0 && !this.loading()) {
|
||||
this.reloadPlaylists();
|
||||
}
|
||||
}
|
||||
|
||||
reloadPlaylists(): void {
|
||||
this.loading.set(true);
|
||||
this.error.set(null);
|
||||
|
||||
Reference in New Issue
Block a user