Browse Source
Feature/upgrade angular material css vars to 2.0.0 (#200)
* Upgrade angular-material-css-vars
* Update changelog
pull/192/head
Thomas
4 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with
29 additions and
57 deletions
-
CHANGELOG.md
-
apps/client/src/app/app.component.scss
-
apps/client/src/app/components/header/header.component.scss
-
apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
-
apps/client/src/app/components/positions/positions.component.scss
-
apps/client/src/app/components/toggle/toggle.component.scss
-
apps/client/src/styles.scss
-
apps/client/src/styles/ghostfolio-style.scss
-
libs/common/src/lib/helper.ts
-
package.json
-
yarn.lock
|
|
@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 |
|
|
|
|
|
|
|
- Upgraded `@angular/cdk` and `@angular/material` from version `11.0.4` to `12.0.6` |
|
|
|
- Upgraded `@nestjs` dependencies |
|
|
|
- Upgraded `angular-material-css-vars` from version `1.2.0` to `2.0.0` |
|
|
|
- Upgraded `Nx` from version `12.3.6` to `12.5.4` |
|
|
|
|
|
|
|
## 1.23.1 - 03.07.2021 |
|
|
|
|
|
@ -7,10 +7,6 @@ |
|
|
|
.create-account-box { |
|
|
|
cursor: pointer; |
|
|
|
font-size: 90%; |
|
|
|
|
|
|
|
.link { |
|
|
|
color: rgba(var(--palette-primary-500), 1); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -5,10 +5,7 @@ |
|
|
|
z-index: 999; |
|
|
|
|
|
|
|
.mat-toolbar { |
|
|
|
background-color: rgba( |
|
|
|
var(--light-primary-text), |
|
|
|
var(--palette-foreground-disabled-alpha) |
|
|
|
); |
|
|
|
background-color: rgba(var(--light-disabled-text)); |
|
|
|
|
|
|
|
.spacer { |
|
|
|
flex: 1 1 auto; |
|
|
@ -28,11 +25,6 @@ |
|
|
|
|
|
|
|
:host-context(.is-dark-theme) { |
|
|
|
.mat-toolbar { |
|
|
|
background-color: rgba( |
|
|
|
39, |
|
|
|
39, |
|
|
|
39, |
|
|
|
var(--palette-foreground-disabled-alpha) |
|
|
|
); |
|
|
|
background-color: rgba(39, 39, 39, $alpha-disabled-text); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
@ -8,7 +8,7 @@ import { |
|
|
|
ViewChild |
|
|
|
} from '@angular/core'; |
|
|
|
import { UNKNOWN_KEY } from '@ghostfolio/common/config'; |
|
|
|
import { getCssVariable, getTextColor } from '@ghostfolio/common/helper'; |
|
|
|
import { getTextColor } from '@ghostfolio/common/helper'; |
|
|
|
import { PortfolioPosition } from '@ghostfolio/common/interfaces'; |
|
|
|
import { Currency } from '@prisma/client'; |
|
|
|
import { Tooltip } from 'chart.js'; |
|
|
@ -43,9 +43,7 @@ export class PortfolioProportionChartComponent |
|
|
|
private colorMap: { |
|
|
|
[symbol: string]: string; |
|
|
|
} = { |
|
|
|
[UNKNOWN_KEY]: `rgba(${getTextColor()}, ${getCssVariable( |
|
|
|
'--palette-foreground-divider-alpha' |
|
|
|
)})` |
|
|
|
[UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)` |
|
|
|
}; |
|
|
|
|
|
|
|
public constructor() { |
|
|
|
|
|
@ -1,12 +1,11 @@ |
|
|
|
@import '~apps/client/src/styles/ghostfolio-style'; |
|
|
|
|
|
|
|
:host { |
|
|
|
display: block; |
|
|
|
|
|
|
|
gf-position { |
|
|
|
&:nth-child(even) { |
|
|
|
background-color: rgba( |
|
|
|
var(--dark-primary-text), |
|
|
|
var(--palette-background-hover-alpha) |
|
|
|
); |
|
|
|
background-color: rgba(0, 0, 0, $alpha-hover); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -14,10 +13,7 @@ |
|
|
|
:host-context(.is-dark-theme) { |
|
|
|
gf-position { |
|
|
|
&:nth-child(even) { |
|
|
|
background-color: rgba( |
|
|
|
var(--light-primary-text), |
|
|
|
var(--palette-background-hover-alpha) |
|
|
|
); |
|
|
|
background-color: rgba(255, 255, 255, $alpha-hover); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
@ -7,10 +7,7 @@ |
|
|
|
padding: 0.15rem 0.75rem; |
|
|
|
|
|
|
|
&.mat-radio-checked { |
|
|
|
background-color: rgba( |
|
|
|
var(--dark-primary-text), |
|
|
|
var(--palette-foreground-divider-alpha) |
|
|
|
); |
|
|
|
background-color: rgba(var(--dark-dividers)); |
|
|
|
} |
|
|
|
|
|
|
|
::ng-deep { |
|
|
@ -33,15 +30,8 @@ |
|
|
|
:host-context(.is-dark-theme) { |
|
|
|
.mat-radio-button { |
|
|
|
&.mat-radio-checked { |
|
|
|
background-color: rgba( |
|
|
|
var(--light-primary-text), |
|
|
|
var(--palette-foreground-divider-alpha) |
|
|
|
); |
|
|
|
border: 1px solid |
|
|
|
rgba( |
|
|
|
var(--light-primary-text), |
|
|
|
var(--palette-foreground-disabled-button-alpha) |
|
|
|
); |
|
|
|
background-color: rgba(var(--light-dividers)); |
|
|
|
border: 1px solid rgba(var(--light-disabled-text)); |
|
|
|
} |
|
|
|
|
|
|
|
::ng-deep { |
|
|
|
|
|
@ -43,10 +43,7 @@ body { |
|
|
|
} |
|
|
|
|
|
|
|
hr { |
|
|
|
border-top-color: rgba( |
|
|
|
var(--light-primary-text), |
|
|
|
var(--palette-foreground-divider-alpha) |
|
|
|
); |
|
|
|
border-top-color: rgba(var(--light-dividers)); |
|
|
|
} |
|
|
|
|
|
|
|
ngx-skeleton-loader { |
|
|
@ -63,10 +60,7 @@ body { |
|
|
|
background: var(--dark-background); |
|
|
|
|
|
|
|
&:not([class*='mat-elevation-z']) { |
|
|
|
border-color: rgba( |
|
|
|
var(--light-primary-text), |
|
|
|
var(--palette-foreground-divider-alpha) |
|
|
|
); |
|
|
|
border-color: rgba(var(--light-dividers)); |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
} |
|
|
@ -102,8 +96,7 @@ button:focus { |
|
|
|
} |
|
|
|
|
|
|
|
hr { |
|
|
|
border-top: 1px solid |
|
|
|
rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha)); |
|
|
|
border-top: 1px solid rgba(var(--dark-dividers)); |
|
|
|
} |
|
|
|
|
|
|
|
ion-icon { |
|
|
@ -138,8 +131,7 @@ ngx-skeleton-loader { |
|
|
|
|
|
|
|
.mat-card { |
|
|
|
&:not([class*='mat-elevation-z']) { |
|
|
|
border: 1px solid |
|
|
|
rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha)); |
|
|
|
border: 1px solid rgba(var(--dark-dividers)); |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
@ -2,6 +2,9 @@ $mat-css-dark-theme-selector: '.is-dark-theme'; |
|
|
|
|
|
|
|
@import '~angular-material-css-vars/public-util'; |
|
|
|
|
|
|
|
$alpha-disabled-text: 0.38; |
|
|
|
$alpha-hover: 0.04; |
|
|
|
|
|
|
|
.gf-table { |
|
|
|
td { |
|
|
|
border: 0; |
|
|
|
|
|
@ -26,11 +26,15 @@ export function getCssVariable(aCssVariable: string) { |
|
|
|
} |
|
|
|
|
|
|
|
export function getTextColor() { |
|
|
|
return getCssVariable( |
|
|
|
const cssVariable = getCssVariable( |
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches |
|
|
|
? '--light-primary-text' |
|
|
|
: '--dark-primary-text' |
|
|
|
); |
|
|
|
|
|
|
|
const [r, g, b] = cssVariable.split(','); |
|
|
|
|
|
|
|
return `${r}, ${g}, ${b}`; |
|
|
|
} |
|
|
|
|
|
|
|
export function getToday() { |
|
|
|
|
|
@ -71,7 +71,7 @@ |
|
|
|
"@simplewebauthn/typescript-types": "3.0.0", |
|
|
|
"@stripe/stripe-js": "1.15.0", |
|
|
|
"alphavantage": "2.2.0", |
|
|
|
"angular-material-css-vars": "1.2.0", |
|
|
|
"angular-material-css-vars": "2.0.0", |
|
|
|
"bent": "7.3.12", |
|
|
|
"bootstrap": "4.6.0", |
|
|
|
"cache-manager": "3.4.3", |
|
|
|
|
|
@ -3427,10 +3427,10 @@ alphavantage@2.2.0: |
|
|
|
dependencies: |
|
|
|
cross-fetch "^3.0.5" |
|
|
|
|
|
|
|
angular-material-css-vars@1.2.0: |
|
|
|
version "1.2.0" |
|
|
|
resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-1.2.0.tgz#edfa6dba8a862a250fb909112ebf588a1b0bd868" |
|
|
|
integrity sha512-n1QApHYOPjdSNVQROltWCk7gP/eSNh227EB4T8toAS2pNWEYVO2hCm/Vsg4VmhyGXyEhrnYfJJoUUok/jWjJSA== |
|
|
|
angular-material-css-vars@2.0.0: |
|
|
|
version "2.0.0" |
|
|
|
resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-2.0.0.tgz#a7df8380e8f781c31eeea7171b1cbd5bb91b8e4e" |
|
|
|
integrity sha512-20zCLolohn0ihGsK0+WgEN370jk9NabOQcUBEt7se9DtKzIVhXyvCRDkkQBVxwdP6kw9+J+oA3pZ6szJka4yXw== |
|
|
|
dependencies: |
|
|
|
"@ctrl/tinycolor" "^2.6.0" |
|
|
|
tslib "^2.0.0" |
|
|
|