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

Feature/migrate various components to angular material 15 (#1836)

Browse Source 
* Migrate components to Angular Material 15

* Update changelog
This commit is contained in:
Thomas Kaul 2023-04-08 15:33:27 +02:00 committed by GitHub
parent 1928c2c2cc
commit 1b7b082003
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
53 changed files with 149 additions and 205 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
- Migrated the style of various components to `@angular/material` `15` (mdc)
## 1.251.0 - 2023-04-07
### Changed

2
apps/client/src/app/app.module.ts
View File

@ -9,7 +9,7 @@ import {
} from '@angular/material/core';
import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

@ -7,7 +7,7 @@ import {
OnInit,
Output
} from '@angular/core';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatTableDataSource } from '@angular/material/table';
import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
import { Access } from '@ghostfolio/common/interfaces';

6
apps/client/src/app/components/access-table/access-table.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatTableModule } from '@angular/material/table';
import { AccessTableComponent } from './access-table.component';

2
apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';

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

@ -3,17 +3,7 @@
:host {
display: block;
.mat-table {
td {
&.mat-footer-cell {
border-top: 1px solid
rgba(
var(--palette-foreground-divider),
var(--palette-foreground-divider-alpha)
);
}
}
.mat-mdc-table {
th {
::ng-deep {
.mat-sort-header-container {
@ -23,16 +13,3 @@
}
}
}
:host-context(.is-dark-theme) {
.mat-table {
td {
&.mat-footer-cell {
border-top-color: rgba(
var(--palette-foreground-divider-dark),
var(--palette-foreground-divider-dark-alpha)
);
}
}
}
}

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

@ -9,7 +9,7 @@ import {
Output,
ViewChild
} from '@angular/core';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { Router } from '@angular/router';
import { Account as AccountModel } from '@prisma/client';

6
apps/client/src/app/components/accounts-table/accounts-table.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { RouterModule } from '@angular/router';
import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';

4
apps/client/src/app/components/admin-jobs/admin-jobs.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { AdminJobsComponent } from './admin-jobs.component';

2
apps/client/src/app/components/admin-market-data/admin-market-data.component.ts
View File

@ -7,7 +7,7 @@ import {
ViewChild
} from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { ActivatedRoute, Router } from '@angular/router';
import { AdminService } from '@ghostfolio/client/services/admin.service';

6
apps/client/src/app/components/admin-market-data/admin-market-data.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';

4
apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
View File

@ -2,10 +2,10 @@ import { TextFieldModule } from '@angular/cdk/text-field';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatMenuModule } from '@angular/material/menu';
import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
import { GfValueModule } from '@ghostfolio/ui/value';

6
apps/client/src/app/components/admin-overview/admin-overview.html
View File

@ -51,7 +51,7 @@
<td>
<button
*ngIf="customCurrencies.includes(exchangeRate.label2)"
class="mini-icon mx-1 no-min-width px-2"
class="h-100 mx-1 no-min-width px-2"
mat-button
(click)="onDeleteCurrency(exchangeRate.label2)"
>
@ -124,7 +124,7 @@
<div *ngIf="info?.systemMessage">
<span>{{ info.systemMessage }}</span>
<button
class="mini-icon mx-1 no-min-width px-2"
class="h-100 mx-1 no-min-width px-2"
mat-button
(click)="onDeleteSystemMessage()"
>
@ -159,7 +159,7 @@
</td>
<td>
<button
class="mini-icon mx-1 no-min-width px-2"
class="h-100 mx-1 no-min-width px-2"
mat-button
(click)="onDeleteCoupon(coupon.code)"
>

2
apps/client/src/app/components/admin-overview/admin-overview.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';

18
apps/client/src/app/components/admin-overview/admin-overview.scss
View File

@ -3,24 +3,6 @@
:host {
display: block;
.mat-button {
&.mini-icon {
line-height: 1.5;
}
}
.mat-flat-button {
::ng-deep {
.mat-button-wrapper {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
}
.subscription {
.mat-form-field {
max-width: 100%;

43
apps/client/src/app/components/admin-users/admin-users.html
View File

@ -4,44 +4,47 @@
<div class="users">
<table class="gf-table">
<thead>
<tr class="mat-header-row">
<th class="mat-header-cell px-1 py-2 text-right">#</th>
<th class="mat-header-cell px-1 py-2" i18n>User</th>
<tr class="mat-mdc-header-row">
<th class="mat-mdc-header-cell px-1 py-2 text-right">#</th>
<th class="mat-mdc-header-cell px-1 py-2" i18n>User</th>
<th
*ngIf="hasPermissionForSubscription"
class="mat-header-cell px-1 py-2"
class="mat-mdc-header-cell px-1 py-2"
>
<ng-container i18n>Country</ng-container>
</th>
<th class="mat-header-cell px-1 py-2">
<th class="mat-mdc-header-cell px-1 py-2">
<ng-container i18n>Registration</ng-container>
</th>
<th class="mat-header-cell px-1 py-2 text-right">
<th class="mat-mdc-header-cell px-1 py-2 text-right">
<ng-container i18n>Accounts</ng-container>
</th>
<th class="mat-header-cell px-1 py-2 text-right">
<th class="mat-mdc-header-cell px-1 py-2 text-right">
<ng-container i18n>Activities</ng-container>
</th>
<th
*ngIf="hasPermissionForSubscription"
class="mat-header-cell px-1 py-2 text-right"
class="mat-mdc-header-cell px-1 py-2 text-right"
>
<ng-container i18n>Engagement per Day</ng-container>
</th>
<th
*ngIf="hasPermissionForSubscription"
class="mat-header-cell px-1 py-2"
class="mat-mdc-header-cell px-1 py-2"
i18n
>
Last Request
</th>
<th class="mat-header-cell px-1 py-2"></th>
<th class="mat-mdc-header-cell px-1 py-2"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let userItem of users; let i = index" class="mat-row">
<td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
<td class="mat-cell px-1 py-2">
<tr
*ngFor="let userItem of users; let i = index"
class="mat-mdc-row"
>
<td class="mat-mdc-cell px-1 py-2 text-right">{{ i + 1 }}</td>
<td class="mat-mdc-cell px-1 py-2">
<div class="d-flex align-items-center">
<span class="d-none d-sm-inline-block text-monospace"
>{{ userItem.id }}</span
@ -59,23 +62,23 @@
</td>
<td
*ngIf="hasPermissionForSubscription"
class="mat-cell px-1 py-2"
class="mat-mdc-cell px-1 py-2"
>
<span class="h5" [title]="userItem.country"
>{{ getEmojiFlag(userItem.country) }}</span
>
</td>
<td class="mat-cell px-1 py-2">
<td class="mat-mdc-cell px-1 py-2">
{{ formatDistanceToNow(userItem.createdAt) }}
</td>
<td class="mat-cell px-1 py-2 text-right">
<td class="mat-mdc-cell px-1 py-2 text-right">
<gf-value
class="d-inline-block justify-content-end"
[locale]="user?.settings?.locale"
[value]="userItem.accountCount"
></gf-value>
</td>
<td class="mat-cell px-1 py-2 text-right">
<td class="mat-mdc-cell px-1 py-2 text-right">
<gf-value
class="d-inline-block justify-content-end"
[locale]="user?.settings?.locale"
@ -84,7 +87,7 @@
</td>
<td
*ngIf="hasPermissionForSubscription"
class="mat-cell px-1 py-2 text-right"
class="mat-mdc-cell px-1 py-2 text-right"
>
<gf-value
class="d-inline-block justify-content-end"
@ -95,11 +98,11 @@
</td>
<td
*ngIf="hasPermissionForSubscription"
class="mat-cell px-1 py-2"
class="mat-mdc-cell px-1 py-2"
>
{{ formatDistanceToNow(userItem.lastActivity) }}
</td>
<td class="mat-cell px-1 py-2">
<td class="mat-mdc-cell px-1 py-2">
<button
class="mx-1 no-min-width px-2"
mat-button

4
apps/client/src/app/components/admin-users/admin-users.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
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';

4
apps/client/src/app/components/admin-users/admin-users.scss
View File

@ -9,8 +9,8 @@
table {
min-width: 100%;
.mat-row,
.mat-header-row {
.mat-mdc-row,
.mat-mdc-header-row {
width: 100%;
}
}

2
apps/client/src/app/components/dialog-footer/dialog-footer.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { DialogFooterComponent } from './dialog-footer.component';

2
apps/client/src/app/components/dialog-header/dialog-header.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { DialogHeaderComponent } from './dialog-header.component';

2
apps/client/src/app/components/home-holdings/home-holdings.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { RouterModule } from '@angular/router';
import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';

8
apps/client/src/app/components/home-summary/home-summary.component.ts
View File

@ -1,9 +1,9 @@
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import {
MatLegacySnackBar as MatSnackBar,
MatLegacySnackBarRef as MatSnackBarRef,
LegacyTextOnlySnackBar as TextOnlySnackBar
} from '@angular/material/legacy-snack-bar';
MatSnackBar,
MatSnackBarRef,
TextOnlySnackBar
} from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { DataService } from '@ghostfolio/client/services/data.service';
import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';

2
apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
View File

@ -45,7 +45,7 @@
</div>
<div mat-dialog-actions>
<div class="flex-grow-1">
<mat-checkbox i18n (change)="onChangeStaySignedIn($event)"
<mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)"
>Stay signed in</mat-checkbox
>
</div>

2
apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
View File

@ -2,7 +2,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';

2
apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';

2
apps/client/src/app/components/positions/positions.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
import { GfPositionModule } from '../position/position.module';

2
apps/client/src/app/components/rules/rules.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';

2
apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { RouterModule } from '@angular/router';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';

8
apps/client/src/app/core/http-response.interceptor.ts
View File

@ -8,10 +8,10 @@ import {
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import {
MatLegacySnackBar as MatSnackBar,
MatLegacySnackBarRef as MatSnackBarRef,
LegacyTextOnlySnackBar as TextOnlySnackBar
} from '@angular/material/legacy-snack-bar';
MatSnackBar,
MatSnackBarRef,
TextOnlySnackBar
} from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { DataService } from '@ghostfolio/client/services/data.service';
import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';

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

@ -11,10 +11,10 @@ import {
MatLegacySlideToggleChange as MatSlideToggleChange
} from '@angular/material/legacy-slide-toggle';
import {
MatLegacySnackBar as MatSnackBar,
MatLegacySnackBarRef as MatSnackBarRef,
LegacyTextOnlySnackBar as TextOnlySnackBar
} from '@angular/material/legacy-snack-bar';
MatSnackBar,
MatSnackBarRef,
TextOnlySnackBar
} from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
import { DataService } from '@ghostfolio/client/services/data.service';

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

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';

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

@ -4,15 +4,6 @@
gf-access-table {
overflow-x: auto;
table {
min-width: 100%;
.mat-row,
.mat-header-row {
width: 100%;
}
}
}
.fab-container {

2
apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

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

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';

2
apps/client/src/app/pages/features/features-page.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';

28
apps/client/src/app/pages/landing/landing-page.html
View File

@ -30,31 +30,17 @@
<div class="container">
<div class="button-container mb-5 row">
<div class="align-items-center col d-flex justify-content-center">
<div class="text-center">
<ng-container *ngIf="hasPermissionToCreateUser">
<a
class="d-inline-block"
color="primary"
mat-flat-button
[routerLink]="['/register']"
>
<a color="primary" mat-flat-button [routerLink]="['/register']">
Get Started
</a>
</ng-container>
<ng-container *ngIf="hasPermissionForDemo">
<div
*ngIf="hasPermissionToCreateUser"
class="d-inline-block mx-3 text-muted"
>
or
</div>
<a class="d-inline-block" mat-stroked-button [routerLink]="['/demo']">
Live Demo
</a>
<div *ngIf="hasPermissionToCreateUser" class="mx-3 text-muted">or</div>
<a mat-stroked-button [routerLink]="['/demo']"> Live Demo </a>
</ng-container>
</div>
</div>
</div>
<div *ngIf="hasPermissionForStatistics" class="row mb-5">
<div
@ -394,15 +380,13 @@
or check out the example account</ng-container
>
</p>
<div class="py-2 text-center">
<div class="align-items-center d-flex justify-content-center py-2">
<a color="primary" mat-flat-button [routerLink]="['/register']">
Get Started
</a>
<ng-container *ngIf="hasPermissionForDemo">
<div class="d-inline-block mx-3 text-muted">or</div>
<a class="d-inline-block" mat-stroked-button [routerLink]="['/demo']">
Live Demo
</a>
<div class="mx-3 text-muted">or</div>
<a mat-stroked-button [routerLink]="['/demo']"> Live Demo </a>
</ng-container>
</div>
</div>

2
apps/client/src/app/pages/landing/landing-page.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { RouterModule } from '@angular/router';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';

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

@ -4,7 +4,7 @@
display: block;
.button-container {
.mat-stroked-button {
.mat-mdc-outlined-button {
background-color: var(--light-background);
}
}
@ -115,7 +115,7 @@
:host-context(.is-dark-theme) {
.button-container {
.mat-stroked-button {
.mat-mdc-outlined-button {
background-color: var(--dark-background);
}
}

2
apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts
View File

@ -10,7 +10,7 @@ import {
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
MatLegacyDialogRef as MatDialogRef
} from '@angular/material/legacy-dialog';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
import { DataService } from '@ghostfolio/client/services/data.service';

2
apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
View File

@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';

2
apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts
View File

@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';

18
apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
View File

@ -30,16 +30,12 @@
}
}
.mat-progress-bar {
.mat-mdc-progress-bar {
--mdc-linear-progress-track-height: 0.5rem;
border-radius: 0.25rem;
height: 0.5rem;
::ng-deep {
.mat-progress-bar-background {
fill: rgb(var(--palette-background-unselected-chip));
}
.mat-progress-bar-buffer {
.mdc-linear-progress__buffer-bar {
background-color: rgb(var(--palette-background-unselected-chip));
}
}
@ -47,13 +43,9 @@
}
:host-context(.is-dark-theme) {
.mat-progress-bar {
.mat-mdc-progress-bar {
::ng-deep {
.mat-progress-bar-background {
fill: rgb(var(--palette-background-unselected-chip-dark));
}
.mat-progress-bar-buffer {
.mdc-linear-progress__buffer-bar {
background-color: rgb(var(--palette-background-unselected-chip-dark));
}
}

2
apps/client/src/app/pages/portfolio/holdings/holdings-page.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';

2
apps/client/src/app/pages/pricing/pricing-page.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { RouterModule } from '@angular/router';

2
apps/client/src/app/pages/public/public-page.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';

2
apps/client/src/app/pages/register/register-page.html
View File

@ -40,7 +40,7 @@
<span i18n>Continue with Internet Identity</span>
</button>
<a
class="d-block px-4 rounded-pill"
class="px-4 rounded-pill w-100"
href="../api/v1/auth/google"
mat-stroked-button
><img

2
apps/client/src/app/pages/register/register-page.module.ts
View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { RouterModule } from '@angular/router';
import { GfLogoModule } from '@ghostfolio/ui/logo';

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

@ -2,7 +2,7 @@
display: block;
.button-container {
.mat-stroked-button {
.mat-mdc-outlined-button {
background-color: var(--light-background);
}
}
@ -26,7 +26,7 @@
:host-context(.is-dark-theme) {
.button-container {
.mat-stroked-button {
.mat-mdc-outlined-button {
background-color: var(--dark-background);
}
}

2
apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts
View File

@ -3,7 +3,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatButtonModule } from '@angular/material/button';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

4
apps/client/src/app/pages/webauthn/webauthn-page.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component';
import { GfLogoModule } from '@ghostfolio/ui/logo';

23
apps/client/src/styles.scss
View File

@ -249,8 +249,8 @@ body {
background: var(--dark-background);
}
.mat-fab,
.mat-flat-button {
.mat-mdc-fab,
.mat-mdc-unelevated-button {
&.mat-primary {
color: rgba(var(--dark-primary-text)) !important;
}
@ -268,11 +268,12 @@ body {
}
.mat-mdc-paginator,
.mat-paginator {
.mat-mdc-paginator {
background-color: rgba(var(--palette-foreground-base-dark), 0.02);
}
.mdc-button {
&.mat-accent,
&.mat-primary {
--mdc-filled-button-label-text-color: rgba(var(--dark-primary-text));
}
@ -384,8 +385,15 @@ ngx-skeleton-loader {
margin: 0 !important;
}
.mat-fab,
.mat-flat-button {
.mat-mdc-button-base {
.mdc-button__label {
align-items: center;
display: flex;
}
}
.mat-mdc-fab,
.mat-mdc-unelevated-button {
&.mat-primary {
color: rgba(var(--light-primary-text)) !important;
}
@ -446,16 +454,17 @@ ngx-skeleton-loader {
}
.mat-mdc-paginator,
.mat-paginator {
.mat-mdc-paginator {
background-color: rgba(var(--palette-foreground-base-light), 0.02);
.mat-mdc-paginator-page-size,
.mat-paginator-page-size {
.mat-mdc-paginator-page-size {
display: none;
}
}
.mdc-button {
&.mat-accent,
&.mat-primary {
--mdc-filled-button-label-text-color: rgba(var(--light-primary-text));
}

19
apps/client/src/styles/table.scss
View File

@ -9,6 +9,16 @@
}
}
.mat-mdc-footer-row {
.mat-mdc-footer-cell {
border-top: 1px solid
rgba(
var(--palette-foreground-divider),
var(--palette-foreground-divider-alpha)
);
}
}
.mat-mdc-row {
&:nth-child(even) {
background-color: rgba(var(--palette-foreground-base), 0.02);
@ -34,6 +44,15 @@
}
@if $darkTheme {
.mat-mdc-footer-row {
.mat-mdc-footer-cell {
border-top-color: rgba(
var(--palette-foreground-divider-dark),
var(--palette-foreground-divider-dark-alpha)
);
}
}
.mat-mdc-row {
&:nth-child(even) {
background-color: rgba(var(--palette-foreground-base-dark), 0.02);

19
libs/ui/src/lib/activities-table/activities-table.component.scss
View File

@ -7,16 +7,6 @@
overflow-x: auto;
.mat-mdc-table {
td {
&.mat-mdc-footer-cell {
border-top: 1px solid
rgba(
var(--palette-foreground-divider),
var(--palette-foreground-divider-alpha)
);
}
}
th {
::ng-deep {
.mat-sort-header-container {
@ -58,15 +48,6 @@
:host-context(.is-dark-theme) {
.mat-mdc-table {
td {
&.mat-mdc-footer-cell {
border-top-color: rgba(
var(--palette-foreground-divider-dark),
var(--palette-foreground-divider-dark-alpha)
);
}
}
.type-badge {
background-color: rgba(
var(--palette-foreground-text-dark),