Merge branch 'feature/toast-component' of https://github.com/abpframework/abp into feature/toast-component

npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts

@@ -6,7 +6,7 @@ import { eLayoutType } from '@abp/ng.core';
   template: `
     <router-outlet></router-outlet>
     <abp-confirmation></abp-confirmation>
-    <abp-toast></abp-toast>
+    <abp-toast-container right="30px" bottom="30px"></abp-toast-container>
   `,
 })
 export class EmptyLayoutComponent {

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html

@@ -1,7 +1,7 @@
 <div class="confirmation show" *ngIf="visible">
   <div class="confirmation-backdrop"></div>
   <div class="confirmation-dialog">
-    <div class="icon-container">
+    <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
       <i class="fa icon" [ngClass]="iconClass"></i>
     </div>
     <div class="content">

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss

@@ -6,6 +6,7 @@
   left: 0;
   display: none;
   place-items: center;
+  z-index: 1060;
   &.show {
     display: grid;
   }
@@ -16,7 +17,7 @@
     width: 100vw;
     height: 100vh;
     background-color: rgba(#000, 0.7);
-    z-index: 1040;
+    z-index: 1061 !important;
   }
   .confirmation-dialog {
     display: flex;
@@ -29,7 +30,7 @@
     min-height: 300px;
     background-color: #fff;
     box-shadow: 0 0 10px -5px rgba(#000, 0.5);
-    z-index: 1050;
+    z-index: 1062 !important;
     .icon-container {
       display: flex;
       align-items: center;
@@ -40,8 +41,27 @@
         width: 100px;
         height: 100px;
         stroke-width: 1;
-        stroke: #f89406;
         fill: #fff;
+        font-size: 80px;
+        text-align: center;
+      }
+      &.neutral .icon {
+      }
+      &.info .icon {
+        stroke: #2f96b4;
+        color: #2f96b4;
+      }
+      &.success .icon {
+        stroke: #51a351;
+        color: #51a351;
+      }
+      &.warning .icon {
+        stroke: #f89406;
+        color: #f89406;
+      }
+      &.error .icon {
+        stroke: #bd362f;
+        color: #bd362f;
       }
     }
     .content {

npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts

@@ -20,15 +20,15 @@ export class ConfirmationComponent {
   get iconClass(): string {
     switch (this.data.severity) {
       case 'info':
-        return 'info-circle';
+        return 'fa-info-circle';
       case 'success':
-        return 'check-circle';
+        return 'fa-check-circle';
       case 'warning':
-        return 'exclamation-triangle';
+        return 'fa-exclamation-triangle';
       case 'error':
-        return 'times-circle';
+        return 'fa-times-circle';
       default:
-        return 'question-circle-o';
+        return 'fa-question-circle';
     }
   }
 

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss

@@ -18,9 +18,11 @@
   padding: 10px;
   border-radius: 0px;
   width: 350px;
-  @include fillColor(#f0f0f0, #000);
   user-select: none;
   box-shadow: 0 0 10px -5px rgba(#000, 0.4);
+  z-index: 9999;
+  @include fillColor(#f0f0f0, #000);
+  opacity: 1;
   &.toast-success {
     @include fillColor(#51a351, #fff);
   }
@@ -38,6 +40,7 @@
     align-items: center;
     justify-content: center;
     .icon {
+      font-size: 36px;
     }
   }
   .toast-content {