[SG-58] Avatar color selector (#3691)

* changes * merge * undo * work * stuffs * chore: added custom color picker * oops * chore: everything but the broken sink * picker v2 * fix: cleanup * fix: linty * fix: use tailwind * fix: use tailwind * undo: merge error * remove: old color picker * fix: merge issue * chore: use input vs component * fix: move logic out! * fix: revert changes to bit-avatar * fix: cleanup undos * feat: color lookup for "me" badge in vault * fix: naming stuff * fix: event emitter * fix: linty * fix: protect * fix: remove v1 states work: navatar * fix: big * fix: messages merge issue * bug: differing bg colors for generated components * feat: added sync stuff * fix: cli * fix: remove service refs, use state * fix: moved from EventEmitter to Subjects * fix: srs * fix: strict stuff is nice tbh * SG-920 + SG-921 (#4342) * SG-920 + SG-921 * Update change-avatar.component.html * Update selectable-avatar.component.ts * [SG-926] [SG-58] [Defect] - Selected Avatar color does not persist in the Account Settings menu (#4359) * SG-926 * fix: comment * fix: undo * fix: imp * work: done with static values (#4272) * [SG-35] (#4361) Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>
2025-12-22 19:23:52 +00:00 · 2023-01-01 10:30:09 -05:00
parent 0a734ce338
commit d41b3b13ea
27 changed files with 533 additions and 14 deletions
--- a/apps/web/src/app/components/selectable-avatar.component.ts
+++ b/apps/web/src/app/components/selectable-avatar.component.ts
@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+@Component({
+  selector: "selectable-avatar",
+  template: `<span
+    [title]="title"
+    (click)="onFire()"
+    (keyup.enter)="onFire()"
+    tabindex="0"
+    [ngClass]="classList"
+  >
+    <bit-avatar
+      appStopClick
+      [text]="text"
+      size="xlarge"
+      [text]="text"
+      [color]="color"
+      [border]="false"
+      [id]="id"
+      [border]="border"
+      [title]="title"
+    >
+    </bit-avatar>
+  </span>`,
+})
+export class SelectableAvatarComponent {
+  @Input() id: string;
+  @Input() text: string;
+  @Input() title: string;
+  @Input() color: string;
+  @Input() border = false;
+  @Input() selected = false;
+  @Output() select = new EventEmitter<string>();
+
+  onFire() {
+    this.select.emit(this.color);
+  }
+
+  get classList() {
+    return ["tw-rounded-full tw-inline-block"]
+      .concat(["tw-cursor-pointer", "tw-outline", "tw-outline-solid", "tw-outline-offset-1"])
+      .concat(
+        this.selected
+          ? ["tw-outline-[3px]", "tw-outline-primary-500"]
+          : [
+              "tw-outline-0",
+              "hover:tw-outline-1",
+              "hover:tw-outline-primary-300",
+              "focus:tw-outline-2",
+              "focus:tw-outline-primary-500",
+            ]
+      );
+  }
+}