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

[CL-324] migrate app-callout internals to bit-callout (#9925)

Browse Source
This commit is contained in:
Will Martin 2024-08-27 09:12:28 -04:00 committed by GitHub
parent 5e999f56b5
commit 80f4935171
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 17 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/auth/popup/lock.component.html
View File

@ -89,7 +89,7 @@
<p class="text-center" *ngIf="!fido2Data.isFido2Session">
<button type="button" appStopClick (click)="logOut()">{{ "logOut" | i18n }}</button>
</p>
<app-callout *ngIf="biometricError" type="error">{{ biometricError }}</app-callout>
<app-callout *ngIf="biometricError" type="danger">{{ biometricError }}</app-callout>
<p class="text-center text-muted" *ngIf="pendingBiometric">
<i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i> {{ "awaitDesktop" | i18n }}
</p>

96
apps/browser/src/popup/scss/misc.scss
View File

@ -287,102 +287,6 @@ app-vault-icon,
cursor: move;
}
.callout {
padding: 10px;
margin: 10px;
border: 1px solid #000000;
border-left-width: 5px;
border-radius: 3px;
@include themify($themes) {
border-color: themed("calloutBorderColor");
background-color: themed("calloutBackgroundColor");
}
.callout-heading {
margin-top: 0;
}
h3.callout-heading {
font-weight: bold;
text-transform: uppercase;
}
&.callout-primary {
@include themify($themes) {
border-left-color: themed("primaryColor");
}
.callout-heading {
@include themify($themes) {
color: themed("primaryColor");
}
}
}
&.callout-info {
@include themify($themes) {
border-left-color: themed("infoColor");
}
.callout-heading {
@include themify($themes) {
color: themed("infoColor");
}
}
}
&.callout-danger {
@include themify($themes) {
border-left-color: themed("dangerColor");
}
.callout-heading {
@include themify($themes) {
color: themed("dangerColor");
}
}
}
&.callout-success {
@include themify($themes) {
border-left-color: themed("successColor");
}
.callout-heading {
@include themify($themes) {
color: themed("successColor");
}
}
}
&.callout-warning {
@include themify($themes) {
border-left-color: themed("warningColor");
}
.callout-heading {
@include themify($themes) {
color: themed("warningColor");
}
}
}
&.clickable {
&:hover,
&:focus,
&.active {
@include themify($themes) {
background-color: themed("boxBackgroundHoverColor");
}
}
}
.enforced-policy-options ul {
padding-left: 30px;
margin: 0;
}
}
input[type="password"]::-ms-reveal {
display: none;
}

86
apps/desktop/src/scss/misc.scss
View File

@ -439,92 +439,6 @@ app-root > #loading,
cursor: move;
}
.callout {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #000000;
border-left-width: 5px;
border-radius: 3px;
@include themify($themes) {
border-color: themed("calloutBorderColor");
background-color: themed("calloutBackgroundColor");
}
.callout-heading {
margin-top: 0;
}
h3.callout-heading {
font-weight: bold;
text-transform: uppercase;
}
&.callout-primary {
@include themify($themes) {
border-left-color: themed("primaryColor");
}
.callout-heading {
@include themify($themes) {
color: themed("primaryColor");
}
}
}
&.callout-info {
@include themify($themes) {
border-left-color: themed("infoColor");
}
.callout-heading {
@include themify($themes) {
color: themed("infoColor");
}
}
}
&.callout-danger {
@include themify($themes) {
border-left-color: themed("dangerColor");
}
.callout-heading {
@include themify($themes) {
color: themed("dangerColor");
}
}
}
&.callout-success {
@include themify($themes) {
border-left-color: themed("successColor");
}
.callout-heading {
@include themify($themes) {
color: themed("successColor");
}
}
}
&.callout-warning {
@include themify($themes) {
border-left-color: themed("warningColor");
}
.callout-heading {
@include themify($themes) {
color: themed("warningColor");
}
}
}
ul {
padding-left: 40px;
margin: 0;
}
}
.password-reprompt {
text-align: left;
margin-top: 15px;

79
apps/web/src/scss/callouts.scss
View File

@ -1,79 +0,0 @@
.callout {
border-left-width: 5px !important;
border-radius: $card-inner-border-radius;
margin-bottom: $alert-margin-bottom;
padding: $alert-padding-y $alert-padding-x;
@include themify($themes) {
background-color: themed("calloutBackground");
border: 1px solid themed("borderColor");
color: themed("calloutColor");
}
.callout-heading {
margin-top: 0;
}
h3.callout-heading {
font-weight: bold;
text-transform: uppercase;
}
&.callout-primary {
@include themify($themes) {
border-left-color: themed("primary");
}
.callout-heading {
@include themify($themes) {
color: themed("primary");
}
}
}
&.callout-info {
@include themify($themes) {
border-left-color: themed("info");
}
.callout-heading {
@include themify($themes) {
color: themed("info");
}
}
}
&.callout-danger {
@include themify($themes) {
border-left-color: themed("danger");
}
.callout-heading {
@include themify($themes) {
color: themed("danger");
}
}
}
&.callout-success {
@include themify($themes) {
border-left-color: themed("success");
}
.callout-heading {
@include themify($themes) {
color: themed("success");
}
}
}
&.callout-warning {
@include themify($themes) {
border-left-color: themed("warning");
}
.callout-heading {
@include themify($themes) {
color: themed("warning");
}
}
}
}

1
apps/web/src/scss/styles.scss
View File

@ -45,7 +45,6 @@
@import "./base";
@import "./buttons";
@import "./callouts";
@import "./cards";
@import "./forms";
@import "./modals";

2
libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html
View File

@ -141,7 +141,7 @@
</ng-container>
<!-- Account Credit -->
<ng-container *ngIf="showAccountCredit && usingAccountCredit">
<app-callout type="note">
<app-callout type="info">
{{ "makeSureEnoughCredit" | i18n }}
</app-callout>
</ng-container>

15
libs/angular/src/components/callout.component.html
View File

@ -1,14 +1,5 @@
<div
#callout
class="callout callout-{{ calloutStyle }}"
[ngClass]="{ clickable: clickable }"
[attr.role]="useAlertRole ? 'alert' : null"
>
<h3 class="callout-heading" *ngIf="title">
<i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
{{ title }}
</h3>
<div class="enforced-policy-options" *ngIf="enforcedPolicyOptions">
<bit-callout [icon]="icon" [title]="title" [type]="$any(type)" [useAlertRole]="useAlertRole">
<div class="tw-pl-7 tw-m-0" *ngIf="enforcedPolicyOptions">
{{ enforcedPolicyMessage }}
<ul>
<li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
@ -32,4 +23,4 @@
</ul>
</div>
<ng-content></ng-content>
</div>
</bit-callout>

37
libs/angular/src/components/callout.component.ts
View File

@ -2,16 +2,19 @@ import { Component, Input, OnInit } from "@angular/core";
import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { CalloutTypes } from "@bitwarden/components";
/**
* @deprecated use the CL's `CalloutComponent` instead
*/
@Component({
selector: "app-callout",
templateUrl: "callout.component.html",
})
export class CalloutComponent implements OnInit {
@Input() type = "info";
export class DeprecatedCalloutComponent implements OnInit {
@Input() type: CalloutTypes = "info";
@Input() icon: string;
@Input() title: string;
@Input() clickable: boolean;
@Input() enforcedPolicyOptions: MasterPasswordPolicyOptions;
@Input() enforcedPolicyMessage: string;
@Input() useAlertRole = false;
@ -26,34 +29,6 @@ export class CalloutComponent implements OnInit {
if (this.enforcedPolicyMessage === undefined) {
this.enforcedPolicyMessage = this.i18nService.t("masterPasswordPolicyInEffect");
}
if (this.type === "warning" || this.type === "danger") {
if (this.type === "danger") {
this.calloutStyle = "danger";
}
if (this.title === undefined) {
this.title = this.i18nService.t("warning");
}
if (this.icon === undefined) {
this.icon = "bwi-exclamation-triangle";
}
} else if (this.type === "error") {
this.calloutStyle = "danger";
if (this.title === undefined) {
this.title = this.i18nService.t("error");
}
if (this.icon === undefined) {
this.icon = "bwi-error";
}
} else if (this.type === "tip") {
this.calloutStyle = "success";
if (this.title === undefined) {
this.title = this.i18nService.t("tip");
}
if (this.icon === undefined) {
this.icon = "bwi-lightbulb";
}
}
}
getPasswordScoreAlertDisplay() {

8
libs/angular/src/jslib.module.ts
View File

@ -14,6 +14,7 @@ import {
AsyncActionsModule,
AutofocusDirective,
ButtonModule,
CalloutModule,
CheckboxModule,
DialogModule,
FormFieldModule,
@ -29,7 +30,7 @@ import {
} from "@bitwarden/components";
import { TwoFactorIconComponent } from "./auth/components/two-factor-icon.component";
import { CalloutComponent } from "./components/callout.component";
import { DeprecatedCalloutComponent } from "./components/callout.component";
import { A11yInvalidDirective } from "./directives/a11y-invalid.directive";
import { A11yTitleDirective } from "./directives/a11y-title.directive";
import { ApiActionDirective } from "./directives/api-action.directive";
@ -72,6 +73,7 @@ import { IconComponent } from "./vault/components/icon.component";
FormFieldModule,
SelectModule,
ButtonModule,
CalloutModule,
CheckboxModule,
DialogModule,
TypographyModule,
@ -88,7 +90,7 @@ import { IconComponent } from "./vault/components/icon.component";
ApiActionDirective,
AutofocusDirective,
BoxRowDirective,
CalloutComponent,
DeprecatedCalloutComponent,
CopyTextDirective,
CreditCardNumberPipe,
EllipsisPipe,
@ -125,7 +127,7 @@ import { IconComponent } from "./vault/components/icon.component";
AutofocusDirective,
ToastModule,
BoxRowDirective,
CalloutComponent,
DeprecatedCalloutComponent,
CopyTextDirective,
CreditCardNumberPipe,
EllipsisPipe,

2
libs/components/src/callout/callout.component.ts
View File

@ -2,7 +2,7 @@ import { Component, Input, OnInit } from "@angular/core";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
type CalloutTypes = "success" | "info" | "warning" | "danger";
export type CalloutTypes = "success" | "info" | "warning" | "danger";
const defaultIcon: Record<CalloutTypes, string> = {
success: "bwi-check",