topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add tabs

pull/2396/head
Thomas 2 years ago
parent
d22d732dc4
commit
269629be0a
9 changed files with 336 additions and 303 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      apps/client/src/app/components/user-account-access/user-account-access.html
  2. 1
      apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
  3. 133
      apps/client/src/app/components/user-account-membership/user-account-membership.html
  4. 362
      apps/client/src/app/components/user-account-settings/user-account-settings.html
  5. 20
      apps/client/src/app/pages/user-account/user-account-page-routing.module.ts
  6. 40
      apps/client/src/app/pages/user-account/user-account-page.component.ts
  7. 39
      apps/client/src/app/pages/user-account/user-account-page.html
  8. 8
      apps/client/src/app/pages/user-account/user-account-page.module.ts
  9. 4
      apps/client/src/app/pages/user-account/user-account-page.scss

32
apps/client/src/app/components/user-account-access/user-account-access.html
View File

@ -1,19 +1,17 @@
<div class="container"> <div class="container">
<div class="row"> <h1
<div class="col"> class="align-items-center d-none d-sm-flex h3 justify-content-center mb-3 text-center"
<h2 class="align-items-center d-flex h3 justify-content-center mb-3"> >
<span i18n>Granted Access</span> <span i18n>Granted Access</span>
<gf-premium-indicator <gf-premium-indicator
*ngIf="user?.subscription?.type === 'Basic'" *ngIf="user?.subscription?.type === 'Basic'"
class="ml-1" class="ml-1"
></gf-premium-indicator> ></gf-premium-indicator>
</h2> </h1>
<gf-access-table <gf-access-table
[accesses]="accesses" [accesses]="accesses"
[hasPermissionToCreateAccess]="hasPermissionToCreateAccess" [hasPermissionToCreateAccess]="hasPermissionToCreateAccess"
[showActions]="hasPermissionToDeleteAccess" [showActions]="hasPermissionToDeleteAccess"
(accessDeleted)="onDeleteAccess($event)" (accessDeleted)="onDeleteAccess($event)"
></gf-access-table> ></gf-access-table>
</div>
</div>
</div> </div>

1
apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
View File

@ -34,6 +34,7 @@ export class UserAccountMembershipComponent implements OnDestroy, OnInit {
public hasPermissionToUpdateUserSettings: boolean; public hasPermissionToUpdateUserSettings: boolean;
public price: number; public price: number;
public priceId: string; public priceId: string;
public routerLinkPricing = ['/' + $localize`pricing`];
public snackBarRef: MatSnackBarRef<TextOnlySnackBar>; public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
public trySubscriptionMail = public trySubscriptionMail =
'mailto:hi@ghostfol.io?Subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards'; 'mailto:hi@ghostfol.io?Subject=Ghostfolio Premium Trial&body=Hello%0D%0DI am interested in Ghostfolio Premium. Can you please send me a coupon code to try it for some time?%0D%0DKind regards';

133
apps/client/src/app/components/user-account-membership/user-account-membership.html
View File

@ -1,86 +1,69 @@
<div class="container"> <div class="container">
<h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h2 class="h3 mb-3 text-center" i18n>Membership</h2> <div class="d-flex">
</div> <div class="mx-auto">
</div> <div class="align-items-center d-flex mb-1">
<div *ngIf="user?.settings" class="mb-5 row"> <a [routerLink]="routerLinkPricing"
<div class="col"> >{{ user?.subscription?.type }}</a
<mat-card appearance="outlined" class="mb-3"> >
<mat-card-content> <gf-premium-indicator
<div *ngIf="user?.subscription" class="d-flex py-1"> *ngIf="user?.subscription?.type === 'Premium'"
<div class="pr-1 w-50" i18n>Membership</div> class="ml-1"
<div class="pl-1 w-50"> ></gf-premium-indicator>
<div class="align-items-center d-flex mb-1"> </div>
<a [routerLink]="routerLinkPricing" <div *ngIf="user?.subscription?.type === 'Premium'">
>{{ user?.subscription?.type }}</a <ng-container i18n>Valid until</ng-container> {{
user?.subscription?.expiresAt | date: defaultDateFormat }}
</div>
<div *ngIf="user?.subscription?.type === 'Basic'">
<ng-container
*ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
>
<button color="primary" mat-flat-button (click)="onCheckout()">
<ng-container *ngIf="user.subscription.offer === 'default'" i18n
>Upgrade</ng-container
> >
<gf-premium-indicator <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
*ngIf="user?.subscription?.type === 'Premium'" >Renew</ng-container
class="ml-1"
></gf-premium-indicator>
</div>
<div *ngIf="user?.subscription?.type === 'Premium'">
<ng-container i18n>Valid until</ng-container> {{
user?.subscription?.expiresAt | date: defaultDateFormat }}
</div>
<div *ngIf="user?.subscription?.type === 'Basic'">
<ng-container
*ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
> >
<button </button>
color="primary" <div *ngIf="price" class="mt-1">
mat-flat-button <ng-container *ngIf="coupon"
(click)="onCheckout()" ><del class="text-muted"
> >{{ baseCurrency }}&nbsp;{{ price }}</del
<ng-container >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
*ngIf="user.subscription.offer === 'default'" }}</ng-container
i18n
>Upgrade</ng-container
>
<ng-container
*ngIf="user.subscription.offer === 'renewal'"
i18n
>Renew</ng-container
>
</button>
<div *ngIf="price" class="mt-1">
<ng-container *ngIf="coupon"
><del class="text-muted"
>{{ baseCurrency }}&nbsp;{{ price }}</del
>&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
}}</ng-container
>
<ng-container *ngIf="!coupon"
>{{ baseCurrency }}&nbsp;{{ price }}</ng-container
>&nbsp;<span i18n>per year</span>
</div>
</ng-container>
<a
*ngIf="!user?.subscription?.expiresAt"
class="mr-2 my-2"
mat-stroked-button
[href]="trySubscriptionMail"
><span i18n>Try Premium</span>
<gf-premium-indicator
class="d-inline-block ml-1"
[enableLink]="false"
></gf-premium-indicator
></a>
<a
*ngIf="hasPermissionToUpdateUserSettings"
class="mr-2 my-2"
i18n
mat-stroked-button
[routerLink]=""
(click)="onRedeemCoupon()"
>Redeem Coupon</a
> >
<ng-container *ngIf="!coupon"
>{{ baseCurrency }}&nbsp;{{ price }}</ng-container
>&nbsp;<span i18n>per year</span>
</div> </div>
</div> </ng-container>
<a
*ngIf="!user?.subscription?.expiresAt"
class="mr-2 my-2"
mat-stroked-button
[href]="trySubscriptionMail"
><span i18n>Try Premium</span>
<gf-premium-indicator
class="d-inline-block ml-1"
[enableLink]="false"
></gf-premium-indicator
></a>
<a
*ngIf="hasPermissionToUpdateUserSettings"
class="mr-2 my-2"
i18n
mat-stroked-button
[routerLink]=""
(click)="onRedeemCoupon()"
>Redeem Coupon</a
>
</div> </div>
</mat-card-content> </div>
</mat-card> </div>
</div> </div>
</div> </div>
</div> </div>

362
apps/client/src/app/components/user-account-settings/user-account-settings.html
View File

@ -1,221 +1,197 @@
<div class="container"> <div class="container">
<h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Settings</h1>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h2 class="h3 mb-3 text-center" i18n>Settings</h2> <div class="align-items-center d-flex py-1">
</div> <div class="pr-1 w-50">
</div> <div i18n>Presenter View</div>
<div *ngIf="user?.settings" class="mb-5 row"> <div class="hint-text text-muted" i18n>
<div class="col"> Protection for sensitive information like absolute performances and
<mat-card appearance="outlined" class="mb-3"> quantity values
<mat-card-content> </div>
<div class="align-items-center d-flex mt-4 py-1"> </div>
<div class="pr-1 w-50"> <div class="pl-1 w-50">
<div i18n>Presenter View</div> <mat-checkbox
<div class="hint-text text-muted" i18n> color="primary"
Protection for sensitive information like absolute performances [checked]="user.settings.isRestrictedView"
and quantity values [disabled]="!hasPermissionToUpdateUserSettings"
</div> (change)="onRestrictedViewChange($event)"
></mat-checkbox>
</div>
</div>
<div class="d-flex mt-4 py-1">
<form #changeUserSettingsForm="ngForm" class="w-100">
<div class="d-flex mb-2">
<div class="align-items-center d-flex pt-1 pt-1 w-50">
<ng-container i18n>Base Currency</ng-container>
</div> </div>
<div class="pl-1 w-50"> <div class="pl-1 w-50">
<mat-checkbox <mat-form-field appearance="outline" class="w-100 without-hint">
color="primary" <mat-select
[checked]="user.settings.isRestrictedView" name="baseCurrency"
[disabled]="!hasPermissionToUpdateUserSettings" [disabled]="!hasPermissionToUpdateUserSettings"
(change)="onRestrictedViewChange($event)" [value]="user.settings.baseCurrency"
></mat-checkbox> (selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
>
<mat-option
*ngFor="let currency of currencies"
[value]="currency"
>{{ currency }}</mat-option
>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
<div class="d-flex mt-4 py-1"> <div class="align-items-center d-flex mb-2">
<form #changeUserSettingsForm="ngForm" class="w-100"> <div class="pr-1 w-50">
<div class="d-flex mb-2"> <div i18n>Language</div>
<div class="align-items-center d-flex pt-1 pt-1 w-50"> </div>
<ng-container i18n>Base Currency</ng-container> <div class="pl-1 w-50">
</div> <mat-form-field appearance="outline" class="w-100 without-hint">
<div class="pl-1 w-50"> <mat-select
<mat-form-field name="language"
appearance="outline" [disabled]="!hasPermissionToUpdateUserSettings"
class="w-100 without-hint" [value]="language"
(selectionChange)="onChangeUserSetting('language', $event.value)"
>
<mat-option [value]="null"></mat-option>
<mat-option value="de">Deutsch</mat-option>
<mat-option value="en">English</mat-option>
<mat-option value="es"
>Español (<ng-container i18n>Community</ng-container
>)</mat-option
> >
<mat-select <mat-option value="fr"
name="baseCurrency" >Français (<ng-container i18n>Community</ng-container
[disabled]="!hasPermissionToUpdateUserSettings" >)</mat-option
[value]="user.settings.baseCurrency"
(selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
>
<mat-option
*ngFor="let currency of currencies"
[value]="currency"
>{{ currency }}</mat-option
>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="align-items-center d-flex mb-2">
<div class="pr-1 w-50">
<div i18n>Language</div>
</div>
<div class="pl-1 w-50">
<mat-form-field
appearance="outline"
class="w-100 without-hint"
> >
<mat-select <mat-option value="it"
name="language" >Italiano (<ng-container i18n>Community</ng-container
[disabled]="!hasPermissionToUpdateUserSettings" >)</mat-option
[value]="language"
(selectionChange)="onChangeUserSetting('language', $event.value)"
>
<mat-option [value]="null"></mat-option>
<mat-option value="de">Deutsch</mat-option>
<mat-option value="en">English</mat-option>
<mat-option value="es"
>Español (<ng-container i18n>Community</ng-container
>)</mat-option
>
<mat-option value="fr"
>Français (<ng-container i18n>Community</ng-container
>)</mat-option
>
<mat-option value="it"
>Italiano (<ng-container i18n>Community</ng-container
>)</mat-option
>
<mat-option value="nl"
>Nederlands (<ng-container i18n>Community</ng-container
>)</mat-option
>
<mat-option value="pt"
>Português (<ng-container i18n>Community</ng-container
>)</mat-option
>
<mat-option value="tr"
>Türkçe (<ng-container i18n>Community</ng-container
>)</mat-option
>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="align-items-center d-flex mb-2">
<div class="pr-1 w-50">
<div i18n>Locale</div>
<div class="hint-text text-muted">
<ng-container i18n>Date and number format</ng-container>
</div>
</div>
<div class="pl-1 w-50">
<mat-form-field
appearance="outline"
class="w-100 without-hint"
> >
<mat-select <mat-option value="nl"
name="locale" >Nederlands (<ng-container i18n>Community</ng-container
[disabled]="!hasPermissionToUpdateUserSettings" >)</mat-option
[value]="user.settings.locale"
(selectionChange)="onChangeUserSetting('locale', $event.value)"
>
<mat-option [value]="null"></mat-option>
<mat-option
*ngFor="let locale of locales"
[value]="locale"
>{{ locale }}</mat-option
>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="d-flex">
<div class="align-items-center d-flex pr-1 pt-1 w-50">
<ng-container i18n>Appearance</ng-container>
</div>
<div class="pl-1 w-50">
<mat-form-field
appearance="outline"
class="w-100 without-hint"
> >
<mat-select <mat-option value="pt"
class="with-placeholder-as-option" >Português (<ng-container i18n>Community</ng-container
name="colorScheme" >)</mat-option
[disabled]="!hasPermissionToUpdateUserSettings" >
[placeholder]="appearancePlaceholder" <mat-option value="tr"
[value]="user?.settings?.colorScheme" >Türkçe (<ng-container i18n>Community</ng-container
(selectionChange)="onChangeUserSetting('colorScheme', $event.value)" >)</mat-option
> >
<mat-option i18n [value]="null">Auto</mat-option> </mat-select>
<mat-option i18n value="LIGHT">Light</mat-option> </mat-form-field>
<mat-option i18n value="DARK">Dark</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</form>
</div>
<div class="d-flex mt-4 py-1">
<div class="pr-1 w-50">
<div i18n>Zen Mode</div>
<div class="hint-text text-muted" i18n>
Distraction-free experience for turbulent times
</div>
</div>
<div class="pl-1 w-50">
<mat-checkbox
color="primary"
[checked]="user.settings.viewMode === 'ZEN'"
[disabled]="!hasPermissionToUpdateViewMode"
(change)="onViewModeChange($event)"
></mat-checkbox>
</div> </div>
</div> </div>
<div class="align-items-center d-flex mt-4 py-1"> <div class="align-items-center d-flex mb-2">
<div class="pr-1 w-50"> <div class="pr-1 w-50">
<div i18n>Biometric Authentication</div> <div i18n>Locale</div>
<div class="hint-text text-muted" i18n> <div class="hint-text text-muted">
Sign in with fingerprint <ng-container i18n>Date and number format</ng-container>
</div> </div>
</div> </div>
<div class="pl-1 w-50"> <div class="pl-1 w-50">
<mat-checkbox <mat-form-field appearance="outline" class="w-100 without-hint">
#toggleSignInWithFingerprintEnabledElement <mat-select
color="primary" name="locale"
[disabled]="!hasPermissionToUpdateUserSettings" [disabled]="!hasPermissionToUpdateUserSettings"
(change)="onSignInWithFingerprintChange($event)" [value]="user.settings.locale"
></mat-checkbox> (selectionChange)="onChangeUserSetting('locale', $event.value)"
>
<mat-option [value]="null"></mat-option>
<mat-option *ngFor="let locale of locales" [value]="locale"
>{{ locale }}</mat-option
>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
<div <div class="d-flex">
*ngIf="hasPermissionToUpdateUserSettings" <div class="align-items-center d-flex pr-1 pt-1 w-50">
class="align-items-center d-flex mt-4 py-1" <ng-container i18n>Appearance</ng-container>
>
<div class="pr-1 w-50">
<div i18n>Experimental Features</div>
<div class="hint-text text-muted" i18n>
Sneak peek at upcoming functionality
</div>
</div> </div>
<div class="pl-1 w-50"> <div class="pl-1 w-50">
<mat-checkbox <mat-form-field appearance="outline" class="w-100 without-hint">
color="primary" <mat-select
[checked]="user.settings.isExperimentalFeatures" class="with-placeholder-as-option"
[disabled]="!hasPermissionToUpdateUserSettings" name="colorScheme"
(change)="onExperimentalFeaturesChange($event)" [disabled]="!hasPermissionToUpdateUserSettings"
></mat-checkbox> [placeholder]="appearancePlaceholder"
[value]="user?.settings?.colorScheme"
(selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
>
<mat-option i18n [value]="null">Auto</mat-option>
<mat-option i18n value="LIGHT">Light</mat-option>
<mat-option i18n value="DARK">Dark</mat-option>
</mat-select>
</mat-form-field>
</div> </div>
</div> </div>
<div class="align-items-center d-flex mt-4 py-1"> </form>
<div class="pr-1 w-50" i18n>User ID</div> </div>
<div class="pl-1 text-monospace w-50">{{ user?.id }}</div> <div class="d-flex mt-4 py-1">
<div class="pr-1 w-50">
<div i18n>Zen Mode</div>
<div class="hint-text text-muted" i18n>
Distraction-free experience for turbulent times
</div> </div>
<div class="align-items-center d-flex py-1"> </div>
<div class="pr-1 w-50"></div> <div class="pl-1 w-50">
<div class="pl-1 text-monospace w-50"> <mat-checkbox
<button color="primary" mat-flat-button (click)="onExport()"> color="primary"
<span i18n>Export Data</span> [checked]="user.settings.viewMode === 'ZEN'"
</button> [disabled]="!hasPermissionToUpdateViewMode"
</div> (change)="onViewModeChange($event)"
></mat-checkbox>
</div>
</div>
<div class="align-items-center d-flex mt-4 py-1">
<div class="pr-1 w-50">
<div i18n>Biometric Authentication</div>
<div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
</div>
<div class="pl-1 w-50">
<mat-checkbox
#toggleSignInWithFingerprintEnabledElement
color="primary"
[disabled]="!hasPermissionToUpdateUserSettings"
(change)="onSignInWithFingerprintChange($event)"
></mat-checkbox>
</div>
</div>
<div
*ngIf="hasPermissionToUpdateUserSettings"
class="align-items-center d-flex mt-4 py-1"
>
<div class="pr-1 w-50">
<div i18n>Experimental Features</div>
<div class="hint-text text-muted" i18n>
Sneak peek at upcoming functionality
</div> </div>
</mat-card-content> </div>
</mat-card> <div class="pl-1 w-50">
<mat-checkbox
color="primary"
[checked]="user.settings.isExperimentalFeatures"
[disabled]="!hasPermissionToUpdateUserSettings"
(change)="onExperimentalFeaturesChange($event)"
></mat-checkbox>
</div>
</div>
<div class="align-items-center d-flex mt-4 py-1">
<div class="pr-1 w-50" i18n>User ID</div>
<div class="pl-1 text-monospace w-50">{{ user?.id }}</div>
</div>
<div class="align-items-center d-flex py-1">
<div class="pr-1 w-50"></div>
<div class="pl-1 text-monospace w-50">
<button color="primary" mat-flat-button (click)="onExport()">
<span i18n>Export Data</span>
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

20
apps/client/src/app/pages/user-account/user-account-page-routing.module.ts
View File

@ -1,5 +1,8 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { UserAccountAccessComponent } from '@ghostfolio/client/components/user-account-access/user-account-access.component';
import { UserAccountMembershipComponent } from '@ghostfolio/client/components/user-account-membership/user-account-membership.component';
import { UserAccountSettingsComponent } from '@ghostfolio/client/components/user-account-settings/user-account-settings.component';
import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
import { UserAccountPageComponent } from './user-account-page.component'; import { UserAccountPageComponent } from './user-account-page.component';
@ -7,6 +10,23 @@ import { UserAccountPageComponent } from './user-account-page.component';
const routes: Routes = [ const routes: Routes = [
{ {
canActivate: [AuthGuard], canActivate: [AuthGuard],
children: [
{
path: '',
component: UserAccountSettingsComponent,
title: $localize`Settings`
},
{
path: 'membership',
component: UserAccountMembershipComponent,
title: $localize`Membership`
},
{
path: 'access',
component: UserAccountAccessComponent,
title: $localize`Access`
}
],
component: UserAccountPageComponent, component: UserAccountPageComponent,
path: '', path: '',
title: $localize`My Ghostfolio` title: $localize`My Ghostfolio`

40
apps/client/src/app/pages/user-account/user-account-page.component.ts
View File

@ -1,30 +1,60 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { UserService } from '@ghostfolio/client/services/user/user.service'; import { UserService } from '@ghostfolio/client/services/user/user.service';
import { User } from '@ghostfolio/common/interfaces'; import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
import { DeviceDetectorService } from 'ngx-device-detector';
import { Subject, takeUntil } from 'rxjs'; import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
host: { class: 'page' }, host: { class: 'page has-tabs' },
selector: 'gf-user-account-page', selector: 'gf-user-account-page',
styleUrls: ['./user-account-page.scss'], styleUrls: ['./user-account-page.scss'],
templateUrl: './user-account-page.html' templateUrl: './user-account-page.html'
}) })
export class UserAccountPageComponent implements OnDestroy, OnInit { export class UserAccountPageComponent implements OnDestroy, OnInit {
public deviceType: string;
public tabs: TabConfiguration[] = [];
public user: User; public user: User;
private unsubscribeSubject = new Subject<void>(); private unsubscribeSubject = new Subject<void>();
public constructor(private userService: UserService) { public constructor(
private changeDetectorRef: ChangeDetectorRef,
private deviceService: DeviceDetectorService,
private userService: UserService
) {
this.userService.stateChanged this.userService.stateChanged
.pipe(takeUntil(this.unsubscribeSubject)) .pipe(takeUntil(this.unsubscribeSubject))
.subscribe((state) => { .subscribe((state) => {
if (state?.user) { if (state?.user) {
this.user = state.user; this.user = state.user;
this.tabs = [
{
iconName: 'cog-outline',
label: $localize`Settings`,
path: ['/account']
},
{
iconName: 'diamond-outline',
label: $localize`Membership`,
path: ['/account/membership'],
showCondition: !!this.user?.subscription
},
{
iconName: 'share-social-outline',
label: $localize`Access`,
path: ['/account', 'access']
}
];
this.changeDetectorRef.markForCheck();
} }
}); });
} }
public ngOnInit() {} public ngOnInit() {
this.deviceType = this.deviceService.getDeviceInfo().deviceType;
}
public ngOnDestroy() { public ngOnDestroy() {
this.unsubscribeSubject.next(); this.unsubscribeSubject.next();

39
apps/client/src/app/pages/user-account/user-account-page.html
View File

@ -1,10 +1,29 @@
<div class="container"> <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
<div class="row"> <router-outlet></router-outlet>
<div class="col"> </mat-tab-nav-panel>
<h2 class="h3 mb-3 text-center" i18n>Account</h2>
<gf-user-account-membership *ngIf="user?.subscription" /> <nav
<gf-user-account-settings /> mat-align-tabs="center"
<gf-user-account-access /> mat-tab-nav-bar
</div> [disablePagination]="true"
</div> [tabPanel]="tabPanel"
</div> >
<ng-container *ngFor="let tab of tabs">
<a
#rla="routerLinkActive"
*ngIf="tab.showCondition !== false"
class="px-3"
mat-tab-link
routerLinkActive
[active]="rla.isActive"
[routerLink]="tab.path"
[routerLinkActiveOptions]="{ exact: true }"
>
<ion-icon
[name]="tab.iconName"
[size]="deviceType === 'mobile' ? 'large': 'small'"
></ion-icon>
<div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
</a>
</ng-container>
</nav>

8
apps/client/src/app/pages/user-account/user-account-page.module.ts
View File

@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';
import { GfUserAccountAccessModule } from '@ghostfolio/client/components/user-account-access/user-account-access.module';
import { GfUserAccountMembershipModule } from '@ghostfolio/client/components/user-account-membership/user-account-membership.module';
import { GfUserAccountSettingsModule } from '@ghostfolio/client/components/user-account-settings/user-account-settings.module';
import { UserAccountPageRoutingModule } from './user-account-page-routing.module'; import { UserAccountPageRoutingModule } from './user-account-page-routing.module';
import { UserAccountPageComponent } from './user-account-page.component'; import { UserAccountPageComponent } from './user-account-page.component';
import { GfUserAccountSettingsModule } from '@ghostfolio/client/components/user-account-settings/user-account-settings.module';
import { GfUserAccountAccessModule } from '@ghostfolio/client/components/user-account-access/user-account-access.module';
import { GfUserAccountMembershipModule } from '@ghostfolio/client/components/user-account-membership/user-account-membership.module';
@NgModule({ @NgModule({
declarations: [UserAccountPageComponent], declarations: [UserAccountPageComponent],
@ -14,6 +15,7 @@ import { GfUserAccountMembershipModule } from '@ghostfolio/client/components/use
GfUserAccountAccessModule, GfUserAccountAccessModule,
GfUserAccountMembershipModule, GfUserAccountMembershipModule,
GfUserAccountSettingsModule, GfUserAccountSettingsModule,
MatTabsModule,
UserAccountPageRoutingModule UserAccountPageRoutingModule
] ]
}) })

4
apps/client/src/app/pages/user-account/user-account-page.scss
View File

@ -1,5 +1,9 @@
@import 'apps/client/src/styles/ghostfolio-style';
:host { :host {
color: rgb(var(--dark-primary-text));
} }
:host-context(.is-dark-theme) { :host-context(.is-dark-theme) {
color: rgb(var(--light-primary-text));
} }

Write Preview
Loading…
Cancel
Save