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

support popped out layout

This commit is contained in:
Vicki League 2024-04-16 14:11:03 -04:00
parent 9bee3e1bc3
commit 688438fc3a
No known key found for this signature in database
GPG Key ID: 6A900B42463EAC13
2 changed files with 200 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
libs/components/src/popup-layout/popup-layout.component.ts
View File

@ -12,12 +12,12 @@ import { TypographyModule } from "../typography";
@Component({ @Component({
selector: "popup-layout", selector: "popup-layout",
template: ` template: `
<div <div class="tw-border tw-h-full tw-border-secondary-300 tw-border-solid tw-flex tw-flex-col">
class="tw-border tw-border-secondary-300 tw-border-solid tw-h-[640px] tw-w-[380px] tw-flex tw-flex-col"
>
<ng-content select="[popupHeader]"></ng-content> <ng-content select="[popupHeader]"></ng-content>
<main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-scroll"> <main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-scroll">
<ng-content></ng-content> <div class="tw-max-w-screen-sm tw-mx-auto">
<ng-content></ng-content>
</div>
</main> </main>
<ng-content select="[popupFooter]"></ng-content> <ng-content select="[popupFooter]"></ng-content>
</div> </div>
@ -29,34 +29,33 @@ export class PopupLayoutComponent {}
@Component({ @Component({
selector: "popup-header", selector: "popup-header",
template: ` template: `
<header <header class="tw-p-4 tw-border-0 tw-border-solid tw-border-b tw-border-secondary-300 ">
class="tw-p-4 tw-border-0 tw-border-solid tw-border-b tw-border-secondary-300 tw-flex tw-justify-between" <div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between">
> <div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9"> <!-- not the right icon -->
<!-- not the right icon --> <i
<i class="bwi bwi-angle-left tw-font-bold"
class="bwi bwi-angle-left tw-font-bold" aria-hidden="true"
aria-hidden="true" *ngIf="variant === 'sub-page'"
*ngIf="variant === 'sub-page'" ></i>
></i> <!-- see if this doesnt need the ! override -->
<!-- see if this doesnt need the ! override --> <h1 bitTypography="h3" class="!tw-mb-0 tw-text-headers">{{ pageTitle }}</h1>
<h1 bitTypography="h3" class="!tw-mb-0 tw-text-headers">{{ pageTitle }}</h1> </div>
</div> <div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
<div class="tw-inline-flex tw-items-center tw-gap-4 tw-h-9"> <button bitButton *ngIf="variant === 'top-level-action'" buttonType="primary">
<button bitButton *ngIf="variant === 'top-level-action'" buttonType="primary"> <i class="bwi bwi-plus tw-font-bold" aria-hidden="true"></i>
<i class="bwi bwi-plus tw-font-bold" aria-hidden="true"></i> Add
Add </button>
</button> <!-- TODO update icon -->
<!-- TODO update icon --> <button bitIconButton="bwi-external-link" size="small" *ngIf="!poppedOut">Pop out</button>
<button bitIconButton="bwi-external-link" size="small">Pop out</button> <!-- TODO reference browser/src/auth/popup/account-switching/current-account -->
<!-- TODO reference browser/src/auth/popup/account-switching/current-account --> <button
<button class="tw-bg-transparent tw-border-none"> class="tw-bg-transparent tw-border-none"
<bit-avatar
*ngIf="variant === 'top-level' || variant === 'top-level-action'" *ngIf="variant === 'top-level' || variant === 'top-level-action'"
text="Ash Ketchum" >
size="small" <bit-avatar text="Ash Ketchum" size="small"></bit-avatar>
></bit-avatar> </button>
</button> </div>
</div> </div>
</header> </header>
`, `,
@ -66,6 +65,8 @@ export class PopupLayoutComponent {}
export class PopupHeaderComponent { export class PopupHeaderComponent {
@Input() variant: "top-level" | "top-level-action" | "sub-page" = "top-level-action"; @Input() variant: "top-level" | "top-level-action" | "sub-page" = "top-level-action";
@Input() pageTitle: string; @Input() pageTitle: string;
// Not the best solution
@Input() poppedOut: boolean = false;
// TODO avatar Input // TODO avatar Input
// TODO button functionality // TODO button functionality
} }
@ -73,9 +74,11 @@ export class PopupHeaderComponent {
@Component({ @Component({
selector: "popup-footer", selector: "popup-footer",
template: ` template: `
<footer class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-flex"> <footer class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
<div class="tw-flex tw-justify-start"> <div class="tw-max-w-screen-sm tw-mx-auto">
<ng-content select="[actionFooter]"></ng-content> <div class="tw-flex tw-justify-start">
<ng-content select="[actionFooter]"></ng-content>
</div>
</div> </div>
</footer> </footer>
`, `,
@ -87,32 +90,34 @@ export class PopupFooterComponent {}
@Component({ @Component({
selector: "popup-bottom-navigation", selector: "popup-bottom-navigation",
template: ` template: `
<footer class="tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-flex"> <footer class="tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
<div class="tw-flex tw-flex-1"> <div class="tw-max-w-screen-sm tw-mx-auto">
<a <div class="tw-flex tw-flex-1">
*ngFor="let button of navButtons" <a
class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-pb-2 tw-pt-3 tw-w-1/4 hover:tw-no-underline hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus:tw-rounded-lg focus:tw-border-primary-500 " *ngFor="let button of navButtons"
[ngClass]=" class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-pb-2 tw-pt-3 tw-w-1/4 hover:tw-no-underline hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus:tw-rounded-lg focus:tw-border-primary-500 "
activePage === button.page ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted' [ngClass]="
" activePage === button.page ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'
title="{{ button.label }}" "
> title="{{ button.label }}"
<i
*ngIf="activePage !== button.page"
class="bwi bwi-lg bwi-{{ button.iconKey }}"
aria-hidden="true"
></i>
<i
*ngIf="activePage === button.page"
class="bwi bwi-lg bwi-{{ button.iconKey }}-f"
aria-hidden="true"
></i>
<span
class="tw-truncate tw-max-w-full"
[ngClass]="activePage !== button.page && 'group-hover:tw-underline'"
>{{ button.label }}</span
> >
</a> <i
*ngIf="activePage !== button.page"
class="bwi bwi-lg bwi-{{ button.iconKey }}"
aria-hidden="true"
></i>
<i
*ngIf="activePage === button.page"
class="bwi bwi-lg bwi-{{ button.iconKey }}-f"
aria-hidden="true"
></i>
<span
class="tw-truncate tw-max-w-full"
[ngClass]="activePage !== button.page && 'group-hover:tw-underline'"
>{{ button.label }}</span
>
</a>
</div>
</div> </div>
</footer> </footer>
`, `,
@ -123,7 +128,7 @@ export class PopupBottomNavigationComponent {
// TODO change implementation to router link active // TODO change implementation to router link active
@Input() activePage: "vault" | "generator" | "send" | "settings"; @Input() activePage: "vault" | "generator" | "send" | "settings";
// TODO button functionality // TODO button functionality
// TODO icon button states // TODO icon button disabled state
navButtons = [ navButtons = [
{ {

218
libs/components/src/popup-layout/popup-layout.stories.ts
View File

@ -42,26 +42,28 @@ export const TopLevelPage: Story = {
render: (args) => ({ render: (args) => ({
props: args, props: args,
template: /* HTML */ ` template: /* HTML */ `
<popup-layout> <div class="tw-h-[640px] tw-w-[380px]">
<popup-header variant="top-level" popupHeader pageTitle="Test"></popup-header> <popup-layout>
<div> <popup-header variant="top-level" popupHeader pageTitle="Test"></popup-header>
rest of content <div>
<div class="tw-my-8">lots of things</div> rest of content
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things last item</div> <div class="tw-my-8">lots of things</div>
</div> <div class="tw-my-8">lots of things last item</div>
<popup-bottom-navigation popupFooter [activePage]="activePage"></popup-bottom-navigation> </div>
</popup-layout> <popup-bottom-navigation popupFooter [activePage]="activePage"></popup-bottom-navigation>
</popup-layout>
</div>
`, `,
}), }),
}; };
@ -79,26 +81,28 @@ export const TopLevelWithAction: Story = {
render: (args) => ({ render: (args) => ({
props: args, props: args,
template: /* HTML */ ` template: /* HTML */ `
<popup-layout> <div class="tw-h-[640px] tw-w-[380px]">
<popup-header variant="top-level-action" popupHeader pageTitle="Test"></popup-header> <popup-layout>
<div> <popup-header variant="top-level-action" popupHeader pageTitle="Test"></popup-header>
rest of content <div>
<div class="tw-my-8">lots of things</div> rest of content
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things last item</div> <div class="tw-my-8">lots of things</div>
</div> <div class="tw-my-8">lots of things last item</div>
<popup-bottom-navigation popupFooter [activePage]="activePage"></popup-bottom-navigation> </div>
</popup-layout> <popup-bottom-navigation popupFooter [activePage]="activePage"></popup-bottom-navigation>
</popup-layout>
</div>
`, `,
}), }),
}; };
@ -107,31 +111,33 @@ export const SubPageWithAction: Story = {
render: (args) => ({ render: (args) => ({
props: args, props: args,
template: /* HTML */ ` template: /* HTML */ `
<popup-layout> <div class="tw-h-[640px] tw-w-[380px]">
<popup-header variant="sub-page" popupHeader pageTitle="Test"></popup-header> <popup-layout>
<div> <popup-header variant="sub-page" popupHeader pageTitle="Test"></popup-header>
rest of content <div>
<div class="tw-my-8">lots of things</div> rest of content
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things last item</div> <div class="tw-my-8">lots of things</div>
</div> <div class="tw-my-8">lots of things last item</div>
<popup-footer popupFooter>
<div actionFooter class="tw-flex tw-gap-2">
<button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button>
</div> </div>
</popup-footer> <popup-footer popupFooter>
</popup-layout> <div actionFooter class="tw-flex tw-gap-2">
<button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button>
</div>
</popup-footer>
</popup-layout>
</div>
`, `,
}), }),
}; };
@ -140,25 +146,71 @@ export const SubPage: Story = {
render: (args) => ({ render: (args) => ({
props: args, props: args,
template: /* HTML */ ` template: /* HTML */ `
<popup-layout> <div class="tw-h-[640px] tw-w-[380px]">
<popup-header variant="sub-page" popupHeader pageTitle="Test"></popup-header> <popup-layout>
<div> <popup-header variant="sub-page" popupHeader pageTitle="Test"></popup-header>
rest of content <div>
<div class="tw-my-8">lots of things</div> rest of content
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div> <div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things last item</div> <div class="tw-my-8">lots of things</div>
</div> <div class="tw-my-8">lots of things last item</div>
</popup-layout> </div>
</popup-layout>
</div>
`,
}),
};
export const PoppedOut: Story = {
args: {
activePage: "vault",
},
argTypes: {
activePage: {
options: ["vault", "generator", "send", "settings"],
control: { type: "select" },
},
},
render: (args) => ({
props: args,
template: /* HTML */ `
<div class="tw-h-[640px] tw-w-[900px]">
<popup-layout>
<popup-header
variant="top-level-action"
popupHeader
pageTitle="Test"
poppedOut="true"
></popup-header>
<div>
rest of content
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things</div>
<div class="tw-my-8">lots of things last item</div>
</div>
<popup-bottom-navigation popupFooter [activePage]="activePage"></popup-bottom-navigation>
</popup-layout>
</div>
`, `,
}), }),
}; };