bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-13 23:13:36 +00:00
Code Issues Releases Wiki Activity

finish migrating anon-layout

Browse Source
This commit is contained in:
Vicki League
2025-06-23 11:51:32 -04:00
parent 4eb5023a30
commit 4ee8341522
2 changed files with 19 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
libs/components/src/anon-layout/anon-layout.component.html
View File

@@ -15,29 +15,29 @@
<div
class="tw-text-center tw-mb-4 sm:tw-mb-6"
[ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth === 'md' }"
[ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth() === 'md' }"
>
<div *ngIf="!hideIcon()" class="tw-mx-auto tw-max-w-24 sm:tw-max-w-28 md:tw-max-w-32">
<bit-icon [icon]="icon"></bit-icon>
</div>
<ng-container *ngIf="title">
<ng-container *ngIf="title()">
<!-- Small screens -->
<h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">
{{ title }}
{{ title() }}
</h1>
<!-- Medium to Larger screens -->
<h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">
{{ title }}
{{ title() }}
</h1>
</ng-container>
<div *ngIf="subtitle" class="tw-text-sm sm:tw-text-base">{{ subtitle }}</div>
<div *ngIf="subtitle()" class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
</div>
<div
class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
[ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
[ngClass]="{ 'tw-max-w-md': maxWidth() === 'md', 'tw-max-w-3xl': maxWidth() === '3xl' }"
>
<div
class="tw-rounded-2xl tw-mb-6 sm:tw-mb-10 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"

38
libs/components/src/anon-layout/anon-layout.component.ts
View File

@@ -4,11 +4,11 @@ import { CommonModule } from "@angular/common";
import {
Component,
HostBinding,
Input,
OnChanges,
OnInit,
SimpleChanges,
input,
model,
} from "@angular/core";
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs";
@@ -34,18 +34,10 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
return ["tw-h-full"];
}
// TODO: Skipped for migration because:
// This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
// and migrating would break narrowing currently.
@Input() title: string;
// TODO: Skipped for migration because:
// This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
// and migrating would break narrowing currently.
@Input() subtitle: string;
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@Input() icon: Icon;
readonly showReadonlyHostname = input<boolean>(undefined);
readonly title = input<string>();
readonly subtitle = input<string>();
icon = model<Icon>();
readonly showReadonlyHostname = input<boolean>(false);
readonly hideLogo = input<boolean>(false);
readonly hideFooter = input<boolean>(false);
readonly hideIcon = input<boolean>(false);
@@ -53,20 +45,16 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
/**
* Max width of the title area content
*
* @default null
* @default undefined
*/
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@Input() titleAreaMaxWidth?: "md";
titleAreaMaxWidth = model<"md">();
/**
* Max width of the layout content
*
* @default 'md'
*/
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@Input() maxWidth: "md" | "3xl" = "md";
maxWidth = model<"md" | "3xl">("md");
protected logo = BitwardenLogo;
protected year = "2024";
@@ -86,20 +74,20 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
}
async ngOnInit() {
this.maxWidth = this.maxWidth ?? "md";
this.titleAreaMaxWidth = this.titleAreaMaxWidth ?? null;
this.maxWidth.set(this.maxWidth() ?? "md");
this.titleAreaMaxWidth.set(this.titleAreaMaxWidth() ?? null);
this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
this.version = await this.platformUtilsService.getApplicationVersion();
// If there is no icon input, then use the default icon
if (this.icon == null) {
this.icon = BitwardenShield;
if (this.icon() == null) {
this.icon.set(BitwardenShield);
}
}
async ngOnChanges(changes: SimpleChanges) {
if (changes.maxWidth) {
this.maxWidth = changes.maxWidth.currentValue ?? "md";
this.maxWidth.set(changes.maxWidth.currentValue ?? "md");
}
}
}