diff options
Diffstat (limited to 'client/src/app/shared/shared-video-playlist')
4 files changed, 18 insertions, 11 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 6d787796a..f2f69236c 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,20 +14,20 @@ | |||
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" (click)="toggleMainPlaylist($event, playlist)"> | 17 | <button class="primary-row button-unstyle" (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 | ></my-peertube-checkbox> | 21 | ></my-peertube-checkbox> |
22 | 22 | ||
23 | <label class="display-name"> | 23 | <label [for]="getPrimaryInputName(playlist)" class="display-name"> |
24 | {{ playlist.displayName }} | 24 | {{ playlist.displayName }} |
25 | </label> | 25 | </label> |
26 | 26 | ||
27 | <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="$event.stopPropagation(); toggleOptionalRow(playlist)"> | 27 | <button class="optional-row-icon button-unstyle" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="$event.stopPropagation(); toggleOptionalRow(playlist)"> |
28 | <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> | 28 | <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> |
29 | </div> | 29 | </button> |
30 | </div> | 30 | </button> |
31 | 31 | ||
32 | <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed"> | 32 | <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed"> |
33 | <div class="header-label" i18n>Start at</div> | 33 | <div class="header-label" i18n>Start at</div> |
@@ -58,11 +58,11 @@ | |||
58 | </div> | 58 | </div> |
59 | </div> | 59 | </div> |
60 | 60 | ||
61 | <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened"> | 61 | <button class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened"> |
62 | <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> | 62 | <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> |
63 | 63 | ||
64 | <span i18n>Create a private playlist</span> | 64 | <span i18n>Create a private playlist</span> |
65 | </div> | 65 | </button> |
66 | 66 | ||
67 | <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form"> | 67 | <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form"> |
68 | <div class="form-group"> | 68 | <div class="form-group"> |
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 de2f1032b..d1aa95266 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 | |||
@@ -67,6 +67,8 @@ | |||
67 | } | 67 | } |
68 | 68 | ||
69 | .optional-row-icon { | 69 | .optional-row-icon { |
70 | @include margin-left(5px); | ||
71 | |||
70 | display: flex; | 72 | display: flex; |
71 | align-items: center; | 73 | align-items: center; |
72 | font-size: 14px; | 74 | font-size: 14px; |
@@ -79,6 +81,10 @@ | |||
79 | width: 19px; | 81 | width: 19px; |
80 | height: 19px; | 82 | height: 19px; |
81 | } | 83 | } |
84 | |||
85 | &:hover { | ||
86 | opacity: 0.8; | ||
87 | } | ||
82 | } | 88 | } |
83 | } | 89 | } |
84 | 90 | ||
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html index 40c58166d..75afa0709 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html | |||
@@ -59,10 +59,10 @@ | |||
59 | 59 | ||
60 | <div ngbDropdownMenu> | 60 | <div ngbDropdownMenu> |
61 | <ng-container *ngIf="playlistElement.video"> | 61 | <ng-container *ngIf="playlistElement.video"> |
62 | <div class="dropdown-item" (click)="toggleDisplayTimestampsOptions($event, playlistElement)"> | 62 | <button ngbDropdownItem (click)="toggleDisplayTimestampsOptions($event, playlistElement)"> |
63 | <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon> | 63 | <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon> |
64 | <ng-container i18n>Edit starts/stops at</ng-container> | 64 | <ng-container i18n>Edit starts/stops at</ng-container> |
65 | </div> | 65 | </button> |
66 | 66 | ||
67 | <div class="timestamp-options" *ngIf="displayTimestampOptions"> | 67 | <div class="timestamp-options" *ngIf="displayTimestampOptions"> |
68 | <div> | 68 | <div> |
@@ -97,10 +97,10 @@ | |||
97 | </div> | 97 | </div> |
98 | </ng-container> | 98 | </ng-container> |
99 | 99 | ||
100 | <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)"> | 100 | <button ngbDropdownItem (click)="removeFromPlaylist(playlistElement)"> |
101 | <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon> | 101 | <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon> |
102 | <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container> | 102 | <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container> |
103 | </span> | 103 | </button> |
104 | </div> | 104 | </div> |
105 | </div> | 105 | </div> |
106 | </div> | 106 | </div> |
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss index 0f085231c..cd9d0ce53 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss | |||
@@ -156,6 +156,7 @@ my-video-thumbnail, | |||
156 | @include padding-left(35px); | 156 | @include padding-left(35px); |
157 | 157 | ||
158 | padding-top: 0; | 158 | padding-top: 0; |
159 | margin-top: 5px; | ||
159 | margin-bottom: 15px; | 160 | margin-bottom: 15px; |
160 | 161 | ||
161 | > div { | 162 | > div { |