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

[SM-557] Use bitTypography for headers (#4839) 

* Use bitTypography

* Remove tw-text-xl from menu items
This commit is contained in:
Oscar Hinton 2023-02-23 23:50:38 +01:00 committed by GitHub
parent d67257218e
commit 4d38c7a92a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/src/app/shared/shared.module.ts
View File

@ -23,10 +23,11 @@ import {
LinkModule,
MenuModule,
MultiSelectModule,
RadioButtonModule,
TableModule,
TabsModule,
RadioButtonModule,
ToggleGroupModule,
TypographyModule,
} from "@bitwarden/components";
// Register the locales for the application
@ -67,10 +68,11 @@ import "./locales";
LinkModule,
MenuModule,
MultiSelectModule,
RadioButtonModule,
TableModule,
TabsModule,
RadioButtonModule,
ToggleGroupModule,
TypographyModule,
// Web specific
],
@ -100,10 +102,11 @@ import "./locales";
LinkModule,
MenuModule,
MultiSelectModule,
RadioButtonModule,
TableModule,
TabsModule,
RadioButtonModule,
ToggleGroupModule,
TypographyModule,
// Web specific
],

4
bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html
View File

@ -36,7 +36,7 @@
<div class="tw-mt-6 tw-flex tw-flex-col tw-gap-6">
<sm-section>
<h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "projects" | i18n }}</h2>
<h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "projects" | i18n }}</h2>
<sm-projects-list
(newProjectEvent)="openNewProjectDialog()"
(editProjectEvent)="openEditProject($event)"
@ -49,7 +49,7 @@
</div>
</sm-section>
<sm-section>
<h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "secrets" | i18n }}</h2>
<h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "secrets" | i18n }}</h2>
<sm-secrets-list
baseRoute="secrets"
(deleteSecretsEvent)="openDeleteSecret($event)"

8
bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
View File

@ -56,7 +56,7 @@
/>
</td>
<td bitCell class="tw-w-0 tw-pr-0">
<i class="bwi bwi-wrench tw-text-xl tw-text-muted" aria-hidden="true"></i>
<i class="bwi bwi-wrench tw-text-muted" aria-hidden="true"></i>
</td>
<td bitCell class="tw-break-all">
<a bitLink [routerLink]="serviceAccount.id">
@ -80,11 +80,11 @@
</td>
<bit-menu #serviceAccountMenu>
<a type="button" bitMenuItem [routerLink]="serviceAccount.id">
<i class="bwi bwi-fw bwi-eye tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
{{ "viewServiceAccount" | i18n }}
</a>
<button type="button" bitMenuItem>
<i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
<span class="tw-text-danger">
{{ "deleteServiceAccount" | i18n }}
</span>
@ -96,7 +96,7 @@
<bit-menu #tableMenu>
<button type="button" bitMenuItem (click)="bulkDeleteServiceAccounts()">
<i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
<span class="tw-text-danger">
{{ "deleteServiceAccounts" | i18n }}
</span>

2
bitwarden_license/bit-web/src/app/secrets-manager/shared/access-policies/access-selector.component.html
View File

@ -27,7 +27,7 @@
<ng-container *ngIf="rows?.length > 0; else empty">
<tr bitRow *ngFor="let row of rows">
<td bitCell class="tw-w-0 tw-pr-0">
<i class="bwi {{ row.icon }} tw-text-xl tw-text-muted" aria-hidden="true"></i>
<i class="bwi {{ row.icon }} tw-text-muted" aria-hidden="true"></i>
</td>
<td bitCell>{{ row.name }}</td>
<td bitCell *ngIf="row.type == 'serviceAccount'">

4
bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html
View File

@ -14,7 +14,9 @@
</div>
<h1
*ngIf="titleContainer.childElementCount === 0"
class="tw-m-0 tw-mr-2 tw-truncate tw-text-3xl tw-font-semibold tw-leading-10"
bitTypography="h1"
noMargin
class="tw-m-0 tw-mr-2 tw-truncate tw-leading-10"
[title]="title || (routeData.titleId | i18n)"
>
<i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>

6
bitwarden_license/bit-web/src/app/secrets-manager/shared/new-menu.component.html
View File

@ -10,15 +10,15 @@
<bit-menu #newMenu>
<button type="button" bitMenuItem (click)="openProjectDialog()">
<i class="bwi bwi-fw bwi-sitemap tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
{{ "project" | i18n }}
</button>
<button type="button" bitMenuItem (click)="openSecretDialog()">
<i class="bwi bwi-fw bwi-key tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
{{ "secret" | i18n }}
</button>
<button type="button" bitMenuItem (click)="openServiceAccountDialog()">
<i class="bwi bwi-fw bwi-wrench tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-wrench" aria-hidden="true"></i>
{{ "serviceAccount" | i18n }}
</button>
</bit-menu>

10
bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html
View File

@ -56,7 +56,7 @@
</td>
<td bitCell>
<div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
<i class="bwi bwi-collection tw-text-xl tw-text-muted" aria-hidden="true"></i>
<i class="bwi bwi-collection tw-text-muted" aria-hidden="true"></i>
<a bitLink [routerLink]="['/sm', project.organizationId, 'projects', project.id]">{{
project.name
}}</a>
@ -75,15 +75,15 @@
</td>
<bit-menu #projectMenu>
<button type="button" bitMenuItem (click)="editProjectEvent.emit(project.id)">
<i class="bwi bwi-fw bwi-pencil tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
{{ "editProject" | i18n }}
</button>
<a bitMenuItem [routerLink]="['/sm', project.organizationId, 'projects', project.id]">
<i class="bwi bwi-fw bwi-eye tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
{{ "viewProject" | i18n }}
</a>
<button type="button" bitMenuItem (click)="deleteProject(project.id)">
<i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
<span class="tw-text-danger">{{ "deleteProject" | i18n }}</span>
</button>
</bit-menu>
@ -93,7 +93,7 @@
<bit-menu #tableMenu>
<button type="button" bitMenuItem (click)="bulkDeleteProjects()">
<i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
<span class="tw-text-danger">{{ "deleteProjects" | i18n }}</span>
</button>
</bit-menu>

16
bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
View File

@ -63,7 +63,7 @@
</td>
<td bitCell>
<div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
<i class="bwi bwi-key tw-text-xl tw-text-muted" aria-hidden="true"></i>
<i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
<button type="button" bitLink (click)="editSecretEvent.emit(secret.id)">
{{ secret.name }}
</button>
@ -94,15 +94,15 @@
<bit-menu #secretMenu>
<button type="button" bitMenuItem (click)="editSecretEvent.emit(secret.id)" *ngIf="!trash">
<i class="bwi bwi-fw bwi-pencil tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
{{ "editSecret" | i18n }}
</button>
<button type="button" bitMenuItem (click)="copySecretNameEvent.emit(secret.id)">
<i class="bwi bwi-fw bwi-clone tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
{{ "copySecretName" | i18n }}
</button>
<button type="button" bitMenuItem (click)="copySecretValueEvent.emit(secret.id)">
<i class="bwi bwi-fw bwi-clone tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
{{ "copySecretValue" | i18n }}
</button>
<button
@ -111,11 +111,11 @@
(click)="restoreSecretsEvent.emit([secret.id])"
*ngIf="trash"
>
<i class="bwi bwi-fw bwi-refresh tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
{{ "restoreSecret" | i18n }}
</button>
<button type="button" bitMenuItem (click)="deleteSecretsEvent.emit([secret.id])">
<i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
<span class="tw-text-danger">{{ "deleteSecret" | i18n }}</span>
</button>
</bit-menu>
@ -125,11 +125,11 @@
<bit-menu #tableMenu>
<button type="button" bitMenuItem (click)="bulkRestoreSecrets()" *ngIf="trash">
<i class="bwi bwi-fw bwi-refresh tw-text-xl" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
<span>{{ "restoreSelected" | i18n }}</span>
</button>
<button type="button" bitMenuItem (click)="bulkDeleteSecrets()">
<i class="bwi bwi-fw bwi-trash tw-text-xl tw-text-danger" aria-hidden="true"></i>
<i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
<span class="tw-text-danger">{{ "deleteSecrets" | i18n }}</span>
</button>
</bit-menu>

33
libs/components/src/typography/typography.directive.ts
View File

@ -1,26 +1,45 @@
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { Directive, HostBinding, Input } from "@angular/core";
type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
const styles: Record<TypographyType, string[]> = {
h1: ["tw-text-3xl", "tw-font-semibold", "tw-mb-2"],
h2: ["tw-text-2xl", "tw-font-semibold", "tw-mb-2"],
h3: ["tw-text-xl", "tw-font-semibold", "tw-mb-2"],
h4: ["tw-text-lg", "tw-font-semibold", "tw-mb-2"],
h5: ["tw-text-base", "tw-font-semibold", "tw-mb-2"],
h6: ["tw-text-sm", "tw-font-semibold", "tw-mb-2"],
h1: ["tw-text-3xl", "tw-font-semibold"],
h2: ["tw-text-2xl", "tw-font-semibold"],
h3: ["tw-text-xl", "tw-font-semibold"],
h4: ["tw-text-lg", "tw-font-semibold"],
h5: ["tw-text-base", "tw-font-semibold"],
h6: ["tw-text-sm", "tw-font-semibold"],
body1: ["tw-text-base"],
body2: ["tw-text-sm"],
helper: ["tw-text-xs"],
};
const margins: Record<TypographyType, string[]> = {
h1: ["tw-mb-2"],
h2: ["tw-mb-2"],
h3: ["tw-mb-2"],
h4: ["tw-mb-2"],
h5: ["tw-mb-2"],
h6: ["tw-mb-2"],
body1: [],
body2: [],
helper: [],
};
@Directive({
selector: "[bitTypography]",
})
export class TypographyDirective {
@Input("bitTypography") bitTypography: TypographyType;
private _margin = true;
@Input()
set noMargin(value: boolean | "") {
this._margin = !coerceBooleanProperty(value);
}
@HostBinding("class") get classList() {
return styles[this.bitTypography];
return styles[this.bitTypography].concat(this._margin ? margins[this.bitTypography] : []);
}
}