FT/base-dialog-close-button (#382)

- added close button to base-dialog support
- removed cancel button from base-dialog

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/components/dialog-filters/dialog-filters.component.html

@@ -1,9 +1,5 @@
 <ng-container *transloco="let t; read: 'filters'">
-    <dsh-base-dialog hasDivider>
-        <dshBaseDialogTitle fxFlex="row" fxLayout="space-between">
-            <div class="dsh-headline">{{ t('additionalFilters') }}</div>
-            <mat-icon class="close-icon" svgIcon="cross" (click)="close()"></mat-icon>
-        </dshBaseDialogTitle>
+    <dsh-base-dialog hasDivider [title]="t('additionalFilters')" (cancel)="close()">
         <div class="dialog-filters-main">
             <dsh-main-filters [form]="mainFiltersGroup"></dsh-main-filters>
             <mat-divider></mat-divider>

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/cancel-hold/components/cancel-hold-dialog/cancel-hold-dialog.component.html

@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; scope: 'payment-details'; read: 'paymentDetails.holdDetails'">
     <dsh-base-dialog
         [title]="t('cancelTitle')"
-        [disabledConfirm]="form.pristine || form.invalid"
+        [confirmButtonDisabled]="form.pristine || form.invalid"
         (cancel)="decline()"
         (confirm)="confirm()"
     >

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/create-hold/components/create-hold-dialog/create-hold-dialog.component.html

@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; scope: 'payment-details'; read: 'paymentDetails.holdDetails'">
     <dsh-base-dialog
         [title]="t('acceptTitle')"
-        [disabledConfirm]="form.pristine || form.invalid"
+        [confirmButtonDisabled]="form.pristine || form.invalid"
         (cancel)="decline()"
         (confirm)="confirm()"
     >

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/components/create-refund-dialog/create-refund-dialog.component.html

@@ -1,5 +1,10 @@
 <ng-container *transloco="let t; scope: 'payment-details'; read: 'paymentDetails.refunds.createRefund'">
-    <dsh-base-dialog [title]="t('title')" [disabledConfirm]="form.invalid" (cancel)="decline()" (confirm)="confirm()">
+    <dsh-base-dialog
+        [title]="t('title')"
+        [confirmButtonDisabled]="form.invalid"
+        (cancel)="decline()"
+        (confirm)="confirm()"
+    >
         <form fxLayout="column" [formGroup]="form">
             <dsh-max-length-input
                 class="create-refund-dialog-reason"

src/app/shared/components/dialog/base-dialog/base-dialog.component.html

@@ -23,17 +23,19 @@
 </ng-template>
 
 <ng-template #titleBlock>
-    <div class="dsh-headline">{{ title }}</div>
+    <div fxLayout="row" fxLayoutAlign="space-between">
+        <div class="dsh-headline">{{ title }}</div>
+        <mat-icon class="base-dialog-title-close" svgIcon="cross" (click)="cancelDialog()"></mat-icon>
+    </div>
 </ng-template>
 
 <ng-template #actionsBlock>
     <ng-container *transloco="let c">
         <div class="base-dialog-actions-block" fxLayout="row" fxLayoutAlign="space-between">
-            <button fxFlex="126px" dsh-button color="warn" (click)="cancelDialog()">
-                {{ cancelButton || c('cancel') }}
-            </button>
-            <button dsh-button color="accent" [disabled]="disabledConfirm" (click)="confirmDialog()">
-                {{ confirmButton || c('confirm') }}
+            <!-- layout needs this empty div here -->
+            <div></div>
+            <button dsh-button color="accent" [disabled]="confirmButtonDisabled" (click)="confirmDialog()">
+                {{ confirmButtonName || c('confirm') }}
             </button>
         </div>
     </ng-container>

src/app/shared/components/dialog/base-dialog/base-dialog.component.scss

@@ -13,6 +13,14 @@
 
     &-title {
         padding-bottom: 20px;
+
+        &-close {
+            cursor: pointer;
+
+            &:hover {
+                opacity: 0.5;
+            }
+        }
     }
 
     &-content {

src/app/shared/components/dialog/base-dialog/base-dialog.component.ts

@@ -10,9 +10,8 @@ import { coerceBoolean } from '@dsh/utils';
 })
 export class BaseDialogComponent {
     @Input() title: string;
-    @Input() cancelButton: string;
-    @Input() confirmButton: string;
-    @Input() disabledConfirm: boolean;
+    @Input() confirmButtonName: string;
+    @Input() confirmButtonDisabled: boolean;
 
     @coerceBoolean
     @Input()

src/app/shared/components/dialog/base-dialog/base-dialog.module.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
 import { TranslocoModule } from '@ngneat/transloco';
 
 import { NoContentModule } from '@dsh/app/shared/directives';
@@ -14,7 +16,16 @@ import { BaseDialogTitleDirective } from './directives/base-dialog-title/base-di
 const SHARED_DECLARATIONS = [BaseDialogComponent, BaseDialogActionsDirective, BaseDialogTitleDirective];
 
 @NgModule({
-    imports: [CommonModule, FlexLayoutModule, ButtonModule, NoContentModule, TranslocoModule, MatDividerModule],
+    imports: [
+        CommonModule,
+        FlexLayoutModule,
+        ButtonModule,
+        NoContentModule,
+        TranslocoModule,
+        MatDividerModule,
+        MatIconModule,
+        MatButtonModule,
+    ],
     declarations: SHARED_DECLARATIONS,
     exports: SHARED_DECLARATIONS,
 })

src/assets/icons/cross.svg

@@ -1,6 +1,7 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-        d="M6.34318 7.05021C6.14792 6.85495 6.14792 6.53836 6.34318 6.3431C6.53844 6.14784 6.85502 6.14784 7.05028 6.3431L17.6569 16.9497C17.8521 17.145 17.8521 17.4615 17.6569 17.6568C17.4616 17.8521 17.145 17.8521 16.9498 17.6568L6.34318 7.05021Z"
+        d="M6.34306 7.05033C6.14779 6.85507 6.14779 6.53849 6.34306 6.34322C6.53832 6.14796 6.8549 6.14796 7.05016 6.34322L17.6568 16.9498C17.852 17.1451 17.852 17.4617 17.6568 17.6569C17.4615 17.8522 17.1449 17.8522 16.9497 17.6569L6.34306 7.05033Z"
+        fill="#475166"
     />
-    <rect x="5.98962" y="17.3033" width="16" height="1" rx="0.5" transform="rotate(-45 5.98962 17.3033)" />
+    <rect x="5.9895" y="17.3032" width="16" height="1" rx="0.5" transform="rotate(-45 5.9895 17.3032)" fill="#475166" />
 </svg>