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">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</main>
|
||||
<ng-content select="[popupFooter]"></ng-content>
|
||||
</div>
|
||||
|
|
@ -29,9 +29,8 @@ 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"
|
||||
>
|
||||
<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
|
||||
|
|
@ -42,22 +41,22 @@ export class PopupLayoutComponent {}
|
|||
<!-- 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">
|
||||
<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">Pop out</button>
|
||||
<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">
|
||||
<bit-avatar
|
||||
<button
|
||||
class="tw-bg-transparent tw-border-none"
|
||||
*ngIf="variant === 'top-level' || variant === 'top-level-action'"
|
||||
text="Ash Ketchum"
|
||||
size="small"
|
||||
></bit-avatar>
|
||||
>
|
||||
<bit-avatar text="Ash Ketchum" size="small"></bit-avatar>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`,
|
||||
standalone: true,
|
||||
|
|
@ -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,10 +74,12 @@ 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">
|
||||
<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>
|
||||
`,
|
||||
standalone: true,
|
||||
|
|
@ -87,7 +90,8 @@ 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">
|
||||
<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"
|
||||
|
|
@ -114,6 +118,7 @@ export class PopupFooterComponent {}
|
|||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`,
|
||||
standalone: true,
|
||||
|
|
@ -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,6 +42,7 @@ export const TopLevelPage: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<div class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="top-level" popupHeader pageTitle="Test"></popup-header>
|
||||
<div>
|
||||
|
|
@ -62,6 +63,7 @@ export const TopLevelPage: Story = {
|
|||
</div>
|
||||
<popup-bottom-navigation popupFooter [activePage]="activePage"></popup-bottom-navigation>
|
||||
</popup-layout>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
@ -79,6 +81,7 @@ export const TopLevelWithAction: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<div class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="top-level-action" popupHeader pageTitle="Test"></popup-header>
|
||||
<div>
|
||||
|
|
@ -99,6 +102,7 @@ export const TopLevelWithAction: Story = {
|
|||
</div>
|
||||
<popup-bottom-navigation popupFooter [activePage]="activePage"></popup-bottom-navigation>
|
||||
</popup-layout>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
@ -107,6 +111,7 @@ export const SubPageWithAction: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<div class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="sub-page" popupHeader pageTitle="Test"></popup-header>
|
||||
<div>
|
||||
|
|
@ -132,6 +137,7 @@ export const SubPageWithAction: Story = {
|
|||
</div>
|
||||
</popup-footer>
|
||||
</popup-layout>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
@ -140,6 +146,7 @@ export const SubPage: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* HTML */ `
|
||||
<div class="tw-h-[640px] tw-w-[380px]">
|
||||
<popup-layout>
|
||||
<popup-header variant="sub-page" popupHeader pageTitle="Test"></popup-header>
|
||||
<div>
|
||||
|
|
@ -159,6 +166,51 @@ export const SubPage: Story = {
|
|||
<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