From b392377e64072cf14f7d017f583ff9d61764537c Mon Sep 17 00:00:00 2001 From: William Martin Date: Thu, 7 Nov 2024 12:36:08 -0500 Subject: [PATCH] wip test --- .../popup/layout/password-manager-logo.ts | 5 +++ .../popup-tab-navigation.component.html | 41 ++++++------------- .../layout/popup-tab-navigation.component.ts | 7 +++- apps/browser/src/popup/scss/base.scss | 8 ++-- .../settings/appearance-v2.component.html | 5 +++ .../popup/settings/appearance-v2.component.ts | 8 ++++ 6 files changed, 41 insertions(+), 33 deletions(-) create mode 100644 apps/browser/src/platform/popup/layout/password-manager-logo.ts diff --git a/apps/browser/src/platform/popup/layout/password-manager-logo.ts b/apps/browser/src/platform/popup/layout/password-manager-logo.ts new file mode 100644 index 00000000000..d93e2d5bb30 --- /dev/null +++ b/apps/browser/src/platform/popup/layout/password-manager-logo.ts @@ -0,0 +1,5 @@ +import { svgIcon } from "@bitwarden/components"; + +export const PasswordManagerLogo = svgIcon` + +`; diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html index 9c56271cf31..0d68ff83e1e 100644 --- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html +++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html @@ -1,29 +1,14 @@ -
+ + + + + + -
- + diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts index ced3f6462e9..5373b898b59 100644 --- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts +++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts @@ -2,18 +2,21 @@ import { CommonModule } from "@angular/common"; import { Component } from "@angular/core"; import { RouterModule } from "@angular/router"; -import { LinkModule } from "@bitwarden/components"; +import { LinkModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; +import { PasswordManagerLogo } from "./password-manager-logo"; @Component({ selector: "popup-tab-navigation", templateUrl: "popup-tab-navigation.component.html", standalone: true, - imports: [CommonModule, LinkModule, RouterModule], + imports: [CommonModule, LinkModule, RouterModule, LayoutComponent, NavigationModule], host: { class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col", }, }) export class PopupTabNavigationComponent { + logo = PasswordManagerLogo; + navButtons = [ { label: "Vault", diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss index 02ec66ec2f1..1023071ede1 100644 --- a/apps/browser/src/popup/scss/base.scss +++ b/apps/browser/src/popup/scss/base.scss @@ -15,7 +15,9 @@ body { } body { - width: 380px !important; + width: 380px; + transition: width 1s ease-out; + min-width: 380px !important; height: 600px !important; position: relative; min-height: 100vh; @@ -444,13 +446,13 @@ app-root { @media only screen and (min-width: 601px) { header, main { - padding: 0 calc((100% - 500px) / 2); + // padding: 0 calc((100% - 500px) / 2); } } main:not(popup-page main) { position: absolute; - top: 44px; + top: 0px; bottom: 0; left: 0; right: 0; diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.html b/apps/browser/src/vault/popup/settings/appearance-v2.component.html index 6b517e500db..5321db87b88 100644 --- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html +++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html @@ -37,6 +37,11 @@ {{ "Compact Mode" }} + + diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts index c995b13ec69..8724977c18f 100644 --- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts +++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts @@ -46,6 +46,7 @@ export class AppearanceV2Component implements OnInit { theme: ThemeType.System, enableAnimations: true, compactMode: false, + width: 380, }); /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */ @@ -86,6 +87,7 @@ export class AppearanceV2Component implements OnInit { theme, enableAnimations, compactMode: false, + width: document.body.clientWidth, }); this.formLoading = false; @@ -119,6 +121,12 @@ export class AppearanceV2Component implements OnInit { .subscribe((compactMode) => { this.designSystemService.compactMode.set(compactMode); }); + + this.appearanceForm.controls.width.valueChanges + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe((width) => { + document.body.style.width = `${width}px`; + }); } async updateFavicon(enableFavicon: boolean) {