From 0979075453b380fa8e3694db3f460e822f046c35 Mon Sep 17 00:00:00 2001 From: kontrollanten <6680299+kontrollanten@users.noreply.github.com> Date: Tue, 27 Apr 2021 16:08:10 +0200 Subject: [PATCH] Use account initial as default avatar (#4002) * client: use account initial as default avatar * fix UI in user list Avatars was cutted in the top and bottom --- .../users/user-list/user-list.component.html | 2 +- .../account-avatar.component.html | 5 +- .../account-avatar.component.scss | 56 ++++++++++++++++++- .../account-avatar.component.ts | 27 ++++++++- .../shared-main/account/account.model.ts | 4 +- client/src/sass/include/_mixins.scss | 10 +--- 6 files changed, 88 insertions(+), 16 deletions(-) diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index e114f3425..eefb8ea88 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -106,7 +106,7 @@
- +
{{ user.account.displayName }} {{ user.username }} diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.html b/client/src/app/shared/shared-account-avatar/account-avatar.component.html index ca4ceb12f..083daccfb 100644 --- a/client/src/app/shared/shared-account-avatar/account-avatar.component.html +++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.html @@ -1,5 +1,8 @@ - Account avatar + Account avatar +
+ {{ initial }} +
diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss index bb941d712..75a4cbf86 100644 --- a/client/src/app/shared/shared-account-avatar/account-avatar.component.scss +++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss @@ -5,6 +5,10 @@ @include avatar(25px); } +.avatar-32 { + @include avatar(32px); +} + .avatar-34 { @include avatar(34px); } @@ -19,4 +23,54 @@ .avatar-120 { @include avatar(120px); -} \ No newline at end of file + + &.initial { + font-size: 46px; + } +} + +a:hover { + text-decoration: none; +} + +.initial { + background-color: #3C2109; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 22px; + border-radius: 50%; + + &.blue { + background-color: #009FD4; + } + + &.green { + background-color: #00AA55; + } + + &.purple { + background-color: #B381B3; + } + + &.gray { + background-color: #939393; + } + + &.yellow { + background-color: #AA8F00; + } + + &.orange { + background-color: #D47500; + } + + &.red { + background-color: #E76E3C; + } + + &.dark-blue { + background-color: #0A3055; + } +} diff --git a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts index 02a0a18bf..76b696566 100644 --- a/client/src/app/shared/shared-account-avatar/account-avatar.component.ts +++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts @@ -12,7 +12,7 @@ export class AccountAvatarComponent { avatar?: { url?: string, path: string } url: string } - @Input() size: '25' | '34' | '36' | '40' | '120' = '36' + @Input() size: '25' | '32' | '34' | '36' | '40' | '120' = '36' // Use an external link @Input() href: string @@ -23,6 +23,8 @@ export class AccountAvatarComponent { this._title = value } + defaultAvatarUrl = Account.GET_DEFAULT_AVATAR_URL() + private _title: string get title () { @@ -30,10 +32,31 @@ export class AccountAvatarComponent { } get class () { - return `avatar avatar-${this.size}` + return `avatar avatar-${this.size}` + (this.avatarUrl ? '' : ` initial ${this.getColorTheme()}`) } get avatarUrl () { return Account.GET_ACTOR_AVATAR_URL(this.account) } + + get initial () { + return this.account?.name.slice(0, 1) + } + + private getColorTheme () { + const themes = { + abc: 'blue', + def: 'green', + ghi: 'purple', + jkl: 'gray', + mno: 'yellow', + pqr: 'orange', + stv: 'red', + wxyz: 'dark-blue' + } + + const theme = Object.keys(themes).find(chars => chars.includes(this.initial)) + + return themes[theme] + } } diff --git a/client/src/app/shared/shared-main/account/account.model.ts b/client/src/app/shared/shared-main/account/account.model.ts index 65e6798d4..c90bafa5c 100644 --- a/client/src/app/shared/shared-main/account/account.model.ts +++ b/client/src/app/shared/shared-main/account/account.model.ts @@ -14,7 +14,7 @@ export class Account extends Actor implements ServerAccount { userId?: number static GET_ACTOR_AVATAR_URL (actor: { avatar?: { url?: string, path: string } }) { - return Actor.GET_ACTOR_AVATAR_URL(actor) || this.GET_DEFAULT_AVATAR_URL() + return Actor.GET_ACTOR_AVATAR_URL(actor) } static GET_DEFAULT_AVATAR_URL () { @@ -46,7 +46,7 @@ export class Account extends Actor implements ServerAccount { resetAvatar () { this.avatar = null - this.avatarUrl = Account.GET_DEFAULT_AVATAR_URL() + this.avatarUrl = null } private updateComputedAttributes () { diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index e03201cef..2c8ad1d57 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -830,17 +830,9 @@ --chip-padding: .2rem .3rem; } - .avatar { + ::ng-deep .avatar { margin-left: -.4rem; margin-right: .2rem; - height: $avatar-height; - width: $avatar-height; - - border-radius: 50%; - display: inline-block; - line-height: 1.25; - position: relative; - vertical-align: middle; } &.two-lines {