mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-27 04:03:00 +02:00
Create web specific layout
This commit is contained in:
parent
07076ebf9d
commit
123c1841a4
@ -1,9 +1,5 @@
|
||||
<bit-layout variant="secondary">
|
||||
<nav
|
||||
slot="sidebar"
|
||||
*ngIf="organization$ | async as organization"
|
||||
class="tw-flex tw-flex-col tw-h-full"
|
||||
>
|
||||
<app-layout variant="secondary">
|
||||
<ng-container slot="sidebar" *ngIf="organization$ | async as organization">
|
||||
<a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'adminConsole' | i18n">
|
||||
<bit-icon [icon]="logo"></bit-icon>
|
||||
</a>
|
||||
@ -109,11 +105,7 @@
|
||||
*ngIf="organization.canManageScim"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
|
||||
<navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
|
||||
|
||||
<app-toggle-width></app-toggle-width>
|
||||
</nav>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="organization$ | async as organization">
|
||||
<bit-banner
|
||||
@ -123,10 +115,7 @@
|
||||
>
|
||||
{{ "accessingUsingProvider" | i18n: organization.providerName }}
|
||||
</bit-banner>
|
||||
<app-payment-method-warnings
|
||||
*ngIf="showPaymentMethodWarningBanners$ | async"
|
||||
></app-payment-method-warnings>
|
||||
</ng-container>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
</bit-layout>
|
||||
</app-layout>
|
||||
|
@ -18,15 +18,11 @@ import {
|
||||
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
|
||||
import { PolicyType } from "@bitwarden/common/admin-console/enums";
|
||||
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
|
||||
import { BannerModule, IconModule, NavigationModule } from "@bitwarden/components";
|
||||
|
||||
import { PaymentMethodWarningsModule } from "../../../billing/shared";
|
||||
import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
|
||||
import { ProductSwitcherModule } from "../../../layouts/product-switcher/product-switcher.module";
|
||||
import { ToggleWidthComponent } from "../../../layouts/toggle-width.component";
|
||||
import { WebLayoutComponent } from "../../../layouts/web-layout.component";
|
||||
import { AdminConsoleLogo } from "../../icons/admin-console-logo";
|
||||
|
||||
@Component({
|
||||
@ -37,14 +33,11 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo";
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
JslibModule,
|
||||
LayoutComponent,
|
||||
WebLayoutComponent,
|
||||
IconModule,
|
||||
NavigationModule,
|
||||
OrgSwitcherComponent,
|
||||
BannerModule,
|
||||
PaymentMethodWarningsModule,
|
||||
ToggleWidthComponent,
|
||||
ProductSwitcherModule,
|
||||
],
|
||||
})
|
||||
export class OrganizationLayoutComponent implements OnInit, OnDestroy {
|
||||
@ -58,15 +51,10 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
|
||||
|
||||
private _destroy = new Subject<void>();
|
||||
|
||||
protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
|
||||
FeatureFlag.ShowPaymentMethodWarningBanners,
|
||||
);
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private organizationService: OrganizationService,
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private configService: ConfigService,
|
||||
private policyService: PolicyService,
|
||||
) {}
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
<bit-layout>
|
||||
<nav slot="sidebar" class="tw-flex tw-flex-col tw-h-full">
|
||||
<app-layout>
|
||||
<ng-container slot="sidebar">
|
||||
<a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'passwordManager' | i18n">
|
||||
<bit-icon [icon]="logo"></bit-icon>
|
||||
</a>
|
||||
@ -32,13 +32,7 @@
|
||||
*ngIf="hasFamilySponsorshipAvailable$ | async"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
</ng-container>
|
||||
|
||||
<navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
|
||||
|
||||
<app-toggle-width></app-toggle-width>
|
||||
</nav>
|
||||
<app-payment-method-warnings
|
||||
*ngIf="showPaymentMethodWarningBanners$ | async"
|
||||
></app-payment-method-warnings>
|
||||
<router-outlet></router-outlet>
|
||||
</bit-layout>
|
||||
</app-layout>
|
||||
|
@ -7,17 +7,12 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
|
||||
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
||||
import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
|
||||
import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
|
||||
|
||||
import { PaymentMethodWarningsModule } from "../billing/shared";
|
||||
import { IconModule, NavigationModule } from "@bitwarden/components";
|
||||
|
||||
import { PasswordManagerLogo } from "./password-manager-logo";
|
||||
import { ProductSwitcherModule } from "./product-switcher/product-switcher.module";
|
||||
import { ToggleWidthComponent } from "./toggle-width.component";
|
||||
import { WebLayoutComponent } from "./web-layout.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-user-layout",
|
||||
@ -27,12 +22,9 @@ import { ToggleWidthComponent } from "./toggle-width.component";
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
JslibModule,
|
||||
LayoutComponent,
|
||||
WebLayoutComponent,
|
||||
IconModule,
|
||||
NavigationModule,
|
||||
PaymentMethodWarningsModule,
|
||||
ToggleWidthComponent,
|
||||
ProductSwitcherModule,
|
||||
],
|
||||
})
|
||||
export class UserLayoutComponent implements OnInit {
|
||||
@ -40,16 +32,11 @@ export class UserLayoutComponent implements OnInit {
|
||||
protected hasFamilySponsorshipAvailable$: Observable<boolean>;
|
||||
protected showSubscription$: Observable<boolean>;
|
||||
|
||||
protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
|
||||
FeatureFlag.ShowPaymentMethodWarningBanners,
|
||||
);
|
||||
|
||||
constructor(
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private organizationService: OrganizationService,
|
||||
private apiService: ApiService,
|
||||
private syncService: SyncService,
|
||||
private configService: ConfigService,
|
||||
private billingAccountProfileStateService: BillingAccountProfileStateService,
|
||||
) {}
|
||||
|
||||
|
14
apps/web/src/app/layouts/web-layout.component.html
Normal file
14
apps/web/src/app/layouts/web-layout.component.html
Normal file
@ -0,0 +1,14 @@
|
||||
<bit-layout [variant]="variant">
|
||||
<nav slot="sidebar" class="tw-flex tw-flex-col tw-h-full">
|
||||
<ng-content select="[slot=sidebar]"></ng-content>
|
||||
|
||||
<navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
|
||||
<app-toggle-width></app-toggle-width>
|
||||
</nav>
|
||||
|
||||
<app-payment-method-warnings
|
||||
*ngIf="showPaymentMethodWarningBanners$ | async"
|
||||
></app-payment-method-warnings>
|
||||
|
||||
<ng-content></ng-content>
|
||||
</bit-layout>
|
33
apps/web/src/app/layouts/web-layout.component.ts
Normal file
33
apps/web/src/app/layouts/web-layout.component.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, Input } from "@angular/core";
|
||||
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { LayoutComponent, LayoutVariant } from "@bitwarden/components";
|
||||
|
||||
import { PaymentMethodWarningsModule } from "../billing/shared";
|
||||
|
||||
import { ProductSwitcherModule } from "./product-switcher/product-switcher.module";
|
||||
import { ToggleWidthComponent } from "./toggle-width.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-layout",
|
||||
templateUrl: "web-layout.component.html",
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
LayoutComponent,
|
||||
ProductSwitcherModule,
|
||||
ToggleWidthComponent,
|
||||
PaymentMethodWarningsModule,
|
||||
],
|
||||
})
|
||||
export class WebLayoutComponent {
|
||||
@Input() variant: LayoutVariant = "primary";
|
||||
|
||||
protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
|
||||
FeatureFlag.ShowPaymentMethodWarningBanners,
|
||||
);
|
||||
|
||||
constructor(private configService: ConfigService) {}
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
<bit-layout variant="secondary">
|
||||
<nav slot="sidebar" *ngIf="provider$ | async as provider" class="tw-flex tw-flex-col tw-h-full">
|
||||
<app-layout variant="secondary">
|
||||
<ng-container slot="sidebar" *ngIf="provider$ | async as provider">
|
||||
<a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'providerPortal' | i18n">
|
||||
<bit-icon [icon]="logo"></bit-icon>
|
||||
</a>
|
||||
@ -40,13 +40,7 @@
|
||||
route="settings"
|
||||
*ngIf="showSettingsTab(provider)"
|
||||
></bit-nav-item>
|
||||
</ng-container>
|
||||
|
||||
<navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
|
||||
|
||||
<app-toggle-width></app-toggle-width>
|
||||
</nav>
|
||||
<app-payment-method-warnings
|
||||
*ngIf="showPaymentMethodWarningBanners$ | async"
|
||||
></app-payment-method-warnings>
|
||||
<router-outlet></router-outlet>
|
||||
</bit-layout>
|
||||
</app-layout>
|
||||
|
@ -8,13 +8,10 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
|
||||
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
|
||||
import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
|
||||
import { canAccessBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
|
||||
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
|
||||
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
|
||||
import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
|
||||
import { IconModule, 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 { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
|
||||
import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
|
||||
import { WebLayoutComponent } from "@bitwarden/web-vault/app/layouts/web-layout.component";
|
||||
|
||||
@Component({
|
||||
selector: "providers-layout",
|
||||
@ -24,12 +21,9 @@ import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-wi
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
JslibModule,
|
||||
LayoutComponent,
|
||||
WebLayoutComponent,
|
||||
IconModule,
|
||||
NavigationModule,
|
||||
PaymentMethodWarningsModule,
|
||||
ToggleWidthComponent,
|
||||
ProductSwitcherModule,
|
||||
],
|
||||
})
|
||||
export class ProvidersLayoutComponent implements OnInit, OnDestroy {
|
||||
@ -39,10 +33,6 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
|
||||
protected provider$: Observable<Provider>;
|
||||
protected canAccessBilling$: Observable<boolean>;
|
||||
|
||||
protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
|
||||
FeatureFlag.ShowPaymentMethodWarningBanners,
|
||||
);
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private providerService: ProviderService,
|
||||
|
@ -1,4 +1,4 @@
|
||||
<bit-layout>
|
||||
<app-layout>
|
||||
<router-outlet slot="sidebar" name="sidebar"></router-outlet>
|
||||
<router-outlet></router-outlet>
|
||||
</bit-layout>
|
||||
</app-layout>
|
||||
|
@ -1,23 +1,15 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
|
||||
import { LayoutComponent as BitLayoutComponent, NavigationModule } from "@bitwarden/components";
|
||||
import { NavigationModule } from "@bitwarden/components";
|
||||
import { OrgSwitcherComponent } from "@bitwarden/web-vault/app/layouts/org-switcher/org-switcher.component";
|
||||
import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
|
||||
import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
|
||||
import { WebLayoutComponent } from "@bitwarden/web-vault/app/layouts/web-layout.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,
|
||||
ToggleWidthComponent,
|
||||
ProductSwitcherModule,
|
||||
],
|
||||
imports: [SharedModule, NavigationModule, WebLayoutComponent, OrgSwitcherComponent],
|
||||
declarations: [LayoutComponent, NavigationComponent],
|
||||
})
|
||||
export class LayoutModule {}
|
||||
|
@ -1,54 +1,48 @@
|
||||
<nav class="tw-flex tw-flex-col tw-h-full">
|
||||
<a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
|
||||
<bit-icon [icon]="logo"></bit-icon>
|
||||
</a>
|
||||
<a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
|
||||
<bit-icon [icon]="logo"></bit-icon>
|
||||
</a>
|
||||
|
||||
<org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
|
||||
<org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
|
||||
<bit-nav-item
|
||||
icon="bwi-collection"
|
||||
[text]="'projects' | i18n"
|
||||
route="projects"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-key"
|
||||
[text]="'secrets' | i18n"
|
||||
route="secrets"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-wrench"
|
||||
[text]="'machineAccounts' | i18n"
|
||||
route="machine-accounts"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-providers"
|
||||
[text]="'integrations' | i18n"
|
||||
route="integrations"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-trash"
|
||||
[text]="'trash' | i18n"
|
||||
route="trash"
|
||||
[relativeTo]="route.parent"
|
||||
*ngIf="isAdmin$ | async"
|
||||
></bit-nav-item>
|
||||
<bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" *ngIf="isAdmin$ | async">
|
||||
<bit-nav-item
|
||||
icon="bwi-collection"
|
||||
[text]="'projects' | i18n"
|
||||
route="projects"
|
||||
[text]="'importData' | i18n"
|
||||
route="settings/import"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-key"
|
||||
[text]="'secrets' | i18n"
|
||||
route="secrets"
|
||||
[text]="'exportData' | i18n"
|
||||
route="settings/export"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-wrench"
|
||||
[text]="'machineAccounts' | i18n"
|
||||
route="machine-accounts"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-providers"
|
||||
[text]="'integrations' | i18n"
|
||||
route="integrations"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
icon="bwi-trash"
|
||||
[text]="'trash' | i18n"
|
||||
route="trash"
|
||||
[relativeTo]="route.parent"
|
||||
*ngIf="isAdmin$ | async"
|
||||
></bit-nav-item>
|
||||
<bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" *ngIf="isAdmin$ | async">
|
||||
<bit-nav-item
|
||||
[text]="'importData' | i18n"
|
||||
route="settings/import"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
<bit-nav-item
|
||||
[text]="'exportData' | i18n"
|
||||
route="settings/export"
|
||||
[relativeTo]="route.parent"
|
||||
></bit-nav-item>
|
||||
</bit-nav-group>
|
||||
|
||||
<navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
|
||||
|
||||
<app-toggle-width></app-toggle-width>
|
||||
</nav>
|
||||
</bit-nav-group>
|
||||
|
Loading…
Reference in New Issue
Block a user