' + this.sanitizer.sanitize(SecurityContext.HTML, t) + '
')); - toast.body = message; - toast.bodyOutputType = BodyOutputType.TrustedHtml; + options.enableHtml = true; } if (msg.options != null) { if (msg.options.trustedHtml === true) { - toast.bodyOutputType = BodyOutputType.TrustedHtml; + options.enableHtml = true; } if (msg.options.timeout != null && msg.options.timeout > 0) { - toast.timeout = msg.options.timeout; + options.timeOut = msg.options.timeout; } } - this.toasterService.popAsync(toast); + + this.toastrService.show(message, msg.title, options, 'toast-' + msg.type); } private routeToVault(action: string, cipherType: CipherType) { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 50e7180a94..3bbb52486b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,5 @@ import 'zone.js/dist/zone'; -import { ToasterModule } from 'angular2-toaster'; - import { AppRoutingModule } from './app-routing.module'; import { ServicesModule } from './services.module'; @@ -33,6 +31,7 @@ import { VaultTimeoutInputComponent } from './accounts/vault-timeout-input.compo import { CalloutComponent } from 'jslib-angular/components/callout.component'; import { IconComponent } from 'jslib-angular/components/icon.component'; +import { BitwardenToastModule } from 'jslib-angular/components/toastr.component'; import { A11yTitleDirective } from 'jslib-angular/directives/a11y-title.directive'; import { ApiActionDirective } from 'jslib-angular/directives/api-action.directive'; @@ -177,7 +176,11 @@ registerLocaleData(localeZhTw, 'zh-TW'); FormsModule, ReactiveFormsModule, ServicesModule, - ToasterModule.forRoot(), + BitwardenToastModule.forRoot({ + maxOpened: 5, + autoDismiss: true, + closeButton: true, + }), ScrollingModule, A11yModule, ], diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index b8a5c01cf8..be6fc54163 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -14,8 +14,6 @@ import { import { first } from 'rxjs/operators'; -import { ToasterService } from 'angular2-toaster'; - import { AddEditComponent } from './add-edit.component'; import { AttachmentsComponent } from './attachments.component'; import { CiphersComponent } from './ciphers.component'; @@ -86,7 +84,7 @@ export class VaultComponent implements OnInit, OnDestroy { private i18nService: I18nService, private modalService: ModalService, private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone, private syncService: SyncService, - private toasterService: ToasterService, private messagingService: MessagingService, + private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService, private eventService: EventService, private totpService: TotpService, private userService: UserService, private passwordRepromptService: PasswordRepromptService) { } @@ -651,7 +649,7 @@ export class VaultComponent implements OnInit, OnDestroy { } this.platformUtilsService.copyToClipboard(value); - this.toasterService.popAsync('info', null, + this.platformUtilsService.showToast('info', null, this.i18nService.t('valueCopied', this.i18nService.t(labelI18nKey))); if (this.action === 'view') { this.messagingService.send('minimizeOnCopy'); diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss index ca525cac1a..461a46dd80 100644 --- a/src/scss/plugins.scss +++ b/src/scss/plugins.scss @@ -1,43 +1,41 @@ $fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome.scss"; -@import "~angular2-toaster/toaster"; +@import '~ngx-toastr/toastr'; @import "~sweetalert2/src/sweetalert2.scss"; @import "variables.scss"; .toast-container { .toast-close-button { - margin-right: 4px; font-size: 18px; + margin-right: 4px; } - .toast { - opacity: 1 !important; + .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; - align-items: center; + padding: 15px; + + .toast-close-button { + position: absolute; + right: 5px; + top: 0; + } &:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); } - &:before { + .icon i::before { + float: left; + font-style: normal; font-family: FontAwesome; font-size: 25px; line-height: 20px; - float: left; - color: #ffffff; - margin: auto 0 auto 15px; - } - - .toast-content { - padding: 15px; - } - - .toaster-icon { - display: none; + padding-right: 15px; } .toast-message { @@ -51,49 +49,41 @@ $fa-font-path: "~font-awesome/fonts"; } &.toast-danger, &.toast-error { - background-image: none !important; - @include themify($themes) { background-color: themed('dangerColor'); } - &:before { + .icon i::before { content: "\f0e7"; } } &.toast-warning { - background-image: none !important; - @include themify($themes) { background-color: themed('warningColor'); } - &:before { + .icon i::before { content: "\f071"; } } &.toast-info { - background-image: none !important; - @include themify($themes) { background-color: themed('infoColor'); } - &:before { + .icon i:before { content: "\f05a"; } } &.toast-success { - background-image: none !important; - @include themify($themes) { background-color: themed('successColor'); } - &:before { + .icon i:before { content: "\f00C"; } }