*ngFor="let playlist of videoPlaylists"
class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }"
>
- <div class="primary-row">
+ <div class="primary-row" (click)="toggleMainPlaylist($event, playlist)">
<my-peertube-checkbox
[disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)"
[ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true"
- (click)="toggleMainPlaylist($event, playlist)"
></my-peertube-checkbox>
- <label class="display-name" (click)="toggleMainPlaylist($event, playlist)">
+ <label class="display-name">
{{ playlist.displayName }}
</label>
- <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="toggleOptionalRow(playlist)">
+ <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="$event.stopPropagation(); toggleOptionalRow(playlist)">
<my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
</div>
</div>
<div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
- <div class="labels">
- <div i18n>Start at</div>
- <div i18n>Stop at</div>
- </div>
+ <div class="header-label" i18n>Start at</div>
+ <div class="header-label" i18n>Stop at</div>
- <div *ngFor="let element of buildOptionalRowElements(playlist)">
+ <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
<my-peertube-checkbox
[inputName]="getOptionalInputName(playlist, element)"
[ngModel]="element.enabled" [onPushWorkaround]="true"
(inputBlur)="onElementTimestampUpdate(playlist, element)"
#stopAt
></my-timestamp-input>
- </div>
+ </ng-container>
</div>
</div>
</div>