[CL-7] Avatar (#3153)

* CL-7 Begin Implementing Avatar * add figma design to parameters * rework size property * Update Figma file to correct component * remove circle input (avatar will always be a circle) * adjust sizing and limit inputs * Setup color input and functionality * Add border option * fix bug duplicating classes * Update size for large avatar * Remove unnecessary class * Fix typo * Remove 'dynamic' input (Avatar will now regenerate on changes by default) * Use Tailwind class instead of an arbitrary value * Remove gravatars (deprecated, see SG-434) * Rename methods to a more accurate name * Rework classList() getter method * Remove unnecessary logic and services * Make properties private, and rename for better clarity * Move sanitizer logic to the TS code rather than the template * Rework and move function to a common static class in Utils * Rename 'data' to 'text' for clarity * Rework classList implementation * Remove email since we removed gravatars * Remove template * set color based on color, id, or text input * rework generate method * add explicit null/undefined check * remove comment Co-authored-by: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
2025-12-15 07:43:35 +00:00 · 2022-09-06 11:02:09 -07:00
parent 460a846f89
commit 7c5e4dd3d6
7 changed files with 238 additions and 42 deletions
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -0,0 +1,127 @@
+import { Component, Input, OnChanges } from "@angular/core";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
+
+import { Utils } from "@bitwarden/common/misc/utils";
+
+type SizeTypes = "large" | "default" | "small";
+
+const SizeClasses: Record<SizeTypes, string[]> = {
+  large: ["tw-h-16", "tw-w-16"],
+  default: ["tw-h-12", "tw-w-12"],
+  small: ["tw-h-7", "tw-w-7"],
+};
+
+@Component({
+  selector: "bit-avatar",
+  template: `<img *ngIf="src" [src]="src" title="{{ text }}" [ngClass]="classList" />`,
+})
+export class AvatarComponent implements OnChanges {
+  @Input() border = false;
+  @Input() color: string;
+  @Input() id: number;
+  @Input() text: string;
+  @Input() size: SizeTypes = "default";
+
+  private svgCharCount = 2;
+  private svgFontSize = 20;
+  private svgFontWeight = 300;
+  private svgSize = 48;
+  src: SafeResourceUrl;
+
+  constructor(public sanitizer: DomSanitizer) {}
+
+  ngOnChanges() {
+    this.generate();
+  }
+
+  get classList() {
+    return ["tw-rounded-full"]
+      .concat(SizeClasses[this.size] ?? [])
+      .concat(this.border ? ["tw-border", "tw-border-solid", "tw-border-secondary-500"] : []);
+  }
+
+  private generate() {
+    let chars: string = null;
+    const upperCaseText = this.text.toUpperCase();
+
+    chars = this.getFirstLetters(upperCaseText, this.svgCharCount);
+
+    if (chars == null) {
+      chars = this.unicodeSafeSubstring(upperCaseText, this.svgCharCount);
+    }
+
+    // If the chars contain an emoji, only show it.
+    if (chars.match(Utils.regexpEmojiPresentation)) {
+      chars = chars.match(Utils.regexpEmojiPresentation)[0];
+    }
+
+    let svg: HTMLElement;
+    let hexColor = this.color;
+
+    if (this.color != null) {
+      svg = this.createSvgElement(this.svgSize, hexColor);
+    } else if (this.id != null) {
+      hexColor = Utils.stringToColor(this.id.toString());
+      svg = this.createSvgElement(this.svgSize, hexColor);
+    } else {
+      hexColor = Utils.stringToColor(upperCaseText);
+      svg = this.createSvgElement(this.svgSize, hexColor);
+    }
+
+    const charObj = this.createTextElement(chars, hexColor);
+    svg.appendChild(charObj);
+    const html = window.document.createElement("div").appendChild(svg).outerHTML;
+    const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
+    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(
+      "data:image/svg+xml;base64," + svgHtml
+    );
+  }
+
+  private getFirstLetters(data: string, count: number): string {
+    const parts = data.split(" ");
+    if (parts.length > 1) {
+      let text = "";
+      for (let i = 0; i < count; i++) {
+        text += this.unicodeSafeSubstring(parts[i], 1);
+      }
+      return text;
+    }
+    return null;
+  }
+
+  private createSvgElement(size: number, color: string): HTMLElement {
+    const svgTag = window.document.createElement("svg");
+    svgTag.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svgTag.setAttribute("pointer-events", "none");
+    svgTag.setAttribute("width", size.toString());
+    svgTag.setAttribute("height", size.toString());
+    svgTag.style.backgroundColor = color;
+    svgTag.style.width = size + "px";
+    svgTag.style.height = size + "px";
+    return svgTag;
+  }
+
+  private createTextElement(character: string, color: string): HTMLElement {
+    const textTag = window.document.createElement("text");
+    textTag.setAttribute("text-anchor", "middle");
+    textTag.setAttribute("y", "50%");
+    textTag.setAttribute("x", "50%");
+    textTag.setAttribute("dy", "0.35em");
+    textTag.setAttribute("pointer-events", "auto");
+    textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
+    textTag.setAttribute(
+      "font-family",
+      '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
+        'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
+    );
+    textTag.textContent = character;
+    textTag.style.fontWeight = this.svgFontWeight.toString();
+    textTag.style.fontSize = this.svgFontSize + "px";
+    return textTag;
+  }
+
+  private unicodeSafeSubstring(str: string, count: number) {
+    const characters = str.match(/./gu);
+    return characters != null ? characters.slice(0, count).join("") : "";
+  }
+}