Feature/harmonize table styles (#80)

* Harmonize table styles

* 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
+
+- Harmonized the style of various tables
+
 ## 1.1.0 - 11.05.2021
 
 ### Added

apps/client/src/app/components/access-table/access-table.component.html

@@ -1,14 +1,14 @@
-<table mat-table [dataSource]="dataSource" class="w-100">
+<table class="gf-table w-100" mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="granteeAlias">
-    <th mat-header-cell *matHeaderCellDef i18n>User</th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>User</th>
-    <td mat-cell *matCellDef="let element">
+    <td *matCellDef="let element" class="px-1" mat-cell>
       {{ element.granteeAlias }}
     </td></ng-container
   >
 
   <ng-container matColumnDef="type">
-    <th mat-header-cell *matHeaderCellDef i18n>Type</th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Type</th>
-    <td mat-cell *matCellDef="let element">
+    <td *matCellDef="let element" class="px-1" mat-cell>
       <ion-icon class="mr-1" name="lock-closed-outline"></ion-icon>
       Restricted Access
     </td></ng-container

apps/client/src/app/components/access-table/access-table.component.scss

@@ -1,3 +1,5 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 }

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -1,5 +1,5 @@
 <table
-  class="w-100"
+  class="gf-table w-100"
   matSort
   matSortActive="account"
   matSortDirection="desc"
@@ -7,36 +7,19 @@
   [dataSource]="dataSource"
 >
   <ng-container matColumnDef="account">
-    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Name</th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-    <td *matCellDef="let element" mat-cell>
+      Name
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
       {{ element.name }}
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="type">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-center"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
-      Type
-    </th>
-    <td
-      mat-cell
-      *matCellDef="let element"
-      class="d-none d-lg-table-cell text-center"
-    >
-      <div class="d-inline-flex justify-content-center px-2 py-1 type-badge">
-        <span>{{ element.accountType }}</span>
-      </div>
-    </td>
-  </ng-container>
-
   <ng-container matColumnDef="platform">
-    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Platform</th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-    <td mat-cell *matCellDef="let element">
+      Platform
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex">
         <gf-symbol-icon
           *ngIf="element.Platform?.url"
@@ -50,8 +33,8 @@
   </ng-container>
 
   <ng-container matColumnDef="actions">
-    <th *matHeaderCellDef class="px-0 text-center" i18n mat-header-cell></th>
+    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
-    <td *matCellDef="let element" class="px-0 text-center" mat-cell>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
       <button
         class="mx-1 no-min-width px-2"
         mat-button

apps/client/src/app/components/accounts-table/accounts-table.component.scss

@@ -1,3 +1,5 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 
@@ -8,10 +10,6 @@
   }
 
   .mat-table {
-    td {
-      border: 0;
-    }
-
     th {
       ::ng-deep {
         .mat-sort-header-container {
@@ -19,21 +17,6 @@
         }
       }
     }
-
-    .mat-row {
-      &:nth-child(even) {
-        background-color: rgba(
-          var(--dark-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
-
-      .type-badge {
-        background-color: rgba(var(--dark-primary-text), 0.05);
-        border-radius: 1rem;
-        line-height: 1em;
-      }
-    }
   }
 }
 
@@ -41,19 +24,4 @@
   .mat-form-field {
     color: rgba(var(--light-primary-text));
   }
-
-  .mat-table {
-    .mat-row {
-      &:nth-child(even) {
-        background-color: rgba(
-          var(--light-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
-
-      .type-badge {
-        background-color: rgba(var(--light-primary-text), 0.1);
-      }
-    }
-  }
 }

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -50,7 +50,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   public ngOnInit() {}
 
   public ngOnChanges() {
-    this.displayedColumns = ['account', 'type', 'platform', 'transactions'];
+    this.displayedColumns = ['account', 'platform', 'transactions'];
 
     if (this.showActions) {
       this.displayedColumns.push('actions');

apps/client/src/app/components/positions-table/positions-table.component.html

@@ -1,10 +1,5 @@
-<!--<mat-form-field appearance="outline" class="w-100">
-  <input #input autocomplete="off" matInput (keyup)="applyFilter($event)" />
-  <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
-</mat-form-field>-->
-
 <table
-  class="w-100"
+  class="gf-table w-100"
   matSort
   matSortActive="shareCurrent"
   matSortDirection="desc"
@@ -12,20 +7,24 @@
   [dataSource]="dataSource"
 >
   <ng-container matColumnDef="symbol">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Symbol</th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-    <td mat-cell *matCellDef="let element">{{ element.symbol | gfSymbol }}</td>
+      Symbol
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      {{ element.symbol | gfSymbol }}
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="performance">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell text-right"
+      class="d-none d-lg-table-cell px-1 text-right"
       i18n
       mat-header-cell
     >
       Performance
     </th>
-    <td class="d-none d-lg-table-cell" mat-cell *matCellDef="let element">
+    <td class="d-none d-lg-table-cell px-1" mat-cell *matCellDef="let element">
       <div class="d-flex justify-content-end">
         <gf-value
           [colorizeSign]="true"
@@ -40,7 +39,7 @@
   <ng-container matColumnDef="shareInvestment">
     <th
       *matHeaderCellDef
-      class="justify-content-end"
+      class="justify-content-end px-1"
       i18n
       mat-header-cell
       mat-sort-header
@@ -48,7 +47,7 @@
       Initial Share
     </th>
     <td mat-cell *matCellDef="let element">
-      <div class="d-flex justify-content-end">
+      <div class="d-flex justify-content-end px-1">
         <gf-value
           [isPercent]="true"
           [locale]="locale"
@@ -61,14 +60,14 @@
   <ng-container matColumnDef="shareCurrent">
     <th
       *matHeaderCellDef
-      class="justify-content-end"
+      class="justify-content-end px-1"
       i18n
       mat-header-cell
       mat-sort-header
     >
       Current Share
     </th>
-    <td mat-cell *matCellDef="let element">
+    <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
           [isPercent]="true"

apps/client/src/app/components/positions-table/positions-table.component.scss

@@ -1,3 +1,5 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 
@@ -8,10 +10,6 @@
   }
 
   .mat-table {
-    td {
-      border: 0;
-    }
-
     th {
       ::ng-deep {
         .mat-sort-header-container {
@@ -22,13 +20,6 @@
 
     .mat-row {
       cursor: pointer;
-
-      &:nth-child(even) {
-        background-color: rgba(
-          var(--dark-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
     }
   }
 }
@@ -37,15 +28,4 @@
   .mat-form-field {
     color: rgba(var(--light-primary-text));
   }
-
-  .mat-table {
-    .mat-row {
-      &:nth-child(even) {
-        background-color: rgba(
-          var(--light-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
-    }
-  }
 }

apps/client/src/app/components/transactions-table/transactions-table.component.html

@@ -35,39 +35,24 @@
 </mat-form-field>
 
 <table
-  class="w-100"
+  class="gf-table w-100"
   matSort
   matSortActive="date"
   matSortDirection="desc"
   mat-table
   [dataSource]="dataSource"
 >
-  <ng-container matColumnDef="account">
-    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Account</th>
-    <td *matCellDef="let element" mat-cell>
-      <div class="d-flex">
-        <gf-symbol-icon
-          *ngIf="element.Account?.Platform?.url"
-          class="mr-1"
-          [tooltip]="element.Account?.Platform?.name"
-          [url]="element.Account?.Platform?.url"
-        ></gf-symbol-icon>
-        <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
-      </div>
-    </td>
-  </ng-container>
-
   <ng-container matColumnDef="date">
     <th
       *matHeaderCellDef
-      class="justify-content-center"
+      class="justify-content-center px-1"
       i18n
       mat-header-cell
       mat-sort-header
     >
       Date
     </th>
-    <td mat-cell *matCellDef="let element">
+    <td *matCellDef="let element" class="px-1" mat-cell>
       <div class="d-flex justify-content-center">
         {{ element.date | date: defaultDateFormat }}
       </div>
@@ -77,14 +62,14 @@
   <ng-container matColumnDef="type">
     <th
       *matHeaderCellDef
-      class="justify-content-center"
+      class="justify-content-center px-1"
       i18n
       mat-header-cell
       mat-sort-header
     >
       Type
     </th>
-    <td mat-cell *matCellDef="let element" class="text-center">
+    <td mat-cell *matCellDef="let element" class="px-1 text-center">
       <div
         class="d-inline-flex justify-content-center pl-1 pr-2 py-1 type-badge"
         [ngClass]="element.type == 'BUY' ? 'buy' : 'sell'"
@@ -103,21 +88,25 @@
   </ng-container>
 
   <ng-container matColumnDef="symbol">
-    <th *matHeaderCellDef i18n mat-header-cell mat-sort-header>Symbol</th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-    <td mat-cell *matCellDef="let element">{{ element.symbol | gfSymbol }}</td>
+      Symbol
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      {{ element.symbol | gfSymbol }}
+    </td>
   </ng-container>
 
   <ng-container matColumnDef="currency">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-center"
+      class="d-none d-lg-table-cell justify-content-center px-1"
       mat-header-cell
       i18n
       mat-sort-header
     >
       Currency
     </th>
-    <td class="d-none d-lg-table-cell" mat-cell *matCellDef="let element">
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex justify-content-center">
         {{ element.currency }}
       </div>
@@ -127,14 +116,14 @@
   <ng-container matColumnDef="quantity">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end"
+      class="d-none d-lg-table-cell justify-content-end px-1"
       i18n
       mat-header-cell
       mat-sort-header
     >
       Quantity
     </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell" mat-cell>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
           [isCurrency]="true"
@@ -148,14 +137,14 @@
   <ng-container matColumnDef="unitPrice">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end"
+      class="d-none d-lg-table-cell justify-content-end px-1"
       i18n
       mat-header-cell
       mat-sort-header
     >
       Unit Price
     </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell" mat-cell>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
           [isCurrency]="true"
@@ -169,14 +158,14 @@
   <ng-container matColumnDef="fee">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end"
+      class="d-none d-lg-table-cell justify-content-end px-1"
       i18n
       mat-header-cell
       mat-sort-header
     >
       Fee
     </th>
-    <td class="d-none d-lg-table-cell" mat-cell *matCellDef="let element">
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px1" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
           [isCurrency]="true"
@@ -187,9 +176,26 @@
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="account">
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
+      Account
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      <div class="d-flex">
+        <gf-symbol-icon
+          *ngIf="element.Account?.Platform?.url"
+          class="mr-1"
+          [tooltip]="element.Account?.Platform?.name"
+          [url]="element.Account?.Platform?.url"
+        ></gf-symbol-icon>
+        <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
+      </div>
+    </td>
+  </ng-container>
+
   <ng-container matColumnDef="actions">
-    <th *matHeaderCellDef class="px-0 text-center" i18n mat-header-cell></th>
+    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
-    <td *matCellDef="let element" class="px-0 text-center" mat-cell>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
       <button
         class="mx-1 no-min-width px-2"
         mat-button

apps/client/src/app/components/transactions-table/transactions-table.component.scss

@@ -1,3 +1,5 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 
@@ -12,10 +14,6 @@
   }
 
   .mat-table {
-    td {
-      border: 0;
-    }
-
     th {
       ::ng-deep {
         .mat-sort-header-container {
@@ -27,13 +25,6 @@
     .mat-row {
       cursor: pointer;
 
-      &:nth-child(even) {
-        background-color: rgba(
-          var(--dark-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
-
       .type-badge {
         background-color: rgba(var(--dark-primary-text), 0.05);
         border-radius: 1rem;
@@ -61,17 +52,8 @@
   }
 
   .mat-table {
-    .mat-row {
+    .type-badge {
-      &:nth-child(even) {
+      background-color: rgba(var(--light-primary-text), 0.1);
-        background-color: rgba(
-          var(--light-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
-
-      .type-badge {
-        background-color: rgba(var(--light-primary-text), 0.1);
-      }
     }
   }
 }

apps/client/src/app/components/transactions-table/transactions-table.component.ts

@@ -132,14 +132,14 @@ export class TransactionsTableComponent
 
   public ngOnChanges() {
     this.displayedColumns = [
-      'account',
       'date',
       'type',
       'symbol',
       'currency',
       'quantity',
       'unitPrice',
-      'fee'
+      'fee',
+      'account'
     ];
 
     if (this.showActions) {

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

@@ -55,11 +55,7 @@
   <div *ngIf="accesses?.length > 0" class="row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Granted Access</h3>
-      <mat-card class="mb-3">
+      <gf-access-table [accesses]="accesses"></gf-access-table>
-        <mat-card-content>
-          <gf-access-table [accesses]="accesses"></gf-access-table>
-        </mat-card-content>
-      </mat-card>
     </div>
   </div>
 </div>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -8,7 +8,7 @@
         <input matInput name="name" required [(ngModel)]="data.account.name" />
       </mat-form-field>
     </div>
-    <div>
+    <div class="d-none">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>
         <mat-select name="type" required [(value)]="data.account.accountType">

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

@@ -69,65 +69,59 @@
   <div class="row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Users</h3>
-      <mat-card class="px-0">
+      <div class="users">
-        <mat-card-content class="users">
+        <table class="gf-table">
-          <table>
+          <thead>
-            <thead>
+            <tr class="mat-header-row">
-              <tr class="mat-header-row">
+              <th class="mat-header-cell px-1 py-2" i18n>User</th>
-                <th class="mat-header-cell pl-3 py-2" i18n>User</th>
+              <th class="mat-header-cell px-1 py-2" i18n>Registration Date</th>
-                <th class="mat-header-cell pr-2 py-2" i18n>
+              <th class="mat-header-cell px-1 py-2" i18n>Accounts</th>
-                  Registration Date
+              <th class="mat-header-cell px-1 py-2" i18n>Transactions</th>
-                </th>
+              <th class="mat-header-cell px-1 py-2" i18n>Engagement</th>
-                <th class="mat-header-cell pr-2 py-2" i18n>Accounts</th>
+              <th class="mat-header-cell px-1 py-2" i18n>Last Activitiy</th>
-                <th class="mat-header-cell pr-2 py-2" i18n>Transactions</th>
+              <th class="mat-header-cell px-1 py-2"></th>
-                <th class="mat-header-cell pr-2 py-2" i18n>Engagement</th>
+            </tr>
-                <th class="mat-header-cell pr-3 py-2" i18n>Last Activitiy</th>
+          </thead>
-                <th class="mat-header-cell pr-3 py-2"></th>
+          <tbody>
-              </tr>
+            <tr *ngFor="let userItem of users" class="mat-row">
-            </thead>
+              <td class="mat-cell px-1 py-2">
-            <tbody>
+                {{ userItem.alias || userItem.id }}
-              <tr *ngFor="let userItem of users" class="mat-row">
+              </td>
-                <td class="mat-cell pl-3 py-2">
+              <td class="mat-cell px-1 py-2">
-                  {{ userItem.alias || userItem.id }}
+                {{ userItem.createdAt | date: defaultDateFormat }}
-                </td>
+              </td>
-                <td class="mat-cell pr-2 py-2">
+              <td class="mat-cell px-1 py-2">{{ userItem._count?.Account }}</td>
-                  {{ userItem.createdAt | date: defaultDateFormat }}
+              <td class="mat-cell px-1 py-2">{{ userItem._count?.Order }}</td>
-                </td>
+              <td class="mat-cell px-1 py-2">
-                <td class="mat-cell pr-2 py-2">
+                {{ userItem.Analytics?.activityCount }}
-                  {{ userItem._count?.Account }}
+              </td>
-                </td>
+              <td class="mat-cell px-1 py-2">
-                <td class="mat-cell pr-2 py-2">{{ userItem._count?.Order }}</td>
+                {{ formatDistanceToNow(userItem.Analytics?.updatedAt) }}
-                <td class="mat-cell pr-2 py-2">
+              </td>
-                  {{ userItem.Analytics?.activityCount }}
+              <td class="mat-cell px-1 py-2">
-                </td>
+                <button
-                <td class="mat-cell pr-3 py-2">
+                  class="mx-1 no-min-width px-2"
-                  {{ formatDistanceToNow(userItem.Analytics?.updatedAt) }}
+                  mat-button
-                </td>
+                  [matMenuTriggerFor]="accountMenu"
-                <td class="mat-cell pr-3 py-2">
+                  (click)="$event.stopPropagation()"
+                >
+                  <ion-icon name="ellipsis-vertical"></ion-icon>
+                </button>
+                <mat-menu #accountMenu="matMenu" xPosition="before">
                   <button
-                    class="mx-1 no-min-width px-2"
+                    i18n
-                    mat-button
+                    mat-menu-item
-                    [matMenuTriggerFor]="accountMenu"
+                    [disabled]="userItem.id === user?.id"
-                    (click)="$event.stopPropagation()"
+                    (click)="onDeleteUser(userItem.id)"
                   >
-                    <ion-icon name="ellipsis-vertical"></ion-icon>
+                    Delete
                   </button>
-                  <mat-menu #accountMenu="matMenu" xPosition="before">
+                </mat-menu>
-                    <button
+              </td>
-                      i18n
+            </tr>
-                      mat-menu-item
+          </tbody>
-                      [disabled]="userItem.id === user?.id"
+        </table>
-                      (click)="onDeleteUser(userItem.id)"
+      </div>
-                    >
-                      Delete
-                    </button>
-                  </mat-menu>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </mat-card-content>
-      </mat-card>
     </div>
   </div>
 </div>

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

@@ -1,27 +1,18 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  .mat-card-content {
+  .users {
-    &.users {
+    overflow-x: auto;
-      overflow-x: auto;
 
-      table {
+    table {
-        min-width: 100%;
+      min-width: 100%;
 
-        tr {
+      .mat-row,
-          &:nth-child(even) {
+      .mat-header-row {
-            background-color: rgba(
+        width: 100%;
-              var(--dark-primary-text),
-              var(--palette-background-hover-alpha)
-            );
-          }
-        }
-
-        .mat-row,
-        .mat-header-row {
-          width: 100%;
-        }
       }
     }
   }
@@ -41,15 +32,4 @@
 
 :host-context(.is-dark-theme) {
   color: rgb(var(--light-primary-text));
-
-  .mat-table {
-    tr {
-      &:nth-child(even) {
-        background-color: rgba(
-          var(--light-primary-text),
-          var(--palette-background-hover-alpha)
-        );
-      }
-    }
-  }
 }

apps/client/src/styles/ghostfolio-style.scss

@@ -1,3 +1,31 @@
 $mat-css-dark-theme-selector: '.is-dark-theme';
 
 @import '~angular-material-css-vars/public-util';
+
+.gf-table {
+  td {
+    border: 0;
+  }
+
+  .mat-row {
+    &:nth-child(even) {
+      background-color: rgba(
+        var(--dark-primary-text),
+        var(--palette-background-hover-alpha)
+      );
+    }
+  }
+}
+
+.is-dark-theme {
+  .gf-table {
+    .mat-row {
+      &:nth-child(even) {
+        background-color: rgba(
+          var(--light-primary-text),
+          var(--palette-background-hover-alpha)
+        );
+      }
+    }
+  }
+}