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

3 files changed, 84 insertions, 4 deletions

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 @@
 <ng-template #img>
-  <img [class]="class" [src]="avatarUrl" i18n-alt alt="Account avatar" />
+  <img *ngIf="avatarUrl || !initial" [class]="class" [src]="avatarUrl || defaultAvatarUrl" i18n-alt alt="Account avatar" />
+  <div *ngIf="!avatarUrl && initial" [class]="class">
+    <span>{{ initial }}</span>
+  </div>
 </ng-template>
 
 <a *ngIf="account && href" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
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]
+  }
 }