mirror of
https://github.com/bitwarden/browser
synced 2025-12-26 13:13:22 +00:00
d41b3b13ea
* 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>
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
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",
|
|
]
|
|
);
|
|
}
|
|
}
|