dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Datepicker theme fix

Browse Source
This commit is contained in:
Igor Kulikov 2023-03-02 16:06:15 +02:00
parent 52544487b7
commit c9141b35d2
4 changed files with 77 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/package.json
View File

@ -32,7 +32,7 @@
"@flowjs/ngx-flow": "~0.6.0",
"@geoman-io/leaflet-geoman-free": "^2.13.0",
"@juggle/resize-observer": "^3.3.1",
"@mat-datetimepicker/core": "~11.0.2",
"@mat-datetimepicker/core": "~11.0.3",
"@material-ui/core": "4.12.3",
"@material-ui/icons": "4.11.2",
"@material-ui/pickers": "3.3.10",

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

@ -14,7 +14,7 @@
* limitations under the License.
*/
@use '@angular/material' as mat;
@import '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
@import '../theme/datepicker-theme';
@import './scss/constants';
@include mat.all-component-typographies();

70
ui-ngx/src/theme/datepicker-theme.scss Normal file
View File

@ -0,0 +1,70 @@
/**
* Copyright © 2016-2023 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use '@angular/material' as mat;
$mat-datetimepicker-selected-today-box-shadow-width: 1px;
@mixin mat-datetimepicker-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary);
$primary-contrast: mat.get-color-from-palette($primary, default-contrast);
.mat-datetimepicker-calendar-header {
background-color: $primary-color;
color: $primary-contrast;
}
.mat-datetimepicker-calendar-body-cell-content {
&.mat-datetimepicker-calendar-body-selected {
background-color: $primary-color;
color: $primary-contrast;
}
&.mat-datetimepicker-calendar-body-disabled > .mat-datetimepicker-calendar-body-selected {
background-color: rgba($primary-color, 0.4);
}
&.mat-datetimepicker-calendar-body-today {
&:not(.mat-datetimepicker-calendar-body-selected) {
border-color: $primary-color;
}
&.mat-datetimepicker-calendar-body-selected {
box-shadow: inset 0 0 0 $mat-datetimepicker-selected-today-box-shadow-width $primary-contrast;
}
}
}
.mat-datetimepicker-clock-center {
background-color: $primary-color;
}
.mat-datetimepicker-clock-hand {
background-color: $primary-color;
&::before {
background-color: $primary-color;
}
}
.mat-datetimepicker-clock-cell {
&.mat-datetimepicker-clock-cell-selected {
background-color: unquote("hsl(from #{$primary-color} h s calc(l + 5%))");
}
}
}

8
ui-ngx/yarn.lock
View File

@ -1830,10 +1830,10 @@
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
"@mat-datetimepicker/core@~11.0.2":
version "11.0.2"
resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-11.0.2.tgz#d89cf5f60a95567ca6e193fcc16a60e91172abdb"
integrity sha512-qZeiDWjSQ8OmjrQ7hDR3ynYHAFCTFHViNr38RaemNpfvTWvnYD+rRfD5/dWDo0VqLzkJjpQe0oFXgMkHqDFgzg==
"@mat-datetimepicker/core@~11.0.3":
version "11.0.3"
resolved "https://registry.yarnpkg.com/@mat-datetimepicker/core/-/core-11.0.3.tgz#8a3958a603d1d2ed8ddc443f0b10e89f1b8d16d6"
integrity sha512-1M9sPoB3TfRb8hREDnv5R6uTi0iMlaY6oskxew0a+HVNTzZOBhwWWdKnlect8u+pXCmRBZI0QdMwx8nazeBdnA==
dependencies:
tslib "^2.4.0"