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

syntax and style improvements

This commit is contained in:
Vicki League 2024-04-25 10:13:03 -04:00
parent 9772aa52af
commit 7193d5b1e4
No known key found for this signature in database
GPG Key ID: 6A900B42463EAC13
7 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/platform/popup/layout/popup-footer.component.html
View File

@ -1,6 +1,6 @@
<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">
<div class="tw-flex tw-justify-start tw-gap-2">
<ng-content></ng-content>
</div>
</div>

6
apps/browser/src/platform/popup/layout/popup-header.component.html
View File

@ -4,14 +4,12 @@
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
<button
class="tw-bg-transparent tw-border-none tw-text-main"
bitIconButton="bwi-back"
type="button"
*ngIf="showBackButton"
title="Back"
aria-label="Back"
>
<i class="bwi bwi-back" aria-hidden="true"></i>
</button>
></button>
<h1 bitTypography="h3" class="!tw-mb-0.5 tw-text-headers">{{ pageTitle }}</h1>
</div>
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">

20
apps/browser/src/platform/popup/layout/popup-header.component.ts
View File

@ -1,17 +1,29 @@
import { BooleanInput, coerceBooleanProperty } from "@angular/cdk/coercion";
import { CommonModule, Location } from "@angular/common";
import { Component, Input } from "@angular/core";
import { TypographyModule } from "@bitwarden/components";
import { IconButtonModule, TypographyModule } from "@bitwarden/components";
@Component({
selector: "popup-header",
templateUrl: "popup-header.component.html",
standalone: true,
imports: [TypographyModule, CommonModule],
imports: [TypographyModule, CommonModule, IconButtonModule],
})
export class PopupHeaderComponent {
@Input() showBackButton: boolean = false;
@Input() pageTitle: string;
/** Display the back button, which uses Location.back() to go back one page in history */
@Input()
get showBackButton() {
return this._showBackButton;
}
set showBackButton(value: BooleanInput) {
this._showBackButton = coerceBooleanProperty(value);
}
_showBackButton = false;
/** Title string that will be inserted as an h1 */
@Input({ required: true }) pageTitle: string;
constructor(private location: Location) {}

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

@ -21,7 +21,7 @@ Long button names will be ellipsed.
Usage example:
```
```html
<popup-tab-navigation>
<popup-page></popup-page>
</popup-tab-navigation>
@ -46,10 +46,10 @@ page looks nice when the extension is popped out.
Basic usage example:
```
```html
<popup-page>
<popup-header slot="header"></popup-header>
<div> This is content </div>
<div>This is content</div>
<popup-footer slot="footer"></popup-footer>
</popup-page>
```
@ -72,7 +72,7 @@ Basic usage example:
Usage example:
```
```html
<popup-header pageTitle="Test" showBackButton="true">
<ng-container slot="end">
<button></button>
@ -96,7 +96,7 @@ to be rendered.
Usage example:
```
```html
<popup-footer>
<button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button>

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

@ -226,19 +226,15 @@ class MockSettingsPageComponent {}
selector: "mock-vault-subpage",
template: `
<popup-page>
<popup-header slot="header" pageTitle="Test">
<popup-header slot="header" pageTitle="Test" showBackButton>
<ng-container slot="end">
<mock-add-button></mock-add-button>
<mock-popout-button></mock-popout-button>
<mock-current-account></mock-current-account>
</ng-container>
</popup-header>
<vault-placeholder></vault-placeholder>
<popup-footer slot="footer">
<div class="tw-flex tw-gap-2">
<button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button>
</div>
<button bitButton buttonType="primary">Save</button>
<button bitButton buttonType="secondary">Cancel</button>
</popup-footer>
</popup-page>
`,

8
apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
View File

@ -6,10 +6,10 @@
<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-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 hover:tw-text-primary-600 tw-no-underline hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-500"
class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-500"
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
title="{{ button.label }}"
routerLink="/{{ button.page }}"
[title]="button.label"
[routerLink]="button.page"
routerLinkActive
#rla="routerLinkActive"
ariaCurrentWhenActive="page"
@ -17,7 +17,7 @@
<i *ngIf="!rla.isActive" class="bwi bwi-lg bwi-{{ button.iconKey }}" aria-hidden="true"></i>
<i
*ngIf="rla.isActive"
class="bwi bwi-lg bwi-{{ button.iconKey }}-f"
class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
aria-hidden="true"
></i>
<span

12
apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
View File

@ -17,23 +17,27 @@ export class PopupTabNavigationComponent {
navButtons = [
{
label: "Vault",
page: "vault",
page: "/vault",
iconKey: "lock",
iconKeyActive: "lock-f",
},
{
label: "Generator",
page: "generator",
page: "/generator",
iconKey: "generate",
iconKeyActive: "generate-f",
},
{
label: "Send",
page: "send",
page: "/send",
iconKey: "send",
iconKeyActive: "send-f",
},
{
label: "Settings",
page: "settings",
page: "/settings",
iconKey: "cog",
iconKeyActive: "cog-f",
},
];
}