Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-23 15:30:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

Adding toogles to the chips

Browse Source
This commit is contained in:
Zoe Roux 2020-09-16 00:17:25 +02:00
parent e4621bbdea
commit fad6bda758
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/components/items-grid/items-grid.component.html
View File

@ -1,6 +1,6 @@
<div class="container-fluid justify-content-center" *ngIf="this.sortEnabled"> <div class="container-fluid justify-content-center" *ngIf="this.sortEnabled">
<button mat-icon-button matTooltipPosition="below" matTooltip="Filter" [matMenuTriggerFor]="filterMenu"> <button mat-icon-button matTooltipPosition="below" matTooltip="Filter" [matMenuTriggerFor]="filterMenu">
<mat-icon [matBadge]="this.filters.length.toString()" [matBadgeHidden]="this.filters.length == 0" <mat-icon [matBadge]="getFilterCount().toString()" [matBadgeHidden]="getFilterCount() == 0"
matBadgeColor="warn" matBadgeSize="small"> matBadgeColor="warn" matBadgeSize="small">
filter_list filter_list
</mat-icon> </mat-icon>
@ -14,7 +14,14 @@
<mat-menu #filterMenu="matMenu"> <mat-menu #filterMenu="matMenu">
<mat-chip-list> <mat-chip-list>
<mat-chip *ngFor="let genre of this.genres">{{genre.name}}</mat-chip> <!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
<mat-chip *ngFor="let genre of this.genres"
[color]="this.filters.genres.includes(genre) ? 'accent' : 'default'" selected
(click)="this.filters.genres.includes(genre)
? this.filters.genres.pop(genre)
: this.filters.genres.push(genre)">
{{genre.name}}
</mat-chip>
</mat-chip-list> </mat-chip-list>
</mat-menu> </mat-menu>

9
src/app/components/items-grid/items-grid.component.ts
View File

@ -22,8 +22,8 @@ export class ItemsGridComponent
sortType: string = "title"; sortType: string = "title";
sortKeys: string[] = ["title", "start year", "end year"] sortKeys: string[] = ["title", "start year", "end year"]
sortUp: boolean = true; sortUp: boolean = true;
filters: string[] = []; filters: {genres: Genre[]} = {genres: []};
genres: Genre[]; genres: Genre[] = [];
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
@ -40,6 +40,11 @@ export class ItemsGridComponent
}); });
} }
getFilterCount()
{
return this.filters.genres.length;
}
getThumb(slug: string) getThumb(slug: string)
{ {
return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")"); return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");