From 07098c33df3f5e00c2a150d3025abb779d0edb6c Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 20 Nov 2020 14:32:57 +0100
Subject: [PATCH] Improve playlist add dropdown ux

---
 .../video-add-to-playlist.component.html               |  7 +++----
 .../video-add-to-playlist.component.scss               | 10 +++++++++-
 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 @@
       *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>
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;
 }
 
 .playlist {
-  padding: 8px 10px 8px 24px;
+  padding: 0;
+
+  > .primary-row {
+    padding: 8px 10px 8px 24px;
+  }
+
+  > .optional-rows {
+    padding-left: 24px;
+  }
 
   &.has-optional-row:hover {
     background-color: inherit;