Finetune avatar

Ecodev · Nov 18, 2023 · 2d84950 · 2d84950
1 parent 7f69a2c
commit 2d84950
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 16 deletions.
diff --git a/projects/natural/src/lib/_natural.theme.scss b/projects/natural/src/lib/_natural.theme.scss
@@ -45,6 +45,11 @@
     .mat-mdc-dialog-container .mdc-dialog__content {
         color: mat.get-color-from-palette(map.get($theme, foreground), base, 0.87);
     }
+
+    .natural-elevation {
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 1px -1px rgba(0, 0, 0, 0.2),
+            0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    }
 }
 
 $defaultConfig: mat.define-typography-config();

diff --git a/projects/natural/src/lib/modules/avatar/component/avatar.component.ts b/projects/natural/src/lib/modules/avatar/component/avatar.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {Component, HostBinding, Input, OnChanges, SimpleChanges} from '@angular/core';
 
 import {Source} from '../sources/source';
 import {AvatarService} from '../service/avatar.service';
@@ -14,7 +14,26 @@ type Style = Partial<CSSStyleDeclaration>;
     styles: [
         `
             :host {
-                border-radius: 50%;
+                display: block;
+
+                &.decorated {
+                    position: relative;
+
+                    .avatar-container::before {
+                        content: '';
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        border-radius: 50%;
+                        background: linear-gradient(345deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.33) 100%);
+                    }
+
+                    .avatar-content {
+                        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
+                    }
+                }
             }
         `,
     ],
@@ -30,7 +49,12 @@ type Style = Partial<CSSStyleDeclaration>;
                 class="avatar-content"
                 loading="lazy"
             />
-            <div *ngIf="avatarText" class="avatar-content" [ngStyle]="avatarStyle">
+            <div
+                *ngIf="avatarText"
+                class="avatar-content"
+                [class.natural-elevation]="decorated"
+                [ngStyle]="avatarStyle"
+            >
                 {{ avatarText }}
             </div>
         </div>
@@ -43,12 +67,20 @@ export class NaturalAvatarComponent implements OnChanges {
     @Input() public initials?: string | null;
     @Input() public gravatar?: string | null;
 
-    @Input() public size = 50;
-    @Input() public textSizeRatio = 3;
+    @HostBinding('style.height.px')
+    @HostBinding('style.width.px')
+    @Input()
+    public size = 50;
+
+    @HostBinding('class.decorated')
+    @Input()
+    public decorated: boolean = true;
+
+    @Input() public textSizeRatio = 2.25;
     @Input() public bgColor: string | undefined;
     @Input() public fgColor = '#FFF';
     @Input() public borderRadius = '';
-    @Input() public textMaximumLength = 0;
+    @Input() public textMaximumLength = 2;
 
     public avatarSrc: string | null = null;
     public avatarText: string | null = null;
@@ -158,6 +190,8 @@ export class NaturalAvatarComponent implements OnChanges {
             backgroundColor: this.bgColor ? this.bgColor : this.avatarService.getRandomColor(avatarValue),
             font: Math.floor(+this.size / this.textSizeRatio) + 'px Helvetica, Arial, sans-serif',
             lineHeight: this.size + 'px',
+            width: this.size + 'px',
+            height: this.size + 'px',
         };
     }
 

diff --git a/projects/natural/src/lib/modules/avatar/service/avatar.service.ts b/projects/natural/src/lib/modules/avatar/service/avatar.service.ts
@@ -23,14 +23,15 @@ export class AvatarService {
     ]);
 
     private readonly avatarColors = [
-        '#1abc9c',
-        '#3498db',
-        '#f1c40f',
-        '#8e44ad',
-        '#e74c3c',
-        '#d35400',
-        '#2c3e50',
-        '#7f8c8d',
+        '#ff0000',
+        '#ff8800',
+        '#dabb00',
+        '#00c200',
+        '#01cbcb',
+        '#008cff',
+        '#ff00d8',
+        '#c800ff',
+        '#3b3b3b',
     ];
 
     private readonly failedSources = new Map<string, Source>();

diff --git a/projects/natural/src/lib/modules/avatar/sources/initials.ts b/projects/natural/src/lib/modules/avatar/sources/initials.ts
@@ -28,7 +28,7 @@ function getInitials(name: string, size: number): string {
  */
 export class Initials extends Source {
     public getAvatar(size: number): string {
-        return getInitials(this.getValue(), size);
+        return getInitials(this.getValue().replace(/[^a-zA-Z0-9\s]/g, ''), size); // only letters, numbers and space
     }
 
     public isTextual(): boolean {

diff --git a/src/app/avatar/avatar.component.html b/src/app/avatar/avatar.component.html
@@ -23,8 +23,31 @@ <h2 class="mat-h2">Avatar with fallback</h2>
         <natural-avatar gravatar="[email protected]" initials=""></natural-avatar>
     </div>
 
-    <h2 class="mat-h2">Misc</h2>
+    <h2 class="mat-h2">Ignore special chars</h2>
+
+    <div fxLayout="row" fxLayoutGap="10px">
+        <natural-avatar initials="asdf - qwer"></natural-avatar>
+        <natural-avatar initials="asdf (qwer)"></natural-avatar>
+        <natural-avatar initials="asdf / qwer"></natural-avatar>
+    </div>
+
+    <h2 class="mat-h2">Colors</h2>
 
+    <div fxLayout="row" fxLayoutGap="10px">
+        <natural-avatar initials="auto color 1"></natural-avatar>
+        <natural-avatar initials="auto color 2"></natural-avatar>
+        <natural-avatar initials="auto color 3"></natural-avatar>
+        <natural-avatar initials="auto color 4"></natural-avatar>
+        <natural-avatar initials="auto color 5"></natural-avatar>
+        <natural-avatar initials="auto color 6"></natural-avatar>
+        <natural-avatar initials="auto color 7"></natural-avatar>
+        <natural-avatar initials="auto color 8"></natural-avatar>
+        <natural-avatar initials="auto color 9"></natural-avatar>
+        <natural-avatar initials="auto color 10"></natural-avatar>
+        <natural-avatar initials="auto color 11"></natural-avatar>
+    </div>
+
+    <h2 class="mat-h2">Misc</h2>
     <div fxLayout="row" fxLayoutGap="10px">
         <natural-avatar gravatar="5fa7e880db8ff6741e0268ff52c22057"></natural-avatar>
         <natural-avatar gravatar="5fa7e880db8ff6741e0268ff52c22057" [size]="100"></natural-avatar>