support popped out layout
This commit is contained in:
Vicki League
parent
9bee3e1bc3
commit
688438fc3a
|
|
@ -12,12 +12,12 @@ import { TypographyModule } from "../typography";
|
|||
@Component({
|
||||
selector: "popup-layout",
|
||||
template: `
|
||||
<div
|
||||
class="tw-border tw-border-secondary-300 tw-border-solid tw-h-[640px] tw-w-[380px] tw-flex tw-flex-col"
|
||||
>
|
||||
<div class="tw-border tw-h-full tw-border-secondary-300 tw-border-solid tw-flex tw-flex-col">
|
||||
<ng-content select="[popupHeader]"></ng-content>
|
||||
<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>
|
||||
<ng-content select="[popupFooter]"></ng-content>
|
||||
</div>
|
||||
|
|
@ -29,34 +29,33 @@ export class PopupLayoutComponent {}
|
|||
@Component({
|
||||
selector: "popup-header",
|
||||
template: `
|
||||
<header
|
||||
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-inline-flex tw-items-center tw-gap-2 tw-h-9">
|
||||
<!-- not the right icon -->
|
||||
<i
|
||||
class="bwi bwi-angle-left tw-font-bold"
|
||||
aria-hidden="true"
|
||||
*ngIf="variant === 'sub-page'"
|
||||
></i>
|
||||
<!-- see if this doesnt need the ! override -->
|
||||
<h1 bitTypography="h3" class="!tw-mb-0 tw-text-headers">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="tw-inline-flex tw-items-center tw-gap-4 tw-h-9">
|
||||
<button bitButton *ngIf="variant === 'top-level-action'" buttonType="primary">
|
||||
<i class="bwi bwi-plus tw-font-bold" aria-hidden="true"></i>
|
||||
Add
|
||||
</button>
|
||||
<!-- TODO update icon -->
|
||||
<button bitIconButton="bwi-external-link" size="small">Pop out</button>
|
||||
<!-- TODO reference browser/src/auth/popup/account-switching/current-account -->
|
||||
<button class="tw-bg-transparent tw-border-none">
|
||||
<bit-avatar
|
||||
<header class="tw-p-4 tw-border-0 tw-border-solid tw-border-b tw-border-secondary-300 ">
|
||||
<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">
|
||||
<!-- not the right icon -->
|
||||
<i
|
||||
class="bwi bwi-angle-left tw-font-bold"
|
||||
aria-hidden="true"
|
||||
*ngIf="variant === 'sub-page'"
|
||||
></i>
|
||||
<!-- see if this doesnt need the ! override -->
|
||||
<h1 bitTypography="h3" class="!tw-mb-0 tw-text-headers">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
|
||||
<button bitButton *ngIf="variant === 'top-level-action'" buttonType="primary">
|
||||
<i class="bwi bwi-plus tw-font-bold" aria-hidden="true"></i>
|
||||
Add
|
||||
</button>
|
||||
<!-- TODO update icon -->
|
||||
<button bitIconButton="bwi-external-link" size="small" *ngIf="!poppedOut">Pop out</button>
|
||||
<!-- TODO reference browser/src/auth/popup/account-switching/current-account -->
|
||||
<button
|
||||
class="tw-bg-transparent tw-border-none"
|
||||
*ngIf="variant === 'top-level' || variant === 'top-level-action'"
|
||||
text="Ash Ketchum"
|
||||
size="small"
|
||||
></bit-avatar>
|
||||
</button>
|
||||
>
|
||||
<bit-avatar text="Ash Ketchum" size="small"></bit-avatar>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`,
|
||||
|
|
@ -66,6 +65,8 @@ export class PopupLayoutComponent {}
|
|||
export class PopupHeaderComponent {
|
||||
@Input() variant: "top-level" | "top-level-action" | "sub-page" = "top-level-action";
|
||||
@Input() pageTitle: string;
|
||||
// Not the best solution
|
||||
@Input() poppedOut: boolean = false;
|
||||
// TODO avatar Input
|
||||
// TODO button functionality
|
||||
}
|
||||
|
|
@ -73,9 +74,11 @@ export class PopupHeaderComponent {
|
|||
@Component({
|
||||
selector: "popup-footer",
|
||||
template: `
|
||||
<footer class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-flex">
|
||||
<div class="tw-flex tw-justify-start">
|
||||
<ng-content select="[actionFooter]"></ng-content>
|
||||
<footer class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<div class="tw-flex tw-justify-start">
|
||||
<ng-content select="[actionFooter]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`,
|
||||
|
|
@ -87,32 +90,34 @@ export class PopupFooterComponent {}
|
|||
@Component({
|
||||
selector: "popup-bottom-navigation",
|
||||
template: `
|
||||
<footer class="tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-flex">
|
||||
<div class="tw-flex tw-flex-1">
|
||||
<a
|
||||
*ngFor="let button of navButtons"
|
||||
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 "
|
||||
[ngClass]="
|
||||
activePage === button.page ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'
|
||||
"
|
||||
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
|
||||
<footer class="tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<div class="tw-flex tw-flex-1">
|
||||
<a
|
||||
*ngFor="let button of navButtons"
|
||||
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 "
|
||||
[ngClass]="
|
||||
activePage === button.page ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'
|
||||
"
|
||||
title="{{ button.label }}"
|
||||
>
|
||||
</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>
|
||||
</footer>
|
||||
`,
|
||||
|
|
@ -123,7 +128,7 @@ export class PopupBottomNavigationComponent {
|
|||
// TODO change implementation to router link active
|
||||
@Input() activePage: "vault" | "generator" | "send" | "settings";
|
||||
// TODO button functionality
|
||||
// TODO icon button states
|
||||
// TODO icon button disabled state
|
||||
|
||||
navButtons = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -42,26 +42,28 @@ export const TopLevelPage: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<popup-layout>
|
||||
<popup-header variant="top-level" popupHeader pageTitle="Test"></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 class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="top-level" popupHeader pageTitle="Test"></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>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
@ -79,26 +81,28 @@ export const TopLevelWithAction: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<popup-layout>
|
||||
<popup-header variant="top-level-action" popupHeader pageTitle="Test"></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 class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="top-level-action" popupHeader pageTitle="Test"></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>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
@ -107,31 +111,33 @@ export const SubPageWithAction: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<popup-layout>
|
||||
<popup-header variant="sub-page" popupHeader pageTitle="Test"></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-footer popupFooter>
|
||||
<div actionFooter class="tw-flex tw-gap-2">
|
||||
<button bitButton buttonType="primary">Save</button>
|
||||
<button bitButton buttonType="secondary">Cancel</button>
|
||||
<div class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="sub-page" popupHeader pageTitle="Test"></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-footer>
|
||||
</popup-layout>
|
||||
<popup-footer popupFooter>
|
||||
<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) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<popup-layout>
|
||||
<popup-header variant="sub-page" popupHeader pageTitle="Test"></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-layout>
|
||||
<div class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="sub-page" popupHeader pageTitle="Test"></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-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>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue