From 2295ce6c4e7ba805cc100ff961527bebc2cd89e5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 4 Dec 2017 10:34:40 +0100 Subject: Add account avatar --- .../account-settings.component.html | 10 ++++-- .../account-settings.component.scss | 21 ++++++++++-- .../account-settings/account-settings.component.ts | 4 +++ client/src/app/core/auth/auth.service.ts | 36 ++++++++------------- client/src/app/menu/menu.component.html | 2 ++ client/src/app/menu/menu.component.scss | 8 ++++- client/src/app/menu/menu.component.ts | 4 +++ client/src/app/shared/users/user.model.ts | 25 ++++++-------- client/src/assets/default-avatar.png | Bin 0 -> 1674 bytes client/src/sass/_mixins.scss | 5 +++ 10 files changed, 72 insertions(+), 43 deletions(-) create mode 100644 client/src/assets/default-avatar.png (limited to 'client') diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html index 2509eb5aa..9e9f688d2 100644 --- a/client/src/app/account/account-settings/account-settings.component.html +++ b/client/src/app/account/account-settings/account-settings.component.html @@ -1,7 +1,13 @@ -
- {{ user.username }} +
+ Avatar + +
+ diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss index a0822631d..f514809b0 100644 --- a/client/src/app/account/account-settings/account-settings.component.scss +++ b/client/src/app/account/account-settings/account-settings.component.scss @@ -1,6 +1,21 @@ -.user-info { - font-size: 20px; - font-weight: $font-bold; +.user { + display: flex; + + img { + @include avatar(50px); + margin-right: 15px; + } + + .user-info { + .user-info-username { + font-size: 20px; + font-weight: $font-bold; + } + + .user-info-followers { + font-size: 15px; + } + } } .account-title { diff --git a/client/src/app/account/account-settings/account-settings.component.ts b/client/src/app/account/account-settings/account-settings.component.ts index c3b670e02..cba251000 100644 --- a/client/src/app/account/account-settings/account-settings.component.ts +++ b/client/src/app/account/account-settings/account-settings.component.ts @@ -15,4 +15,8 @@ export class AccountSettingsComponent implements OnInit { ngOnInit () { this.user = this.authService.getUser() } + + getAvatarPath () { + return this.user.getAvatarPath() + } } diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts index 9e6c6b888..fd2708c11 100644 --- a/client/src/app/core/auth/auth.service.ts +++ b/client/src/app/core/auth/auth.service.ts @@ -1,30 +1,25 @@ +import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' import { Router } from '@angular/router' -import { Observable } from 'rxjs/Observable' -import { Subject } from 'rxjs/Subject' -import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http' -import { ReplaySubject } from 'rxjs/ReplaySubject' + +import { NotificationsService } from 'angular2-notifications' +import 'rxjs/add/observable/throw' import 'rxjs/add/operator/do' import 'rxjs/add/operator/map' import 'rxjs/add/operator/mergeMap' -import 'rxjs/add/observable/throw' - -import { NotificationsService } from 'angular2-notifications' - -import { AuthStatus } from './auth-status.model' -import { AuthUser } from './auth-user.model' -import { - OAuthClientLocal, - UserRole, - UserRefreshToken, - VideoChannel, - User as UserServerModel -} from '../../../../../shared' +import { Observable } from 'rxjs/Observable' +import { ReplaySubject } from 'rxjs/ReplaySubject' +import { Subject } from 'rxjs/Subject' +import { OAuthClientLocal, User as UserServerModel, UserRefreshToken, UserRole, VideoChannel } from '../../../../../shared' +import { Account } from '../../../../../shared/models/accounts' +import { UserLogin } from '../../../../../shared/models/users/user-login.model' // Do not use the barrel (dependency loop) import { RestExtractor } from '../../shared/rest' -import { UserLogin } from '../../../../../shared/models/users/user-login.model' import { UserConstructorHash } from '../../shared/users/user.model' +import { AuthStatus } from './auth-status.model' +import { AuthUser } from './auth-user.model' + interface UserLoginWithUsername extends UserLogin { access_token: string refresh_token: string @@ -42,10 +37,7 @@ interface UserLoginWithUserInformation extends UserLogin { displayNSFW: boolean email: string videoQuota: number - account: { - id: number - uuid: string - } + account: Account videoChannels: VideoChannel[] } diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 0ed8ec518..7a80fa4de 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -1,5 +1,7 @@
+ Avatar +
{{ user.username }}
{{ user.email }}
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 9d67ca66c..5d6fd61c6 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -21,9 +21,15 @@ menu { justify-content: center; margin-bottom: 35px; + img { + margin-left: 20px; + margin-right: 10px; + + @include avatar(34px); + } + .logged-in-info { flex-grow: 1; - margin-left: 40px; .logged-in-username { font-size: 16px; diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 4c35bb3a5..8b8b714a8 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -51,6 +51,10 @@ export class MenuComponent implements OnInit { ) } + getUserAvatarPath () { + return this.user.getAvatarPath() + } + isRegistrationAllowed () { return this.serverService.getConfig().signup.allowed } diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts index b075ab717..83990d8b8 100644 --- a/client/src/app/shared/users/user.model.ts +++ b/client/src/app/shared/users/user.model.ts @@ -1,10 +1,5 @@ -import { - User as UserServerModel, - UserRole, - VideoChannel, - UserRight, - hasUserRight -} from '../../../../../shared' +import { hasUserRight, User as UserServerModel, UserRight, UserRole, VideoChannel } from '../../../../../shared' +import { Account } from '../../../../../shared/models/accounts' export type UserConstructorHash = { id: number, @@ -14,10 +9,7 @@ export type UserConstructorHash = { videoQuota?: number, displayNSFW?: boolean, createdAt?: Date, - account?: { - id: number - uuid: string - }, + account?: Account, videoChannels?: VideoChannel[] } export class User implements UserServerModel { @@ -27,10 +19,7 @@ export class User implements UserServerModel { role: UserRole displayNSFW: boolean videoQuota: number - account: { - id: number - uuid: string - } + account: Account videoChannels: VideoChannel[] createdAt: Date @@ -61,4 +50,10 @@ export class User implements UserServerModel { hasRight (right: UserRight) { return hasUserRight(this.role, right) } + + getAvatarPath () { + if (this.account && this.account.avatar) return this.account.avatar.path + + return '/assets/default-avatar.png' + } } diff --git a/client/src/assets/default-avatar.png b/client/src/assets/default-avatar.png new file mode 100644 index 000000000..4b7fd2c0a Binary files /dev/null and b/client/src/assets/default-avatar.png differ diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss index 5798b8f6e..e44cf064d 100644 --- a/client/src/sass/_mixins.scss +++ b/client/src/sass/_mixins.scss @@ -39,3 +39,8 @@ @include peertube-button; @include disable-default-a-behaviour; } + +@mixin avatar ($size) { + width: $size; + height: $size; +} -- cgit v1.2.3