interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve playlist add dropdown ux

This commit is contained in:
Chocobozzz 2020-11-20 14:32:57 +01:00
parent 8b57efbf1b
commit 07098c33df
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
View File

@ -14,18 +14,17 @@
*ngFor="let playlist of videoPlaylists" *ngFor="let playlist of videoPlaylists"
class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }" 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 <my-peertube-checkbox
[disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)" [disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)"
[ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true" [ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true"
(click)="toggleMainPlaylist($event, playlist)"
></my-peertube-checkbox> ></my-peertube-checkbox>
<label class="display-name" (click)="toggleMainPlaylist($event, playlist)"> <label class="display-name">
{{ playlist.displayName }} {{ playlist.displayName }}
</label> </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> <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
</div> </div>
</div> </div>

8
client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
View File

@ -37,7 +37,15 @@ $timestamp-margin-right: 10px;
} }
.playlist { .playlist {
padding: 0;
> .primary-row {
padding: 8px 10px 8px 24px; padding: 8px 10px 8px 24px;
}
> .optional-rows {
padding-left: 24px;
}
&.has-optional-row:hover { &.has-optional-row:hover {
background-color: inherit; background-color: inherit;