diff --git a/src/popup/app.component.ts b/src/popup/app.component.ts index 501239d050..559ddf5c6b 100644 --- a/src/popup/app.component.ts +++ b/src/popup/app.component.ts @@ -91,22 +91,7 @@ export class AppComponent implements OnInit { } else if (msg.command === 'locked') { this.stateService.purge(); } else if (msg.command === 'showDialog') { - const buttons = [msg.confirmText == null ? this.i18nService.t('ok') : msg.confirmText]; - if (msg.cancelText != null) { - buttons.unshift(msg.cancelText); - } - - const confirmed = await swal({ - title: msg.title, - text: msg.text, - buttons: buttons, - icon: msg.type, - }); - - this.messagingService.send('showDialogResolve', { - dialogId: msg.dialogId, - confirmed: confirmed, - }); + await this.showDialog(msg); } else { msg.webExtSender = sender; this.broadcasterService.send(msg); @@ -143,4 +128,60 @@ export class AppComponent implements OnInit { this.lastActivity = now; this.storageService.save(ConstantsService.lastActiveKey, now); } + + private async showDialog(msg: any) { + const buttons = [msg.confirmText == null ? this.i18nService.t('ok') : msg.confirmText]; + if (msg.cancelText != null) { + buttons.unshift(msg.cancelText); + } + + const contentDiv = document.createElement('div'); + if (msg.type != null) { + const icon = document.createElement('i'); + icon.classList.add('swal-custom-icon'); + switch (msg.type) { + case 'success': + icon.classList.add('fa', 'fa-check', 'text-success'); + break; + case 'warning': + icon.classList.add('fa', 'fa-warning', 'text-warning'); + break; + case 'error': + icon.classList.add('fa', 'fa-bolt', 'text-danger'); + break; + case 'info': + icon.classList.add('fa', 'fa-info-circle', 'text-info'); + break; + default: + break; + } + if (icon.classList.contains('fa')) { + contentDiv.appendChild(icon); + } + } + + if (msg.title != null) { + const titleDiv = document.createElement('div'); + titleDiv.classList.add('swal-title'); + titleDiv.appendChild(document.createTextNode(msg.title)); + contentDiv.appendChild(titleDiv); + } + + if (msg.text != null) { + const textDiv = document.createElement('div'); + textDiv.classList.add('swal-text'); + textDiv.appendChild(document.createTextNode(msg.text)); + contentDiv.appendChild(textDiv); + } + + const confirmed = await swal({ + content: { element: contentDiv }, + buttons: buttons, + }); + + this.messagingService.send('showDialogResolve', { + dialogId: msg.dialogId, + confirmed: confirmed, + }); + } } diff --git a/src/popup/scss/misc.scss b/src/popup/scss/misc.scss index a28234123f..e2300bfeb1 100644 --- a/src/popup/scss/misc.scss +++ b/src/popup/scss/misc.scss @@ -16,6 +16,14 @@ small { color: $brand-success !important; } +.text-info { + color: $brand-info !important; +} + +.text-warning { + color: $brand-warning !important; +} + .text-muted { color: $text-muted !important; } diff --git a/src/popup/scss/plugins.scss b/src/popup/scss/plugins.scss index e9597c8525..0edb044334 100644 --- a/src/popup/scss/plugins.scss +++ b/src/popup/scss/plugins.scss @@ -1,4 +1,4 @@ -$fa-font-path: "~font-awesome/fonts"; +$fa-font-path: "~font-awesome/fonts"; @import "~font-awesome/scss/font-awesome.scss"; @import "~angular2-toaster/toaster"; @@ -92,6 +92,23 @@ margin: 15px auto 0 auto; } + .swal-content { + margin: 15px 0 0 0; + padding: 0; + + .swal-text { + &:last-child { + margin-bottom: 0; + } + } + } + + i.swal-custom-icon { + display: block; + margin: 0 auto; + font-size: 35px; + } + .swal-title { padding: 10px 10px 15px 10px; margin: 0;