From deb8b9cdb03213efd8f1fc4b40ab94ae499fe058 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 29 Mar 2021 16:45:35 +0200 Subject: [PATCH] Square channel avatar consistency --- .../my-video-channels.component.scss | 3 +- .../my-subscriptions.component.scss | 2 +- client/src/app/+search/search.component.scss | 2 +- .../+video-watch/video-watch.component.scss | 6 -- .../account/actor-avatar-info.component.html | 3 +- .../account/actor-avatar-info.component.scss | 12 ++- .../account/actor-avatar-info.component.ts | 4 + .../video-avatar-channel.component.html | 5 +- .../video-avatar-channel.component.scss | 7 +- .../video-miniature.component.html | 2 +- .../video-miniature.component.scss | 6 +- .../video-miniature.component.ts | 5 +- client/src/sass/include/_miniature.scss | 2 +- client/src/sass/include/_mixins.scss | 80 ------------------- 14 files changed, 36 insertions(+), 103 deletions(-) diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss index f2f42459f..8804fa95c 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss @@ -17,10 +17,11 @@ input[type=text] { .video-channel { @include row-blocks; + padding-bottom: 0; img { - @include avatar(80px); + @include channel-avatar(80px); margin-right: 10px; } diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss index 5ead45dd8..9fc8be86c 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss @@ -9,7 +9,7 @@ input[type=text] { @include row-blocks; img { - @include avatar(80px); + @include channel-avatar(80px); margin-right: 10px; } diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss index 64927fa4b..d25fdd31d 100644 --- a/client/src/app/+search/search.component.scss +++ b/client/src/app/+search/search.component.scss @@ -48,7 +48,7 @@ $image-size: 130px; $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature - @include avatar($image-size); + @include channel-avatar($image-size); margin: 0 ($margin-size + 10) 0 $margin-size; } diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index 555126cbc..a67605217 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -179,12 +179,6 @@ $video-info-margin-left: 44px; &:hover { opacity: 0.8; } - - img { - @include avatar(18px); - - margin: -2px 5px 0 0; - } } .video-info-channel-left { diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html index 30584fd00..f3db55310 100644 --- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html +++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html @@ -1,7 +1,7 @@
- Avatar + Avatar
@@ -19,7 +19,6 @@
-
{{ actor.displayName }}
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss index 57c298508..40ba4269b 100644 --- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss +++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss @@ -5,9 +5,15 @@ display: flex; img { - @include avatar(100px); - margin-right: 15px; + + &:not(.channel) { + @include avatar(100px); + } + + &.channel { + @include channel-avatar(100px); + } } .actor-img-edit-container { @@ -18,7 +24,7 @@ @include peertube-button-file(21px); @include button-with-icon(19px); @include orange-button; - + margin-top: 10px; margin-bottom: 5px; border-radius: 50%; diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts index b459c591f..87e9e917c 100644 --- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts +++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts @@ -70,4 +70,8 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges { hasAvatar () { return !!this.avatarUrl } + + isChannel () { + return !!(this.actor as VideoChannel).ownerAccount + } } diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html index 310cc926f..5058f05dd 100644 --- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html +++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html @@ -1,8 +1,9 @@
- Channel avatar + Channel avatar + Account avatar @@ -14,7 +15,7 @@ - Channel avatar + Channel avatar diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss index 37709fce6..ea7cb2cf7 100644 --- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss +++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss @@ -25,8 +25,11 @@ position: absolute; top:50%; left:50%; - border-radius: 50%; - transform: translate(-50%,-50%) + transform: translate(-50%,-50%); + + &:not(.channel-avatar) { + border-radius: 50%; + } } a:nth-of-type(2) img { diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 7a6df7b64..e5b07896f 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -10,7 +10,7 @@
- + diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index 38cac5b6e..cd492e9ad 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -21,9 +21,13 @@ $more-margin-right: 15px; .avatar { margin: 10px 10px 0 0; - img { + img:not(.channel) { @include avatar(40px); } + + img.channel { + @include channel-avatar(40px); + } } .video-miniature-name { diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts index cc5665ab1..f08be9c25 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts @@ -183,7 +183,7 @@ export class VideoMiniatureComponent implements OnInit { } getAvatarUrl () { - if (this.ownerDisplayTypeChosen === 'account') { + if (this.displayOwnerAccount()) { return this.video.accountAvatarUrl } @@ -250,7 +250,8 @@ export class VideoMiniatureComponent implements OnInit { return } - // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12) + // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12) + // Or is just a suffix of the account (default created channel) // -> Use the account name if ( this.video.channel.name === `${this.video.account.name}_channel` || diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 326d4677a..457a7151c 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -136,7 +136,7 @@ $play-overlay-width: 18px; align-items: center; img { - @include avatar(28px); + @include channel-avatar(28px); margin-right: 8px; } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 82c60a59d..7b862a156 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -612,86 +612,6 @@ } } -@mixin sub-menu-with-actor { - position: initial; - z-index: unset; - height: max-content; - display: flex; - flex-direction: column; - align-items: flex-start; - - .actor { - display: flex; - margin-top: 20px; - margin-bottom: 20px; - - img { - @include avatar(80px); - - margin-right: 20px; - } - - .actor-info { - display: flex; - flex-direction: column; - justify-content: center; - - .actor-names { - display: flex; - align-items: center; - flex-wrap: wrap; - - .actor-display-name { - font-size: 23px; - font-weight: $font-bold; - margin-right: 7px; - } - - .actor-name { - position: relative; - top: 3px; - font-size: 14px; - color: $grey-actor-name; - } - } - - .actor-lower { - grid-area: lower; - } - - .actor-followers { - font-size: 15px; - } - - .actor-owner { - @include actor-owner; - } - } - } - - .links { - margin-top: 0; - margin-bottom: 15px; - - a { - margin-top: 0; - margin-bottom: 0; - text-transform: uppercase; - font-weight: 600; - font-size: 110%; - - @media screen and (max-width: $mobile-view) { - font-size: 130%; - } - } - - list-overflow { - display: inline-block; - width: max-content; - } - } -} - @mixin create-button { @include peertube-button-link; @include orange-button;