refactor(frontend): refactor frontend components code

This commit is contained in:
raiper34
2024-09-30 14:55:02 +02:00
parent 887ac2237a
commit 5a51dbd351
3 changed files with 9 additions and 5 deletions
@@ -17,12 +17,13 @@
</span> </span>
<span> <span>
<i class="fa-solid is-clickable hover-icon" <i class="fa-solid is-clickable hover-icon"
[ngClass]="playlist.active ? 'fa-lock' : 'fa-lock-open'" [ngClass]="playlist.active ? 'fa-lock-open' : 'fa-lock'"
[title]="playlist.active ? 'Subscribe to playlist changes' : 'Unsubscribe from playlist changes'" [title]="playlist.active ? 'Unsubscribe from playlist changes' : 'Subscribe to playlist changes'"
(click)="setActive(playlist.id, playlist.active)" (click)="toggleActive(playlist.id, playlist.active)"
></i>&nbsp; ></i>&nbsp;
<i class="fa-solid fa-repeat is-clickable hover-icon" title="Retry download failed tracks" (click)="retryFailed(playlist.id)"></i>&nbsp; <i class="fa-solid fa-repeat is-clickable hover-icon" title="Retry download failed tracks" (click)="retryFailed(playlist.id)"></i>&nbsp;
<i class="fa-solid fa-xmark is-clickable hover-icon" title="Remove playlist from list" (click)="delete(playlist.id)"></i>&nbsp; <i class="fa-solid fa-xmark is-clickable hover-icon" title="Remove playlist from list" (click)="delete(playlist.id)"></i>&nbsp;
<i *ngIf="playlist.active" class="fa-solid fa-lock hover-icon-reversed"></i>&nbsp;
<span *ngIf="!playlist.error" class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>&nbsp; <span *ngIf="!playlist.error" class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>&nbsp;
</span> </span>
</p> </p>
@@ -9,6 +9,10 @@
&:hover .hover-icon { &:hover .hover-icon {
display: inline; display: inline;
} }
&:hover .hover-icon-reversed {
display: none;
}
} }
.panel { .panel {
@@ -46,7 +46,6 @@ export class PlaylistBoxComponent {
constructor(private readonly service: PlaylistService) { } constructor(private readonly service: PlaylistService) { }
toggleCollapse(playlistId: number): void { toggleCollapse(playlistId: number): void {
this.service.toggleCollapsed(playlistId); this.service.toggleCollapsed(playlistId);
} }
@@ -59,7 +58,7 @@ export class PlaylistBoxComponent {
this.service.retryFailed(id); this.service.retryFailed(id);
} }
setActive(id: number, currentActive: boolean = false): void { toggleActive(id: number, currentActive: boolean): void {
this.service.setActive(id, !currentActive) this.service.setActive(id, !currentActive)
} }
} }