mirror of
https://github.com/bitwarden/browser.git
synced 2024-08-21 22:23:52 +02:00
[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
This commit is contained in:
parent
2c609fc6fd
commit
474df5ba5e
|
@ -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<string>();
|
||||
|
||||
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() {
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
<td *ngIf="organizations.length > 0 && !organization" class="tw-w-28">
|
||||
<app-org-badge
|
||||
organizationName="{{ c.organizationId | orgNameFromId: organizations }}"
|
||||
[color]="!c.organizationId ? '#175ddc' : null"
|
||||
profileName="{{ profileName }}"
|
||||
(onOrganizationClicked)="onOrganizationClicked(c.organizationId)"
|
||||
></app-org-badge>
|
||||
</td>
|
||||
|
|
|
@ -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<any>;
|
||||
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();
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user