bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00
Code Issues Releases Wiki Activity

[CL-7] Avatar (#3153)

Browse Source 
* 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>
This commit is contained in:
rr-bw
2022-09-06 11:02:09 -07:00
committed by GitHub
parent 460a846f89
commit 7c5e4dd3d6
7 changed files with 238 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/web/src/app/vault/organization-badge/organization-name-badge.component.ts
View File

@@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { Utils } from "@bitwarden/common/misc/utils";
@Component({
selector: "app-org-badge",
@@ -20,37 +21,12 @@ export class OrganizationNameBadgeComponent implements OnInit {
ngOnInit(): void {
if (this.organizationName == null || this.organizationName === "") {
this.organizationName = this.i18nService.t("me");
this.color = this.stringToColor(this.profileName.toUpperCase());
this.color = Utils.stringToColor(this.profileName.toUpperCase());
}
if (this.color == null) {
this.color = this.stringToColor(this.organizationName.toUpperCase());
this.color = Utils.stringToColor(this.organizationName.toUpperCase());
}
this.textColor = this.pickTextColorBasedOnBgColor();
}
// This value currently isn't stored anywhere, only calculated in the app-avatar component
// Once we are allowing org colors to be changed and saved, change this out
private stringToColor(str: string): string {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let color = "#";
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xff;
color += ("00" + value.toString(16)).substr(-2);
}
return color;
}
// There are a few ways to calculate text color for contrast, this one seems to fit accessibility guidelines best.
// https://stackoverflow.com/a/3943023/6869691
private pickTextColorBasedOnBgColor() {
const color = this.color.charAt(0) === "#" ? this.color.substring(1, 7) : this.color;
const r = parseInt(color.substring(0, 2), 16); // hexToR
const g = parseInt(color.substring(2, 4), 16); // hexToG
const b = parseInt(color.substring(4, 6), 16); // hexToB
return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "black !important" : "white !important";
this.textColor = Utils.pickTextColorBasedOnBgColor(this.color);
}
emitOnOrganizationClicked() {