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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 46 additions and 77 deletions
Show Stats 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 { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
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="mb-5 row">
<div class="row">
<div class="col">
<mat-card appearance="outlined" class="mb-3">
<mat-card-content>

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

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

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

@ -30,7 +30,7 @@
[queryParams]="{ createDialog: true }"
[routerLink]="[]"
>
<ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
<ion-icon name="add-outline" size="large"></ion-icon>
</a>
</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
*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"
*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
routerLinkActive
[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 { 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 { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.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;
}
.mat-tab-header {
border-bottom: 0;
.mat-mdc-tab-link-container {
--mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
.mat-mdc-tab-link {
&:hover {
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
*ngFor="let tab of tabs"
#rla="routerLinkActive"
*ngFor="let tab of tabs"
mat-tab-link
routerLinkActive
[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 { 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 { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.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;
}
.mat-tab-header {
border-bottom: 0;
.mat-mdc-tab-link-container {
--mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
.mat-mdc-tab-link {
&:hover {
opacity: 0.75;
}

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

@ -32,7 +32,7 @@
[queryParams]="{ createDialog: true }"
[routerLink]="[]"
>
<ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
<ion-icon name="add-outline" size="large"></ion-icon>
</a>
</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
#rla="routerLinkActive"
*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 { 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 { 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;
}
.mat-tab-header {
border-bottom: 0;
.mat-mdc-tab-link-container {
--mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
.mat-mdc-tab-link {
&:hover {
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 { MatButtonModule } from '@angular/material/button';
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 { 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
*ngFor="let tab of tabs"
#rla="routerLinkActive"
*ngFor="let tab of tabs"
mat-tab-link
routerLinkActive
[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 { 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 { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.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;
}
.mat-tab-header {
border-bottom: 0;
.mat-mdc-tab-link-container {
--mdc-tab-indicator-active-indicator-color: transparent;
.mat-ink-bar {
visibility: hidden !important;
}
.mat-tab-label-active {
color: rgba(var(--palette-primary-500), 1);
opacity: 1;
}
.mat-tab-link {
.mat-mdc-tab-link {
&:hover {
opacity: 0.75;
}