From 0d5adfb998cfb9fe5ed84e25783051e262a24528 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Tue, 2 Sep 2025 15:12:58 +0200 Subject: [PATCH 1/2] Feature/refactor dialog footer and header components (#5445) * Refactor dialog footer and header components * Update changelog --- CHANGELOG.md | 2 + .../account-detail-dialog.html | 2 - .../dialog-footer.component.html | 8 +- .../dialog-footer.component.scss | 8 +- .../dialog-footer/dialog-footer.component.ts | 3 +- .../dialog-header.component.html | 22 +++--- .../dialog-header.component.scss | 3 +- .../dialog-header/dialog-header.component.ts | 3 +- .../holding-detail-dialog.html | 2 - .../login-with-access-token-dialog.html | 6 +- .../activities/activities-page.component.ts | 2 + .../import-activities-dialog.component.ts | 1 + .../import-activities-dialog.html | 2 - .../import-activities-dialog.scss | 76 ++++++++++--------- .../benchmark-detail-dialog.html | 2 - 15 files changed, 69 insertions(+), 73 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e4c43ff3..57c36ce0f 100644 --- 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`) diff --git 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 index c43c5cb68..8ca54ce29 100644 --- 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 @@ diff --git a/apps/client/src/app/components/dialog-footer/dialog-footer.component.html b/apps/client/src/app/components/dialog-footer/dialog-footer.component.html index b47888d3b..463354cf1 100644 --- 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') { - +
+ +
} diff --git a/apps/client/src/app/components/dialog-footer/dialog-footer.component.scss b/apps/client/src/app/components/dialog-footer/dialog-footer.component.scss index 4a9d1a4d7..5d4e87f30 100644 --- 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; } diff --git a/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts b/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts index 92ffc71b3..e230802a7 100644 --- 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' diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.html b/apps/client/src/app/components/dialog-header/dialog-header.component.html index dcf487cf7..019d85a52 100644 --- 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 @@ -{{ title }} -@if (deviceType !== 'mobile') { - -} +
+ {{ title }} + @if (deviceType !== 'mobile') { + + } +
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.scss b/apps/client/src/app/components/dialog-header/dialog-header.component.scss index 07be4a7c3..5d4e87f30 100644 --- 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; } diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.ts b/apps/client/src/app/components/dialog-header/dialog-header.component.ts index 0487034e9..ce3173d0e 100644 --- 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' diff --git 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 index 30ce98634..08dd05e4b 100644 --- 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 @@ diff --git 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 index 18f4fec27..e19d190c4 100644 --- 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 @@ - +
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts index 26049e069..33cf5148b 100644 --- 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' }); diff --git 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 index 8f7130a10..b1794cb4a 100644 --- 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, diff --git 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 index 9e7f7a923..6b048e6c0 100644 --- 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 @@ diff --git 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 index 54aa8c893..64f488e36 100644 --- 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; + } + } } } } diff --git 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 index 5c862d961..a8cf3730c 100644 --- 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 @@ From 37080da364abca2c846c3043044fedda3bf46feb Mon Sep 17 00:00:00 2001 From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com> Date: Tue, 2 Sep 2025 20:15:31 +0700 Subject: [PATCH 2/2] Task/migrate portfolio summary component to standalone (#5450) * Migrate portfolio summary component to standalone * Update changelog --- CHANGELOG.md | 1 + .../home-summary/home-summary.component.ts | 4 ++-- .../portfolio-summary.component.ts | 12 ++++++++---- .../portfolio-summary/portfolio-summary.module.ts | 15 --------------- 4 files changed, 11 insertions(+), 21 deletions(-) delete mode 100644 apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 57c36ce0f..c56c56723 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - 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 diff --git a/apps/client/src/app/components/home-summary/home-summary.component.ts b/apps/client/src/app/components/home-summary/home-summary.component.ts index e21210477..d49f9c26f 100644 --- a/apps/client/src/app/components/home-summary/home-summary.component.ts +++ b/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'], diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts index 9bc8ed773..849f018ad 100644 --- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts +++ b/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; diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts deleted file mode 100644 index b35f1e317..000000000 --- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts +++ /dev/null @@ -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 {}