1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-21 02:33:46 +00:00

[SM-325] update header layout to support projected content (#4509)

* expose breadcrumbs to shared module; remove extra whitespace from breadcrumb

* update sm-header to accept projected content; update layout style & semantics

* remove searchTitle route data; change title to titleId

* update styles

* update SM pages to use new header

* add button slot to header

* remove breadcrumbs from shared module

* update project tabs

* update content projection to use slot attribute

* hide tabs container

* add icon input to header

* add breadcrumbs to service account page

* update padding

* update styles

* code style changes

* create access token button component

* simplify access token logic

* add create access token button to header

* update sm-no-items content projection

* revert irrelevant commits

* add header title slot; rename template vars for clarity

* add storybook stories

* remove sm-new-menu from default view; refactor search/button content projection

* remove unused styles; fix title truncate

* remove unnecessary classes

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
Will Martin
2023-01-30 10:58:40 -05:00
committed by GitHub
parent 01091fe260
commit 62986be1a2
18 changed files with 345 additions and 95 deletions

View File

@@ -10,18 +10,24 @@ import { AccountProfile } from "@bitwarden/common/models/domain/account";
templateUrl: "./header.component.html",
})
export class HeaderComponent {
/**
* Custom title that overrides the route data `titleId`
*/
@Input() title: string;
@Input() searchTitle: string;
protected routeData$: Observable<{ title: string; searchTitle: string }>;
/**
* Icon to show before the title
*/
@Input() icon: string;
protected routeData$: Observable<{ titleId: string }>;
protected account$: Observable<AccountProfile>;
constructor(private route: ActivatedRoute, private stateService: StateService) {
this.routeData$ = this.route.data.pipe(
map((params) => {
return {
title: params.title,
searchTitle: params.searchTitle,
titleId: params.titleId,
};
})
);