aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorkimsible <kimsible@users.noreply.github.com>2020-04-24 18:59:10 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-05-11 11:11:06 +0200
commitbedf0e60733533afe1504d188d9c7afba80f26bd (patch)
tree042fdca55b8820d13984ad2a9f23dbd81ad1e2b9 /client
parent610d0be13b3d01f653ef269271dd667a57c85ef2 (diff)
downloadPeerTube-bedf0e60733533afe1504d188d9c7afba80f26bd.tar.gz
PeerTube-bedf0e60733533afe1504d188d9c7afba80f26bd.tar.zst
PeerTube-bedf0e60733533afe1504d188d9c7afba80f26bd.zip
Add edit button to scroll watch playlist on touchscreens
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html9
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss88
-rw-r--r--client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts1
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.html1
4 files changed, 94 insertions, 5 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
index 25d4783fb..c956e6cd2 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -36,7 +36,9 @@
36 </div> 36 </div>
37 </a> 37 </a>
38 38
39 <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right" 39 <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-account', 'video-playlists', playlist.uuid ]"></my-edit-button>
40
41 <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom auto"
40 (openChange)="onDropdownOpenChange()" autoClose="outside" 42 (openChange)="onDropdownOpenChange()" autoClose="outside"
41 > 43 >
42 <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon> 44 <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
@@ -82,8 +84,9 @@
82 </ng-container> 84 </ng-container>
83 85
84 <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)"> 86 <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
85 <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container> 87 <my-global-icon iconName="delete"></my-global-icon>
86 </span> 88 <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
89 </span>
87 </div> 90 </div>
88 </div> 91 </div>
89</div> 92</div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index 4d9d249d9..4fba2344b 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -88,12 +88,15 @@ my-video-thumbnail,
88 @include ellipsis; 88 @include ellipsis;
89 } 89 }
90 90
91 .more { 91 .more, my-edit-button {
92 justify-self: flex-end; 92 justify-self: flex-end;
93 margin-left: auto; 93 margin-left: auto;
94 cursor: pointer; 94 cursor: pointer;
95 opacity: 0;
96 min-width: 24px; 95 min-width: 24px;
96 }
97
98 .more {
99 opacity: 0;
97 100
98 &.show { 101 &.show {
99 opacity: 1; 102 opacity: 1;
@@ -132,3 +135,84 @@ my-video-thumbnail,
132 } 135 }
133 } 136 }
134} 137}
138
139@mixin more-dropdown-control {
140 .video {
141 my-edit-button {
142 display: none;
143
144 + .more {
145 display: inline-flex;
146 }
147 }
148 }
149}
150
151@mixin edit-button-control {
152 .video {
153 my-edit-button {
154 display: none;
155 }
156
157 &.playing {
158 my-edit-button {
159 display: inline-flex;
160 height: max-content;
161 }
162 }
163
164 my-edit-button + .more {
165 display: none;
166 }
167 }
168}
169
170@mixin edit-button-in-mobile-view {
171 .video {
172 my-edit-button {
173 ::ng-deep .action-button-edit {
174 padding: 0 13px;
175
176 .button-label {
177 display: none;
178 }
179 }
180 }
181 }
182}
183
184@media screen and (min-width: $small-view) {
185 :host-context(.expanded) {
186 @include more-dropdown-control();
187 }
188}
189
190@media screen and (max-width: $small-view) {
191 :host-context(.expanded) {
192 @include edit-button-control();
193 }
194}
195
196@media screen and (max-width: $mobile-view) {
197 :host-context(.expanded) {
198 @include edit-button-in-mobile-view();
199 }
200}
201
202@media screen and (min-width: #{$small-view + $menu-width}) {
203 :host-context(.main-col:not(.expanded)) {
204 @include more-dropdown-control();
205 }
206}
207
208@media screen and (max-width: #{$small-view + $menu-width}) {
209 :host-context(.main-col:not(.expanded)) {
210 @include edit-button-control();
211 }
212}
213
214@media screen and (max-width: #{$mobile-view + $menu-width}) {
215 :host-context(.main-col:not(.expanded)) {
216 @include edit-button-in-mobile-view();
217 }
218}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index a2c0724cd..fad03e045 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -27,6 +27,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
27 @Input() rowLink = false 27 @Input() rowLink = false
28 @Input() accountLink = true 28 @Input() accountLink = true
29 @Input() position: number // Keep this property because we're in the OnPush change detection strategy 29 @Input() position: number // Keep this property because we're in the OnPush change detection strategy
30 @Input() touchScreenEditButton = false
30 31
31 @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>() 32 @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>()
32 33
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.html b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
index d43dcec93..246ef83cf 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.html
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
@@ -40,6 +40,7 @@
40 <my-video-playlist-element-miniature 40 <my-video-playlist-element-miniature
41 [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)" 41 [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
42 [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position" 42 [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
43 [touchScreenEditButton]="true"
43 ></my-video-playlist-element-miniature> 44 ></my-video-playlist-element-miniature>
44 </div> 45 </div>
45</div> 46</div>