139 lines
3.7 KiB
Plaintext
139 lines
3.7 KiB
Plaintext
import { Meta, Story, Canvas } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./popup-layout.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
Please note that because these stories use `router-outlet`, there are issues with rendering content
|
|
when Light & Dark mode is selected. The stories are best viewed by selecting one color mode.
|
|
|
|
# Popup Tab Navigation
|
|
|
|
The popup tab navigation component composes together the popup page and the bottom tab navigation
|
|
footer. This component is intended to be used a level _above_ each extension tab's page code.
|
|
|
|
The navigation footer contains the 4 main page links for the browser extension. It uses the Angular
|
|
router to determine which page is currently active, and style the button appropriately. Clicking on
|
|
the buttons will navigate to the correct route. The navigation footer has a max-width built in so
|
|
that the page looks nice when the extension is popped out.
|
|
|
|
Long button names will be ellipsed.
|
|
|
|
Usage example:
|
|
|
|
```html
|
|
<popup-tab-navigation>
|
|
<popup-page></popup-page>
|
|
</popup-tab-navigation>
|
|
```
|
|
|
|
# Popup Page
|
|
|
|
The popup page handles positioning a page's `header` and `footer` elements, and inserting the rest
|
|
of the content into the `main` element with scroll. There is also a max-width built in so that the
|
|
page looks nice when the extension is popped out.
|
|
|
|
**Slots**
|
|
|
|
- `header`
|
|
- Use `popup-header` component.
|
|
- Every page should have a header.
|
|
- `footer`
|
|
- Use the `popup-footer` component.
|
|
- Not every page will have a footer.
|
|
- default
|
|
- Whatever content you want in `main`.
|
|
|
|
Basic usage example:
|
|
|
|
```html
|
|
<popup-page>
|
|
<popup-header slot="header"></popup-header>
|
|
<div>This is content</div>
|
|
<popup-footer slot="footer"></popup-footer>
|
|
</popup-page>
|
|
```
|
|
|
|
## Popup header
|
|
|
|
**Args**
|
|
|
|
- `pageTitle`: required
|
|
- Inserts title as an `h1`.
|
|
- `showBackButton`: optional, defaults to `false`
|
|
- Toggles the back button to appear. The back button uses `Location.back()` to navigate back one
|
|
page in history.
|
|
|
|
**Slots**
|
|
|
|
- `end`
|
|
- Use to insert one or more interactive elements.
|
|
- The header handles the spacing between elements passed to the `end` slot.
|
|
|
|
Usage example:
|
|
|
|
```html
|
|
<popup-header pageTitle="Test" showBackButton>
|
|
<ng-container slot="end">
|
|
<button></button>
|
|
<button></button>
|
|
</ng-container>
|
|
</popup-header>
|
|
```
|
|
|
|
Common interactive elements to insert into the `end` slot are:
|
|
|
|
- `app-current-account`: shows current account and switcher
|
|
- `app-pop-out`: shows popout button when the extension is not already popped out
|
|
- "Add" button: this can be accomplished with the Button component and any custom functionality for
|
|
that particular page
|
|
|
|
## Popup footer
|
|
|
|
Popup footer should be used when the page displays action buttons. It functions similarly to the
|
|
Dialog footer in that the calling code is responsible for passing in the different buttons that need
|
|
to be rendered.
|
|
|
|
Usage example:
|
|
|
|
```html
|
|
<popup-footer>
|
|
<button bitButton buttonType="primary">Save</button>
|
|
<button bitButton buttonType="secondary">Cancel</button>
|
|
</popup-footer>
|
|
```
|
|
|
|
# Page types
|
|
|
|
There are a few types of pages that are used in the browser extension.
|
|
|
|
View the story source code to see examples of how to construct these types of pages.
|
|
|
|
## Extension Tab
|
|
|
|
Example of wrapping an extension page in the `popup-tab-navigation` component.
|
|
|
|
<Canvas>
|
|
<Story of={stories.PopupTabNavigation} />
|
|
</Canvas>
|
|
|
|
## Extension Page
|
|
|
|
Examples of using just the `popup-page` component, without and with a footer.
|
|
|
|
<Canvas>
|
|
<Story of={stories.PopupPage} />
|
|
</Canvas>
|
|
|
|
<Canvas>
|
|
<Story of={stories.PopupPageWithFooter} />
|
|
</Canvas>
|
|
|
|
## Popped out
|
|
|
|
When the browser extension is popped out, the "popout" button should not be passed to the header.
|
|
|
|
<Canvas>
|
|
<Story of={stories.PoppedOut} />
|
|
</Canvas>
|