From 84de2c0c6861f4a4bc46da625327a706452e7018 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sat, 8 Apr 2023 17:08:30 +0200 Subject: [PATCH] Migrate card components to Angular Material 15 (#1837) --- .../admin-overview/admin-overview.html | 2 +- .../admin-overview/admin-overview.module.ts | 2 +- .../home-holdings/home-holdings.html | 4 +- .../home-holdings/home-holdings.module.ts | 2 +- .../components/home-summary/home-summary.html | 2 +- .../home-summary/home-summary.module.ts | 2 +- .../app/components/rules/rules.component.html | 9 +- .../src/app/components/rules/rules.module.ts | 2 +- .../src/app/pages/account/account-page.html | 2 +- .../app/pages/account/account-page.module.ts | 2 +- apps/client/src/app/pages/faq/faq-page.html | 118 ++-- .../src/app/pages/faq/faq-page.module.ts | 2 +- .../src/app/pages/features/features-page.html | 408 ++++++------ .../pages/features/features-page.module.ts | 2 +- .../src/app/pages/landing/landing-page.html | 75 ++- .../app/pages/landing/landing-page.module.ts | 2 +- .../allocations/allocations-page.html | 32 +- .../allocations/allocations-page.module.ts | 2 +- .../allocations/allocations-page.scss | 10 +- .../portfolio/analysis/analysis-page.html | 4 +- .../analysis/analysis-page.module.ts | 2 +- .../src/app/pages/pricing/pricing-page.html | 594 +++++++++--------- .../app/pages/pricing/pricing-page.module.ts | 2 +- .../src/app/pages/pricing/pricing-page.scss | 2 +- .../src/app/pages/public/public-page.html | 22 +- .../app/pages/public/public-page.module.ts | 2 +- .../src/app/pages/public/public-page.scss | 4 +- .../pages/register/register-page.module.ts | 2 - apps/client/src/styles.scss | 20 - 29 files changed, 716 insertions(+), 618 deletions(-) diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html index d2798d0f8..70ea57ed8 100644 --- a/apps/client/src/app/components/admin-overview/admin-overview.html +++ b/apps/client/src/app/components/admin-overview/admin-overview.html @@ -1,7 +1,7 @@
- +
User Count
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.module.ts b/apps/client/src/app/components/admin-overview/admin-overview.module.ts index a97d4b05b..84916a301 100644 --- a/apps/client/src/app/components/admin-overview/admin-overview.module.ts +++ b/apps/client/src/app/components/admin-overview/admin-overview.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; +import { MatCardModule } from '@angular/material/card'; import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle'; import { CacheService } from '@ghostfolio/client/services/cache.service'; diff --git a/apps/client/src/app/components/home-holdings/home-holdings.html b/apps/client/src/app/components/home-holdings/home-holdings.html index 3740f0c6b..5cac8cb3f 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.html +++ b/apps/client/src/app/components/home-holdings/home-holdings.html @@ -9,8 +9,8 @@
- - + + Summary
- + - + + diff --git a/apps/client/src/app/components/rules/rules.module.ts b/apps/client/src/app/components/rules/rules.module.ts index e1bb645f2..ebf4eaeaf 100644 --- a/apps/client/src/app/components/rules/rules.module.ts +++ b/apps/client/src/app/components/rules/rules.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; +import { MatCardModule } from '@angular/material/card'; import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module'; import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info'; diff --git a/apps/client/src/app/pages/account/account-page.html b/apps/client/src/app/pages/account/account-page.html index e049a8428..8c270b1f1 100644 --- a/apps/client/src/app/pages/account/account-page.html +++ b/apps/client/src/app/pages/account/account-page.html @@ -6,7 +6,7 @@
- +
Frequently Asked Questions (FAQ) - - What is Ghostfolio? + + + What is Ghostfolio? + Ghostfolio is a lightweight, open source wealth management application for individuals to keep track of their net worth. The software empowers you to make solid, data-driven investment decisions. - - What assets can I track with Ghostfolio? + + + What assets can I track with Ghostfolio? + With Ghostfolio, you can keep track of various assets like stocks, ETFs or cryptocurrencies. - - What else is included in Ghostfolio? + + + What else is included in Ghostfolio? Please find a feature overview to manage your wealth here. - - How do I start? + + + How do I start? You can sign up via the “Get StartedGoogle Sign. We will guide you to set up your portfolio. - - Can I use Ghostfolio anonymously? + + + Can I use Ghostfolio anonymously? Yes, the authentication systems (via security token or - - How can Ghostfolio be free? + + + How can Ghostfolio be free? This project is driven by the efforts of contributors from around the world. The @@ -64,16 +82,22 @@ investors. - - Is it really free? + + + Is it really free? Yes, it is! Our pricing page details everything you get for free. - - What is Ghostfolio Premium? + + + What is Ghostfolio Premium? Ghostfolio Premium is a fully managed Ghostfolio cloud offering for ambitious investors. The revenue @@ -83,8 +107,12 @@ data provider. - - Can I start with a trial version? + + + Can I start with a trial version? Yes, you can try Ghostfolio Premium by signing up @@ -93,19 +121,23 @@ time. - - How can I get a student discount for Ghostfolio - Premium? + + + How can I get a student discount for Ghostfolio + Premium? + Request your student discount here with your university e-mail address. - - Which devices are supported? + + + Which devices are supported? + Ghostfolio works in every modern web browser on smartphones, tablets and desktop computers. For Android users, there is a dedicated @@ -116,21 +148,29 @@ >. - - I cannot find my broker in the list of platforms. What can I - do? + + + I cannot find my broker in the list of platforms. What can I + do? + Please send an e-mail with the web address of your broker to hi@ghostfol.io and we are happy to add it. - - Ghostfolio sounds cool, how can I get involved? + + + Ghostfolio sounds cool, how can I get involved? + Any support for Ghostfolio is welcome. Be it with a Ghostfolio Premium subscription to @@ -165,8 +205,10 @@ >. - - Got any other questions? + + + Got any other questions? + Please join the Ghostfolio
- -
-

Stocks

-

Keep track of your stock purchases and sales.

-
+ + +
+

Stocks

+

Keep track of your stock purchases and sales.

+
+
- -
-

ETFs

-

- Are you into ETFs (Exchange Traded Funds)? Track your ETF - investments. -

-
+ + +
+

ETFs

+

+ Are you into ETFs (Exchange Traded Funds)? Track your ETF + investments. +

+
+
- -
-

Bonds

-

- Manage your investment in bonds and other assets with fixed - income. -

-
+ + +
+

Bonds

+

+ Manage your investment in bonds and other assets with fixed + income. +

+
+
- -
-

Cryptocurrencies

-

- Keep track of your Bitcoin and Altcoin holdings. -

-
+ + +
+

Cryptocurrencies

+

+ Keep track of your Bitcoin and Altcoin holdings. +

+
+
- -
-

Dividend

-

- Are you building a dividend portfolio? Track your dividend in - Ghostfolio. -

-
+ + +
+

Dividend

+

+ Are you building a dividend portfolio? Track your dividend in + Ghostfolio. +

+
+
- -
-

Wealth Items

-

- Track all your treasuries, be it your luxury watch or rare - trading cards. -

-
+ + +
+

Wealth Items

+

+ Track all your treasuries, be it your luxury watch or rare + trading cards. +

+
+
- -
-

Emergency Fund

-

- Define your emergency fund you are comfortable with for - difficult times. -

-
+ + +
+

Emergency Fund

+

+ Define your emergency fund you are comfortable with for + difficult times. +

+
+
- -
-

Import and Export

-

Import and export your investment activities.

-
+ + +
+

Import and Export

+

Import and export your investment activities.

+
+
- -
-

Multi-Accounts

-

- Keep an eye on all your accounts across multiple platforms - (multi-banking). -

-
+ + +
+

Multi-Accounts

+

+ Keep an eye on all your accounts across multiple platforms + (multi-banking). +

+
+
- -
-

- Portfolio Calculations - -

-

- Check the rate of return of your portfolio for - Today, YTD, 1Y, - 5Y, and Max. -

-
+ + +
+

+ Portfolio Calculations + +

+

+ Check the rate of return of your portfolio for + Today, YTD, 1Y, + 5Y, and Max. +

+
+
- -
-

- Portfolio Allocations - -

-

- Check the allocations of your portfolio by account, asset class, - currency, region, and sector. -

-
+ + +
+

+ Portfolio Allocations + +

+

+ Check the allocations of your portfolio by account, asset + class, currency, region, and sector. +

+
+
- -
-

Dark Mode

-

- Ghostfolio automatically switches to a dark color theme based on - your operating system's preferences. -

-
+ + +
+

Dark Mode

+

+ Ghostfolio automatically switches to a dark color theme based + on your operating system's preferences. +

+
+
- -
-

Zen Mode

-

- Keep calm and activate Zen Mode if the markets are going crazy. -

-
+ + +
+

Zen Mode

+

+ Keep calm and activate Zen Mode if the markets are going + crazy. +

+
+
- -
-

- Market Mood - -

-

- Check the current market mood (Fear & Greed Index) within the app. -

-
- -
-
- -
-

- Static Analysis - -

-

- Identify potential risks in your portfolio with Ghostfolio - X-ray, the static portfolio analysis. -

-
- -
-
- -
-

Multi-Language

-

- Use Ghostfolio in multiple languages: English, Dutch, French, - German, Italian, Portuguese - and Spanish are currently supported. -

-
- -
-
- -
-

Community

-

- Join the Ghostfolio - Slack channel - full of enthusiastic investors and discuss the latest market - trends. -

-
- -
-
- -
-

Open Source Software

-

- The source code is fully available as - open source software - (OSS) and licensed under the AGPLv3 License. -

-
+ + +
+

+ Market Mood + +

+

+ Check the current market mood (Fear & Greed Index) within the app. +

+
+ + +
+
+ + +
+

+ Static Analysis + +

+

+ Identify potential risks in your portfolio with Ghostfolio + X-ray, the static portfolio analysis. +

+
+ + +
+
+ + +
+

Multi-Language

+

+ Use Ghostfolio in multiple languages: English, Dutch, French, + German, Italian, Portuguese + and Spanish are currently supported. +

+
+ + +
+
+ + +
+

Community

+

+ Join the Ghostfolio + Slack channel + full of enthusiastic investors and discuss the latest market + trends. +

+
+ + +
+
+ + +
+

Open Source Software

+

+ The source code is fully available as + open source software + (OSS) and licensed under the AGPLv3 License. +

+
+
diff --git a/apps/client/src/app/pages/features/features-page.module.ts b/apps/client/src/app/pages/features/features-page.module.ts index f6c55ca8d..9c90ccc00 100644 --- a/apps/client/src/app/pages/features/features-page.module.ts +++ b/apps/client/src/app/pages/features/features-page.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; +import { MatCardModule } from '@angular/material/card'; import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { FeaturesPageRoutingModule } from './features-page-routing.module'; diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html index e7c942f7b..1c9cb98e8 100644 --- a/apps/client/src/app/pages/landing/landing-page.html +++ b/apps/client/src/app/pages/landing/landing-page.html @@ -214,22 +214,33 @@
- - 360° View - Get the full picture of your personal finances across multiple - platforms. + + + 360° View + + + Get the full picture of your personal finances across multiple +
- - Web3 Ready - Use Ghostfolio anonymously and own your financial data. + + + Web3 Ready + + + Use Ghostfolio anonymously and own your financial data. +
- - Open Source - Benefit from continuous improvements through a strong community. + + + Open Source + + + Benefit from continuous improvements through a strong community. +
@@ -340,34 +351,40 @@

Get started in only 3 steps

- -
-
Sign up anonymously*
-
- * no e-mail address nor credit card required + + +
+
Sign up anonymously*
+
+ * no e-mail address nor credit card required +
-
-
1
+
1
+
- -
-
- Add any of your historical transactions + + +
+
+ Add any of your historical transactions +
-
-
2
+
2
+
- -
-
- Get valuable insights of your portfolio composition + + +
+
+ Get valuable insights of your portfolio composition +
-
-
3
+
3
+
diff --git a/apps/client/src/app/pages/landing/landing-page.module.ts b/apps/client/src/app/pages/landing/landing-page.module.ts index e495a4d6b..9a3f02cce 100644 --- a/apps/client/src/app/pages/landing/landing-page.module.ts +++ b/apps/client/src/app/pages/landing/landing-page.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; +import { MatCardModule } from '@angular/material/card'; import { RouterModule } from '@angular/router'; import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; import { GfLogoModule } from '@ghostfolio/ui/logo'; diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html index 5ee7deb33..412527fc7 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html @@ -12,7 +12,7 @@
- + Proportion of Net Worth
- + By Account @@ -55,7 +55,7 @@
- + By Currency @@ -78,7 +78,7 @@
- + By Asset Class
- + By Holding
- + By Sector
- + By Continent
- + By Country
- + Regions - +
+ +
- + Top
- + Bottom
- -
-

Open Source

-

- For tech-savvy investors who prefer to run Ghostfolio on their - own infrastructure. -

-
    -
  • - - Unlimited Transactions -
    • -
  • - - Unlimited Accounts -
    • -
  • - - Portfolio Performance -
    • -
  • - - Portfolio Summary -
    • -
  • - - Portfolio Allocations -
    • -
  • - - Performance Benchmarks -
    • -
  • - - FIRE Calculator -
    • -
  • - - Data Import and Export - - - -
    • -
  • - - and more Features... -
    • -
  • - - Community Support -
    • -
-
-

Self-hosted, update manually.

-

Free

- + + +
+

Open Source

+

+ For tech-savvy investors who prefer to run Ghostfolio on their + own infrastructure. +

+
    +
  • + + Unlimited Transactions +
    • +
  • + + Unlimited Accounts +
    • +
  • + + Portfolio Performance +
    • +
  • + + Portfolio Summary +
    • +
  • + + Portfolio Allocations +
    • +
  • + + Performance Benchmarks +
    • +
  • + + FIRE Calculator +
    • +
  • + + Data Import and Export + + + +
    • +
  • + + and more Features... +
    • +
  • + + Community Support +
    • +
+
+

Self-hosted, update manually.

+

Free

+ +
-
-
-

Basic

-
- + +
+
+

Basic

+
+ +
+

+ For new investors who are just getting started with trading. +

+
    +
  • + + Unlimited Transactions +
    • +
  • + + Unlimited Accounts +
    • +
  • + + Portfolio Performance +
    • +
  • + + Data Import and Export + + + +
    • +
-

- For new investors who are just getting started with trading. -

-
    -
  • - - Unlimited Transactions -
    • -
  • - - Unlimited Accounts -
    • -
  • - - Portfolio Performance -
    • -
  • - - Data Import and Export - - - -
    • -
-
-

Fully managed Ghostfolio cloud offering.

-

Free

- +

Fully managed Ghostfolio cloud offering.

+

Free

+ +
-
-
-

- Premium - -

-
- + +
+
+

+ Premium + +

+
+ +
+

+ For ambitious investors who need the full picture of their + financial assets. +

+
    +
  • + + Unlimited Transactions +
    • +
  • + + Unlimited Accounts +
    • +
  • + + Portfolio Performance +
    • +
  • + + Portfolio Summary +
    • +
  • + + Portfolio Allocations +
    • +
  • + + Performance Benchmarks +
    • +
  • + + FIRE Calculator +
    • +
  • + + Data Import and Export + + + +
    • +
  • + + Professional Data Provider +
    • +
  • + + and more Features... +
    • +
  • + + Email and Chat Support +
    • +
-

- For ambitious investors who need the full picture of their - financial assets. +

Fully managed Ghostfolio cloud offering.

+

+ + {{ baseCurrency }} {{ price }} {{ baseCurrency }} {{ price - coupon }} + + {{ baseCurrency }} {{ price }} per year

- -
-

Fully managed Ghostfolio cloud offering.

-

- - {{ baseCurrency }} {{ price }} {{ baseCurrency }} {{ price - coupon }}Renew Plan - - {{ baseCurrency }} {{ price }} per year -

-
- - Upgrade Plan - Renew Plan - -

- One-time payment, no auto-renewal. -

-
+ +

+ One-time payment, no auto-renewal. +

+
+
diff --git a/apps/client/src/app/pages/pricing/pricing-page.module.ts b/apps/client/src/app/pages/pricing/pricing-page.module.ts index 1cc4c7e56..f21fe6aed 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.module.ts +++ b/apps/client/src/app/pages/pricing/pricing-page.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'; +import { MatCardModule } from '@angular/material/card'; import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; import { RouterModule } from '@angular/router'; import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; diff --git a/apps/client/src/app/pages/pricing/pricing-page.scss b/apps/client/src/app/pages/pricing/pricing-page.scss index 74b8facb8..bfb5c3982 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.scss +++ b/apps/client/src/app/pages/pricing/pricing-page.scss @@ -13,7 +13,7 @@ } } - .mat-card { + .mat-mdc-card { &:hover, &.active { border-color: rgba(var(--palette-primary-500), 1); diff --git a/apps/client/src/app/pages/public/public-page.html b/apps/client/src/app/pages/public/public-page.html index dd332db83..39d6ab40b 100644 --- a/apps/client/src/app/pages/public/public-page.html +++ b/apps/client/src/app/pages/public/public-page.html @@ -9,7 +9,7 @@
- + Holdings @@ -25,7 +25,7 @@
- + Currencies @@ -40,7 +40,7 @@
- + Sectors @@ -55,7 +55,7 @@
- + Continents @@ -71,16 +71,18 @@
- + Regions - +
+ +