]>
Commit | Line | Data |
---|---|---|
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 | } |