From 67264e060b6068399dae9a67abae035a73b84af1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 26 Mar 2021 13:20:37 +0100 Subject: Redesign account page --- .../account-about/account-about.component.html | 15 -- .../account-about/account-about.component.scss | 12 -- .../account-about/account-about.component.ts | 40 ----- .../account-search/account-search.component.ts | 7 +- .../src/app/+accounts/accounts-routing.module.ts | 16 +- client/src/app/+accounts/accounts.component.html | 116 +++++++++----- client/src/app/+accounts/accounts.component.scss | 176 +++++++++++++-------- client/src/app/+accounts/accounts.component.ts | 111 +++++++++---- client/src/app/+accounts/accounts.module.ts | 4 +- .../+video-channels/video-channels.component.html | 2 +- .../+video-channels/video-channels.component.scss | 74 +-------- .../+video-channels/video-channels.component.ts | 2 +- .../misc/simple-search-input.component.html | 13 +- .../misc/simple-search-input.component.scss | 36 ++--- .../misc/simple-search-input.component.ts | 52 ++++-- client/src/sass/include/_actor.scss | 86 ++++++++++ 16 files changed, 429 insertions(+), 333 deletions(-) delete mode 100644 client/src/app/+accounts/account-about/account-about.component.html delete mode 100644 client/src/app/+accounts/account-about/account-about.component.scss delete mode 100644 client/src/app/+accounts/account-about/account-about.component.ts create mode 100644 client/src/sass/include/_actor.scss diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html deleted file mode 100644 index e9e0e4079..000000000 --- a/client/src/app/+accounts/account-about/account-about.component.html +++ /dev/null @@ -1,15 +0,0 @@ -

About

-
-
-
-

DESCRIPTION

-
-
- -
-

STATS

- -
Joined {{ account.createdAt | date }}
-
-
-
diff --git a/client/src/app/+accounts/account-about/account-about.component.scss b/client/src/app/+accounts/account-about/account-about.component.scss deleted file mode 100644 index 5bcd4b561..000000000 --- a/client/src/app/+accounts/account-about/account-about.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.block { - margin-bottom: 40px; - - .small-title { - @include in-content-small-title; - - margin-bottom: 20px; - } -} diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts deleted file mode 100644 index 6cf846d72..000000000 --- a/client/src/app/+accounts/account-about/account-about.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Subscription } from 'rxjs' -import { Component, OnDestroy, OnInit } from '@angular/core' -import { MarkdownService } from '@app/core' -import { Account, AccountService } from '@app/shared/shared-main' - -@Component({ - selector: 'my-account-about', - templateUrl: './account-about.component.html', - styleUrls: [ './account-about.component.scss' ] -}) -export class AccountAboutComponent implements OnInit, OnDestroy { - account: Account - descriptionHTML = '' - - private accountSub: Subscription - - constructor ( - private accountService: AccountService, - private markdownService: MarkdownService - ) { } - - ngOnInit () { - // Parent get the account for us - this.accountSub = this.accountService.accountLoaded - .subscribe(async account => { - this.account = account - this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.account.description, true) - }) - } - - ngOnDestroy () { - if (this.accountSub) this.accountSub.unsubscribe() - } - - getAccountDescription () { - if (this.descriptionHTML) return this.descriptionHTML - - return $localize`No description` - } -} diff --git a/client/src/app/+accounts/account-search/account-search.component.ts b/client/src/app/+accounts/account-search/account-search.component.ts index dda4bf0c7..f54ab846a 100644 --- a/client/src/app/+accounts/account-search/account-search.component.ts +++ b/client/src/app/+accounts/account-search/account-search.component.ts @@ -64,9 +64,14 @@ export class AccountSearchComponent extends AbstractVideoList implements OnInit, } updateSearch (value: string) { - if (value === '') this.router.navigate(['../videos'], { relativeTo: this.route }) this.search = value + if (!this.search) { + this.router.navigate([ '../videos' ], { relativeTo: this.route }) + return + } + + this.videos = [] this.reloadVideos() } diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts index 15937a67b..3bf0f7185 100644 --- a/client/src/app/+accounts/accounts-routing.module.ts +++ b/client/src/app/+accounts/accounts-routing.module.ts @@ -1,11 +1,10 @@ import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' import { MetaGuard } from '@ngx-meta/core' -import { AccountsComponent } from './accounts.component' -import { AccountVideosComponent } from './account-videos/account-videos.component' -import { AccountAboutComponent } from './account-about/account-about.component' -import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' import { AccountSearchComponent } from './account-search/account-search.component' +import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' +import { AccountVideosComponent } from './account-videos/account-videos.component' +import { AccountsComponent } from './accounts.component' const accountsRoutes: Routes = [ { @@ -31,15 +30,6 @@ const accountsRoutes: Routes = [ } } }, - { - path: 'about', - component: AccountAboutComponent, - data: { - meta: { - title: $localize`About account` - } - } - }, { path: 'videos', component: AccountVideosComponent, diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html index 1903bb36f..92d24ce94 100644 --- a/client/src/app/+accounts/accounts.component.html +++ b/client/src/app/+accounts/accounts.component.html @@ -1,57 +1,89 @@ -
-
- -
- Avatar - -
-
-
{{ account.displayName }}
-
- {{ account.nameWithHost }} - +
+