[SM-71] Update all badges to use component library (#2999)

This commit is contained in:
Oscar Hinton 2022-07-04 11:00:13 +02:00 committed by GitHub
parent 6bcde3a84c
commit c1ace45915
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 74 additions and 118 deletions

View File

@ -64,9 +64,7 @@
(click)="filterSelected(true)"
>
{{ "selected" | i18n }}
<span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
selectedCount
}}</span>
<span bitBadge badgeType="info" *ngIf="selectedCount">{{ selectedCount }}</span>
</button>
</div>
</div>
@ -115,12 +113,14 @@
<td>
{{ u.email }}
<span
class="badge badge-secondary"
bitBadge
badgeType="secondary"
*ngIf="u.status === organizationUserStatusType.Invited"
>{{ "invited" | i18n }}</span
>
<span
class="badge badge-warning"
bitBadge
badgeType="warning"
*ngIf="u.status === organizationUserStatusType.Accepted"
>{{ "accepted" | i18n }}</span
>

View File

@ -9,7 +9,7 @@
(click)="filter(null)"
>
{{ "all" | i18n }}
<span class="badge badge-pill badge-info" *ngIf="allCount">{{ allCount }}</span>
<span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
</button>
<button
type="button"
@ -18,7 +18,7 @@
(click)="filter(userStatusType.Invited)"
>
{{ "invited" | i18n }}
<span class="badge badge-pill badge-info" *ngIf="invitedCount">{{ invitedCount }}</span>
<span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
</button>
<button
type="button"
@ -27,9 +27,7 @@
(click)="filter(userStatusType.Accepted)"
>
{{ "accepted" | i18n }}
<span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{
acceptedCount
}}</span>
<span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
</button>
<button
type="button"
@ -38,9 +36,7 @@
(click)="filter(userStatusType.Deactivated)"
>
{{ "deactivated" | i18n }}
<span class="badge badge-pill badge-info" *ngIf="deactivatedCount">{{
deactivatedCount
}}</span>
<span bitBadge badgeType="info" *ngIf="deactivatedCount">{{ deactivatedCount }}</span>
</button>
</div>
<div class="ml-3">
@ -156,13 +152,13 @@
</td>
<td>
<a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
<span class="badge badge-secondary" *ngIf="u.status === userStatusType.Invited">{{
<span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Invited">{{
"invited" | i18n
}}</span>
<span class="badge badge-warning" *ngIf="u.status === userStatusType.Accepted">{{
<span bitBadge badgeType="warning" *ngIf="u.status === userStatusType.Accepted">{{
"accepted" | i18n
}}</span>
<span class="badge badge-secondary" *ngIf="u.status === userStatusType.Deactivated">{{
<span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Deactivated">{{
"deactivated" | i18n
}}</span>
<small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>

View File

@ -14,7 +14,7 @@
<tr *ngFor="let p of policies">
<td *ngIf="p.display(organization)">
<a href="#" appStopClick (click)="edit(p)">{{ p.name | i18n }}</a>
<span class="badge badge-success" *ngIf="policiesEnabledMap.get(p.type)">{{
<span bitBadge badgeType="success" *ngIf="policiesEnabledMap.get(p.type)">{{
"enabled" | i18n
}}</span>
<small class="text-muted d-block">{{ p.description | i18n }}</small>

View File

@ -11,7 +11,9 @@
<h2 class="modal-title" id="userAddEditTitle">
{{ title }}
<small class="text-muted" *ngIf="name">{{ name }}</small>
<span class="badge badge-dark" *ngIf="isDeactivated">{{ "deactivated" | i18n }}</span>
<span bitBadge badgeType="secondary" *ngIf="isDeactivated">{{
"deactivated" | i18n
}}</span>
</h2>
<button
type="button"

View File

@ -62,7 +62,7 @@
<span class="text-capitalize">{{
isSponsoredSubscription ? "sponsored" : subscription.status || "-"
}}</span>
<span class="badge badge-warning" *ngIf="subscriptionMarkedForCancel">{{
<span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
"pendingCancellation" | i18n
}}</span>
</dd>

View File

@ -28,7 +28,7 @@
<a
href="#"
appStopClick
class="badge badge-primary"
bitBadge
*ngIf="!accessReports"
(click)="upgradeOrganization()"
>

View File

@ -18,7 +18,13 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
OrganizationManageModule,
OrganizationUserModule,
],
exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
exports: [
SharedModule,
LooseComponentsModule,
VaultFilterModule,
OrganizationBadgeModule,
PipesModule,
],
bootstrap: [],
})
export class OssModule {}

View File

@ -50,7 +50,7 @@
<small>{{ c.subTitle }}</small>
</td>
<td class="text-right">
<span class="badge badge-warning">
<span bitBadge badgeType="warning">
{{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }}
</span>
</td>

View File

@ -61,7 +61,7 @@
</td>
<td class="text-right">
<a
class="badge badge-primary"
bitBadge
href="{{ cipherDocs.get(c.id) }}"
target="_blank"
rel="noopener"

View File

@ -65,7 +65,7 @@
<small>{{ c.subTitle }}</small>
</td>
<td class="text-right">
<span class="badge badge-warning">
<span bitBadge badgeType="warning">
{{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }}
</span>
</td>

View File

@ -65,7 +65,7 @@
<small>{{ c.subTitle }}</small>
</td>
<td class="text-right">
<span class="badge badge-{{ passwordStrengthMap.get(c.id)[1] }}">
<span bitBadge [badgeType]="passwordStrengthMap.get(c.id)[1]">
{{ passwordStrengthMap.get(c.id)[0] | i18n }}
</span>
</td>

View File

@ -46,28 +46,29 @@
<td>
<a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
<span
class="badge badge-secondary"
bitBadge
badgeType="secondary"
*ngIf="c.status === emergencyAccessStatusType.Invited"
>{{ "invited" | i18n }}</span
>
<span class="badge badge-warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
"accepted" | i18n
}}</span>
<span
class="badge badge-warning"
bitBadge
badgeType="warning"
*ngIf="c.status === emergencyAccessStatusType.Accepted"
>{{ "accepted" | i18n }}</span
>
<span
bitBadge
badgeType="warning"
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
>{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
>
<span
class="badge badge-success"
*ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
>{{ "emergencyAccessRecoveryApproved" | i18n }}</span
>
<span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.View">{{
"view" | i18n
<span bitBadge *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{
"emergencyAccessRecoveryApproved" | i18n
}}</span>
<span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.Takeover">{{
<span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
<span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
"takeover" | i18n
}}</span>
@ -159,29 +160,30 @@
</td>
<td>
<span>{{ c.email }}</span>
<span
class="badge badge-secondary"
*ngIf="c.status === emergencyAccessStatusType.Invited"
>{{ "invited" | i18n }}</span
>
<span class="badge badge-warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
"accepted" | i18n
<span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
"invited" | i18n
}}</span>
<span
class="badge badge-warning"
bitBadge
badgeType="warning"
*ngIf="c.status === emergencyAccessStatusType.Accepted"
>{{ "accepted" | i18n }}</span
>
<span
bitBadge
badgeType="warning"
*ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
>{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
>
<span
class="badge badge-success"
bitBadge
badgeType="success"
*ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
>{{ "emergencyAccessRecoveryApproved" | i18n }}</span
>
<span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.View">{{
"view" | i18n
}}</span>
<span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.Takeover">{{
<span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
<span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
"takeover" | i18n
}}</span>

View File

@ -194,7 +194,9 @@
<a
href="#"
appStopClick
class="badge badge-primary ml-3"
bitBadge
badgeType="primary"
class="tw-ml-4"
(click)="upgradeOrganization()"
*ngIf="
(organization && !organization.useTotp) ||

View File

@ -202,52 +202,3 @@ button.no-btn {
color: inherit;
}
}
.badge-primary {
@include themify($themes) {
background-color: themed("badgePrimaryBackground");
color: themed("badgePrimaryText");
}
&:hover {
@include themify($themes) {
background-color: themed("badgePrimaryBackgroundHover");
color: themed("badgePrimaryText");
}
}
}
.badge-secondary {
@include themify($themes) {
background-color: themed("badgeSecondaryBackground");
color: themed("badgeSecondaryText");
}
}
.badge-info {
@include themify($themes) {
background-color: themed("badgeInfoBackground");
color: themed("badgeInfoText");
}
}
.badge-danger {
@include themify($themes) {
background-color: themed("badgeDangerBackground");
color: themed("badgeDangerText");
}
}
.badge-warning {
@include themify($themes) {
background-color: themed("warning");
color: themed("textWarningColor");
}
}
.badge-success {
@include themify($themes) {
background-color: themed("success");
color: themed("textSuccessColor");
}
}

View File

@ -21,25 +21,24 @@
@import "~bootstrap/scss/_dropdown";
@import "~bootstrap/scss/_button-group";
@import "~bootstrap/scss/_input-group";
@import "~bootstrap/scss/_custom-forms";
// @import "~bootstrap/scss/_custom-forms";
@import "~bootstrap/scss/_nav";
@import "~bootstrap/scss/_navbar";
@import "~bootstrap/scss/_card";
@import "~bootstrap/scss/_breadcrumb";
@import "~bootstrap/scss/_pagination";
@import "~bootstrap/scss/_badge";
@import "~bootstrap/scss/_jumbotron";
@import "~bootstrap/scss/_alert";
// @import "~bootstrap/scss/_breadcrumb";
// @import "~bootstrap/scss/_pagination";
// @import "~bootstrap/scss/_jumbotron";
// @import "~bootstrap/scss/_alert";
@import "~bootstrap/scss/_progress";
@import "~bootstrap/scss/_media";
// @import "~bootstrap/scss/_media";
@import "~bootstrap/scss/_list-group";
@import "~bootstrap/scss/_close";
//@import "~bootstrap/scss/_toasts";
@import "~bootstrap/scss/_modal";
@import "~bootstrap/scss/_tooltip";
@import "~bootstrap/scss/_popover";
@import "~bootstrap/scss/_carousel";
@import "~bootstrap/scss/_spinners";
// @import "~bootstrap/scss/_carousel";
// @import "~bootstrap/scss/_spinners";
@import "~bootstrap/scss/_utilities";
@import "~bootstrap/scss/_print";

View File

@ -9,7 +9,7 @@
(click)="filter(null)"
>
{{ "all" | i18n }}
<span class="badge badge-pill badge-info" *ngIf="allCount">{{ allCount }}</span>
<span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
</button>
<button
type="button"
@ -18,7 +18,7 @@
(click)="filter(userStatusType.Invited)"
>
{{ "invited" | i18n }}
<span class="badge badge-pill badge-info" *ngIf="invitedCount">{{ invitedCount }}</span>
<span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
</button>
<button
type="button"
@ -27,9 +27,7 @@
(click)="filter(userStatusType.Accepted)"
>
{{ "accepted" | i18n }}
<span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{
acceptedCount
}}</span>
<span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
</button>
</div>
<div class="ml-3">
@ -137,10 +135,10 @@
</td>
<td>
<a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
<span class="badge badge-secondary" *ngIf="u.status === userStatusType.Invited">{{
<span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Invited">{{
"invited" | i18n
}}</span>
<span class="badge badge-warning" *ngIf="u.status === userStatusType.Accepted">{{
<span bitBadge badgeType="warning" *ngIf="u.status === userStatusType.Accepted">{{
"accepted" | i18n
}}</span>
<small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>