added notification plugins aka toasts (sweetalert2 & toastr)

- added sweetalert2 & toastr to package.json & build/npm/Plugins.js
- added plugin related scss fixes and created files per plugin
- updated "Modals" demo page to "Modals & Alerts" & renamed link on all demo files
- rebuild dist files

build/npm/Plugins.js

@@ -182,11 +182,21 @@ const Plugins = [
     from: 'node_modules/select2/dist/',
     to  : 'plugins/select2'
   },
-  // Select2
+  // Sparklines
   {
     from: 'node_modules/sparklines/source/',
     to  : 'plugins/sparklines'
   },
+  // SweetAlert2
+  {
+    from: 'node_modules/sweetalert2/dist/',
+    to  : 'plugins/sweetalert2'
+  },
+  // Toastr
+  {
+    from: 'node_modules/toastr/build/',
+    to  : 'plugins/toastr'
+  },
 
 
   // // Doc Assets

build/scss/AdminLTE.scss

@@ -58,6 +58,8 @@
 @import "plugins/icheck-bootstrap";
 @import "plugins/mapael";
 @import "plugins/jqvmap";
+@import "plugins/sweetalert2";
+@import "plugins/toastr";
 // Miscellaneous
 // ---------------------------------------------------
 @import "miscellaneous";

build/scss/plugins/_sweetalert2.scss

@@ -0,0 +1,36 @@
+/*
+ * Plugin: SweetAlert2
+ * ---------------
+ */
+
+// Icon Colors
+.swal2-icon {
+  &.swal2-info {
+    color: $info;
+    border-color: ligthen($info, 20%);
+  }
+  &.swal2-warning {
+    color: $warning;
+    border-color: ligthen($warning, 20%);
+  }
+  &.swal2-error {
+    color: $danger;
+    border-color: ligthen($danger, 20%);
+  }
+  &.swal2-question {
+    color: $secondary;
+    border-color: ligthen($secondary, 20%);
+  }
+  &.swal2-success {
+    color: $success;
+    border-color: ligthen($success, 20%);
+    
+    .swal2-success-ring {
+      border-color: ligthen($success, 20%);
+    }
+    [class^="swal2-success-line"] {
+      background-color: $success;
+    }
+  }
+
+}

build/scss/plugins/_toastr.scss

@@ -0,0 +1,49 @@
+/*
+ * Plugin: Toastr
+ * ---------------
+ */
+
+// Background to FontAwesome Icons
+// #toast-container > .toast {
+//     background-image: none !important;
+// }
+// #toast-container > .toast .toast-message:before {
+//     font-family: 'Font Awesome 5 Free';
+//     font-size: 24px;
+//     font-weight: 900;
+//     line-height: 18px;
+//     float: left;
+//     color: #FFF;
+//     padding-right: 0.5em;
+//     margin: auto 0.5em auto -1.5em;
+// }        
+// #toast-container > .toast-warning .toast-message:before {
+//     content: "\f06a";
+// }
+// #toast-container > .toast-error .toast-message:before {
+//     content: "\f071";
+// }
+// #toast-container > .toast-info .toast-message:before {
+//     content: "\f05a";
+// }
+// #toast-container > .toast-success .toast-message:before {
+//     content: "\f058";
+// }
+
+
+// Background color
+.toast {
+  background-color: $primary;
+}
+.toast-success {
+  background-color: $success;
+}
+.toast-error {
+  background-color: $danger;
+}
+.toast-info {
+  background-color: $info;
+}
+.toast-warning {
+  background-color: $warning;
+}

dist/css/adminlte.css

@@ -15529,6 +15529,67 @@ html.maximized-card {
 }
 
 /*
+ * Plugin: SweetAlert2
+ * ---------------
+ */
+.swal2-icon.swal2-info {
+  color: #17a2b8;
+  border-color: ligthen(#17a2b8, 20%);
+}
+
+.swal2-icon.swal2-warning {
+  color: #ffc107;
+  border-color: ligthen(#ffc107, 20%);
+}
+
+.swal2-icon.swal2-error {
+  color: #dc3545;
+  border-color: ligthen(#dc3545, 20%);
+}
+
+.swal2-icon.swal2-question {
+  color: #6c757d;
+  border-color: ligthen(#6c757d, 20%);
+}
+
+.swal2-icon.swal2-success {
+  color: #28a745;
+  border-color: ligthen(#28a745, 20%);
+}
+
+.swal2-icon.swal2-success .swal2-success-ring {
+  border-color: ligthen(#28a745, 20%);
+}
+
+.swal2-icon.swal2-success [class^="swal2-success-line"] {
+  background-color: #28a745;
+}
+
+/*
+ * Plugin: Toastr
+ * ---------------
+ */
+.toast {
+  background-color: #007bff;
+}
+
+.toast-success {
+  background-color: #28a745;
+}
+
+.toast-error {
+  background-color: #dc3545;
+}
+
+.toast-info {
+  background-color: #17a2b8;
+}
+
+.toast-warning {
+  background-color: #ffc107;
+}
+
+/*
  * General: Miscellaneous
  * ----------------------
  */

index.html

@@ -330,7 +330,7 @@
               <li class="nav-item">
                 <a href="pages/UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

index2.html

@@ -317,7 +317,7 @@
               <li class="nav-item">
                 <a href="pages/UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

index3.html

@@ -327,7 +327,7 @@ to get the desired effect
               <li class="nav-item">
                 <a href="pages/UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

package-lock.json

@@ -12920,6 +12920,11 @@
         "has-flag": "^3.0.0"
       }
     },
+    "sweetalert2": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.12.1.tgz",
+      "integrity": "sha512-C+c/lB95JjePFW9n5cEghKnk3z0sbeOfbt3yzV4QlbBLx+Wh/LzVIb59QTvixHEhvTiSkUMgSY30Uj40hU3MHw=="
+    },
     "symbol-observable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
@@ -13125,6 +13130,14 @@
         }
       }
     },
+    "toastr": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz",
+      "integrity": "sha1-i0O+ZPudDEFIcURvLbjoyk6V8YE=",
+      "requires": {
+        "jquery": ">=1.12.0"
+      }
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -76,7 +76,9 @@
     "select2": "^4.0.7",
     "sparklines": "^1.2.0",
     "summernote": "^0.8.12",
-    "tempusdominus-bootstrap-4": "^5.1.2"
+    "sweetalert2": "^8.12.1",
+    "tempusdominus-bootstrap-4": "^5.1.2",
+    "toastr": "^2.1.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",

pages/UI/buttons.html

@@ -319,7 +319,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/UI/general.html

@@ -353,7 +353,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/UI/icons.html

@@ -319,7 +319,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/UI/modals.html

@@ -3,13 +3,17 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>AdminLTE 3 | Modals</title>
+  <title>AdminLTE 3 | Modals & Alerts</title>
   <!-- Tell the browser to be responsive to screen width -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- SweetAlert2 -->
+  <link rel="stylesheet" href="../../plugins/sweetalert2/sweetalert2.min.css">
+  <!-- Toastr -->
+  <link rel="stylesheet" href="../../plugins/toastr/toastr.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
   <!-- Google Font: Source Sans Pro -->
@@ -319,7 +323,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link active">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>
@@ -538,14 +542,14 @@
         <div class="row mb-2">
           <div class="col-sm-6">
             <h1>
-              Modals
+              Modals & Alerts 
               <small>new</small>
             </h1>
           </div>
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">
               <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item active">Modals</li>
+              <li class="breadcrumb-item active">Modals & Alerts</li>
             </ol>
           </div>
         </div>
@@ -610,6 +614,63 @@
               </div>
               <!-- /.card -->
             </div>
+
+            <div class="card card-success card-outline">
+              <div class="card-header">
+                <h3 class="card-title">
+                  <i class="fas fa-edit"></i>
+                  SweetAlert2 Examples
+                </h3>
+              </div>
+              <div class="card-body">
+                <button type="button" class="btn btn-success swalDefaultSuccess">
+                  Launch Success Toast
+                </button>
+                <button type="button" class="btn btn-info swalDefaultInfo">
+                  Launch Info Toast
+                </button>
+                <button type="button" class="btn btn-danger swalDefaultError">
+                  Launch Error Toast
+                </button>
+                <button type="button" class="btn btn-warning swalDefaultWarning">
+                  Launch Warning Toast
+                </button>
+                <button type="button" class="btn btn-default swalDefaultQuestion">
+                  Launch Question Toast
+                </button>
+                <div class="text-muted mt-3">
+                  For more examples look at <a href="https://sweetalert2.github.io/">https://sweetalert2.github.io/</a>
+                </div>
+              </div>
+              <!-- /.card -->
+            </div>
+
+            <div class="card card-success card-outline">
+              <div class="card-header">
+                <h3 class="card-title">
+                  <i class="fas fa-edit"></i>
+                  Toastr Examples
+                </h3>
+              </div>
+              <div class="card-body">
+                <button type="button" class="btn btn-success toastrDefaultSuccess">
+                  Launch Success Toast
+                </button>
+                <button type="button" class="btn btn-info toastrDefaultInfo">
+                  Launch Info Toast
+                </button>
+                <button type="button" class="btn btn-danger toastrDefaultError">
+                  Launch Error Toast
+                </button>
+                <button type="button" class="btn btn-warning toastrDefaultWarning">
+                  Launch Warning Toast
+                </button>
+                <div class="text-muted mt-3">
+                  For more examples look at <a href="https://codeseven.github.io/toastr/">https://codeseven.github.io/toastr/</a>
+                </div>
+              </div>
+              <!-- /.card -->
+            </div>
           </div>
           <!-- /.col -->
         </div>
@@ -893,9 +954,69 @@
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
 <!-- FastClick -->
 <script src="../../plugins/fastclick/fastclick.js"></script>
+<!-- SweetAlert2 -->
+<script src="../../plugins/sweetalert2/sweetalert2.min.js"></script>
+<!-- Toastr -->
+<script src="../../plugins/toastr/toastr.min.js"></script>
 <!-- AdminLTE App -->
 <script src="../../dist/js/adminlte.min.js"></script>
 <!-- AdminLTE for demo purposes -->
 <script src="../../dist/js/demo.js"></script>
+
+<script type="text/javascript">
+  $(function() {
+    const Toast = Swal.mixin({
+      toast: true,
+      position: 'top-end',
+      showConfirmButton: false,
+      timer: 3000
+    });
+
+    $('.swalDefaultSuccess').click(function() {
+      Toast.fire({
+        type: 'success',
+        title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+      })
+    });
+    $('.swalDefaultInfo').click(function() {
+      Toast.fire({
+        type: 'info',
+        title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+      })
+    });
+    $('.swalDefaultError').click(function() {
+      Toast.fire({
+        type: 'error',
+        title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+      })
+    });
+    $('.swalDefaultWarning').click(function() {
+      Toast.fire({
+        type: 'warning',
+        title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+      })
+    });
+    $('.swalDefaultQuestion').click(function() {
+      Toast.fire({
+        type: 'question',
+        title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
+      })
+    });
+
+    $('.toastrDefaultSuccess').click(function() {
+      toastr.success('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+    });
+    $('.toastrDefaultInfo').click(function() {
+      toastr.info('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+    });
+    $('.toastrDefaultError').click(function() {
+      toastr.error('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+    });
+    $('.toastrDefaultWarning').click(function() {
+      toastr.warning('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
+    });
+  });
+
+</script>
 </body>
 </html>

pages/UI/sliders.html

@@ -324,7 +324,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/calendar.html

@@ -325,7 +325,7 @@
               <li class="nav-item">
                 <a href="UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/charts/chartjs.html

@@ -319,7 +319,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/charts/flot.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/charts/inline.html

@@ -321,7 +321,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/examples/404.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/examples/500.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/examples/blank.html

@@ -321,7 +321,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/examples/invoice.html

@@ -319,7 +319,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/examples/legacy-user-menu.html

@@ -348,7 +348,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/examples/profile.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/forms/advanced.html

@@ -330,7 +330,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/forms/editors.html

@@ -322,7 +322,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/forms/general.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/layout/boxed.html

@@ -321,7 +321,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/layout/collapsed-sidebar.html

@@ -321,7 +321,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/layout/fixed-footer.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/layout/fixed-topnav.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/layout/fixed.html

@@ -322,7 +322,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/mailbox/compose.html

@@ -322,7 +322,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/mailbox/mailbox.html

@@ -321,7 +321,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/mailbox/read-mail.html

@@ -320,7 +320,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/tables/data.html

@@ -322,7 +322,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/tables/simple.html

@@ -319,7 +319,7 @@
               <li class="nav-item">
                 <a href="../UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>

pages/widgets.html

@@ -319,7 +319,7 @@
               <li class="nav-item">
                 <a href="UI/modals.html" class="nav-link">
                   <i class="far fa-circle nav-icon"></i>
-                  <p>Modals</p>
+                  <p>Modals & Alerts</p>
                 </a>
               </li>
             </ul>