[PM-7057] Add dev tool for toggling width in web vault (#8447)

Add a dev tool for toggling the web vault width. This allows developers and designers to experiment with how the vault currently behaves with responsiveness and ensure new functionality looks good.
This commit is contained in:
Oscar Hinton 2024-04-04 16:40:21 +02:00 committed by GitHub
parent b1abfb0a5c
commit bf2f570b61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 55 additions and 1 deletions

View File

@ -105,6 +105,8 @@
*ngIf="organization.canManageScim"
></bit-nav-item>
</bit-nav-group>
<app-toggle-width></app-toggle-width>
</nav>
<ng-container *ngIf="organization$ | async as organization">

View File

@ -25,6 +25,7 @@ import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bi
import { PaymentMethodWarningsModule } from "../../../billing/shared";
import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
import { ToggleWidthComponent } from "../../../layouts/toggle-width.component";
import { AdminConsoleLogo } from "../../icons/admin-console-logo";
@Component({
@ -41,6 +42,7 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo";
OrgSwitcherComponent,
BannerModule,
PaymentMethodWarningsModule,
ToggleWidthComponent,
],
})
export class OrganizationLayoutComponent implements OnInit, OnDestroy {

View File

@ -0,0 +1,33 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { NavigationModule } from "@bitwarden/components";
@Component({
selector: "app-toggle-width",
template: `<bit-nav-item
text="Toggle Width"
icon="bwi-bug"
*ngIf="isDev"
class="tw-absolute tw-bottom-0 tw-w-full"
(click)="toggleWidth()"
></bit-nav-item>`,
standalone: true,
imports: [CommonModule, NavigationModule],
})
export class ToggleWidthComponent {
protected isDev: boolean;
constructor(platformUtilsService: PlatformUtilsService) {
this.isDev = platformUtilsService.isDev();
}
protected toggleWidth() {
if (document.body.style.minWidth === "unset") {
document.body.style.minWidth = "";
} else {
document.body.style.minWidth = "unset";
}
}
}

View File

@ -32,6 +32,8 @@
*ngIf="hasFamilySponsorshipAvailable$ | async"
></bit-nav-item>
</bit-nav-group>
<app-toggle-width></app-toggle-width>
</nav>
<app-payment-method-warnings
*ngIf="showPaymentMethodWarningBanners$ | async"

View File

@ -16,6 +16,7 @@ import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/compon
import { PaymentMethodWarningsModule } from "../billing/shared";
import { PasswordManagerLogo } from "./password-manager-logo";
import { ToggleWidthComponent } from "./toggle-width.component";
@Component({
selector: "app-user-layout",
@ -29,6 +30,7 @@ import { PasswordManagerLogo } from "./password-manager-logo";
IconModule,
NavigationModule,
PaymentMethodWarningsModule,
ToggleWidthComponent,
],
})
export class UserLayoutComponent implements OnInit {

View File

@ -27,6 +27,8 @@
route="settings"
*ngIf="showSettingsTab"
></bit-nav-item>
<app-toggle-width></app-toggle-width>
</nav>
<app-payment-method-warnings
*ngIf="showPaymentMethodWarningBanners$ | async"

View File

@ -10,6 +10,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo";
import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared";
import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
@Component({
selector: "providers-layout",
@ -23,6 +24,7 @@ import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/sh
IconModule,
NavigationModule,
PaymentMethodWarningsModule,
ToggleWidthComponent,
],
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil

View File

@ -2,13 +2,20 @@ import { NgModule } from "@angular/core";
import { LayoutComponent as BitLayoutComponent, NavigationModule } from "@bitwarden/components";
import { OrgSwitcherComponent } from "@bitwarden/web-vault/app/layouts/org-switcher/org-switcher.component";
import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module";
import { LayoutComponent } from "./layout.component";
import { NavigationComponent } from "./navigation.component";
@NgModule({
imports: [SharedModule, NavigationModule, BitLayoutComponent, OrgSwitcherComponent],
imports: [
SharedModule,
NavigationModule,
BitLayoutComponent,
OrgSwitcherComponent,
ToggleWidthComponent,
],
declarations: [LayoutComponent, NavigationComponent],
})
export class LayoutModule {}

View File

@ -41,4 +41,6 @@
[relativeTo]="route.parent"
></bit-nav-item>
</bit-nav-group>
<app-toggle-width></app-toggle-width>
</nav>