tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update angular material 12

pull/5695/head
Igor Kulikov 5 years ago
parent
3992ddcadf
commit
ac39ceab96
3 changed files with 66 additions and 66 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. 6
      ui-ngx/package.json
  2. 106
      ui-ngx/src/theme.scss
  3. 20
      ui-ngx/yarn.lock

6
ui-ngx/package.json
View File

@ -14,13 +14,13 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^12.2.13", "@angular/animations": "^12.2.13",
"@angular/cdk": "^11.2.13", "@angular/cdk": "^12.2.13",
"@angular/common": "^12.2.13", "@angular/common": "^12.2.13",
"@angular/compiler": "^12.2.13", "@angular/compiler": "^12.2.13",
"@angular/core": "^12.2.13", "@angular/core": "^12.2.13",
"@angular/flex-layout": "^12.0.0-beta.35", "@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "^12.2.13", "@angular/forms": "^12.2.13",
"@angular/material": "^11.2.13", "@angular/material": "^12.2.13",
"@angular/platform-browser": "^12.2.13", "@angular/platform-browser": "^12.2.13",
"@angular/platform-browser-dynamic": "^12.2.13", "@angular/platform-browser-dynamic": "^12.2.13",
"@angular/router": "^12.2.13", "@angular/router": "^12.2.13",
@ -148,4 +148,4 @@
"resolutions": { "resolutions": {
"lodash": "~4.17.21" "lodash": "~4.17.21"
} }
} }

106
ui-ngx/src/theme.scss
View File

@ -13,11 +13,11 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss'; @import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
@import './scss/constants'; @import './scss/constants';
@include mat-core(); @include mat.core();
$tb-primary-color: #305680; $tb-primary-color: #305680;
$tb-secondary-color: #527dad; $tb-secondary-color: #527dad;
@ -41,39 +41,39 @@ $tb-mat-indigo: (
A400: #3d5afe, A400: #3d5afe,
A700: #304ffe, A700: #304ffe,
contrast: ( contrast: (
50: $dark-primary-text, 50: rgba(black, 0.87),
100: $dark-primary-text, 100: rgba(black, 0.87),
200: $dark-primary-text, 200: rgba(black, 0.87),
300: $light-primary-text, 300: white,
400: $light-primary-text, 400: white,
500: $light-primary-text, 500: white,
600: $light-primary-text, 600: white,
700: $light-primary-text, 700: white,
800: $light-primary-text, 800: white,
900: $light-primary-text, 900: white,
A100: $dark-primary-text, A100: rgba(black, 0.87),
A200: $light-primary-text, A200: white,
A400: $light-primary-text, A400: white,
A700: $light-primary-text, A700: white,
) )
); );
$tb-primary: mat-palette($tb-mat-indigo); $tb-primary: mat.define-palette($tb-mat-indigo);
$tb-accent: mat-palette($mat-deep-orange); $tb-accent: mat.define-palette(mat.$deep-orange-palette);
$background: (background: map_get($mat-grey, 200)); $background: (background: map_get(mat.$grey-palette, 200));
$tb-theme-background: map_merge($mat-light-theme-background, $background); $tb-theme-background: map_merge(mat.$light-theme-background-palette, $background);
$tb-mat-theme: mat-light-theme( $tb-mat-theme: mat.define-light-theme(
$tb-primary, $tb-primary,
$tb-accent $tb-accent
); );
$tb-theme: map_merge($tb-mat-theme, (background: $tb-theme-background)); $tb-theme: map_merge($tb-mat-theme, (background: $tb-theme-background));
$primary: mat-color($tb-primary); $primary: mat.get-color-from-palette($tb-primary);
$accent: mat-color($tb-accent); $accent: mat.get-color-from-palette($tb-accent);
$tb-dark-mat-indigo: ( $tb-dark-mat-indigo: (
50: #e8eaf6, 50: #e8eaf6,
@ -91,24 +91,24 @@ $tb-dark-mat-indigo: (
A400: #3d5afe, A400: #3d5afe,
A700: #304ffe, A700: #304ffe,
contrast: ( contrast: (
50: $dark-primary-text, 50: rgba(black, 0.87),
100: $dark-primary-text, 100: rgba(black, 0.87),
200: $dark-primary-text, 200: rgba(black, 0.87),
300: $dark-primary-text, 300: rgba(black, 0.87),
400: $dark-primary-text, 400: rgba(black, 0.87),
500: map_get($tb-mat-indigo, 900), 500: map_get($tb-mat-indigo, 900),
600: $light-primary-text, 600: white,
700: $light-primary-text, 700: white,
800: $light-primary-text, 800: white,
900: $light-primary-text, 900: white,
A100: $dark-primary-text, A100: rgba(black, 0.87),
A200: $dark-primary-text, A200: rgba(black, 0.87),
A400: $dark-primary-text, A400: rgba(black, 0.87),
A700: $dark-primary-text, A700: rgba(black, 0.87),
) )
); );
$tb-dark-primary: mat-palette($tb-dark-mat-indigo); $tb-dark-primary: mat.define-palette($tb-dark-mat-indigo);
$tb-dark-theme-background: ( $tb-dark-theme-background: (
status-bar: black, status-bar: black,
@ -119,22 +119,22 @@ $tb-dark-theme-background: (
dialog: map_get($tb-dark-mat-indigo, 800), dialog: map_get($tb-dark-mat-indigo, 800),
disabled-button: rgba(white, 0.12), disabled-button: rgba(white, 0.12),
raised-button: map-get($tb-dark-mat-indigo, 50), raised-button: map-get($tb-dark-mat-indigo, 50),
focused-button: $light-focused, focused-button: rgba(white, 0.12),
selected-button: map_get($tb-dark-mat-indigo, 900), selected-button: map_get($tb-dark-mat-indigo, 900),
selected-disabled-button: map_get($tb-dark-mat-indigo, 800), selected-disabled-button: map_get($tb-dark-mat-indigo, 800),
disabled-button-toggle: black, disabled-button-toggle: black,
unselected-chip: map_get($tb-dark-mat-indigo, 700), unselected-chip: map_get($tb-dark-mat-indigo, 700),
disabled-list-option: black, disabled-list-option: black,
tooltip: map_get($mat-grey, 700), tooltip: map_get(mat.$grey-palette, 700),
); );
@function get-tb-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) { @function get-tb-dark-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
@return ( @return (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
warn: $warn, warn: $warn,
is-dark: true, is-dark: true,
foreground: $mat-dark-theme-foreground, foreground: mat.$dark-theme-foreground-palette,
background: $tb-dark-theme-background, background: $tb-dark-theme-background,
); );
} }
@ -153,8 +153,8 @@ $tb-dark-theme: get-tb-dark-theme(
mat-fab-toolbar { mat-fab-toolbar {
.mat-fab-toolbar-background { .mat-fab-toolbar-background {
background: mat-color($background, app-bar); background: mat.get-color-from-palette($background, app-bar);
color: mat-color($foreground, text); color: mat.get-color-from-palette($foreground, text);
} }
&.mat-primary { &.mat-primary {
.mat-fab-toolbar-background { .mat-fab-toolbar-background {
@ -175,8 +175,8 @@ $tb-dark-theme: get-tb-dark-theme(
} }
@mixin _mat-toolbar-inverse-color($palette) { @mixin _mat-toolbar-inverse-color($palette) {
background: mat-color($palette, default-contrast); background: mat.get-color-from-palette($palette, default-contrast);
color: $dark-primary-text; color: rgba(black, 0.87);
} }
@mixin mat-fab-toolbar-inverse-theme($theme) { @mixin mat-fab-toolbar-inverse-theme($theme) {
@ -188,8 +188,8 @@ $tb-dark-theme: get-tb-dark-theme(
mat-fab-toolbar { mat-fab-toolbar {
.mat-fab-toolbar-background { .mat-fab-toolbar-background {
background: mat-color($background, app-bar); background: mat.get-color-from-palette($background, app-bar);
color: mat-color($foreground, text); color: mat.get-color-from-palette($foreground, text);
} }
&.mat-primary { &.mat-primary {
.mat-fab-toolbar-background { .mat-fab-toolbar-background {
@ -201,15 +201,15 @@ $tb-dark-theme: get-tb-dark-theme(
@include _mat-toolbar-inverse-color($primary); @include _mat-toolbar-inverse-color($primary);
button.mat-icon-button { button.mat-icon-button {
mat-icon { mat-icon {
color: mat-color($primary); color: mat.get-color-from-palette($primary);
} }
} }
} }
} }
.mat-fab { .mat-fab {
&.mat-primary { &.mat-primary {
background: mat-color($primary, default-contrast); background: mat.get-color-from-palette($primary, default-contrast);
color: mat-color($primary); color: mat.get-color-from-palette($primary);
} }
} }
} }
@ -221,7 +221,7 @@ $tb-dark-theme: get-tb-dark-theme(
mat-toolbar{ mat-toolbar{
&.mat-hue-3 { &.mat-hue-3 {
background-color: mat-color($primary, 'A100'); background-color: mat.get-color-from-palette($primary, 'A100');
} }
} }
@ -233,12 +233,12 @@ $tb-dark-theme: get-tb-dark-theme(
} }
.tb-default { .tb-default {
@include angular-material-theme($tb-theme); @include mat.all-component-themes($tb-theme);
@include mat-datetimepicker-theme($tb-theme); @include mat-datetimepicker-theme($tb-theme);
@include tb-components-theme($tb-theme); @include tb-components-theme($tb-theme);
} }
.tb-dark { .tb-dark {
@include angular-material-theme($tb-dark-theme); @include mat.all-component-themes($tb-dark-theme);
} }

20
ui-ngx/yarn.lock
View File

@ -271,12 +271,12 @@
dependencies: dependencies:
tslib "^2.2.0" tslib "^2.2.0"
"@angular/cdk@^11.2.13": "@angular/cdk@^12.2.13":
version "11.2.13" version "12.2.13"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-11.2.13.tgz#d54c9187e3b8cf3f8ba190b1edddc08ed2b740de" resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-12.2.13.tgz#1fdbe814adfd6b4ff906c6d9c4c6df07b83f09d8"
integrity sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug== integrity sha512-zSKRhECyFqhingIeyRInIyTvYErt4gWo+x5DQr0b7YLUbU8DZSwWnG4w76Ke2s4U8T7ry1jpJBHoX/e8YBpGMg==
dependencies: dependencies:
tslib "^2.0.0" tslib "^2.2.0"
optionalDependencies: optionalDependencies:
parse5 "^5.0.0" parse5 "^5.0.0"
@ -375,12 +375,12 @@
resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-12.2.13.tgz#326045a328f8a962287037d7a85be8120074421c" resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-12.2.13.tgz#326045a328f8a962287037d7a85be8120074421c"
integrity sha512-jb9s3IJuWNKTRcM90NOwvMfiy85nnKfTxxLVn8/QFMO6+Ps/hsVZNp+W/TmAEDvCkon+9q0O4hwa4MY1m/Dlkw== integrity sha512-jb9s3IJuWNKTRcM90NOwvMfiy85nnKfTxxLVn8/QFMO6+Ps/hsVZNp+W/TmAEDvCkon+9q0O4hwa4MY1m/Dlkw==
"@angular/material@^11.2.13": "@angular/material@^12.2.13":
version "11.2.13" version "12.2.13"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-11.2.13.tgz#99960316d3ce58aac7497d7bb8b0c05468f502b9" resolved "https://registry.yarnpkg.com/@angular/material/-/material-12.2.13.tgz#7f92f95002a2abaa8bb115ca8f0809bdc3f7d3fc"
integrity sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg== integrity sha512-6g2GyN4qp2D+DqY2AwrQuPB3cd9gybvQVXvNRbTPXEulHr+LgGei00ySdFHFp6RvdGSMZ4i3LM1Fq3VkFxhCfQ==
dependencies: dependencies:
tslib "^2.0.0" tslib "^2.2.0"
"@angular/platform-browser-dynamic@^12.2.13": "@angular/platform-browser-dynamic@^12.2.13":
version "12.2.13" version "12.2.13"

Write Preview
Loading…
Cancel
Save