topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge 3365d86f13 into b2634db99f

pull/3661/merge
Thomas Kaul 5 days ago
committed by GitHub
parent
b2634db99f 3365d86f13
commit
314f89e06e
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
6 changed files with 339 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 2
      apps/client/src/app/app.component.ts
  3. 28
      apps/client/src/app/components/header/header.component.html
  4. 1
      apps/client/src/app/components/header/header.component.scss
  5. 155
      apps/client/src/styles/m3-theme.scss
  6. 245
      apps/client/src/styles/theme.scss

1
CHANGELOG.md
View File

@ -837,6 +837,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed ### Changed
- Refactored the dark theme CSS selector - Refactored the dark theme CSS selector
- Migrated from _Material Design_ 2 to _Material Design_ 3
- Improved the language localization for German (`de`) - Improved the language localization for German (`de`)
- Upgraded `date-fns` from version `2.29.3` to `3.6.0` - Upgraded `date-fns` from version `2.29.3` to `3.6.0`
- Upgraded `zone.js` from version `0.14.7` to `0.14.10` - Upgraded `zone.js` from version `0.14.7` to `0.14.10`

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

@ -359,7 +359,9 @@ export class AppComponent implements OnDestroy, OnInit {
if (isDarkTheme) { if (isDarkTheme) {
this.document.body.classList.add('theme-dark'); this.document.body.classList.add('theme-dark');
this.document.body.classList.remove('theme-light');
} else { } else {
this.document.body.classList.add('theme-light');
this.document.body.classList.remove('theme-dark'); this.document.body.classList.remove('theme-dark');
} }

28
apps/client/src/app/components/header/header.component.html
View File

@ -17,7 +17,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': 'font-weight-bold':
currentRoute === 'home' || currentRoute === 'zen', currentRoute === 'home' || currentRoute === 'zen',
@ -32,7 +32,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === 'portfolio', 'font-weight-bold': currentRoute === 'portfolio',
'text-decoration-underline': currentRoute === 'portfolio' 'text-decoration-underline': currentRoute === 'portfolio'
@ -45,7 +45,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === 'accounts', 'font-weight-bold': currentRoute === 'accounts',
'text-decoration-underline': currentRoute === 'accounts' 'text-decoration-underline': currentRoute === 'accounts'
@ -59,7 +59,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === 'admin', 'font-weight-bold': currentRoute === 'admin',
'text-decoration-underline': currentRoute === 'admin' 'text-decoration-underline': currentRoute === 'admin'
@ -73,7 +73,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === routeResources, 'font-weight-bold': currentRoute === routeResources,
'text-decoration-underline': currentRoute === routeResources 'text-decoration-underline': currentRoute === routeResources
@ -88,7 +88,7 @@
<li class="list-inline-item"> <li class="list-inline-item">
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === routePricing, 'font-weight-bold': currentRoute === routePricing,
'text-decoration-underline': currentRoute === routePricing 'text-decoration-underline': currentRoute === routePricing
@ -108,7 +108,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === routeAbout, 'font-weight-bold': currentRoute === routeAbout,
'text-decoration-underline': currentRoute === routeAbout 'text-decoration-underline': currentRoute === routeAbout
@ -158,7 +158,7 @@
<li class="list-inline-item"> <li class="list-inline-item">
<button <button
class="no-min-width px-1" class="no-min-width px-1"
mat-flat-button mat-button
[matMenuTriggerFor]="accountMenu" [matMenuTriggerFor]="accountMenu"
(menuClosed)="onMenuClosed()" (menuClosed)="onMenuClosed()"
(menuOpened)="onMenuOpened()" (menuOpened)="onMenuOpened()"
@ -342,7 +342,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === routeFeatures, 'font-weight-bold': currentRoute === routeFeatures,
'text-decoration-underline': currentRoute === routeFeatures 'text-decoration-underline': currentRoute === routeFeatures
@ -355,7 +355,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === routeAbout, 'font-weight-bold': currentRoute === routeAbout,
'text-decoration-underline': currentRoute === routeAbout 'text-decoration-underline': currentRoute === routeAbout
@ -368,7 +368,7 @@
<li class="list-inline-item"> <li class="list-inline-item">
<a <a
class="d-sm-block" class="d-sm-block"
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === routePricing, 'font-weight-bold': currentRoute === routePricing,
'text-decoration-underline': currentRoute === routePricing 'text-decoration-underline': currentRoute === routePricing
@ -389,7 +389,7 @@
<a <a
class="d-none d-sm-block" class="d-none d-sm-block"
i18n i18n
mat-flat-button mat-button
[ngClass]="{ [ngClass]="{
'font-weight-bold': currentRoute === routeMarkets, 'font-weight-bold': currentRoute === routeMarkets,
'text-decoration-underline': currentRoute === routeMarkets 'text-decoration-underline': currentRoute === routeMarkets
@ -403,12 +403,12 @@
<a <a
class="d-none d-sm-block no-min-width p-1" class="d-none d-sm-block no-min-width p-1"
href="https://github.com/ghostfolio/ghostfolio" href="https://github.com/ghostfolio/ghostfolio"
mat-flat-button mat-button
><ion-icon name="logo-github"></ion-icon ><ion-icon name="logo-github"></ion-icon
></a> ></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<button class="d-sm-block" mat-flat-button (click)="openLoginDialog()"> <button class="d-sm-block" mat-button (click)="openLoginDialog()">
<ng-container i18n>Sign in</ng-container> <ng-container i18n>Sign in</ng-container>
</button> </button>
</li> </li>

1
apps/client/src/app/components/header/header.component.scss
View File

@ -20,6 +20,7 @@
} }
.mdc-button { .mdc-button {
color: var(--mdc-text-button-label-text-color);
height: 100%; height: 100%;
&:not(.mat-primary) { &:not(.mat-primary) {

155
apps/client/src/styles/m3-theme.scss
View File

@ -0,0 +1,155 @@
// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.
@use 'sass:map';
@use '@angular/material' as mat;
// Note: Color palettes are generated from primary: #36cfcc, secondary: #3686cf
$_palettes: (
primary: (
0: #000000,
10: #00201f,
20: #003736,
25: #004342,
30: #00504e,
35: #005d5b,
40: #006a68,
50: #008583,
60: #00a19f,
70: #11bebc,
80: #47dbd7,
90: #6bf7f4,
95: #affffc,
98: #e3fffd,
99: #f2fffe,
100: #ffffff
),
secondary: (
0: #000000,
10: #001d36,
20: #003258,
25: #003d6a,
30: #00497c,
35: #00558f,
40: #0061a3,
50: #267bc3,
60: #4895df,
70: #66b0fb,
80: #9ecaff,
90: #d1e4ff,
95: #e9f1ff,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff
),
tertiary: (
0: #000000,
10: #031d35,
20: #1b324b,
25: #273d57,
30: #324863,
35: #3e546f,
40: #4a607b,
50: #637995,
60: #7c92b0,
70: #97adcc,
80: #b2c8e8,
90: #d2e4ff,
95: #eaf1ff,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff
),
neutral: (
0: #000000,
10: #191c1c,
20: #2d3131,
25: #383c3c,
30: #444747,
35: #4f5353,
40: #5b5f5e,
50: #747877,
60: #8e9191,
70: #a9acab,
80: #c4c7c6,
90: #e0e3e2,
95: #eff1f0,
98: #f7faf9,
99: #fafdfc,
100: #ffffff,
4: #0b0f0f,
6: #101414,
12: #1d2020,
17: #272b2a,
22: #323535,
24: #363a39,
87: #d8dada,
92: #e6e9e8,
94: #eceeed,
96: #f2f4f3
),
neutral-variant: (
0: #000000,
10: #141d1d,
20: #293232,
25: #343d3d,
30: #3f4948,
35: #4a5454,
40: #566060,
50: #6f7978,
60: #889392,
70: #a3adac,
80: #bec9c7,
90: #dae5e3,
95: #e8f3f2,
98: #f1fbfa,
99: #f4fefd,
100: #ffffff
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff
)
);
$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error)
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$light-theme: mat.define-theme(
(
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary
)
)
);
$dark-theme: mat.define-theme(
(
color: (
theme-type: dark,
primary: $_primary,
tertiary: $_tertiary
)
)
);

245
apps/client/src/styles/theme.scss
View File

@ -1,112 +1,185 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use 'sass:map';
$dark-primary-text: rgba(black, 0.87); $dark-primary-text: rgba(black, 0.87);
$light-primary-text: white; $light-primary-text: white;
$mat-css-dark-theme-selector: '.theme-dark'; $_palettes: (
primary: (
$gf-primary: ( 0: #000000,
50: var(--gf-theme-primary-50), 10: #00201f,
100: var(--gf-theme-primary-100), 20: #003736,
200: var(--gf-theme-primary-200), 25: #004342,
300: var(--gf-theme-primary-300), 30: #00504e,
400: var(--gf-theme-primary-400), 35: #005d5b,
500: var(--gf-theme-primary-500), 40: #006a68,
600: var(--gf-theme-primary-600), 50: #008583,
700: var(--gf-theme-primary-700), 60: #00a19f,
800: var(--gf-theme-primary-800), 70: #11bebc,
900: var(--gf-theme-primary-900), 80: #47dbd7,
A100: var(--gf-theme-primary-A100), 90: #6bf7f4,
A200: var(--gf-theme-primary-A200), 95: #affffc,
A400: var(--gf-theme-primary-A400), 98: #e3fffd,
A700: var(--gf-theme-primary-A700), 99: #f2fffe,
contrast: ( 100: #ffffff
50: $dark-primary-text, ),
100: $dark-primary-text, secondary: (
200: $dark-primary-text, 0: #000000,
300: $light-primary-text, 10: #001d36,
400: $light-primary-text, 20: #003258,
500: $light-primary-text, 25: #003d6a,
600: $light-primary-text, 30: #00497c,
700: $light-primary-text, 35: #00558f,
800: $light-primary-text, 40: #0061a3,
900: $light-primary-text, 50: #267bc3,
A100: $dark-primary-text, 60: #4895df,
A200: $light-primary-text, 70: #66b0fb,
A400: $light-primary-text, 80: #9ecaff,
A700: $light-primary-text 90: #d1e4ff,
95: #e9f1ff,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff
),
tertiary: (
0: #000000,
10: #031d35,
20: #1b324b,
25: #273d57,
30: #324863,
35: #3e546f,
40: #4a607b,
50: #637995,
60: #7c92b0,
70: #97adcc,
80: #b2c8e8,
90: #d2e4ff,
95: #eaf1ff,
98: #f8f9ff,
99: #fdfcff,
100: #ffffff
),
neutral: (
0: #000000,
10: #191c1c,
20: #2d3131,
25: #383c3c,
30: #444747,
35: #4f5353,
40: #5b5f5e,
50: #747877,
60: #8e9191,
70: #a9acab,
80: #c4c7c6,
90: #e0e3e2,
95: #eff1f0,
98: #f7faf9,
99: #fafdfc,
100: #ffffff,
4: #0b0f0f,
6: #101414,
12: #1d2020,
17: #272b2a,
22: #323535,
24: #363a39,
87: #d8dada,
92: #e6e9e8,
94: #eceeed,
96: #f2f4f3
),
neutral-variant: (
0: #000000,
10: #141d1d,
20: #293232,
25: #343d3d,
30: #3f4948,
35: #4a5454,
40: #566060,
50: #6f7978,
60: #889392,
70: #a3adac,
80: #bec9c7,
90: #dae5e3,
95: #e8f3f2,
98: #f1fbfa,
99: #f4fefd,
100: #ffffff
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff
) )
); );
$gf-secondary: ( $_rest: (
50: var(--gf-theme-secondary-50), secondary: map.get($_palettes, secondary),
100: var(--gf-theme-secondary-100), neutral: map.get($_palettes, neutral),
200: var(--gf-theme-secondary-200), neutral-variant: map.get($_palettes, neutral-variant),
300: var(--gf-theme-secondary-300), error: map.get($_palettes, error)
400: var(--gf-theme-secondary-400),
500: var(--gf-theme-secondary-500),
600: var(--gf-theme-secondary-600),
700: var(--gf-theme-secondary-700),
800: var(--gf-theme-secondary-800),
900: var(--gf-theme-secondary-900),
A100: var(--gf-theme-secondary-A100),
A200: var(--gf-theme-secondary-A200),
A400: var(--gf-theme-secondary-A400),
A700: var(--gf-theme-secondary-A700),
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $light-primary-text,
400: $light-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text
)
); );
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$gf-typography: mat.m2-define-typography-config(); @include mat.app-background();
@include mat.button-density(0);
@include mat.elevation-classes();
@include mat.table-density(-1);
// $gf-typography: mat.m2-define-typography-config();
// Create default theme .theme-light {
$gf-theme-default: mat.m2-define-light-theme( $gf-theme-default: mat.define-theme(
( (
color: ( color: (
accent: mat.m2-define-palette($gf-secondary, 500, 900, A100), primary: $_primary,
primary: mat.m2-define-palette($gf-primary) theme-type: light,
tertiary: $_tertiary
),
density: (
scale: -3
), ),
density: -3, // typography: $gf-typography
typography: $gf-typography
) )
); );
@include mat.all-component-themes($gf-theme-default);
@include mat.all-component-themes($gf-theme-default); --mdc-outlined-card-container-color: unset;
}
// Create dark theme .theme-dark {
$gf-theme-dark: mat.m2-define-dark-theme( $gf-theme-dark: mat.define-theme(
( (
color: ( color: (
accent: mat.m2-define-palette($gf-secondary, 500, 900, A100), primary: $_primary,
primary: mat.m2-define-palette($gf-primary) theme-type: dark,
tertiary: $_tertiary
), ),
density: -3, density: (
typography: $gf-typography scale: -3
),
// typography: $gf-typography
) )
); );
.theme-dark { @include mat.all-component-themes($gf-theme-dark);
@include mat.all-component-colors($gf-theme-dark);
}
@include mat.button-density(0); --mdc-outlined-card-container-color: unset;
@include mat.elevation-classes(); }
@include mat.app-background();
@include mat.table-density(-1);
:root { :root {
--gf-theme-alpha-hover: 0.04; --gf-theme-alpha-hover: 0.04;

Write Preview
Loading…
Cancel
Save