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: 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
---
.../account-avatar.component.html | 5 +-
.../account-avatar.component.scss | 56 +++++++++++++++++++++-
.../account-avatar.component.ts | 27 ++++++++++-
.../shared/shared-main/account/account.model.ts | 4 +-
4 files changed, 86 insertions(+), 6 deletions(-)
(limited to 'client/src/app/shared')
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 @@
-
+
+
+ {{ 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 () {
--
cgit v1.2.3