aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-11-20 14:32:57 +0100
committerChocobozzz <me@florianbigard.com>2020-11-20 14:32:57 +0100
commit07098c33df3f5e00c2a150d3025abb779d0edb6c (patch)
treeecd10088a17164e04c4bf0b8b1286172e2327f42
parent8b57efbf1ba121cfd2e4ce326bf87ef887b2e80d (diff)
downloadPeerTube-07098c33df3f5e00c2a150d3025abb779d0edb6c.tar.gz
PeerTube-07098c33df3f5e00c2a150d3025abb779d0edb6c.tar.zst
PeerTube-07098c33df3f5e00c2a150d3025abb779d0edb6c.zip
Improve playlist add dropdown ux
-rw-r--r--client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html7
-rw-r--r--client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss10
2 files changed, 12 insertions, 5 deletions
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index 37d5017cf..bd5d37196 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -14,18 +14,17 @@
14 *ngFor="let playlist of videoPlaylists" 14 *ngFor="let playlist of videoPlaylists"
15 class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }" 15 class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }"
16 > 16 >
17 <div class="primary-row"> 17 <div class="primary-row" (click)="toggleMainPlaylist($event, playlist)">
18 <my-peertube-checkbox 18 <my-peertube-checkbox
19 [disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)" 19 [disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)"
20 [ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true" 20 [ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true"
21 (click)="toggleMainPlaylist($event, playlist)"
22 ></my-peertube-checkbox> 21 ></my-peertube-checkbox>
23 22
24 <label class="display-name" (click)="toggleMainPlaylist($event, playlist)"> 23 <label class="display-name">
25 {{ playlist.displayName }} 24 {{ playlist.displayName }}
26 </label> 25 </label>
27 26
28 <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="toggleOptionalRow(playlist)"> 27 <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="$event.stopPropagation(); toggleOptionalRow(playlist)">
29 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> 28 <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
30 </div> 29 </div>
31 </div> 30 </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index d2c8804e3..b84cacece 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -37,7 +37,15 @@ $timestamp-margin-right: 10px;
37} 37}
38 38
39.playlist { 39.playlist {
40 padding: 8px 10px 8px 24px; 40 padding: 0;
41
42 > .primary-row {
43 padding: 8px 10px 8px 24px;
44 }
45
46 > .optional-rows {
47 padding-left: 24px;
48 }
41 49
42 &.has-optional-row:hover { 50 &.has-optional-row:hover {
43 background-color: inherit; 51 background-color: inherit;