client/src/app/shared/shared-account-avatar/account-avatar.component.ts

   1 import { Component, Input } from '@angular/core'
   2 import { Account } from '../shared-main/account/account.model'
   3
   4 @Component({
   5   selector: 'my-account-avatar',
   6   styleUrls: [ './account-avatar.component.scss' ],
   7   templateUrl: './account-avatar.component.html'
   8 })
   9 export class AccountAvatarComponent {
  10   @Input() account: {
  11     name: string
  12     avatar?: { url?: string, path: string }
  13     url: string
  14   }
  15   @Input() size: '25' | '32' | '34' | '36' | '40' | '120' = '36'
  16
  17   // Use an external link
  18   @Input() href: string
  19   // Use routerLink
  20   @Input() internalHref: string | string[]
  21
  22   @Input() set title (value) {
  23     this._title = value
  24   }
  25
  26   defaultAvatarUrl = Account.GET_DEFAULT_AVATAR_URL()
  27
  28   private _title: string
  29
  30   get title () {
  31     return this._title || $localize`${this.account.name} (account page)`
  32   }
  33
  34   get class () {
  35     return `avatar avatar-${this.size}` + (this.avatarUrl ? '' : ` initial ${this.getColorTheme()}`)
  36   }
  37
  38   get avatarUrl () {
  39     return Account.GET_ACTOR_AVATAR_URL(this.account)
  40   }
  41
  42   get initial () {
  43     return this.account?.name.slice(0, 1)
  44   }
  45
  46   private getColorTheme () {
  47     const themes = {
  48       abc: 'blue',
  49       def: 'green',
  50       ghi: 'purple',
  51       jkl: 'gray',
  52       mno: 'yellow',
  53       pqr: 'orange',
  54       stv: 'red',
  55       wxyz: 'dark-blue'
  56     }
  57
  58     const theme = Object.keys(themes).find(chars => chars.includes(this.initial))
  59
  60     return themes[theme]
  61   }
  62 }