custom swal content

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,
+        });
+    }
 }

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;
 }

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;