Merge remote-tracking branch 'upstream/main'

CHANGELOG.md

@@ -10,7 +10,10 @@ 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 portfolio summary component to standalone
 - Refactored the world map chart component to standalone
 - Improved the language localization for German (`de`)
 - Upgraded the _Stripe_ dependencies

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()"
 />

apps/client/src/app/components/dialog-footer/dialog-footer.component.html

@@ -1,5 +1,7 @@
 @if (deviceType === 'mobile') {
-  <button mat-button (click)="onClickCloseButton()">
+  <div class="d-flex justify-content-center" mat-dialog-actions>
-    <ion-icon name="close" size="large" />
+    <button mat-button (click)="onClickCloseButton()">
-  </button>
+      <ion-icon name="close" size="large" />
+    </button>
+  </div>
 }

apps/client/src/app/components/dialog-footer/dialog-footer.component.scss

@@ -1,9 +1,3 @@
 :host {
-  display: flex;
+  display: block;
-  flex: 0 0 auto;
-  min-height: 0;
-
-  @media (min-width: 576px) {
-    padding: 0 !important;
-  }
 }

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'

apps/client/src/app/components/dialog-header/dialog-header.component.html

@@ -1,10 +1,12 @@
-<span
+<div class="d-flex" mat-dialog-title>
-  class="flex-grow-1 text-truncate"
+  <span
-  [ngClass]="{ 'text-center': position === 'center' }"
+    class="flex-grow-1 text-truncate"
-  >{{ title }}</span
+    [ngClass]="{ 'text-center': position === 'center' }"
->
+    >{{ title }}</span
-@if (deviceType !== 'mobile') {
+  >
-  <button class="no-min-width px-0" mat-button (click)="onClickCloseButton()">
+  @if (deviceType !== 'mobile') {
-    <ion-icon name="close" size="large" />
+    <button class="no-min-width px-0" mat-button (click)="onClickCloseButton()">
-  </button>
+      <ion-icon name="close" size="large" />
-}
+    </button>
+  }
+</div>

apps/client/src/app/components/dialog-header/dialog-header.component.scss

@@ -1,4 +1,3 @@
 :host {
-  align-items: center;
+  display: block;
-  display: flex;
 }

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'

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()"
 />

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -1,4 +1,4 @@
-import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
+import { GfPortfolioSummaryComponent } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -22,7 +22,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  imports: [GfPortfolioSummaryModule, MatCardModule],
+  imports: [GfPortfolioSummaryComponent, MatCardModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-home-summary',
   styleUrls: ['./home-summary.scss'],

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -1,8 +1,4 @@
-<gf-dialog-header
+<gf-dialog-header [title]="data.title" (closeButtonClicked)="onClose()" />
-  mat-dialog-title
-  [title]="data.title"
-  (closeButtonClicked)="onClose()"
-/>
 
 <div class="py-3" mat-dialog-content>
   <div class="align-items-center d-flex flex-column">

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -2,7 +2,9 @@ import { NotificationService } from '@ghostfolio/client/core/notification/notifi
 import { getDateFnsLocale, getLocale } from '@ghostfolio/common/helper';
 import { PortfolioSummary, User } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -11,6 +13,8 @@ import {
   OnChanges,
   Output
 } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IonIcon } from '@ionic/angular/standalone';
 import { formatDistanceToNow } from 'date-fns';
 import { addIcons } from 'ionicons';
 import {
@@ -19,13 +23,13 @@ import {
 } from 'ionicons/icons';
 
 @Component({
-  selector: 'gf-portfolio-summary',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './portfolio-summary.component.html',
+  imports: [CommonModule, GfValueComponent, IonIcon, MatTooltipModule],
+  selector: 'gf-portfolio-summary',
   styleUrls: ['./portfolio-summary.component.scss'],
-  standalone: false
+  templateUrl: './portfolio-summary.component.html'
 })
-export class PortfolioSummaryComponent implements OnChanges {
+export class GfPortfolioSummaryComponent implements OnChanges {
   @Input() baseCurrency: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;

apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts

@@ -1,15 +0,0 @@
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-import { PortfolioSummaryComponent } from './portfolio-summary.component';
-
-@NgModule({
-  declarations: [PortfolioSummaryComponent],
-  exports: [PortfolioSummaryComponent],
-  imports: [CommonModule, GfValueComponent, MatTooltipModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfPortfolioSummaryModule {}

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'
     });
 

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,

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()"
 />

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss

@@ -1,54 +1,58 @@
 :host {
   display: block;
 
-  a {
+  .mat-mdc-dialog-content {
-    color: rgba(var(--palette-primary-500), 1);
+    max-height: unset;
-  }
+
+    a {
+      color: rgba(var(--palette-primary-500), 1);
+    }
 
-  mat-stepper {
+    mat-stepper {
-    ::ng-deep {
+      ::ng-deep {
-      .mat-step-header {
+        .mat-step-header {
-        &[aria-selected='false'] {
+          &[aria-selected='false'] {
-          pointer-events: none;
+            pointer-events: none;
+          }
         }
       }
     }
-  }
 
-  .mat-expansion-panel {
+    .drop-area {
-    background: none;
+      background-color: rgba(var(--palette-foreground-base), 0.02);
-    box-shadow: none;
+      border: 1px dashed
+        rgba(
+          var(--palette-foreground-divider),
+          var(--palette-foreground-divider-alpha)
+        );
+      border-radius: 0.25rem;
 
-    .mat-expansion-panel-header {
+      &:hover {
-      color: inherit;
+        border-color: rgba(var(--palette-primary-500), 1) !important;
+        color: rgba(var(--palette-primary-500), 1);
+      }
 
-      &[aria-disabled='true'] {
+      .cloud-icon {
-        cursor: default;
+        font-size: 2.5rem;
       }
     }
-  }
 
-  .mat-mdc-progress-spinner {
+    .mat-mdc-progress-spinner {
-    right: 1.5rem;
+      right: 1.5rem;
-    top: calc(50% - 10px);
+      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);
     }
 
-    .cloud-icon {
+    .mat-expansion-panel {
-      font-size: 2.5rem;
+      background: none;
+      box-shadow: none;
+
+      .mat-expansion-panel-header {
+        color: inherit;
+
+        &[aria-disabled='true'] {
+          cursor: default;
+        }
+      }
     }
   }
 }

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()"
 />