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
Split 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,
"dependencies": {
"@angular/animations": "^12.2.13",
"@angular/cdk": "^11.2.13",
"@angular/cdk": "^12.2.13",
"@angular/common": "^12.2.13",
"@angular/compiler": "^12.2.13",
"@angular/core": "^12.2.13",
"@angular/flex-layout": "^12.0.0-beta.35",
"@angular/forms": "^12.2.13",
"@angular/material": "^11.2.13",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "^12.2.13",
"@angular/platform-browser-dynamic": "^12.2.13",
"@angular/router": "^12.2.13",
@ -148,4 +148,4 @@
"resolutions": {
"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
* limitations under the License.
*/
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
@import './scss/constants';
@include mat-core();
@include mat.core();
$tb-primary-color: #305680;
$tb-secondary-color: #527dad;
@ -41,39 +41,39 @@ $tb-mat-indigo: (
A400: #3d5afe,
A700: #304ffe,
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,
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: rgba(black, 0.87),
A200: white,
A400: white,
A700: white,
)
);
$tb-primary: mat-palette($tb-mat-indigo);
$tb-accent: mat-palette($mat-deep-orange);
$tb-primary: mat.define-palette($tb-mat-indigo);
$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-accent
);
$tb-theme: map_merge($tb-mat-theme, (background: $tb-theme-background));
$primary: mat-color($tb-primary);
$accent: mat-color($tb-accent);
$primary: mat.get-color-from-palette($tb-primary);
$accent: mat.get-color-from-palette($tb-accent);
$tb-dark-mat-indigo: (
50: #e8eaf6,
@ -91,24 +91,24 @@ $tb-dark-mat-indigo: (
A400: #3d5afe,
A700: #304ffe,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
300: rgba(black, 0.87),
400: rgba(black, 0.87),
500: map_get($tb-mat-indigo, 900),
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $dark-primary-text,
600: white,
700: white,
800: white,
900: white,
A100: rgba(black, 0.87),
A200: rgba(black, 0.87),
A400: rgba(black, 0.87),
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: (
status-bar: black,
@ -119,22 +119,22 @@ $tb-dark-theme-background: (
dialog: map_get($tb-dark-mat-indigo, 800),
disabled-button: rgba(white, 0.12),
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-disabled-button: map_get($tb-dark-mat-indigo, 800),
disabled-button-toggle: black,
unselected-chip: map_get($tb-dark-mat-indigo, 700),
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 (
primary: $primary,
accent: $accent,
warn: $warn,
is-dark: true,
foreground: $mat-dark-theme-foreground,
foreground: mat.$dark-theme-foreground-palette,
background: $tb-dark-theme-background,
);
}
@ -153,8 +153,8 @@ $tb-dark-theme: get-tb-dark-theme(
mat-fab-toolbar {
.mat-fab-toolbar-background {
background: mat-color($background, app-bar);
color: mat-color($foreground, text);
background: mat.get-color-from-palette($background, app-bar);
color: mat.get-color-from-palette($foreground, text);
}
&.mat-primary {
.mat-fab-toolbar-background {
@ -175,8 +175,8 @@ $tb-dark-theme: get-tb-dark-theme(
}
@mixin _mat-toolbar-inverse-color($palette) {
background: mat-color($palette, default-contrast);
color: $dark-primary-text;
background: mat.get-color-from-palette($palette, default-contrast);
color: rgba(black, 0.87);
}
@mixin mat-fab-toolbar-inverse-theme($theme) {
@ -188,8 +188,8 @@ $tb-dark-theme: get-tb-dark-theme(
mat-fab-toolbar {
.mat-fab-toolbar-background {
background: mat-color($background, app-bar);
color: mat-color($foreground, text);
background: mat.get-color-from-palette($background, app-bar);
color: mat.get-color-from-palette($foreground, text);
}
&.mat-primary {
.mat-fab-toolbar-background {
@ -201,15 +201,15 @@ $tb-dark-theme: get-tb-dark-theme(
@include _mat-toolbar-inverse-color($primary);
button.mat-icon-button {
mat-icon {
color: mat-color($primary);
color: mat.get-color-from-palette($primary);
}
}
}
}
.mat-fab {
&.mat-primary {
background: mat-color($primary, default-contrast);
color: mat-color($primary);
background: mat.get-color-from-palette($primary, default-contrast);
color: mat.get-color-from-palette($primary);
}
}
}
@ -221,7 +221,7 @@ $tb-dark-theme: get-tb-dark-theme(
mat-toolbar{
&.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 {
@include angular-material-theme($tb-theme);
@include mat.all-component-themes($tb-theme);
@include mat-datetimepicker-theme($tb-theme);
@include tb-components-theme($tb-theme);
}
.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:
tslib "^2.2.0"
"@angular/cdk@^11.2.13":
version "11.2.13"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-11.2.13.tgz#d54c9187e3b8cf3f8ba190b1edddc08ed2b740de"
integrity sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==
"@angular/cdk@^12.2.13":
version "12.2.13"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-12.2.13.tgz#1fdbe814adfd6b4ff906c6d9c4c6df07b83f09d8"
integrity sha512-zSKRhECyFqhingIeyRInIyTvYErt4gWo+x5DQr0b7YLUbU8DZSwWnG4w76Ke2s4U8T7ry1jpJBHoX/e8YBpGMg==
dependencies:
tslib "^2.0.0"
tslib "^2.2.0"
optionalDependencies:
parse5 "^5.0.0"
@ -375,12 +375,12 @@
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==
"@angular/material@^11.2.13":
version "11.2.13"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-11.2.13.tgz#99960316d3ce58aac7497d7bb8b0c05468f502b9"
integrity sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==
"@angular/material@^12.2.13":
version "12.2.13"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-12.2.13.tgz#7f92f95002a2abaa8bb115ca8f0809bdc3f7d3fc"
integrity sha512-6g2GyN4qp2D+DqY2AwrQuPB3cd9gybvQVXvNRbTPXEulHr+LgGei00ySdFHFp6RvdGSMZ4i3LM1Fq3VkFxhCfQ==
dependencies:
tslib "^2.0.0"
tslib "^2.2.0"
"@angular/platform-browser-dynamic@^12.2.13":
version "12.2.13"

Write Preview
Loading…
Cancel
Save