Feature/refactor dialog footer and header components (#5445)

* Refactor dialog footer and header components * Update changelog
9 months ago · 0d5adfb998
parent d45cef1725
commit 0d5adfb998
15 changed files with 69 additions and 73 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed

 - Localized the content of the about page
+- Refactored the dialog footer component
+- Refactored the dialog header component
 - Refactored the benchmark comparator component to standalone
 - Refactored the world map chart component to standalone
 - Improved the language localization for German (`de`)
--- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
+++ b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
  position="center"
  [deviceType]="data.deviceType"
  [title]="name"
@ -166,7 +165,6 @@
 </div>

 <gf-dialog-footer
-  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
 />
--- a/apps/client/src/app/components/dialog-footer/dialog-footer.component.html
+++ b/apps/client/src/app/components/dialog-footer/dialog-footer.component.html
@ -1,5 +1,7 @@
@if (deviceType === 'mobile') {
-  <button mat-button (click)="onClickCloseButton()">
-    <ion-icon name="close" size="large" />
-  </button>
+  <div class="d-flex justify-content-center" mat-dialog-actions>
+    <button mat-button (click)="onClickCloseButton()">
+      <ion-icon name="close" size="large" />
+    </button>
+  </div>
 }
--- a/apps/client/src/app/components/dialog-footer/dialog-footer.component.scss
+++ b/apps/client/src/app/components/dialog-footer/dialog-footer.component.scss
@ -1,9 +1,3 @@
 :host {
-  display: flex;
-  flex: 0 0 auto;
-  min-height: 0;
-
-  @media (min-width: 576px) {
-    padding: 0 !important;
-  }
+  display: block;
 }
--- a/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts
+++ b/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts
@ -6,6 +6,7 @@ import {
  Output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { close } from 'ionicons/icons';
@ -13,7 +14,7 @@ import { close } from 'ionicons/icons';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'justify-content-center' },
-  imports: [IonIcon, MatButtonModule],
+  imports: [IonIcon, MatButtonModule, MatDialogModule],
  selector: 'gf-dialog-footer',
  styleUrls: ['./dialog-footer.component.scss'],
  templateUrl: './dialog-footer.component.html'
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.html
+++ b/apps/client/src/app/components/dialog-header/dialog-header.component.html
@ -1,10 +1,12 @@
-<span
-  class="flex-grow-1 text-truncate"
-  [ngClass]="{ 'text-center': position === 'center' }"
-  >{{ title }}</span
->
-@if (deviceType !== 'mobile') {
-  <button class="no-min-width px-0" mat-button (click)="onClickCloseButton()">
-    <ion-icon name="close" size="large" />
-  </button>
-}
+<div class="d-flex" mat-dialog-title>
+  <span
+    class="flex-grow-1 text-truncate"
+    [ngClass]="{ 'text-center': position === 'center' }"
+    >{{ title }}</span
+  >
+  @if (deviceType !== 'mobile') {
+    <button class="no-min-width px-0" mat-button (click)="onClickCloseButton()">
+      <ion-icon name="close" size="large" />
+    </button>
+  }
+</div>
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.scss
+++ b/apps/client/src/app/components/dialog-header/dialog-header.component.scss
@ -1,4 +1,3 @@
 :host {
-  align-items: center;
-  display: flex;
+  display: block;
 }
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.ts
+++ b/apps/client/src/app/components/dialog-header/dialog-header.component.ts
@ -7,6 +7,7 @@ import {
  Output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { close } from 'ionicons/icons';
@ -14,7 +15,7 @@ import { close } from 'ionicons/icons';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'justify-content-center' },
-  imports: [CommonModule, IonIcon, MatButtonModule],
+  imports: [CommonModule, IonIcon, MatButtonModule, MatDialogModule],
  selector: 'gf-dialog-header',
  styleUrls: ['./dialog-header.component.scss'],
  templateUrl: './dialog-header.component.html'
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
  position="center"
  [deviceType]="data.deviceType"
  [title]="SymbolProfile?.name ?? SymbolProfile?.symbol"
@ -459,7 +458,6 @@
 </div>

 <gf-dialog-footer
-  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
 />
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
+++ b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
@ -1,8 +1,4 @@
-<gf-dialog-header
-  mat-dialog-title
-  [title]="data.title"
-  (closeButtonClicked)="onClose()"
-/>
+<gf-dialog-header [title]="data.title" (closeButtonClicked)="onClose()" />

 <div class="py-3" mat-dialog-content>
  <div class="align-items-center d-flex flex-column">
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
@ -250,6 +250,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
        deviceType: this.deviceType,
        user: this.user
      } as ImportActivitiesDialogParams,
+      height: this.deviceType === 'mobile' ? '98vh' : undefined,
      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
    });

@ -273,6 +274,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
        deviceType: this.deviceType,
        user: this.user
      } as ImportActivitiesDialogParams,
+      height: this.deviceType === 'mobile' ? '98vh' : undefined,
      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
    });

--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
@ -56,6 +56,7 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'd-flex flex-column h-100' },
  imports: [
    GfActivitiesTableComponent,
    GfDialogFooterComponent,
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
  [deviceType]="data.deviceType"
  [title]="dialogTitle"
  (closeButtonClicked)="onCancel()"
@ -193,7 +192,6 @@
 </div>

 <gf-dialog-footer
-  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onCancel()"
 />
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
@ -1,54 +1,58 @@
 :host {
  display: block;

-  a {
-    color: rgba(var(--palette-primary-500), 1);
-  }
+  .mat-mdc-dialog-content {
+    max-height: unset;
+
+    a {
+      color: rgba(var(--palette-primary-500), 1);
+    }

-  mat-stepper {
-    ::ng-deep {
-      .mat-step-header {
-        &[aria-selected='false'] {
-          pointer-events: none;
+    mat-stepper {
+      ::ng-deep {
+        .mat-step-header {
+          &[aria-selected='false'] {
+            pointer-events: none;
+          }
        }
      }
    }
-  }

-  .mat-expansion-panel {
-    background: none;
-    box-shadow: none;
+    .drop-area {
+      background-color: rgba(var(--palette-foreground-base), 0.02);
+      border: 1px dashed
+        rgba(
+          var(--palette-foreground-divider),
+          var(--palette-foreground-divider-alpha)
+        );
+      border-radius: 0.25rem;

-    .mat-expansion-panel-header {
-      color: inherit;
+      &:hover {
+        border-color: rgba(var(--palette-primary-500), 1) !important;
+        color: rgba(var(--palette-primary-500), 1);
+      }

-      &[aria-disabled='true'] {
-        cursor: default;
+      .cloud-icon {
+        font-size: 2.5rem;
      }
    }
-  }

-  .mat-mdc-progress-spinner {
-    right: 1.5rem;
-    top: calc(50% - 10px);
-  }
-
-  .drop-area {
-    background-color: rgba(var(--palette-foreground-base), 0.02);
-    border: 1px dashed
-      rgba(
-        var(--palette-foreground-divider),
-        var(--palette-foreground-divider-alpha)
-      );
-    border-radius: 0.25rem;
-
-    &:hover {
-      border-color: rgba(var(--palette-primary-500), 1) !important;
-      color: rgba(var(--palette-primary-500), 1);
+    .mat-mdc-progress-spinner {
+      right: 1.5rem;
+      top: calc(50% - 10px);
    }

-    .cloud-icon {
-      font-size: 2.5rem;
+    .mat-expansion-panel {
+      background: none;
+      box-shadow: none;
+
+      .mat-expansion-panel-header {
+        color: inherit;
+
+        &[aria-disabled='true'] {
+          cursor: default;
+        }
+      }
    }
  }
 }
--- a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html
+++ b/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html
@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
  position="center"
  [deviceType]="data.deviceType"
  [title]="assetProfile?.name ?? assetProfile?.symbol"
@ -35,7 +34,6 @@
 </div>

 <gf-dialog-footer
-  mat-dialog-actions
  [deviceType]="data.deviceType"
  (closeButtonClicked)="onClose()"
 />