</div>
</a>
- <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right"
+ <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-account', 'video-playlists', playlist.uuid ]"></my-edit-button>
+
+ <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom auto"
(openChange)="onDropdownOpenChange()" autoClose="outside"
>
<my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
</ng-container>
<span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
- <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
- </span>
+ <my-global-icon iconName="delete"></my-global-icon>
+ <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
+ </span>
</div>
</div>
</div>
@include ellipsis;
}
- .more {
+ .more, my-edit-button {
justify-self: flex-end;
margin-left: auto;
cursor: pointer;
- opacity: 0;
min-width: 24px;
+ }
+
+ .more {
+ opacity: 0;
&.show {
opacity: 1;
}
}
}
+
+@mixin more-dropdown-control {
+ .video {
+ my-edit-button {
+ display: none;
+
+ + .more {
+ display: inline-flex;
+ }
+ }
+ }
+}
+
+@mixin edit-button-control {
+ .video {
+ my-edit-button {
+ display: none;
+ }
+
+ &.playing {
+ my-edit-button {
+ display: inline-flex;
+ height: max-content;
+ }
+ }
+
+ my-edit-button + .more {
+ display: none;
+ }
+ }
+}
+
+@mixin edit-button-in-mobile-view {
+ .video {
+ my-edit-button {
+ ::ng-deep .action-button-edit {
+ padding: 0 13px;
+
+ .button-label {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (min-width: $small-view) {
+ :host-context(.expanded) {
+ @include more-dropdown-control();
+ }
+}
+
+@media screen and (max-width: $small-view) {
+ :host-context(.expanded) {
+ @include edit-button-control();
+ }
+}
+
+@media screen and (max-width: $mobile-view) {
+ :host-context(.expanded) {
+ @include edit-button-in-mobile-view();
+ }
+}
+
+@media screen and (min-width: #{$small-view + $menu-width}) {
+ :host-context(.main-col:not(.expanded)) {
+ @include more-dropdown-control();
+ }
+}
+
+@media screen and (max-width: #{$small-view + $menu-width}) {
+ :host-context(.main-col:not(.expanded)) {
+ @include edit-button-control();
+ }
+}
+
+@media screen and (max-width: #{$mobile-view + $menu-width}) {
+ :host-context(.main-col:not(.expanded)) {
+ @include edit-button-in-mobile-view();
+ }
+}
<my-video-playlist-element-miniature
[playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
[playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
+ [touchScreenEditButton]="true"
></my-video-playlist-element-miniature>
</div>
</div>