diff --git a/CHANGELOG.md b/CHANGELOG.md index dfba98d14..0327fafe0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Added an icon and name column to the positions table +- Added a reusable premium indicator component ### Changed diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html index fab2e3010..39f778b2b 100644 --- a/apps/client/src/app/components/admin-users/admin-users.html +++ b/apps/client/src/app/components/admin-users/admin-users.html @@ -35,11 +35,10 @@ >{{ userItem.alias || (userItem.id | slice:0:5) + '...' }} - + class="ml-1" + > diff --git a/apps/client/src/app/components/admin-users/admin-users.module.ts b/apps/client/src/app/components/admin-users/admin-users.module.ts index 44b9696a3..8c381b205 100644 --- a/apps/client/src/app/components/admin-users/admin-users.module.ts +++ b/apps/client/src/app/components/admin-users/admin-users.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { GfValueModule } from '@ghostfolio/ui/value'; import { AdminUsersComponent } from './admin-users.component'; @@ -9,7 +10,13 @@ import { AdminUsersComponent } from './admin-users.component'; @NgModule({ declarations: [AdminUsersComponent], exports: [], - imports: [CommonModule, GfValueModule, MatButtonModule, MatMenuModule], + imports: [ + CommonModule, + GfPremiumIndicatorModule, + GfValueModule, + MatButtonModule, + MatMenuModule + ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class GfAdminUsersModule {} diff --git a/apps/client/src/app/pages/account/account-page.html b/apps/client/src/app/pages/account/account-page.html index ed99abc56..5a312fc09 100644 --- a/apps/client/src/app/pages/account/account-page.html +++ b/apps/client/src/app/pages/account/account-page.html @@ -19,11 +19,10 @@ {{ user?.subscription?.type }} - + class="ml-1" + >
Valid until {{ user?.subscription?.expiresAt | date: @@ -56,11 +55,11 @@ class="mr-2 my-2" mat-stroked-button [href]="trySubscriptionMail" - >Try PremiumTry Premium +

Portfolio Calculations - + class="ml-1" + >

Check the rate of return of your portfolio for @@ -127,11 +126,10 @@

Portfolio Allocations - + class="ml-1" + >

Check the allocations of your portfolio by account, asset class, @@ -169,10 +167,7 @@

Market Mood - +

Check the current market mood (

Static Analysis - + class="ml-1" + >

Identify potential risks in your portfolio with Ghostfolio 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 2a4204304..9c90ccc00 100644 --- a/apps/client/src/app/pages/features/features-page.module.ts +++ b/apps/client/src/app/pages/features/features-page.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { FeaturesPageRoutingModule } from './features-page-routing.module'; import { FeaturesPageComponent } from './features-page.component'; @@ -9,8 +10,9 @@ import { FeaturesPageComponent } from './features-page.component'; @NgModule({ declarations: [FeaturesPageComponent], imports: [ - FeaturesPageRoutingModule, CommonModule, + FeaturesPageRoutingModule, + GfPremiumIndicatorModule, MatButtonModule, MatCardModule ], 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 9a71dbe27..e4cc80908 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html @@ -37,12 +37,11 @@ By CurrencyBy Currency + By Asset Class By Position By Sector By Continent By Country Regions

Allocations - + class="ml-1" + >

Check the allocations of your portfolio by account, asset class, @@ -50,11 +49,10 @@

Analysis - + class="ml-1" + >

Ghostfolio Analysis visualizes your portfolio and shows your top and @@ -76,11 +74,10 @@

X-ray - + class="ml-1" + >

Ghostfolio X-ray uses static analysis to identify potential issues and @@ -98,11 +95,10 @@

FIRE - + class="ml-1" + >

Ghostfolio FIRE calculates metrics for the diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts b/apps/client/src/app/pages/portfolio/portfolio-page.module.ts index e997b372c..4fe3fed6a 100644 --- a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts +++ b/apps/client/src/app/pages/portfolio/portfolio-page.module.ts @@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { RouterModule } from '@angular/router'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { PortfolioPageRoutingModule } from './portfolio-page-routing.module'; import { PortfolioPageComponent } from './portfolio-page.component'; @@ -12,6 +13,7 @@ import { PortfolioPageComponent } from './portfolio-page.component'; exports: [], imports: [ CommonModule, + GfPremiumIndicatorModule, MatButtonModule, MatCardModule, PortfolioPageRoutingModule, diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html index 5730a4d5b..428700acf 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.html +++ b/apps/client/src/app/pages/pricing/pricing-page.html @@ -125,10 +125,10 @@

Premium - +

For ambitious investors who need the full picture of their 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 02d59a364..7c68a3c50 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.module.ts +++ b/apps/client/src/app/pages/pricing/pricing-page.module.ts @@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { RouterModule } from '@angular/router'; +import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { PricingPageRoutingModule } from './pricing-page-routing.module'; import { PricingPageComponent } from './pricing-page.component'; @@ -12,6 +13,7 @@ import { PricingPageComponent } from './pricing-page.component'; exports: [], imports: [ CommonModule, + GfPremiumIndicatorModule, MatButtonModule, MatCardModule, PricingPageRoutingModule, diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts index e76e670ea..4e26d0083 100644 --- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts +++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts @@ -1,3 +1,4 @@ +import { RouterTestingModule } from '@angular/router/testing'; import { GfLogoModule } from '@ghostfolio/ui/logo'; import { Meta, Story, moduleMetadata } from '@storybook/angular'; @@ -8,7 +9,7 @@ export default { component: NoTransactionsInfoComponent, decorators: [ moduleMetadata({ - imports: [GfLogoModule] + imports: [GfLogoModule, RouterTestingModule] }) ] } as Meta; diff --git a/libs/ui/src/lib/premium-indicator/index.ts b/libs/ui/src/lib/premium-indicator/index.ts new file mode 100644 index 000000000..593823bbd --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/index.ts @@ -0,0 +1 @@ +export * from './premium-indicator.module'; diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html new file mode 100644 index 000000000..69ce63f20 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html @@ -0,0 +1,6 @@ + diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.scss b/libs/ui/src/lib/premium-indicator/premium-indicator.component.scss new file mode 100644 index 000000000..5d4e87f30 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts new file mode 100644 index 000000000..bdb9c6543 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts @@ -0,0 +1,29 @@ +import { CommonModule } from '@angular/common'; +import { RouterTestingModule } from '@angular/router/testing'; +import { Meta, Story, moduleMetadata } from '@storybook/angular'; + +import { PremiumIndicatorComponent } from './premium-indicator.component'; + +export default { + title: 'Premium Indicator', + component: PremiumIndicatorComponent, + decorators: [ + moduleMetadata({ + imports: [CommonModule, RouterTestingModule] + }) + ] +} as Meta; + +const Template: Story = ( + args: PremiumIndicatorComponent +) => ({ + props: args +}); + +export const Default = Template.bind({}); +Default.args = {}; + +export const WithoutLink = Template.bind({}); +WithoutLink.args = { + enableLink: false +}; diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts new file mode 100644 index 000000000..3711a28dd --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.component.ts @@ -0,0 +1,13 @@ +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; + +@Component({ + selector: 'gf-premium-indicator', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './premium-indicator.component.html', + styleUrls: ['./premium-indicator.component.scss'] +}) +export class PremiumIndicatorComponent { + @Input() enableLink = true; + + public constructor() {} +} diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.module.ts b/libs/ui/src/lib/premium-indicator/premium-indicator.module.ts new file mode 100644 index 000000000..87eeb2f97 --- /dev/null +++ b/libs/ui/src/lib/premium-indicator/premium-indicator.module.ts @@ -0,0 +1,14 @@ +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { PremiumIndicatorComponent } from './premium-indicator.component'; + +@NgModule({ + declarations: [PremiumIndicatorComponent], + exports: [PremiumIndicatorComponent], + imports: [CommonModule, RouterModule], + providers: [], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class GfPremiumIndicatorModule {}