From 3fbba1d28a80b9e8bd97b422280a7465c5f7c89f Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 2 Jan 2020 15:45:27 +0100 Subject: [PATCH] Display all miniature actions on hover and focus --- .../shared/buttons/action-dropdown.component.scss | 2 +- .../shared/video/video-miniature.component.html | 2 +- .../shared/video/video-miniature.component.scss | 15 ++++++++++++--- .../app/shared/video/video-miniature.component.ts | 6 +++++- .../shared/video/video-thumbnail.component.html | 2 +- .../shared/video/video-thumbnail.component.scss | 1 + .../app/shared/video/video-thumbnail.component.ts | 6 +----- 7 files changed, 22 insertions(+), 12 deletions(-) diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss index 2f7e848d5..e33aa8d24 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/buttons/action-dropdown.component.scss @@ -34,7 +34,7 @@ width: 21px; ::ng-deep { - @include apply-svg-color(var(--mainForegroundColor)); + @include apply-svg-color(var(--actionButtonColor)); } } diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index 23a7dbb1e..c6fd570b7 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html @@ -1,5 +1,5 @@
- +
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index ac83c5dfa..b63fd2989 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -74,10 +74,14 @@ $more-margin-right: 15px; ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { opacity: 1; } - } - &:hover .video-actions ::ng-deep .dropdown-root { - opacity: 1; + ::ng-deep .more-icon { + opacity: .6; + + &:hover { + opacity: 1; + } + } } @media screen and (max-width: $small-view) { @@ -96,6 +100,11 @@ $more-margin-right: 15px; } } + &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay, + &:hover .video-bottom .video-actions ::ng-deep .dropdown-root { + opacity: 1; + } + &.display-as-row { flex-direction: row; margin-bottom: 0; diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts index 9fffc7ddb..ba65d33b6 100644 --- a/client/src/app/shared/video/video-miniature.component.ts +++ b/client/src/app/shared/video/video-miniature.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core' +import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core' import { User } from '../users' import { Video } from './video.model' import { ServerService } from '@app/core' @@ -6,6 +6,7 @@ import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared' import { I18n } from '@ngx-translate/i18n-polyfill' import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' import { ScreenService } from '@app/shared/misc/screen.service' +import { VideoThumbnailComponent } from './video-thumbnail.component' export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' export type MiniatureDisplayOptions = { @@ -46,6 +47,8 @@ export class VideoMiniatureComponent implements OnInit { @Output() videoUnblacklisted = new EventEmitter() @Output() videoRemoved = new EventEmitter() + @ViewChild('thumbnail', { static: true }) thumbnail: VideoThumbnailComponent + videoActionsDisplayOptions: VideoActionsDisplayType = { playlist: true, download: false, @@ -128,6 +131,7 @@ export class VideoMiniatureComponent implements OnInit { loadActions () { if (this.displayVideoActions) this.showActions = true + this.thumbnail.load() } onVideoBlacklisted () { diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html index df15698c0..9679dfefb 100644 --- a/client/src/app/shared/video/video-thumbnail.component.html +++ b/client/src/app/shared/video/video-thumbnail.component.html @@ -1,7 +1,7 @@ diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss index aac50fd1b..ad221d6ed 100644 --- a/client/src/app/shared/video/video-thumbnail.component.scss +++ b/client/src/app/shared/video/video-thumbnail.component.scss @@ -35,6 +35,7 @@ bottom: 5px; } + &:focus, &:hover { .video-thumbnail-actions-overlay { opacity: 1; diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts index 0f605e425..6f9292d52 100644 --- a/client/src/app/shared/video/video-thumbnail.component.ts +++ b/client/src/app/shared/video/video-thumbnail.component.ts @@ -3,12 +3,7 @@ import { Video } from './video.model' import { ScreenService } from '@app/shared/misc/screen.service' import { AuthService, ThemeService } from '@app/core' import { VideoPlaylistService } from '../video-playlist/video-playlist.service' -import { VideoPlaylistType } from '@shared/models' -import { forkJoin } from 'rxjs' -import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' -import { VideoPlaylist } from '../video-playlist/video-playlist.model' import { VideoPlaylistElementCreate } from '../../../../../shared' -import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model' @Component({ selector: 'my-video-thumbnail', @@ -36,6 +31,7 @@ export class VideoThumbnailComponent { load () { if (this.addedToWatchLater !== undefined) return + if (!this.isUserLoggedIn()) return this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) .subscribe( -- 2.25.1