From 474df5ba5eae79887389221d103bdaae925a21e1 Mon Sep 17 00:00:00 2001 From: Robyn MacCallum Date: Tue, 10 May 2022 07:15:29 -0400 Subject: [PATCH] [SG-232 & SG-251] Fix color issues with organization badge (#1649) * Fix color issues with organization badge * Use tokenService to get account name * Remove unused import --- .../organization-name-badge.component.ts | 20 +++++-------------- .../organizations/vault/ciphers.component.ts | 9 ++++++--- src/app/vault/ciphers.component.html | 2 +- src/app/vault/ciphers.component.ts | 6 +++++- 4 files changed, 17 insertions(+), 20 deletions(-) diff --git a/src/app/modules/vault/modules/organization-badge/organization-name-badge.component.ts b/src/app/modules/vault/modules/organization-badge/organization-name-badge.component.ts index 7fa37a8bc0..1d4f90d1fc 100644 --- a/src/app/modules/vault/modules/organization-badge/organization-name-badge.component.ts +++ b/src/app/modules/vault/modules/organization-badge/organization-name-badge.component.ts @@ -8,10 +8,11 @@ import { I18nService } from "jslib-common/abstractions/i18n.service"; }) export class OrganizationNameBadgeComponent implements OnInit { @Input() organizationName: string; - @Input() color: string; + @Input() profileName: string; @Output() onOrganizationClicked = new EventEmitter(); + color: string; textColor: string; constructor(private i18nService: I18nService) {} @@ -19,10 +20,10 @@ 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()); } - const upperData = this.organizationName.toUpperCase(); if (this.color == null) { - this.color = this.stringToColor(upperData); + this.color = this.stringToColor(this.organizationName.toUpperCase()); } this.textColor = this.pickTextColorBasedOnBgColor(); } @@ -49,18 +50,7 @@ export class OrganizationNameBadgeComponent implements OnInit { 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 - - const uicolors = [r / 255, g / 255, b / 255]; - const c = uicolors.map((c) => { - if (c <= 0.03928) { - return c / 12.92; - } else { - return Math.pow((c + 0.055) / 1.055, 2.4); - } - }); - - const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; - return L > 0.179 ? "black !important" : "white !important"; + return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "black !important" : "white !important"; } emitOnOrganizationClicked() { diff --git a/src/app/organizations/vault/ciphers.component.ts b/src/app/organizations/vault/ciphers.component.ts index 08e4b15894..f57df2d135 100644 --- a/src/app/organizations/vault/ciphers.component.ts +++ b/src/app/organizations/vault/ciphers.component.ts @@ -10,6 +10,7 @@ import { PasswordRepromptService } from "jslib-common/abstractions/passwordRepro import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service"; import { SearchService } from "jslib-common/abstractions/search.service"; import { StateService } from "jslib-common/abstractions/state.service"; +import { TokenService } from "jslib-common/abstractions/token.service"; import { TotpService } from "jslib-common/abstractions/totp.service"; import { Organization } from "jslib-common/models/domain/organization"; import { CipherView } from "jslib-common/models/view/cipherView"; @@ -33,13 +34,14 @@ export class CiphersComponent extends BaseCiphersComponent { i18nService: I18nService, platformUtilsService: PlatformUtilsService, cipherService: CipherService, - private apiService: ApiService, eventService: EventService, totpService: TotpService, passwordRepromptService: PasswordRepromptService, logService: LogService, stateService: StateService, - organizationService: OrganizationService + organizationService: OrganizationService, + tokenService: TokenService, + private apiService: ApiService ) { super( searchService, @@ -51,7 +53,8 @@ export class CiphersComponent extends BaseCiphersComponent { stateService, passwordRepromptService, logService, - organizationService + organizationService, + tokenService ); } diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html index 4c44b384f5..1bea313147 100644 --- a/src/app/vault/ciphers.component.html +++ b/src/app/vault/ciphers.component.html @@ -48,7 +48,7 @@ diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts index a8527fb6ea..3f1dc3e059 100644 --- a/src/app/vault/ciphers.component.ts +++ b/src/app/vault/ciphers.component.ts @@ -10,6 +10,7 @@ import { PasswordRepromptService } from "jslib-common/abstractions/passwordRepro import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service"; import { SearchService } from "jslib-common/abstractions/search.service"; import { StateService } from "jslib-common/abstractions/state.service"; +import { TokenService } from "jslib-common/abstractions/token.service"; import { TotpService } from "jslib-common/abstractions/totp.service"; import { CipherRepromptType } from "jslib-common/enums/cipherRepromptType"; import { CipherType } from "jslib-common/enums/cipherType"; @@ -37,6 +38,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy actionPromise: Promise; userHasPremiumAccess = false; organizations: Organization[] = []; + profileName: string; private didScroll = false; private pagedCiphersCount = 0; @@ -52,7 +54,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy protected stateService: StateService, protected passwordRepromptService: PasswordRepromptService, private logService: LogService, - private organizationService: OrganizationService + private organizationService: OrganizationService, + private tokenService: TokenService ) { super(searchService); } @@ -65,6 +68,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy // Do not use ngOnInit() for anything that requires sync data. async load(filter: (cipher: CipherView) => boolean = null, deleted = false) { await super.load(filter, deleted); + this.profileName = await this.tokenService.getName(); this.organizations = await this.organizationService.getAll(); this.userHasPremiumAccess = await this.stateService.getCanAccessPremium(); }