From aeb1bed9835b3b092832160245080d4023c14d91 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sun, 19 Apr 2020 10:20:08 +0200 Subject: [PATCH] Factorize video display in table for moderation components, apply it to blacklisted videos as well --- .../moderation/moderation.component.scss | 70 +++++++++++++++++- .../video-abuse-list.component.html | 22 +++--- .../video-abuse-list.component.scss | 71 ++----------------- .../video-blacklist-list.component.html | 17 ++++- .../video-blacklist-list.component.ts | 2 +- .../videos/blacklist/video-blacklist.model.ts | 5 +- 6 files changed, 102 insertions(+), 85 deletions(-) diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss index ef6a39b5d..a4ee65423 100644 --- a/client/src/app/+admin/moderation/moderation.component.scss +++ b/client/src/app/+admin/moderation/moderation.component.scss @@ -27,7 +27,7 @@ } } -.video-abuse-states { +.video-table-states { & > :not(:first-child) { margin-left: .4rem; } @@ -68,3 +68,71 @@ my-action-dropdown.show { display: block !important; } } + + +.video-table-video-link { + @include disable-outline; + position: relative; + top: 3px; +} + +.video-table-video { + display: inline-flex; + + .video-table-video-image { + @include miniature-thumbnail; + + $image-height: 45px; + + height: $image-height; + width: #{(16/9) * $image-height}; + margin-right: 0.5rem; + border-radius: 2px; + border: none; + background: transparent; + display: inline-flex; + justify-content: center; + align-items: center; + position: relative; + + img { + height: 100%; + width: 100%; + border-radius: 2px; + } + + span { + color: var(--inputPlaceholderColor); + } + + .video-table-video-image-label { + @include static-thumbnail-overlay; + position: absolute; + border-radius: 3px; + font-size: 10px; + padding: 0 3px; + line-height: 1.3; + bottom: 2px; + right: 2px; + } + } + + .video-table-video-text { + display: inline-flex; + flex-direction: column; + justify-content: center; + font-size: 90%; + color: var(--mainForegroundColor); + line-height: 1rem; + + div .glyphicon { + font-size: 80%; + color: gray; + margin-left: 0.1rem; + } + + div + div { + font-size: 80%; + } + } +} diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html index 67ef28408..e2c08f910 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html @@ -52,16 +52,16 @@ - -
-
+ +
+
{{ videoAbuse.nth }}/{{ videoAbuse.count }}
-
+
{{ videoAbuse.video.name }} @@ -74,9 +74,9 @@ -
-
Deleted
-
+
+
Deleted
+
{{ videoAbuse.video.name }} @@ -123,7 +123,7 @@ {{ createByString(videoAbuse.reporterAccount) }}
- + {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}} @@ -142,14 +142,14 @@ {{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}
- + {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}
Updated - +
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss index b5dc53b3a..a9251e2f0 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss @@ -9,78 +9,15 @@ } } -.video-abuse-date-updated { +.video-details-date-updated { font-size: 90%; margin-top: .1rem; } -.video-abuse-links { +.video-details-links { @include disable-default-a-behaviour; } -.video-abuse-video-link { - @include disable-outline; - position: relative; - top: 3px; -} - -.video-abuse-video { - display: inline-flex; - - .video-abuse-video-image { - @include miniature-thumbnail; - - $image-height: 45px; - - height: $image-height; - width: #{(16/9) * $image-height}; - margin-right: 0.5rem; - border-radius: 2px; - border: none; - background: transparent; - display: inline-flex; - justify-content: center; - align-items: center; - position: relative; - - img { - height: 100%; - width: 100%; - border-radius: 2px; - } - - span { - color: var(--inputPlaceholderColor); - } - - .video-abuse-video-image-label { - @include static-thumbnail-overlay; - position: absolute; - border-radius: 3px; - font-size: 10px; - padding: 0 3px; - line-height: 1.3; - bottom: 2px; - right: 2px; - } - } - - .video-abuse-video-text { - display: inline-flex; - flex-direction: column; - justify-content: center; - font-size: 90%; - color: var(--mainForegroundColor); - line-height: 1rem; - - div .glyphicon { - font-size: 80%; - color: gray; - margin-left: 0.1rem; - } - - div + div { - font-size: 80%; - } - } +.video-abuse-states .glyphicon-comment { + margin-left: 0.5rem; } diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html index c5c0fdbbf..90a786ad0 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html @@ -8,7 +8,7 @@ Video - Sensitive + Sensitive Unfederated Date @@ -25,8 +25,19 @@ - - {{ videoBlacklist.video.name }} + +
+
+ +
+
+
+ {{ videoBlacklist.video.name }} + +
+
by {{ videoBlacklist.video.channel?.displayName }} on {{ videoBlacklist.video.channel?.host }}
+
+
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts index 4e9965bee..c38d30865 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts @@ -38,7 +38,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { ngOnInit () { this.serverService.getConfig() .subscribe(config => { - // don't filter if auto-blacklist not enabled as this will be only list + // don't filter if auto-blacklist not enabled as this will be the only list if (config.autoBlacklist.videos.ofUsers.enabled) { this.listBlacklistTypeFilter = VideoBlacklistType.MANUAL } diff --git a/shared/models/videos/blacklist/video-blacklist.model.ts b/shared/models/videos/blacklist/video-blacklist.model.ts index 68d59e489..a6e0ef175 100644 --- a/shared/models/videos/blacklist/video-blacklist.model.ts +++ b/shared/models/videos/blacklist/video-blacklist.model.ts @@ -7,11 +7,12 @@ export enum VideoBlacklistType { export interface VideoBlacklist { id: number - createdAt: Date - updatedAt: Date unfederated: boolean reason?: string type: VideoBlacklistType video: Video + + createdAt: Date + updatedAt: Date } -- 2.25.1