sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/harmonize table styles (#80)

Browse Source 
* Harmonize table styles

* Update changelog
This commit is contained in:
Thomas 2021-05-12 20:32:34 +02:00 committed by GitHub
parent 91ec9aa0a4
commit b8c05d1014
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 175 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -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

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

@ -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>
<td mat-cell *matCellDef="let element">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell>User</th>
<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>
<td mat-cell *matCellDef="let element">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell>Type</th>
<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

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

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

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

@ -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>
<td *matCellDef="let element" mat-cell>
<th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
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>
<td mat-cell *matCellDef="let element">
<th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
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>
<td *matCellDef="let element" class="px-0 text-center" mat-cell>
<th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
<td *matCellDef="let element" class="px-1 text-center" mat-cell>
<button
class="mx-1 no-min-width px-2"
mat-button

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

@ -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);
}
}
}
}

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

@ -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');

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

@ -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>
<td mat-cell *matCellDef="let element">{{ element.symbol | gfSymbol }}</td>
<th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
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"

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

@ -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)
);
}
}
}
}

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

@ -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>
<td mat-cell *matCellDef="let element">{{ element.symbol | gfSymbol }}</td>
<th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
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>
<td *matCellDef="let element" class="px-0 text-center" mat-cell>
<th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
<td *matCellDef="let element" class="px-1 text-center" mat-cell>
<button
class="mx-1 no-min-width px-2"
mat-button

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

@ -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 {
&: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);
}
}
}
}

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

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

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

@ -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">
<mat-card-content>
<gf-access-table [accesses]="accesses"></gf-access-table>
</mat-card-content>
</mat-card>
</div>
</div>
</div>

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

@ -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">

40
apps/client/src/app/pages/admin/admin-page.html
View File

@ -69,41 +69,36 @@
<div class="row">
<div class="col">
<h3 class="mb-3 text-center" i18n>Users</h3>
<mat-card class="px-0">
<mat-card-content class="users">
<table>
<div class="users">
<table class="gf-table">
<thead>
<tr class="mat-header-row">
<th class="mat-header-cell pl-3 py-2" i18n>User</th>
<th class="mat-header-cell pr-2 py-2" i18n>
Registration Date
</th>
<th class="mat-header-cell pr-2 py-2" i18n>Accounts</th>
<th class="mat-header-cell pr-2 py-2" i18n>Transactions</th>
<th class="mat-header-cell pr-2 py-2" i18n>Engagement</th>
<th class="mat-header-cell pr-3 py-2" i18n>Last Activitiy</th>
<th class="mat-header-cell pr-3 py-2"></th>
<th class="mat-header-cell px-1 py-2" i18n>User</th>
<th class="mat-header-cell px-1 py-2" i18n>Registration Date</th>
<th class="mat-header-cell px-1 py-2" i18n>Accounts</th>
<th class="mat-header-cell px-1 py-2" i18n>Transactions</th>
<th class="mat-header-cell px-1 py-2" i18n>Engagement</th>
<th class="mat-header-cell px-1 py-2" i18n>Last Activitiy</th>
<th class="mat-header-cell px-1 py-2"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let userItem of users" class="mat-row">
<td class="mat-cell pl-3 py-2">
<td class="mat-cell px-1 py-2">
{{ userItem.alias || userItem.id }}
</td>
<td class="mat-cell pr-2 py-2">
<td class="mat-cell px-1 py-2">
{{ userItem.createdAt | date: defaultDateFormat }}
</td>
<td class="mat-cell pr-2 py-2">
{{ userItem._count?.Account }}
</td>
<td class="mat-cell pr-2 py-2">{{ userItem._count?.Order }}</td>
<td class="mat-cell pr-2 py-2">
<td class="mat-cell px-1 py-2">{{ userItem._count?.Account }}</td>
<td class="mat-cell px-1 py-2">{{ userItem._count?.Order }}</td>
<td class="mat-cell px-1 py-2">
{{ userItem.Analytics?.activityCount }}
</td>
<td class="mat-cell pr-3 py-2">
<td class="mat-cell px-1 py-2">
{{ formatDistanceToNow(userItem.Analytics?.updatedAt) }}
</td>
<td class="mat-cell pr-3 py-2">
<td class="mat-cell px-1 py-2">
<button
class="mx-1 no-min-width px-2"
mat-button
@ -126,8 +121,7 @@
</tr>
</tbody>
</table>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>

26
apps/client/src/app/pages/admin/admin-page.scss
View File

@ -1,30 +1,21 @@
@import '~apps/client/src/styles/ghostfolio-style';
:host {
color: rgb(var(--dark-primary-text));
display: block;
.mat-card-content {
&.users {
.users {
overflow-x: auto;
table {
min-width: 100%;
tr {
&:nth-child(even) {
background-color: rgba(
var(--dark-primary-text),
var(--palette-background-hover-alpha)
);
}
}
.mat-row,
.mat-header-row {
width: 100%;
}
}
}
}
.mat-flat-button {
::ng-deep {
@ -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)
);
}
}
}
}

28
apps/client/src/styles/ghostfolio-style.scss
View File

@ -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)
);
}
}
}
}