bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Code Issues Releases Wiki Activity

[CL-18] toast component and service (#6490)

Browse Source 
Update toast styles and new service to CL.
This commit is contained in:
Will Martin
2024-04-18 13:23:35 -04:00
committed by GitHub
parent 9277465951
commit d5f503a0d6
32 changed files with 440 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/web/src/app/app.component.ts
View File

@@ -1,9 +1,7 @@
import { DOCUMENT } from "@angular/common";
import { Component, Inject, NgZone, OnDestroy, OnInit, SecurityContext } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { Component, Inject, NgZone, OnDestroy, OnInit } from "@angular/core";
import { NavigationEnd, Router } from "@angular/router";
import * as jq from "jquery";
import { IndividualConfig, ToastrService } from "ngx-toastr";
import { Subject, switchMap, takeUntil, timer } from "rxjs";
import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
@@ -29,7 +27,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
import { InternalFolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
import { DialogService } from "@bitwarden/components";
import { DialogService, ToastService } from "@bitwarden/components";
import { PolicyListService } from "./admin-console/core/policy-list.service";
import {
@@ -68,14 +66,13 @@ export class AppComponent implements OnDestroy, OnInit {
private cipherService: CipherService,
private authService: AuthService,
private router: Router,
private toastrService: ToastrService,
private toastService: ToastService,
private i18nService: I18nService,
private platformUtilsService: PlatformUtilsService,
private ngZone: NgZone,
private vaultTimeoutService: VaultTimeoutService,
private cryptoService: CryptoService,
private collectionService: CollectionService,
private sanitizer: DomSanitizer,
private searchService: SearchService,
private notificationsService: NotificationsService,
private stateService: StateService,
@@ -209,7 +206,7 @@ export class AppComponent implements OnDestroy, OnInit {
break;
}
case "showToast":
this.showToast(message);
this.toastService._showToast(message);
break;
case "convertAccountToKeyConnector":
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
@@ -327,34 +324,6 @@ export class AppComponent implements OnDestroy, OnInit {
}, IdleTimeout);
}
private showToast(msg: any) {
let message = "";
const options: Partial<IndividualConfig> = {};
if (typeof msg.text === "string") {
message = msg.text;
} else if (msg.text.length === 1) {
message = msg.text[0];
} else {
msg.text.forEach(
(t: string) =>
(message += "<p>" + this.sanitizer.sanitize(SecurityContext.HTML, t) + "</p>"),
);
options.enableHtml = true;
}
if (msg.options != null) {
if (msg.options.trustedHtml === true) {
options.enableHtml = true;
}
if (msg.options.timeout != null && msg.options.timeout > 0) {
options.timeOut = msg.options.timeout;
}
}
this.toastrService.show(message, msg.title, options, "toast-" + msg.type);
}
private idleStateChanged() {
if (this.isIdle) {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.

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

@@ -4,7 +4,6 @@ import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";
import { InfiniteScrollModule } from "ngx-infinite-scroll";
import { ToastrModule } from "ngx-toastr";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
@@ -52,7 +51,6 @@ import "./locales";
ReactiveFormsModule,
InfiniteScrollModule,
RouterModule,
ToastrModule,
JslibModule,
// Component library modules
@@ -90,7 +88,6 @@ import "./locales";
ReactiveFormsModule,
InfiniteScrollModule,
RouterModule,
ToastrModule,
JslibModule,
// Component library

3
apps/web/src/locales/en/messages.json
View File

@@ -7606,6 +7606,9 @@
"providerPortal": {
"message": "Provider Portal"
},
"success": {
"message": "Success"
},
"viewCollection": {
"message": "View collection"
},

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

@@ -43,8 +43,6 @@
@import "~bootstrap/scss/_utilities";
@import "~bootstrap/scss/_print";
@import "~ngx-toastr/toastr";
@import "./base";
@import "./buttons";
@import "./callouts";
@@ -54,5 +52,4 @@
@import "./pages";
@import "./plugins";
@import "./tables";
@import "./toasts";
@import "./vault-filters";

117
apps/web/src/scss/toasts.scss
View File

@@ -1,117 +0,0 @@
.toast-container {
.toast-close-button {
font-size: 18px;
margin-right: 4px;
}
.ngx-toastr {
align-items: center;
background-image: none !important;
border-radius: $border-radius;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
display: flex;
padding: 15px;
.toast-close-button {
position: absolute;
right: 5px;
top: 0;
}
&:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.icon i::before {
float: left;
font-style: normal;
font-family: $icomoon-font-family;
font-size: 25px;
line-height: 20px;
padding-right: 15px;
}
.toast-message {
p {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
&.toast-danger,
&.toast-error {
@include themify($themes) {
background-color: themed("danger");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textDangerColor") !important;
}
}
.icon i::before {
content: map_get($icons, "error");
}
}
&.toast-warning {
@include themify($themes) {
background-color: themed("warning");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textWarningColor") !important;
}
}
.icon i::before {
content: map_get($icons, "exclamation-triangle");
}
}
&.toast-info {
@include themify($themes) {
background-color: themed("info");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textInfoColor") !important;
}
}
.icon i:before {
content: map_get($icons, "info-circle");
}
}
&.toast-success {
@include themify($themes) {
background-color: themed("success");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textSuccessColor") !important;
}
}
.icon i:before {
content: map_get($icons, "check");
}
}
}
}