From 782f592c985f19ab55d15d8269172e0255aef0e3 Mon Sep 17 00:00:00 2001 From: Matt Gibson Date: Wed, 25 Oct 2023 14:27:32 -0400 Subject: [PATCH] Ps/pm 2910/browser header component (#6641) * Collate browser header concerns into component Header component has a slots field with a left, center, right, and a right-most location for a current account, which will link to an account switcher. * Use feature flag if OK for production eventually * Make sure centered content centered * Allow for disabling header theming for login page visual gitches exist for links and buttons, due to specifications futher down in the header, but those items shouldn't use the `no-theme` option. For now, it's just for the login screen * Select sr-only headers * Fix vault-filter center header component * Correct hover for header buttons/links * Ensure no visual difference when flag is off --- apps/browser/.gitignore | 2 ++ apps/browser/config/base.json | 3 +- .../src/auth/popup/home.component.html | 1 + .../src/auth/popup/lock.component.html | 4 +-- apps/browser/src/platform/flags.ts | 4 ++- .../src/platform/popup/header.component.html | 14 +++++++++ .../src/platform/popup/header.component.ts | 27 +++++++++++++++++ apps/browser/src/popup/app.module.ts | 2 ++ apps/browser/src/popup/scss/base.scss | 30 ++++++++++++------- .../vault/vault-filter.component.html | 6 ++-- 10 files changed, 75 insertions(+), 18 deletions(-) create mode 100644 apps/browser/src/platform/popup/header.component.html create mode 100644 apps/browser/src/platform/popup/header.component.ts diff --git a/apps/browser/.gitignore b/apps/browser/.gitignore index 7a689bdb9f0..87b21b97308 100644 --- a/apps/browser/.gitignore +++ b/apps/browser/.gitignore @@ -1,3 +1,5 @@ +config/local.json + # Safari dist-safari !src/safari/safari/app/popup/index.html diff --git a/apps/browser/config/base.json b/apps/browser/config/base.json index 348f00d1f36..8a3ccc14d3c 100644 --- a/apps/browser/config/base.json +++ b/apps/browser/config/base.json @@ -2,6 +2,7 @@ "dev_flags": {}, "flags": { "showPasswordless": true, - "enableCipherKeyEncryption": false + "enableCipherKeyEncryption": false, + "accountSwitching": false } } diff --git a/apps/browser/src/auth/popup/home.component.html b/apps/browser/src/auth/popup/home.component.html index 6b42033c4bc..42fe3106ffb 100644 --- a/apps/browser/src/auth/popup/home.component.html +++ b/apps/browser/src/auth/popup/home.component.html @@ -1,3 +1,4 @@ +
- +
diff --git a/apps/browser/src/platform/flags.ts b/apps/browser/src/platform/flags.ts index 270835bc6a1..f5c17ea7b43 100644 --- a/apps/browser/src/platform/flags.ts +++ b/apps/browser/src/platform/flags.ts @@ -10,7 +10,9 @@ import { GroupPolicyEnvironment } from "../admin-console/types/group-policy-envi // required to avoid linting errors when there are no flags /* eslint-disable-next-line @typescript-eslint/ban-types */ -export type Flags = {} & SharedFlags; +export type Flags = { + accountSwitching?: boolean; +} & SharedFlags; // required to avoid linting errors when there are no flags /* eslint-disable-next-line @typescript-eslint/ban-types */ diff --git a/apps/browser/src/platform/popup/header.component.html b/apps/browser/src/platform/popup/header.component.html new file mode 100644 index 00000000000..5cfdcc9969f --- /dev/null +++ b/apps/browser/src/platform/popup/header.component.html @@ -0,0 +1,14 @@ +
+
+ + + +
+ + + TODO: Current Account + + +
+
+
diff --git a/apps/browser/src/platform/popup/header.component.ts b/apps/browser/src/platform/popup/header.component.ts new file mode 100644 index 00000000000..c32ee603458 --- /dev/null +++ b/apps/browser/src/platform/popup/header.component.ts @@ -0,0 +1,27 @@ +import { Component, Input } from "@angular/core"; +import { Observable, map } from "rxjs"; + +import { AccountService } from "@bitwarden/common/auth/abstractions/account.service"; +import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; + +import { flagEnabled } from "../flags"; + +@Component({ + selector: "app-header", + templateUrl: "header.component.html", +}) +export class HeaderComponent { + @Input() noTheme = false; + authedAccounts$: Observable; + constructor(accountService: AccountService) { + this.authedAccounts$ = accountService.accounts$.pipe( + map((accounts) => { + if (!flagEnabled("accountSwitching")) { + return false; + } + + return Object.values(accounts).some((a) => a.status !== AuthenticationStatus.LoggedOut); + }) + ); + } +} diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index a26eaca8c84..3b8be008048 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/apps/browser/src/popup/app.module.ts @@ -31,6 +31,7 @@ import { SsoComponent } from "../auth/popup/sso.component"; import { TwoFactorOptionsComponent } from "../auth/popup/two-factor-options.component"; import { TwoFactorComponent } from "../auth/popup/two-factor.component"; import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component"; +import { HeaderComponent } from "../platform/popup/header.component"; import { FilePopoutCalloutComponent } from "../tools/popup/components/file-popout-callout.component"; import { GeneratorComponent } from "../tools/popup/generator/generator.component"; import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/password-generator-history.component"; @@ -121,6 +122,7 @@ import "../platform/popup/locales"; FolderAddEditComponent, FoldersComponent, VaultFilterComponent, + HeaderComponent, HintComponent, HomeComponent, LockComponent, diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss index 6cd99abb0d5..16cac3352a8 100644 --- a/apps/browser/src/popup/scss/base.scss +++ b/apps/browser/src/popup/scss/base.scss @@ -176,15 +176,28 @@ cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb, } header:not(bit-callout header) { - min-height: 44px; max-height: 44px; display: flex; - border-bottom: 1px solid #000000; - @include themify($themes) { - color: themed("headerColor"); - background-color: themed("headerBackgroundColor"); - border-bottom-color: themed("headerBorderColor"); + &:not(.no-theme) { + min-height: 44px; + border-bottom: 1px solid #000000; + + @include themify($themes) { + color: themed("headerColor"); + background-color: themed("headerBackgroundColor"); + border-bottom-color: themed("headerBorderColor"); + } + } + + .header-content { + display: flex; + flex: 1 1 auto; + } + + .header-content > .right, + .header-content > .right > .right { + height: 100%; } .left, @@ -230,11 +243,6 @@ header:not(bit-callout header) { height: 100%; white-space: pre; - @include themify($themes) { - color: themed("headerColor"); - background-color: themed("headerBackgroundColor"); - } - &:hover, &:focus { @include themify($themes) { diff --git a/apps/browser/src/vault/popup/components/vault/vault-filter.component.html b/apps/browser/src/vault/popup/components/vault/vault-filter.component.html index 564cf19f2c4..f9ae340a89b 100644 --- a/apps/browser/src/vault/popup/components/vault/vault-filter.component.html +++ b/apps/browser/src/vault/popup/components/vault/vault-filter.component.html @@ -1,9 +1,9 @@ -
+

{{ "myVault" | i18n }}

-
+
{{ "myVault" | i18n }}
-
+