diff --git a/projects/ui/src/lib/avatar/avatar.component.html b/projects/ui/src/lib/avatar/avatar.component.html index 8e248f9..0e1994f 100644 --- a/projects/ui/src/lib/avatar/avatar.component.html +++ b/projects/ui/src/lib/avatar/avatar.component.html @@ -1 +1 @@ -{{shortUsername}} +{{shortUsername}} \ No newline at end of file diff --git a/projects/ui/src/lib/avatar/avatar.component.scss b/projects/ui/src/lib/avatar/avatar.component.scss index 3f12b54..490f184 100644 --- a/projects/ui/src/lib/avatar/avatar.component.scss +++ b/projects/ui/src/lib/avatar/avatar.component.scss @@ -3,22 +3,30 @@ aspect-ratio: 1/1; text-transform: uppercase; color: #000; - display: flex; - justify-content: center; - align-items: center; + line-height: var(--local-size, 50px); + text-align: center; width: var(--local-size, 50px); - font-size: var(--local-size); + font-size: calc(var(--local-size, 50px) / 2.5); + border-radius: 50%; + user-select: none; - &[data-size="default"] { - --local-size: 50px; + span { + display: block; + translate: 0px 1px; } - &[data-size="small"] { - --local-size: 50px; + + &[data-size="large"] { + --local-size: 64px; } &[data-size="medium"] { --local-size: 50px; } - &[data-size="large"] { - --local-size: 50px; + &[data-size="default"] { + --local-size: 42px; + font-weight: 500; + } + &[data-size="small"] { + --local-size: 32px; + font-weight: 600; } } diff --git a/projects/ui/src/lib/avatar/avatar.component.ts b/projects/ui/src/lib/avatar/avatar.component.ts index d1da9d1..800975d 100644 --- a/projects/ui/src/lib/avatar/avatar.component.ts +++ b/projects/ui/src/lib/avatar/avatar.component.ts @@ -8,8 +8,13 @@ import { AvatarSize } from './avatar.interface'; styleUrls: ['./avatar.component.scss'], }) export class AvatarComponent implements OnInit { - @Input() username: string = 'username'; - @Input() size: AvatarSize = 'default'; + @Input() + @HostBinding('title') + username: string = 'username'; + + @Input() + @HostBinding('attr.data-size') + size: AvatarSize = 'default'; constructor() {} @@ -20,11 +25,6 @@ export class AvatarComponent implements OnInit { return stringHashToHsl(this.username); } - @HostBinding('data-size') - get avatarSize() { - return `${this.size}px`; - } - get shortUsername() { let array = this.username.split(' '); if (array.length >= 2) return array[0].charAt(0) + array[1].charAt(0); diff --git a/src/app/components/sandbox/sandbox.component.html b/src/app/components/sandbox/sandbox.component.html index 925b92e..406e5f9 100644 --- a/src/app/components/sandbox/sandbox.component.html +++ b/src/app/components/sandbox/sandbox.component.html @@ -33,4 +33,9 @@