refactor(theme-shared): add new confirmation component and its styles

related issue: #2537

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

@@ -0,0 +1,32 @@
+<div class="confirmation show" *ngIf="visible">
+  <div class="confirmation-backdrop"></div>
+  <div class="confirmation-dialog">
+    <div class="icon-container">
+      <i class="fa icon" [ngClass]="iconClass"></i>
+    </div>
+    <div class="content">
+      <h1 class="title" *ngIf="data.title">
+        {{ data.title | abpLocalization: titleLocalizationParams }}
+      </h1>
+      <p class="message" *ngIf="data.message">
+        {{ data.message | abpLocalization: messageLocalizationParams }}
+      </p>
+    </div>
+    <div class="footer">
+      <button
+        class="confirmation-button confirmation-button-reject"
+        *ngIf="data.options || !data.options.hideCancelBtn"
+        (click)="close(reject)"
+      >
+        {{ data.options?.cancelText || 'AbpUi:Cancel' }}
+      </button>
+      <button
+        class="confirmation-button confirmation-button-approve"
+        *ngIf="data.options || !data.options.hideYesBtn"
+        (click)="close(confirm)"
+      >
+        {{ data.options?.yesText || 'AbpUi:Yes' }}
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,100 @@
+.confirmation {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  place-items: center;
+  &.show {
+    display: grid;
+  }
+  .confirmation-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(#000, 0.7);
+    z-index: 1040;
+  }
+  .confirmation-dialog {
+    display: flex;
+    flex-direction: column;
+    margin: 20px auto;
+    padding: 0;
+    border: none;
+    border-radius: 10px;
+    min-width: 450px;
+    min-height: 300px;
+    background-color: #fff;
+    box-shadow: 0 0 10px -5px rgba(#000, 0.5);
+    z-index: 1050;
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 0 10px 0;
+      padding: 20px;
+      .icon {
+        width: 100px;
+        height: 100px;
+        stroke-width: 1;
+        stroke: #f89406;
+        fill: #fff;
+      }
+    }
+    .content {
+      flex-grow: 1;
+      display: block;
+      .title {
+        display: block;
+        margin: 0;
+        padding: 0;
+        font-size: 27px;
+        font-weight: 600;
+        text-align: center;
+      }
+      .message {
+        display: block;
+        margin: 10px auto;
+        padding: 0;
+        color: #777;
+        font-size: 16px;
+        font-weight: 400;
+        text-align: center;
+      }
+    }
+    .footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin: 10px 0 0 0;
+      padding: 20px;
+      width: 100%;
+      .confirmation-button {
+        display: inline-block;
+        margin: 0px 5px;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        color: #777;
+        font-size: 14px;
+        font-weight: 600;
+        background-color: #eee;
+        &:hover {
+          background-color: darken(#eee, 5);
+        }
+        &-reject {
+        }
+        &-approve {
+          background-color: #2f96b4;
+          color: #fff;
+          &:hover {
+            background-color: darken(#2f96b4, 5);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,61 +1,63 @@
 import { Component } from '@angular/core';
 import { ConfirmationService } from '../../services/confirmation.service';
-import { Toaster } from '../../models/toaster';
+import { Confirmation } from '../../models';
+import { LocalizationService } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-confirmation',
-  // tslint:disable-next-line: component-max-inline-declarations
-  template: `
-    <p-toast
-      position="center"
-      key="abpConfirmation"
-      (onClose)="close(dismiss)"
-      [modal]="true"
-      [baseZIndex]="1000"
-      styleClass="abp-confirm"
-    >
-      <ng-template let-message pTemplate="message">
-        <i class="fa fa-exclamation-circle abp-confirm-icon"></i>
-        <div *ngIf="message.summary" class="abp-confirm-summary">
-          {{ message.summary | abpLocalization: message.titleLocalizationParams }}
-        </div>
-        <div class="abp-confirm-body">
-          {{ message.detail | abpLocalization: message.messageLocalizationParams }}
-        </div>
-
-        <div class="abp-confirm-footer justify-content-center">
-          <button
-            *ngIf="!message.hideCancelBtn"
-            id="cancel"
-            type="button"
-            class="btn btn-sm btn-primary"
-            (click)="close(reject)"
-          >
-            {{ message.cancelText || message.cancelCopy || 'AbpIdentity::Cancel' | abpLocalization }}
-          </button>
-          <button
-            *ngIf="!message.hideYesBtn"
-            id="confirm"
-            type="button"
-            class="btn btn-sm btn-primary"
-            (click)="close(confirm)"
-            autofocus
-          >
-            <span>{{ message.yesText || message.yesCopy || 'AbpIdentity::Yes' | abpLocalization }}</span>
-          </button>
-        </div>
-      </ng-template>
-    </p-toast>
-  `,
+  templateUrl: './confirmation.component.html',
+  styleUrls: ['./confirmation.component.scss'],
 })
 export class ConfirmationComponent {
-  confirm = Toaster.Status.confirm;
-  reject = Toaster.Status.reject;
-  dismiss = Toaster.Status.dismiss;
+  confirm = Confirmation.Status.confirm;
+  reject = Confirmation.Status.reject;
+  dismiss = Confirmation.Status.dismiss;
 
-  constructor(private confirmationService: ConfirmationService) {}
+  visible = false;
 
-  close(status: Toaster.Status) {
+  data: Confirmation.DialogData;
+
+  get iconClass(): string {
+    switch (this.data.severity) {
+      case 'info':
+        return 'info-circle';
+      case 'success':
+        return 'check-circle';
+      case 'warning':
+        return 'exclamation-triangle';
+      case 'error':
+        return 'times-circle';
+      default:
+        return 'question-circle-o';
+    }
+  }
+
+  get titleLocalizationParams(): string {
+    return this.localizationService.instant(
+      this.data.title,
+      ...this.data.options.titleLocalizationParams,
+    );
+  }
+
+  get messageLocalizationParams(): string {
+    return this.localizationService.instant(
+      this.data.message,
+      ...this.data.options.messageLocalizationParams,
+    );
+  }
+
+  constructor(
+    private confirmationService: ConfirmationService,
+    private localizationService: LocalizationService,
+  ) {
+    this.confirmationService.confirmation$.subscribe(confirmation => {
+      this.data = confirmation;
+      this.visible = true;
+    });
+  }
+
+  close(status: Confirmation.Status) {
     this.confirmationService.clear(status);
+    this.visible = false;
   }
 }