Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-30 17:47:44 +01:00
Code Issues Projects Releases Wiki Activity

[CL-290] make popup layout grow to full height (#9237)

Browse Source 
* add tw-h-full to popup layout template

* add story
This commit is contained in:
Will Martin 2024-05-20 07:38:14 -04:00 committed by GitHub
parent 4e1173d5cf
commit 034227d993
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/browser/src/platform/popup/layout/popup-layout.mdx
View File

@ -136,3 +136,9 @@ When the browser extension is popped out, the "popout" button should not be pass
<Canvas>
<Story of={stories.PoppedOut} />
</Canvas>
## Centered Content
<Canvas>
<Story of={stories.CenteredContent} />
</Canvas>

26
apps/browser/src/platform/popup/layout/popup-layout.stories.ts
View File

@ -11,6 +11,7 @@ import {
I18nMockService,
IconButtonModule,
ItemModule,
NoItemsModule,
} from "@bitwarden/components";
import { PopupFooterComponent } from "./popup-footer.component";
@ -289,6 +290,9 @@ export default {
moduleMetadata({
imports: [
PopupTabNavigationComponent,
PopupHeaderComponent,
PopupPageComponent,
PopupFooterComponent,
CommonModule,
RouterModule,
ExtensionContainerComponent,
@ -298,6 +302,7 @@ export default {
MockGeneratorPageComponent,
MockSettingsPageComponent,
MockVaultPagePoppedComponent,
NoItemsModule,
],
providers: [
{
@ -378,3 +383,24 @@ export const PoppedOut: Story = {
`,
}),
};
export const CenteredContent: Story = {
render: (args) => ({
props: args,
template: /* HTML */ `
<extension-container>
<popup-tab-navigation>
<popup-page>
<popup-header slot="header" pageTitle="Centered Content"></popup-header>
<div class="tw-h-full tw-flex tw-items-center tw-justify-center tw-text-main">
<bit-no-items>
<ng-container slot="title">Before centering a div</ng-container>
<ng-container slot="description">One must first center oneself</ng-container>
</bit-no-items>
</div>
</popup-page>
</popup-tab-navigation>
</extension-container>
`,
}),
};

4
apps/browser/src/platform/popup/layout/popup-page.component.html
View File

@ -1,6 +1,6 @@
<ng-content select="[slot=header]"></ng-content>
<main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-auto">
<div class="tw-max-w-screen-sm tw-mx-auto">
<main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-auto tw-h-full">
<div class="tw-max-w-screen-sm tw-mx-auto tw-h-full">
<ng-content></ng-content>
</div>
</main>