From 9072cbdba17cc537f7e168e9ec4cacd07f2f1a7b Mon Sep 17 00:00:00 2001 From: Thomas <4159106+dtslvr@users.noreply.github.com> Date: Sun, 18 Jul 2021 17:34:28 +0200 Subject: [PATCH] Feature/add no transactions info on zen page (#222) * Add no transactions info to zen page * Update changelog --- CHANGELOG.md | 2 ++ .../app/components/header/header.module.ts | 2 +- .../app/components/logo/logo.component.html | 2 +- .../src/app/components/logo/logo.component.ts | 4 +++- .../no-transactions-info.component.html | 22 +++++++++++-------- .../no-transactions-info.component.scss | 10 +++++++++ .../no-transactions-info.module.ts | 3 ++- .../src/app/pages/zen/zen-page.component.ts | 3 +++ apps/client/src/app/pages/zen/zen-page.html | 9 +++++++- .../src/app/pages/zen/zen-page.module.ts | 2 ++ 10 files changed, 45 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cd07a589b..ba3ebace9 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 - Improved the onboarding + - Flow of creating a new account + - Info message to add the first transaction ### Fixed diff --git a/apps/client/src/app/components/header/header.module.ts b/apps/client/src/app/components/header/header.module.ts index 41873f65b..c8f72b43c 100644 --- a/apps/client/src/app/components/header/header.module.ts +++ b/apps/client/src/app/components/header/header.module.ts @@ -5,8 +5,8 @@ import { MatMenuModule } from '@angular/material/menu'; import { MatToolbarModule } from '@angular/material/toolbar'; import { RouterModule } from '@angular/router'; import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module'; +import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module'; -import { GfLogoModule } from '../logo/logo.module'; import { HeaderComponent } from './header.component'; @NgModule({ diff --git a/apps/client/src/app/components/logo/logo.component.html b/apps/client/src/app/components/logo/logo.component.html index 15389c339..71524fb6f 100644 --- a/apps/client/src/app/components/logo/logo.component.html +++ b/apps/client/src/app/components/logo/logo.component.html @@ -1,4 +1,4 @@ - GhostfolioGhostfolio diff --git a/apps/client/src/app/components/logo/logo.component.ts b/apps/client/src/app/components/logo/logo.component.ts index ed7f0d135..441f12e92 100644 --- a/apps/client/src/app/components/logo/logo.component.ts +++ b/apps/client/src/app/components/logo/logo.component.ts @@ -14,10 +14,12 @@ import { }) export class LogoComponent implements OnInit { @HostBinding('class') @Input() size: 'large' | 'medium'; + @Input() hideName: boolean; public constructor() {} public ngOnInit() { - this.size = this.size || 'medium'; + this.hideName = this.hideName ?? false; + this.size = this.size ?? 'medium'; } } diff --git a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html index bc0879dcf..d06119dd4 100644 --- a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html +++ b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html @@ -1,9 +1,13 @@ - - - Time to add your first transaction. - +
+
+ +
+ + Time to add your first transaction. + +
diff --git a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss index 5d4e87f30..9c9f064b7 100644 --- a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss +++ b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss @@ -1,3 +1,13 @@ :host { + border: 1px solid rgba(var(--dark-dividers)); + border-radius: 0.25rem; display: block; + + gf-logo { + opacity: 0.25; + } +} + +:host-context(.is-dark-theme) { + border-color: rgba(var(--light-dividers)); } diff --git a/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts b/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts index e6aa10deb..917beb579 100644 --- a/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts +++ b/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts @@ -2,13 +2,14 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { RouterModule } from '@angular/router'; +import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module'; import { NoTransactionsInfoComponent } from './no-transactions-info.component'; @NgModule({ declarations: [NoTransactionsInfoComponent], exports: [NoTransactionsInfoComponent], - imports: [CommonModule, MatButtonModule, RouterModule], + imports: [CommonModule, GfLogoModule, MatButtonModule, RouterModule], providers: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts index bcf75f392..8460d765e 100644 --- a/apps/client/src/app/pages/zen/zen-page.component.ts +++ b/apps/client/src/app/pages/zen/zen-page.component.ts @@ -20,6 +20,7 @@ export class ZenPageComponent implements OnDestroy, OnInit { public deviceType: string; public hasImpersonationId: boolean; public hasPermissionToReadForeignPortfolio: boolean; + public hasPositions: boolean; public historicalDataItems: LineChartItem[]; public isLoadingPerformance = true; public performance: PortfolioPerformance; @@ -88,6 +89,8 @@ export class ZenPageComponent implements OnDestroy, OnInit { }; }); + this.hasPositions = this.historicalDataItems?.length > 0; + this.changeDetectorRef.markForCheck(); }); diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html index a3e16b732..95d417cdd 100644 --- a/apps/client/src/app/pages/zen/zen-page.html +++ b/apps/client/src/app/pages/zen/zen-page.html @@ -1,4 +1,4 @@ -
+
+ +
+ +
diff --git a/apps/client/src/app/pages/zen/zen-page.module.ts b/apps/client/src/app/pages/zen/zen-page.module.ts index 117f69136..b878dbeda 100644 --- a/apps/client/src/app/pages/zen/zen-page.module.ts +++ b/apps/client/src/app/pages/zen/zen-page.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatCardModule } from '@angular/material/card'; import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module'; +import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module'; import { GfPortfolioPerformanceSummaryModule } from '@ghostfolio/client/components/portfolio-performance-summary/portfolio-performance-summary.module'; import { ZenPageRoutingModule } from './zen-page-routing.module'; @@ -13,6 +14,7 @@ import { ZenPageComponent } from './zen-page.component'; imports: [ CommonModule, GfLineChartModule, + GfNoTransactionsInfoModule, GfPortfolioPerformanceSummaryModule, MatCardModule, ZenPageRoutingModule