Feature/add tabs on the home page (#230)

* Add tabs

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Introduced tabs on the home page
+
 ## 1.28.0 - 24.07.2021
 
 ### Added

apps/client/src/app/app.component.html

@@ -9,7 +9,7 @@
 </header>
 
 <main role="main">
-  <div *ngIf="canCreateAccount" class="container create-account-container mb-2">
+  <div *ngIf="canCreateAccount" class="container create-account-container">
     <div class="row">
       <div class="col-md-8 offset-md-2 text-center">
         <a class="text-center" [routerLink]="['/']">

apps/client/src/app/app.component.scss

@@ -9,6 +9,7 @@
     padding-top: 5rem;
 
     .create-account-container {
+      height: 2.5rem;
       margin-top: -0.5rem;
 
       .create-account-box {

apps/client/src/app/pages/home/home-page.component.ts

@@ -4,6 +4,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  HostBinding,
   OnDestroy,
   OnInit,
   ViewChild
@@ -38,8 +39,13 @@ import { first, takeUntil } from 'rxjs/operators';
   styleUrls: ['./home-page.scss']
 })
 export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
+  @HostBinding('class.with-create-account-container') get isDemo() {
+    return this.canCreateAccount;
+  }
+
   @ViewChild('positionsContainer') positionsContainer: ElementRef;
 
+  public canCreateAccount: boolean;
   public dateRange: DateRange;
   public dateRangeOptions: ToggleOption[] = [
     { label: 'Today', value: '1d' },
@@ -95,6 +101,11 @@ export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.canCreateAccount = hasPermission(
+            this.user?.permissions,
+            permissions.createUserAccount
+          );
+
           this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
             this.user.permissions,
             permissions.accessFearAndGreedIndex

apps/client/src/app/pages/home/home-page.html

@@ -1,12 +1,35 @@
-<ng-container *ngIf="hasPositions || !historicalDataItems">
+<mat-tab-group
-  <div class="container overview position-relative">
+  animationDuration="0ms"
-    <div class="row">
+  class="position-absolute"
+  headerPosition="below"
+  mat-align-tabs="center"
+>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <ion-icon name="analytics-outline" size="large"></ion-icon>
+    </ng-template>
+    <div
+      class="
+        align-items-center
+        container
+        d-flex
+        flex-column
+        h-100
+        justify-content-center
+        overview
+        p-3
+        position-relative
+      "
+    >
+      <div class="row w-100">
         <a
-        class="chart-container col mr-3"
+          *ngIf="historicalDataItems?.length !== 0"
+          class="chart-container col"
           [routerLink]="[]"
           [queryParams]="{performanceChartDialog: true}"
         >
           <gf-line-chart
+            class="mr-3"
             symbol="Performance"
             [historicalDataItems]="historicalDataItems"
             [showLoader]="false"
@@ -14,8 +37,22 @@
             [showYAxis]="false"
           ></gf-line-chart>
         </a>
+        <div
+          *ngIf="historicalDataItems?.length === 0"
+          class="
+            align-items-center
+            chart-container
+            d-flex
+            justify-content-center
+            w-100
+          "
+        >
+          <div class="d-flex justify-content-center">
+            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
           </div>
-    <div class="overview-container row mb-5 mt-1">
+        </div>
+      </div>
+      <div class="overview-container row mt-1">
         <div class="col">
           <gf-portfolio-performance-summary
             class="pb-4"
@@ -35,25 +72,16 @@
           </div>
         </div>
       </div>
-    <div
-      class="button-container d-flex justify-content-center position-absolute"
-    >
-      <a
-        *ngIf="showPositionsButton"
-        [routerLink]="['/home']"
-        fragment="positions-container"
-        i18n
-        mat-flat-button
-        (click)="showPositionsButton = false"
-        >Positions</a
-      >
     </div>
-  </div>
+  </mat-tab>
-
+  <mat-tab>
-  <div id="positions-container" class="container positions">
+    <ng-template mat-tab-label>
-    <div class="row mb-3">
+      <ion-icon name="wallet-outline" size="large"></ion-icon>
-      <div class="col">
+    </ng-template>
-        <mat-card class="p-0">
+    <div class="container justify-content-center p-3 positions">
+      <div class="row">
+        <div class="align-items-center col">
+          <mat-card *ngIf="hasPositions === true" class="p-0">
             <mat-card-content>
               <gf-positions
                 [baseCurrency]="user?.settings?.baseCurrency"
@@ -64,8 +92,21 @@
               ></gf-positions>
             </mat-card-content>
           </mat-card>
+          <div
+            *ngIf="hasPositions === false"
+            class="d-flex justify-content-center"
+          >
+            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
           </div>
         </div>
+      </div>
+    </div>
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <ion-icon name="reader-outline" size="large"></ion-icon>
+    </ng-template>
+    <div class="container p-3 positions">
       <div class="row">
         <div class="col-xs-12 col-md-6 mb-3">
           <mat-card class="h-100">
@@ -82,7 +123,7 @@
             </mat-card-content>
           </mat-card>
         </div>
-      <div class="col-xs-12 col-md-6 mb-3">
+        <div class="col-xs-12 col-md-6">
           <mat-card class="h-100">
             <mat-card-header>
               <mat-card-title i18n>Summary</mat-card-title>
@@ -99,10 +140,5 @@
         </div>
       </div>
     </div>
-</ng-container>
+  </mat-tab>
-
+</mat-tab-group>
-<ng-container *ngIf="!hasPositions && historicalDataItems">
-  <div class="d-flex justify-content-center my-5">
-    <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
-  </div>
-</ng-container>

apps/client/src/app/pages/home/home-page.module.ts

@@ -2,8 +2,10 @@ 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 { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 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 { GfPerformanceChartDialogModule } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.module';
 import { GfPortfolioOverviewModule } from '@ghostfolio/client/components/portfolio-overview/portfolio-overview.module';
 import { GfPortfolioPerformanceSummaryModule } from '@ghostfolio/client/components/portfolio-performance-summary/portfolio-performance-summary.module';
@@ -20,6 +22,7 @@ import { HomePageComponent } from './home-page.component';
   imports: [
     CommonModule,
     GfLineChartModule,
+    GfNoTransactionsInfoModule,
     GfPerformanceChartDialogModule,
     GfPortfolioOverviewModule,
     GfPortfolioPerformanceModule,
@@ -29,6 +32,7 @@ import { HomePageComponent } from './home-page.component';
     HomePageRoutingModule,
     MatButtonModule,
     MatCardModule,
+    MatTabsModule,
     RouterModule
   ],
   providers: [],

apps/client/src/app/pages/home/home-page.scss

@@ -3,26 +3,28 @@
 :host {
   color: rgb(var(--dark-primary-text));
   display: block;
-  min-height: 100vh;
+  min-height: calc(100vh - 5rem);
+  position: relative;
+
+  &.with-create-account-container {
+    min-height: calc(100vh - 5rem - 2.5rem);
+  }
+
+  .mat-tab-group {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+
+    ::ng-deep {
+      .mat-tab-body-wrapper {
+        height: 100%;
 
         .container {
           &.overview {
-      min-height: calc(100vh - 5rem);
-
-      .button-container {
-        bottom: 3rem;
-        left: 0;
-        right: 0;
-        .mat-flat-button {
-          background-color: rgba(0, 0, 0, $alpha-hover);
-          border-radius: 2rem;
-        }
-      }
-
             .chart-container {
               aspect-ratio: 16 / 9;
               cursor: pointer;
-        margin-top: -1rem;
               max-height: 50vh;
 
               // Fallback for aspect-ratio (using padding hack)
@@ -52,8 +54,22 @@
           }
 
           &.positions {
-      padding-top: 5rem;
+            min-height: 100%;
-      min-height: calc(100vh - 5rem);
+          }
+        }
+      }
+
+      .mat-tab-header {
+        border-top: 0;
+
+        .mat-ink-bar {
+          visibility: hidden !important;
+        }
+
+        .mat-tab-label-active {
+          color: rgba(var(--palette-primary-500), 1);
+        }
+      }
     }
   }
 

apps/client/src/app/pages/zen/zen-page.html

@@ -1,14 +1,43 @@
-<ng-container *ngIf="hasPositions || !historicalDataItems">
+<mat-tab-group
-  <div class="container overview position-relative">
+  animationDuration="0ms"
+  class="position-absolute"
+  headerPosition="below"
+  mat-align-tabs="center"
+>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <ion-icon name="analytics-outline" size="large"></ion-icon>
+    </ng-template>
+    <div
+      class="
+        container
+        d-flex
+        flex-column
+        h-100
+        justify-content-center
+        overview
+        p-3
+        position-relative
+      "
+    >
       <div class="row">
-      <div class="chart-container col mr-3">
+        <div
+          class="chart-container d-flex flex-column col justify-content-center"
+        >
           <gf-line-chart
+            class="mr-3"
             symbol="Performance"
             [historicalDataItems]="historicalDataItems"
             [showLoader]="false"
             [showXAxis]="false"
             [showYAxis]="false"
           ></gf-line-chart>
+          <div
+            *ngIf="historicalDataItems?.length === 0"
+            class="d-flex justify-content-center"
+          >
+            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          </div>
         </div>
       </div>
       <div class="overview-container row mb-5 mt-1">
@@ -23,26 +52,17 @@
           ></gf-portfolio-performance-summary>
         </div>
       </div>
-
-    <div
-      class="button-container d-flex justify-content-center position-absolute"
-    >
-      <a
-        *ngIf="showPositionsButton"
-        [routerLink]="['/zen']"
-        fragment="positions-container"
-        i18n
-        mat-flat-button
-        (click)="showPositionsButton = false"
-        >Positions</a
-      >
-    </div>
     </div>
+  </mat-tab>
 
-  <div id="positions-container" class="container positions">
+  <mat-tab>
-    <div class="row mb-3">
+    <ng-template mat-tab-label>
-      <div class="col">
+      <ion-icon name="wallet-outline" size="large"></ion-icon>
-        <mat-card class="p-0">
+    </ng-template>
+    <div class="container justify-content-center p-3 positions">
+      <div class="row">
+        <div class="align-items-center col">
+          <mat-card *ngIf="hasPositions === true" class="p-0">
             <mat-card-content>
               <gf-positions
                 [baseCurrency]="user?.settings?.baseCurrency"
@@ -53,13 +73,16 @@
               ></gf-positions>
             </mat-card-content>
           </mat-card>
-      </div>
+          <div
-    </div>
+            *ngIf="hasPositions === false"
-  </div>
+            class="d-flex justify-content-center"
-</ng-container>
+          >
-
+            <div>
-<ng-container *ngIf="!hasPositions && historicalDataItems">
-  <div class="d-flex justify-content-center my-5">
               <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
             </div>
-</ng-container>
+          </div>
+        </div>
+      </div>
+    </div>
+  </mat-tab>
+</mat-tab-group>

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 { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module';
@@ -22,6 +23,7 @@ import { ZenPageComponent } from './zen-page.component';
     GfPositionsModule,
     MatButtonModule,
     MatCardModule,
+    MatTabsModule,
     RouterModule,
     ZenPageRoutingModule
   ],

apps/client/src/app/pages/zen/zen-page.scss

@@ -3,26 +3,23 @@
 :host {
   color: rgb(var(--dark-primary-text));
   display: block;
-  min-height: 100vh;
+  min-height: calc(100vh - 5rem);
+  position: relative;
+
+  .mat-tab-group {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+
+    ::ng-deep {
+      .mat-tab-body-wrapper {
+        height: 100%;
 
         .container {
           &.overview {
-      min-height: calc(100vh - 5rem);
-
-      .button-container {
-        bottom: 3rem;
-        left: 0;
-        right: 0;
-
-        .mat-flat-button {
-          background-color: rgba(0, 0, 0, $alpha-hover);
-          border-radius: 2rem;
-        }
-      }
-
             .chart-container {
               aspect-ratio: 16 / 9;
-        margin-top: 3rem;
               max-height: 50vh;
 
               // Fallback for aspect-ratio (using padding hack)
@@ -52,8 +49,22 @@
           }
 
           &.positions {
-      padding-top: 5rem;
+            min-height: 100%;
-      min-height: calc(100vh - 5rem);
+          }
+        }
+      }
+
+      .mat-tab-header {
+        border-top: 0;
+
+        .mat-ink-bar {
+          visibility: hidden !important;
+        }
+
+        .mat-tab-label-active {
+          color: rgba(var(--palette-primary-500), 1);
+        }
+      }
     }
   }
 }