Add AccountAvatarComponent (#3965)

* refactor(client): create account-avatar component

* continue implement account-avatar

* fix review comments

5 files changed, 93 insertions, 0 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
new file mode 100644
index 000000000..6bec0b5f3
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.html
@@ -0,0 +1,8 @@
+<a *ngIf="account" [href]="href" target="_blank" rel="noopener noreferrer" [title]="title">
+  <img
+    [class]="class"
+    [src]="avatarUrl"
+    i18n-alt
+    alt="Account avatar"
+  />
+</a>
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
new file mode 100644
index 000000000..bb941d712
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.scss
@@ -0,0 +1,22 @@
+@import '_variables';
+@import '_mixins';
+
+.avatar-25 {
+  @include avatar(25px);
+}
+
+.avatar-34 {
+  @include avatar(34px);
+}
+
+.avatar-36 {
+  @include avatar(36px);
+}
+
+.avatar-40 {
+  @include avatar(40px);
+}
+
+.avatar-120 {
+  @include avatar(120px);
+}
\ No newline at end of file
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
new file mode 100644
index 000000000..d5533d459
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/account-avatar.component.ts
@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core'
+import { Account as AccountInterface } from '@shared/models'
+import { Account } from '../shared-main/account/account.model'
+
+@Component({
+  selector: 'my-account-avatar',
+  styleUrls: [ './account-avatar.component.scss' ],
+  templateUrl: './account-avatar.component.html'
+})
+export class AccountAvatarComponent {
+  _href: string
+  _title: string
+
+  @Input() account: { name: string, avatar?: { url?: string }, url: string }
+  @Input() size = '36'
+  @Input() set href (value) {
+    this._href = value
+  }
+  @Input() set title (value) {
+    this._title = value
+  }
+
+  get href () {
+    return this._href || this.account?.url
+  }
+
+  get title () {
+    return this._title || $localize`${this.account.name} (account page)`
+  }
+
+  get class () {
+    return `avatar avatar-${this.size}`
+  }
+
+  get avatarUrl () {
+    return this.account?.avatar ? this.account.avatar.url : Account.GET_DEFAULT_AVATAR_URL()
+  }
+}
diff --git a/client/src/app/shared/shared-account-avatar/index.ts b/client/src/app/shared/shared-account-avatar/index.ts
new file mode 100644
index 000000000..40c742ba5
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/index.ts
@@ -0,0 +1,2 @@
+export * from './account-avatar.component'
+export * from './shared-account-avatar.module'
\ No newline at end of file
diff --git a/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts b/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
new file mode 100644
index 000000000..17b27589f
--- /dev/null
+++ b/client/src/app/shared/shared-account-avatar/shared-account-avatar.module.ts
@@ -0,0 +1,23 @@
+
+import { NgModule } from '@angular/core'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { AccountAvatarComponent } from './account-avatar.component'
+
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    AccountAvatarComponent
+  ],
+
+  exports: [
+    AccountAvatarComponent
+  ],
+
+  providers: [ ]
+})
+export class SharedAccountAvatarModule { }