boutons 'tout (dé)sélectionner' pour les pages popularity

This commit is contained in:
MiharyR 2021-12-16 19:10:09 +01:00
parent ad0397e8ad
commit dab2748079
4 changed files with 26 additions and 6 deletions

View file

@ -10,13 +10,13 @@
<!-- Filter --> <!-- Filter -->
<div class="filtersContainer mat-elevation-z8"> <div class="filtersContainer mat-elevation-z8">
<div style="font-weight: bold">Filtre</div> <div style="font-weight: bold;">Filtre</div>
<mat-divider></mat-divider><br> <mat-divider></mat-divider><br>
<div *ngIf="true; then colPeriode"></div> <div *ngIf="true; then colPeriode"></div>
<br><mat-divider></mat-divider><br> <br><mat-divider style="width: 60%"></mat-divider><br>
<div style="text-align: right; font-size: small;"> <div style="text-align: right; font-size: small;">
<button mat-button (click)="onApplyFilter()" style="font-size: small">Appliquer</button> <button mat-button (click)="onApplyFilter()" style="font-size: small">Appliquer</button>
@ -76,10 +76,11 @@
<mat-option value="semaine">semaine</mat-option> <mat-option value="semaine">semaine</mat-option>
<mat-option value="mois">mois</mat-option> <mat-option value="mois">mois</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field><br>
<!-- ads --> <!-- ads -->
<mat-select [formControl]="formControl" multiple style="padding-top: 10px;"> <mat-select [formControl]="formControl" multiple style="padding-top: 10px; width: 60%;">
<mat-select-trigger> <mat-select-trigger>
<span *ngIf="formControl.value?.length > 0"> <span *ngIf="formControl.value?.length > 0">
<span *ngFor="let coupleNameViews of formControl.value"> {{coupleNameViews.name}}, </span> <span *ngFor="let coupleNameViews of formControl.value"> {{coupleNameViews.name}}, </span>
@ -87,5 +88,7 @@
</mat-select-trigger> </mat-select-trigger>
<mat-option *ngFor="let coupleNameViews of allCoupleNameViews" [value]="coupleNameViews">{{coupleNameViews.name}}</mat-option> <mat-option *ngFor="let coupleNameViews of allCoupleNameViews" [value]="coupleNameViews">{{coupleNameViews.name}}</mat-option>
</mat-select> </mat-select>
<button mat-button class="btnToutSelectionner" (click)="onSelectAll()">Tout sélectionner</button>
<button mat-button class="btnToutDeselectionner" (click)="onDeSelectAll()">Tout désélectionner</button>
</ng-template> </ng-template>

View file

@ -39,6 +39,12 @@ input {
font-weight: bold; font-weight: bold;
} }
.btnToutSelectionner {
font-size: small;
}
.btnToutDeselectionner {
font-size: small;
}
// ------------------------------------------------------------------------- // -------------------------------------------------------------------------

View file

@ -294,4 +294,15 @@ export class PagesPopularityComponent implements OnInit
return tabDate; return tabDate;
} }
onSelectAll(): void
{
this.formControl = new FormControl(this.allCoupleNameViews);
}
onDeSelectAll(): void
{
this.formControl = new FormControl([]);
}
} }

View file

@ -138,11 +138,11 @@ export class PageWatchingVideoComponent implements OnInit
// style // style
if(this.from === 'search' || this.from === 'history') { if(this.from === 'search' || this.from === 'history') {
this.containerStyle = "margin: 0 auto; width: 64vw;" this.containerStyle = "margin: 0 auto; width: 64vw;" ;
this.iframeStyle = "width: 64vw; height: 60vh;" ; this.iframeStyle = "width: 64vw; height: 60vh;" ;
} }
else { else {
this.containerStyle = "margin: 0 auto; width: 48vw;" this.containerStyle = "margin: 0 auto; width: 48vw;" ;
this.iframeStyle = "width: 48vw; height: 45vh;" ; this.iframeStyle = "width: 48vw; height: 45vh;" ;
} }
} }