From 733dbc535d5fecdaba9e05feb8923bc754920525 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 31 Mar 2021 08:59:52 +0200 Subject: [PATCH] Channel/account page redesign feedbacks Fix owner default avatar Semi bold orange inverted button Max width account description Increase account's channels padding Use owner avatar/display name links Move "view owner account" link on mobile Try to always display channel in video miniatures Add small border radius for channel's avatar Use main foreground color for the magnifying glass --- .../account-video-channels.component.html | 2 +- .../account-video-channels.component.scss | 6 ++++- .../src/app/+accounts/accounts.component.html | 2 +- .../src/app/+accounts/accounts.component.scss | 2 ++ .../src/app/+accounts/accounts.component.ts | 4 ++++ .../my-videos/my-videos.component.html | 1 - .../my-videos/my-videos.component.ts | 5 ++-- .../video-channels.component.html | 14 +++++++---- .../video-channels.component.scss | 9 +++++++- .../video-channels.component.ts | 8 +++++++ .../video-user-subscriptions.component.ts | 3 +-- .../video-avatar-channel.component.scss | 1 + .../misc/simple-search-input.component.scss | 2 +- .../video-channel/video-channel.model.ts | 7 +++--- .../abstract-video-list.html | 3 +-- .../abstract-video-list.ts | 3 +-- .../video-miniature.component.ts | 23 ++++++++----------- .../videos-selection.component.html | 3 +-- .../videos-selection.component.ts | 3 +-- client/src/sass/include/_mixins.scss | 3 ++- 20 files changed, 63 insertions(+), 41 deletions(-) diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html index 0b22e7526..19a4b3c9c 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html @@ -22,7 +22,7 @@
{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
- {getTotalVideosOf(videoChannel), splural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}} + {getTotalVideosOf(videoChannel), plural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}} diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index ca4c35cb4..8f1e9deb5 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -9,7 +9,7 @@ .channel { max-width: $max-channels-width; background-color: pvar(--channelBackgroundColor); - padding: 15px; + padding: 30px; margin: 30px 0; @@ -120,6 +120,10 @@ my-subscribe-button { } @media screen and (max-width: $mobile-view) { + .channel { + padding: 15px; + } + .channel-avatar-row { grid-template-columns: auto auto auto 1fr; diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html index e149d0bc6..03d083bb6 100644 --- a/client/src/app/+accounts/accounts.component.html +++ b/client/src/app/+accounts/accounts.component.html @@ -52,7 +52,7 @@
Account created on {{ account.createdAt | date }}
-
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index 6a51dd038..80f23ba6f 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -62,6 +62,8 @@ my-user-moderation-dropdown, .description { grid-column: 1 / 3; + max-width: 1000px; + word-break: break-word; } .created-at { diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index abee0b9bb..e80314130 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -147,6 +147,10 @@ export class AccountsComponent implements OnInit, OnDestroy { return this.videoChannels.length !== 0 } + hasShowMoreDescription () { + return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100 + } + private async onAccount (account: Account) { this.accountFollowerTitle = $localize`${account.followersCount} direct account followers` diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html index 5fa4c02ec..6e6bf12f4 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.html +++ b/client/src/app/+my-library/my-videos/my-videos.component.html @@ -34,7 +34,6 @@ [miniatureDisplayOptions]="miniatureDisplayOptions" [titlePage]="titlePage" [getVideosObservableFunction]="getVideosObservableFunction" - [ownerDisplayType]="ownerDisplayType" [user]="user" #videosSelection > diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts index 6a2a62608..0bc923e73 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.ts +++ b/client/src/app/+my-library/my-videos/my-videos.component.ts @@ -2,12 +2,12 @@ import { concat, Observable, Subject } from 'rxjs' import { debounceTime, tap, toArray } from 'rxjs/operators' import { Component, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core' +import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' import { immutableAssign } from '@app/helpers' import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' -import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' +import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' import { VideoSortField } from '@shared/models' import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' @@ -36,7 +36,6 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { state: true, blacklistInfo: true } - ownerDisplayType: OwnerDisplayType = 'videoChannel' videoActions: DropdownAction<{ video: Video }>[] = [] diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index b9ac13f09..87e1b294b 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html @@ -17,10 +17,14 @@
- + + +
-

{{ videoChannel.ownerAccount.displayName }}

+

+ {{ videoChannel.ownerAccount.displayName }} +

@{{ videoChannel.ownerBy }}
@@ -30,11 +34,11 @@
- -
@@ -83,7 +87,7 @@
Channel created on {{ videoChannel.createdAt | date }}
-
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index ec8f67a7e..3b27f3aa1 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -42,6 +42,7 @@ .channel-description { grid-column: 1; + word-break: break-word; } .show-more { @@ -108,6 +109,10 @@ h4 { font-size: 18px; margin: 0; + + a { + color: pvar(--mainForegroundColor); + } } .actor-handle { @@ -118,6 +123,7 @@ .owner-description { height: 140px; + word-break: break-word; @include fade-text(120px, pvar(--mainBackgroundColor)); } @@ -217,7 +223,8 @@ } .view-account.complete { - display: inline-block; + display: block; + text-align: right; margin-top: 10px; color: pvar(--mainColor); } diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index a8ca3d6ff..2739047ed 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -103,10 +103,18 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { this.notifier.success($localize`Username copied`) } + hasShowMoreDescription () { + return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100 + } + showSupportModal () { this.supportModal.show() } + getAccountUrl () { + return [ '/accounts', this.videoChannel.ownerBy ] + } + private loadChannelVideosCount () { this.videoService.getVideoChannelVideos({ videoChannel: this.videoChannel, diff --git a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts index e352a2b2c..6aabb93a5 100644 --- a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts +++ b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts @@ -7,7 +7,7 @@ import { HooksService } from '@app/core/plugins/hooks.service' import { immutableAssign } from '@app/helpers' import { VideoService } from '@app/shared/shared-main' import { UserSubscriptionService } from '@app/shared/shared-user-subscription' -import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature' +import { AbstractVideoList } from '@app/shared/shared-video-miniature' import { FeedFormat, VideoSortField } from '@shared/models' import { environment } from '../../../environments/environment' import { copyToClipboard } from '../../../root-helpers/utils' @@ -20,7 +20,6 @@ import { copyToClipboard } from '../../../root-helpers/utils' export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy { titlePage: string sort = '-publishedAt' as VideoSortField - ownerDisplayType: OwnerDisplayType = 'auto' groupByDate = true constructor ( 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 ea7cb2cf7..4998e85fa 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 @@ -26,6 +26,7 @@ top:50%; left:50%; transform: translate(-50%,-50%); + border-radius: 5px; &:not(.channel-avatar) { border-radius: 50%; diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss index 116ff7ea0..5ae48f81b 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss @@ -16,7 +16,7 @@ my-global-icon { } &[iconName=search] { - color: pvar(--mainColor); + color: pvar(--mainForegroundColor); } &[iconName=cross] { diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts index bd187a873..126e43cea 100644 --- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts +++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts @@ -1,4 +1,5 @@ -import { VideoChannel as ServerVideoChannel, ViewsPerDate, Account, Avatar } from '@shared/models' +import { Account as ServerAccount, Avatar, VideoChannel as ServerVideoChannel, ViewsPerDate } from '@shared/models' +import { Account } from '../account/account.model' import { Actor } from '../account/actor.model' export class VideoChannel extends Actor implements ServerVideoChannel { @@ -9,7 +10,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { nameWithHost: string nameWithHostForced: string - ownerAccount?: Account + ownerAccount?: ServerAccount ownerBy?: string ownerAvatarUrl?: string @@ -46,7 +47,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { if (hash.ownerAccount) { this.ownerAccount = hash.ownerAccount this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host) - this.ownerAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.ownerAccount) + this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount) } } diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html index 07f79cd6d..41d5906cf 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html @@ -52,8 +52,7 @@
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts index f41648e1c..18615c37a 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts @@ -28,8 +28,8 @@ import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@sha import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models' import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' import { Syndication, Video } from '../shared-main' -import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component' +import { MiniatureDisplayOptions } from './video-miniature.component' enum GroupDate { UNKNOWN = 0, @@ -65,7 +65,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte loadOnInit = true loadUserVideoPreferences = false - ownerDisplayType: OwnerDisplayType = 'auto' displayModerationBlock = false titleTooltip: string displayVideoActions = true 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 f08be9c25..987a65e40 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 @@ -16,7 +16,7 @@ import { Video } from '../shared-main' import { VideoPlaylistService } from '../shared-video-playlist' import { VideoActionsDisplayType } from './video-actions-dropdown.component' -export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' +export type OwnerDisplayType = 'account' | 'videoChannel' export type MiniatureDisplayOptions = { date?: boolean views?: boolean @@ -40,7 +40,6 @@ export class VideoMiniatureComponent implements OnInit { @Input() user: User @Input() video: Video - @Input() ownerDisplayType: OwnerDisplayType = 'account' @Input() displayOptions: MiniatureDisplayOptions = { date: true, views: true, @@ -89,7 +88,7 @@ export class VideoMiniatureComponent implements OnInit { videoHref: string videoTarget: string - private ownerDisplayTypeChosen: 'account' | 'videoChannel' + private ownerDisplayType: 'account' | 'videoChannel' constructor ( private screenService: ScreenService, @@ -140,11 +139,11 @@ export class VideoMiniatureComponent implements OnInit { } displayOwnerAccount () { - return this.ownerDisplayTypeChosen === 'account' + return this.ownerDisplayType === 'account' } displayOwnerVideoChannel () { - return this.ownerDisplayTypeChosen === 'videoChannel' + return this.ownerDisplayType === 'videoChannel' } isUnlistedVideo () { @@ -245,21 +244,19 @@ export class VideoMiniatureComponent implements OnInit { } private setUpBy () { - if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') { - this.ownerDisplayTypeChosen = this.ownerDisplayType - return - } + const accountName = this.video.account.name // 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) + // Or has not been customized (default created channel display name) // -> Use the account name if ( - this.video.channel.name === `${this.video.account.name}_channel` || + this.video.channel.displayName === `Default ${accountName} channel` || + this.video.channel.displayName === `Main ${accountName} channel` || this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/) ) { - this.ownerDisplayTypeChosen = 'account' + this.ownerDisplayType = 'account' } else { - this.ownerDisplayTypeChosen = 'videoChannel' + this.ownerDisplayType = 'videoChannel' } } diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html index 8caeaf092..dec9e99f3 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html @@ -9,8 +9,7 @@ diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts index ca1cf2264..f8c3800d7 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts @@ -17,7 +17,7 @@ import { AuthService, ComponentPagination, LocalStorageService, Notifier, Screen import { ResultList, VideoSortField } from '@shared/models' import { PeerTubeTemplateDirective, Video } from '../shared-main' import { AbstractVideoList } from './abstract-video-list' -import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' +import { MiniatureDisplayOptions } from './video-miniature.component' export type SelectionType = { [ id: number ]: boolean } @@ -31,7 +31,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni @Input() pagination: ComponentPagination @Input() titlePage: string @Input() miniatureDisplayOptions: MiniatureDisplayOptions - @Input() ownerDisplayType: OwnerDisplayType @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable> diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 7b862a156..affffc4cc 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -152,7 +152,7 @@ @include button-focus(pvar(--mainColorLightest)); border: 2px solid pvar(--mainColor); - font-weight: $font-regular; + font-weight: $font-semibold; &, &:active, &:focus { color: pvar(--mainColor); @@ -551,6 +551,7 @@ height: $size; min-width: $size; min-height: $size; + border-radius: 5px; } @mixin chevron ($size, $border-width) { -- 2.41.0