vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[CL-167] Replace title slot with title-suffix for web header (#7571)

This commit is contained in:
Oscar Hinton 2024-01-18 11:45:48 +01:00 committed by GitHub
parent b84e12135b
commit 03c6037a9c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 3 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/src/app/layouts/header/web-header.component.html
View File

@ -9,11 +9,7 @@
<div class="tw-flex"> <div class="tw-flex">
<div class="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2"> <div class="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
<ng-content select="[slot=breadcrumbs]"></ng-content> <ng-content select="[slot=breadcrumbs]"></ng-content>
<div #titleContainer [ngClass]="{ 'tw-hidden': titleContainer.childElementCount === 0 }">
<ng-content select="[slot=title]"></ng-content>
</div>
<h1 <h1
*ngIf="titleContainer.childElementCount === 0"
bitTypography="h1" bitTypography="h1"
noMargin noMargin
class="tw-m-0 tw-mr-2 tw-truncate tw-leading-10" class="tw-m-0 tw-mr-2 tw-truncate tw-leading-10"
@ -21,6 +17,7 @@
> >
<i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i> <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>
{{ title || (routeData.titleId | i18n) }} {{ title || (routeData.titleId | i18n) }}
<ng-content select="[slot=title-suffix]"></ng-content>
</h1> </h1>
</div> </div>
<div class="tw-ml-auto tw-flex tw-flex-col tw-gap-4"> <div class="tw-ml-auto tw-flex tw-flex-col tw-gap-4">

4
apps/web/src/app/layouts/header/web-header.stories.ts
View File

@ -209,11 +209,11 @@ export const WithTabs: Story = (args) => ({
`, `,
}); });
export const WithCustomTitleComponent: Story = (args) => ({ export const WithTitleSuffixComponent: Story = (args) => ({
props: args, props: args,
template: ` template: `
<app-header title="Foobar" icon="bwi-bug" class="tw-text-main"> <app-header title="Foobar" icon="bwi-bug" class="tw-text-main">
<h1 slot="title" class="tw-text-3xl tw-font-semibold" style="font-family: 'Comic Sans MS'">Bitwarden</h1> <ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
</app-header> </app-header>
`, `,
}); });