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

Feature/migrate various components to angular material 15 part 2 (#1838)

Browse Source 
* Migrate tooltips to Angular Material 15

* Migrate tabs to Angular Material 15
This commit is contained in:
Thomas Kaul
2023-04-09 08:54:32 +02:00
committed by GitHub
parent 84de2c0c68
commit 3453100afd
18 changed files with 46 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -1,5 +1,5 @@
<div class="container"> <div class="container">
<div class="mb-5 row"> <div class="row">
<div class="col"> <div class="col">
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content>

1
apps/client/src/app/components/home-overview/home-overview.scss
View File

@@ -2,6 +2,7 @@
:host { :host {
display: block; display: block;
height: 100%;
.chart-container { .chart-container {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;

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

@@ -30,7 +30,7 @@
[queryParams]="{ createDialog: true }" [queryParams]="{ createDialog: true }"
[routerLink]="[]" [routerLink]="[]"
> >
<ion-icon class="mt-2" name="add-outline" size="large"></ion-icon> <ion-icon name="add-outline" size="large"></ion-icon>
</a> </a>
</div> </div>
</div> </div>

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

@@ -1,14 +1,16 @@
<router-outlet></router-outlet> <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
<router-outlet></router-outlet>
</mat-tab-nav-panel>
<nav mat-align-tabs="center" mat-tab-nav-bar> <nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
<a <a
*ngFor="let link of [
{ iconName: 'reader-outline', path: 'overview' },
{ iconName: 'people-outline', path: 'users' },
{ iconName: 'server-outline', path: 'market-data' },
{ iconName: 'flash-outline', path: 'jobs' }
]"
#rla="routerLinkActive" #rla="routerLinkActive"
*ngFor="let link of [
{ iconName: 'reader-outline', path: 'overview' },
{ iconName: 'people-outline', path: 'users' },
{ iconName: 'server-outline', path: 'market-data' },
{ iconName: 'flash-outline', path: 'jobs' }
]"
mat-tab-link mat-tab-link
routerLinkActive routerLinkActive
[active]="rla.isActive" [active]="rla.isActive"

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

@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module'; import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module';
import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module'; import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module';
import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module'; import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module';

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

@@ -19,19 +19,10 @@
overflow-y: auto; overflow-y: auto;
} }
.mat-tab-header { .mat-mdc-tab-link-container {
border-bottom: 0; --mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar { .mat-mdc-tab-link {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
&:hover { &:hover {
opacity: 0.75; opacity: 0.75;
} }

8
apps/client/src/app/pages/home/home-page.html
View File

@@ -1,9 +1,11 @@
<router-outlet></router-outlet> <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
<router-outlet></router-outlet>
</mat-tab-nav-panel>
<nav mat-align-tabs="center" mat-tab-nav-bar> <nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
<a <a
*ngFor="let tab of tabs"
#rla="routerLinkActive" #rla="routerLinkActive"
*ngFor="let tab of tabs"
mat-tab-link mat-tab-link
routerLinkActive routerLinkActive
[active]="rla.isActive" [active]="rla.isActive"

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

@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module'; import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
import { GfHomeMarketModule } from '@ghostfolio/client/components/home-market/home-market.module'; import { GfHomeMarketModule } from '@ghostfolio/client/components/home-market/home-market.module';

15
apps/client/src/app/pages/home/home-page.scss
View File

@@ -19,19 +19,10 @@
overflow-y: auto; overflow-y: auto;
} }
.mat-tab-header { .mat-mdc-tab-link-container {
border-bottom: 0; --mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar { .mat-mdc-tab-link {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
&:hover { &:hover {
opacity: 0.75; opacity: 0.75;
} }

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

@@ -32,7 +32,7 @@
[queryParams]="{ createDialog: true }" [queryParams]="{ createDialog: true }"
[routerLink]="[]" [routerLink]="[]"
> >
<ion-icon class="mt-2" name="add-outline" size="large"></ion-icon> <ion-icon name="add-outline" size="large"></ion-icon>
</a> </a>
</div> </div>
</div> </div>

6
apps/client/src/app/pages/portfolio/portfolio-page.html
View File

@@ -1,6 +1,8 @@
<router-outlet></router-outlet> <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
<router-outlet></router-outlet>
</mat-tab-nav-panel>
<nav mat-align-tabs="center" mat-tab-nav-bar> <nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
<a <a
#rla="routerLinkActive" #rla="routerLinkActive"
*ngFor="let tab of tabs" *ngFor="let tab of tabs"

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

@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { PortfolioPageRoutingModule } from './portfolio-page-routing.module'; import { PortfolioPageRoutingModule } from './portfolio-page-routing.module';

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

@@ -20,26 +20,13 @@
overflow-y: auto; overflow-y: auto;
} }
.mat-tab-header { .mat-mdc-tab-link-container {
border-bottom: 0; --mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar { .mat-mdc-tab-link {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
&:hover { &:hover {
opacity: 0.75; opacity: 0.75;
} }
@media (max-width: 599px) {
min-width: unset;
}
} }
} }
} }

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

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';

8
apps/client/src/app/pages/zen/zen-page.html
View File

@@ -1,9 +1,11 @@
<router-outlet></router-outlet> <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
<router-outlet></router-outlet>
</mat-tab-nav-panel>
<nav mat-align-tabs="center" mat-tab-nav-bar> <nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
<a <a
*ngFor="let tab of tabs"
#rla="routerLinkActive" #rla="routerLinkActive"
*ngFor="let tab of tabs"
mat-tab-link mat-tab-link
routerLinkActive routerLinkActive
[active]="rla.isActive" [active]="rla.isActive"

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

@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs'; import { MatTabsModule } from '@angular/material/tabs';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module'; import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
import { GfHomeOverviewModule } from '@ghostfolio/client/components/home-overview/home-overview.module'; import { GfHomeOverviewModule } from '@ghostfolio/client/components/home-overview/home-overview.module';

15
apps/client/src/app/pages/zen/zen-page.scss
View File

@@ -17,19 +17,10 @@
overflow-y: auto; overflow-y: auto;
} }
.mat-tab-header { .mat-mdc-tab-link-container {
border-bottom: 0; --mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar { .mat-mdc-tab-link {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
&:hover { &:hover {
opacity: 0.75; opacity: 0.75;
} }