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

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 @@
       <td *ngIf="isSelected('username')">
         <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/accounts/' + user.username ]">
           <div class="chip two-lines">
-            <my-account-avatar [account]="user?.account"></my-account-avatar>
+            <my-account-avatar [account]="user?.account" size="32"></my-account-avatar>
            <div>
               <span class="user-table-primary-text">{{ user.account.displayName }}</span>
               <span class="text-muted">{{ user.username }}</span>
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]
+  }
 }
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 {