refactor(frontend): refactor frontend components code
This commit is contained in:
@@ -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>
|
></i>
|
||||||
<i class="fa-solid fa-repeat is-clickable hover-icon" title="Retry download failed tracks" (click)="retryFailed(playlist.id)"></i>
|
<i class="fa-solid fa-repeat is-clickable hover-icon" title="Retry download failed tracks" (click)="retryFailed(playlist.id)"></i>
|
||||||
<i class="fa-solid fa-xmark is-clickable hover-icon" title="Remove playlist from list" (click)="delete(playlist.id)"></i>
|
<i class="fa-solid fa-xmark is-clickable hover-icon" title="Remove playlist from list" (click)="delete(playlist.id)"></i>
|
||||||
|
<i *ngIf="playlist.active" class="fa-solid fa-lock hover-icon-reversed"></i>
|
||||||
<span *ngIf="!playlist.error" class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>
|
<span *ngIf="!playlist.error" class="is-size-6 has-text-weight-medium">{{trackCompletedCount$ | async}}/{{trackCount$ | async}}</span>
|
||||||
</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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user