From 1d3a9a25b3161dc2161060b5475a8974b6599c4b Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 6 Jul 2023 12:43:15 +0300 Subject: [PATCH] UI: Introduce form styles. --- ui-ngx/angular.json | 1 + .../alarm/alarm-filter-config.component.html | 12 +- .../alarms-table-basic-config.component.html | 18 +- ...entities-table-basic-config.component.html | 14 +- .../simple-card-basic-config.component.html | 18 +- ...meseries-table-basic-config.component.html | 14 +- .../chart/flot-basic-config.component.html | 24 +- .../common/data-keys-panel.component.html | 4 +- .../widget-actions-panel.component.html | 4 +- .../config/data-key-config.component.html | 12 +- .../widget/config/datasources.component.html | 6 +- .../timewindow-config-panel.component.html | 6 +- .../alarms-table-key-settings.component.html | 16 +- ...larms-table-widget-settings.component.html | 32 +-- ...entities-table-key-settings.component.html | 16 +- ...ities-table-widget-settings.component.html | 34 +-- ...simple-card-widget-settings.component.html | 6 +- ...meseries-table-key-settings.component.html | 12 +- ...s-table-latest-key-settings.component.html | 14 +- ...eries-table-widget-settings.component.html | 22 +- .../chart/flot-key-settings.component.html | 52 ++-- .../flot-latest-key-settings.component.html | 8 +- .../chart/flot-threshold.component.html | 2 +- .../chart/flot-widget-settings.component.html | 104 +++---- .../common/legend-config.component.html | 6 +- .../common/value-source.component.html | 6 +- .../widget/widget-config.component.html | 68 ++--- ui-ngx/src/form.scss | 264 ++++++++++++++++++ ui-ngx/src/styles.scss | 252 ----------------- 29 files changed, 530 insertions(+), 517 deletions(-) create mode 100644 ui-ngx/src/form.scss diff --git a/ui-ngx/angular.json b/ui-ngx/angular.json index 86058d45ca..92981aa90f 100644 --- a/ui-ngx/angular.json +++ b/ui-ngx/angular.json @@ -82,6 +82,7 @@ ], "styles": [ "src/styles.scss", + "src/form.scss", "node_modules/jquery.terminal/css/jquery.terminal.min.css", "node_modules/tooltipster/dist/css/tooltipster.bundle.min.css", "node_modules/tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css", diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html index 7502ea7791..c5ed4fe52a 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-filter-config.component.html @@ -55,8 +55,8 @@ -
-
+
+
alarm.alarm-status-list
@@ -64,7 +64,7 @@
-
+
alarm.alarm-severity-list
@@ -72,9 +72,9 @@
-
+
alarm.alarm-type-list
- + @@ -89,7 +89,7 @@
-
+
alarm.assignee
-
+
-
alarm.filter
+
alarm.filter
-
-
widgets.chart.comparison-settings
+
+
widgets.chart.comparison-settings
@@ -229,13 +229,13 @@ -
+
widgets.chart.comparison-values-label
-
+
{{ 'widgets.chart.comparison-line-color' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html index bd5d69a594..cdff37f492 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html @@ -16,8 +16,8 @@ --> -
-
widgets.chart.threshold-settings
+
+
widgets.chart.threshold-settings
@@ -29,14 +29,14 @@ -
+
widgets.chart.threshold-line-width
px
-
+
{{ 'widgets.chart.threshold-color' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html index 0aec3e0084..6f08b5f3f7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html @@ -29,7 +29,7 @@ -
+
widgets.chart.line-width
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html index e74126f309..defc26856a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html @@ -16,8 +16,8 @@ --> -
-
widgets.chart.common-settings
+
+
widgets.chart.common-settings
{{ 'widgets.chart.enable-stacking-mode' | translate }} @@ -27,19 +27,19 @@ {{ 'widgets.chart.display-smooth-lines' | translate }} -
+
widgets.chart.line-shadow-size
-
+
widgets.chart.default-bar-width
-
+
{{ 'widgets.chart.bar-alignment' | translate }}
@@ -55,13 +55,13 @@
-
+
widgets.chart.thresholds-line-width
-
+
{{ 'widgets.chart.default-font' | translate }}
@@ -75,8 +75,8 @@
-
-
widget-config.legend
+
+
widget-config.legend
@@ -95,30 +95,30 @@
-
-
widgets.chart.axis
-
-
widgets.chart.vertical-axis
-
+
+
widgets.chart.axis
+
+
widgets.chart.vertical-axis
+
widgets.chart.axis-title
-
+
widgets.chart.min-scale-value
-
+
widgets.chart.max-scale-value
-
-
widgets.chart.ticks
+
+
widgets.chart.ticks
@@ -132,7 +132,7 @@ -
+
{{ 'widget-config.color' | translate }}
@@ -141,13 +141,13 @@
-
+
widget-config.decimals-short
-
+
widgets.chart.tick-step-size
@@ -164,16 +164,16 @@
-
-
widgets.chart.horizontal-axis
-
+
+
widgets.chart.horizontal-axis
+
widgets.chart.axis-title
-
-
widgets.chart.ticks
+
+
widgets.chart.ticks
@@ -187,7 +187,7 @@ -
+
{{ 'widget-config.color' | translate }}
@@ -201,19 +201,19 @@
-
-
widgets.chart.chart-background
-
+
+
widgets.chart.chart-background
+
{{ 'widgets.chart.vertical-grid-lines' | translate }}
-
+
{{ 'widgets.chart.horizontal-grid-lines' | translate }}
-
+
{{ 'widgets.chart.grid-lines-color' | translate }}
@@ -222,7 +222,7 @@
-
+
{{ 'widgets.chart.border' | translate }}
@@ -235,7 +235,7 @@
-
+
{{ 'widgets.chart.background-color' | translate }}
@@ -245,8 +245,8 @@
-
-
widgets.chart.tooltip
+
+
widgets.chart.tooltip
@@ -260,17 +260,17 @@ -
+
{{ 'widgets.chart.hover-individual-points' | translate }}
-
+
{{ 'widgets.chart.show-cumulative-values' | translate }}
-
+
{{ 'widgets.chart.hide-zero-false-values' | translate }} @@ -285,8 +285,8 @@
-
-
widgets.chart.comparison-settings
+
+
widgets.chart.comparison-settings
@@ -300,7 +300,7 @@ -
+
{{ 'widgets.chart.time-for-comparison' | translate }}
@@ -325,26 +325,26 @@
-
+
widgets.chart.custom-interval-value
-
-
widgets.chart.comparison-x-axis-settings
-
+
+
widgets.chart.comparison-x-axis-settings
+
widgets.chart.axis-title
-
+
{{ 'widgets.chart.show-tick-labels' | translate }}
-
+
{{ 'widgets.chart.axis-position' | translate }}
@@ -361,8 +361,8 @@
-
-
widgets.chart.custom-legend-settings
+
+
widgets.chart.custom-legend-settings
@@ -376,8 +376,8 @@ -
-
widgets.chart.label-keys-list
+
+
widgets.chart.label-keys-list
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html index 70663fbad6..10bfa058da 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/legend-config.component.html @@ -16,7 +16,7 @@ --> -
+
{{ 'legend.direction' | translate }}
@@ -26,7 +26,7 @@
-
+
{{ 'legend.position' | translate }}
@@ -38,7 +38,7 @@
-
+
legend.show-values
{{ 'legend.min-option' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html index 460ced4950..3cc771e94f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html @@ -26,13 +26,13 @@
-
+
widgets.value-source.value
-
+
widgets.value-source.source-entity-alias
-
+
widgets.value-source.source-entity-attribute
-
-
widget-config.card-title
+
+
widget-config.card-title
{{ 'widget-config.display-title' | translate }} -
+
widget-config.title
-
+
widget-config.title-tooltip
-
+
{{ 'widget-config.display-icon' | translate }} @@ -82,9 +82,9 @@
-
-
widget-config.card-style
-
+
+
widget-config.card-style
+
{{ 'widget-config.text-color' | translate }}
@@ -93,7 +93,7 @@
-
+
{{ 'widget-config.background-color' | translate }}
@@ -102,19 +102,19 @@
-
+
{{ 'widget-config.padding' | translate }}
-
+
{{ 'widget-config.margin' | translate }}
-
+
{{ 'widget-config.border-radius' | translate }}
@@ -142,15 +142,15 @@
-
-
widget-config.card-buttons
+
+
widget-config.card-buttons
{{ 'widget-config.enable-fullscreen' | translate }}
-
+
-
+
{{ 'widget-config.mobile-hide' | translate }}
-
+
{{ 'widget-config.desktop-hide' | translate }}
-
-
+
+
widget-config.order
-
+
widget-config.height
@@ -212,9 +212,9 @@ formControlName="timewindowConfig"> -
+
-
alarm.filter
+
alarm.filter
-
-
widget-config.target-device
+
widget-config.target-device
-
widget-config.alarm-source
+ [formGroup]="dataSettings" class="tb-form-panel" > +
widget-config.alarm-source
-
-
widget-config.limits
-
+
+
widget-config.limits
+
widget-config.data-page-size
@@ -263,21 +263,21 @@
-
-
widget-config.data-settings
-
+
+
widget-config.data-settings
+
widget-config.units
-
+
widget-config.decimals
-
+
widget-config.no-data-display-message
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss new file mode 100644 index 0000000000..0d66e09def --- /dev/null +++ b/ui-ngx/src/form.scss @@ -0,0 +1,264 @@ +/** + * 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. + */ +.tb-default, .tb-dark { + .tb-form-panel { + box-shadow: 0 0 10px 6px rgba(11, 17, 51, 0.04); + border-radius: 4px; + padding: 16px; + gap: 16px; + display: flex; + flex-direction: column; + color: rgba(0, 0, 0, 0.87); + letter-spacing: 0.15px; + position: relative; + &.no-padding-bottom { + padding-bottom: 0; + } + &.no-padding { + padding: 0; + } + &.stroked { + box-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; + } + &.no-border { + box-shadow: none; + border-radius: 0; + } + &.tb-slide-toggle { + padding: 0; + gap: 0; + > .tb-form-panel-title { + padding-top: 16px; + padding-left: 16px; + } + > .mat-expansion-panel { + padding: 16px; + .mat-expansion-panel-header { + height: 32px; + .mat-slide { + margin: 0; + } + } + } + } + .mat-expansion-panel { + &.tb-settings { + box-shadow: none; + .mat-content { + overflow: visible; + } + > .mat-expansion-panel-header { + font-weight: 500; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.25px; + padding: 0; + .mat-content { + flex: 0; + white-space: nowrap; + } + &.fill-width { + .mat-content { + flex: 1; + } + } + &:hover { + background: none; + } + .mat-expansion-indicator { + height: 32px; + padding: 2px; + } + } + > .mat-expansion-panel-header-description { + align-items: center; + } + > .mat-expansion-panel-content { + > .mat-expansion-panel-body { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px 0 0 !important; + } + } + .tb-json-object-panel, .tb-css-content-panel { + margin: 0 0 8px; + } + } + .mat-expansion-panel-content { + font: inherit; + } + } + .mat-slide { + margin: 0; + &.margin { + margin: 8px 0; + } + .mdc-form-field>label { + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-left: 12px; + } + } + } + + .tb-form-panel-title { + font-weight: 500; + font-size: 16px; + } + .tb-form-panel-hint { + font-size: 12px; + color: #808080; + } + .tb-form-row { + height: 100%; + padding-top: 7px; + padding-bottom: 7px; + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; + padding-left: 16px; + padding-right: 12px; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; + &.same-padding { + padding-right: 16px; + } + &.space-between { + justify-content: space-between; + } + .mat-divider-vertical { + height: 56px; + margin-top: -7px; + margin-bottom: -7px; + } + .mat-mdc-form-field { + width: 106px; + &.medium-width { + width: 220px; + } + } + .fixed-title-width { + min-width: 200px; + } + .mat-slide:only-child { + margin: 8px 0; + } + } + + .tb-form-row .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field { + &.mat-form-field-appearance-fill { + .mdc-text-field--filled:not(.mdc-text-field--disabled) { + &:before { + opacity: 0; + } + .mdc-line-ripple::before { + border-bottom-color: rgba(0, 0, 0, 0.12); + } + } + .mat-mdc-form-field-focus-overlay { + opacity: 0; + } + } + .mat-mdc-text-field-wrapper { + &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) { + padding-right: 12px; + padding-left: 12px; + &:not(.mdc-text-field--focused):not(.mdc-text-field--disabled):not(:hover) { + .mdc-notched-outline__leading, .mdc-notched-outline__trailing { + border-color: rgba(0, 0, 0, 0.12); + } + } + .mat-mdc-form-field-infix { + padding-top: 8px; + padding-bottom: 8px; + min-height: 40px; + width: auto; + .mdc-text-field__input, .mat-mdc-select { + font-weight: 400; + font-size: 14px; + line-height: 20px; + } + } + .mat-mdc-form-field-icon-suffix { + height: 40px; + font-size: 14px; + line-height: 40px; + letter-spacing: 0.2px; + color: rgba(0, 0, 0, 0.38); + > button.mat-mdc-icon-button { + width: 40px; + height: 40px; + padding: 8px; + .mat-icon { + width: 20px; + height: 20px; + font-size: 20px; + } + } + > .mat-icon { + width: 20px; + height: 20px; + padding: 10px; + font-size: 20px; + } + } + } + } + &.center { + .mat-mdc-text-field-wrapper { + .mat-mdc-form-field-infix { + .mdc-text-field__input { + text-align: center; + } + } + } + } + &.number { + .mat-mdc-text-field-wrapper { + padding-right: 4px; + .mat-mdc-form-field-infix { + input.mdc-text-field__input[type=number]::-webkit-inner-spin-button, + input.mdc-text-field__input[type=number]::-webkit-outer-spin-button { + opacity: 1; + } + } + } + } + &.tb-chips { + .mat-mdc-text-field-wrapper { + &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) { + .mat-mdc-form-field-infix { + padding-top: 4px; + padding-bottom: 4px; + + .mdc-evolution-chip-set { + min-height: 32px; + + .mdc-evolution-chip { + height: 24px; + } + } + } + } + } + } + } +} diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index 0f1a64aa97..127d60e3e5 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -1186,256 +1186,4 @@ mat-label { color: inherit; } - // Widget config - - .tb-widget-config-panel { - box-shadow: 0 0 10px 6px rgba(11, 17, 51, 0.04); - border-radius: 4px; - padding: 16px; - gap: 16px; - display: flex; - flex-direction: column; - color: rgba(0, 0, 0, 0.87); - letter-spacing: 0.15px; - position: relative; - &.no-padding-bottom { - padding-bottom: 0; - } - &.no-padding { - padding: 0; - } - &.stroked { - box-shadow: none; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 6px; - } - &.no-border { - box-shadow: none; - border-radius: 0; - } - &.tb-slide-toggle { - padding: 0; - gap: 0; - > .tb-widget-config-panel-title { - padding-top: 16px; - padding-left: 16px; - } - > .mat-expansion-panel { - padding: 16px; - .mat-expansion-panel-header { - height: 32px; - .mat-slide { - margin: 0; - } - } - } - } - .mat-expansion-panel { - &.tb-settings { - box-shadow: none; - .mat-content { - overflow: visible; - } - > .mat-expansion-panel-header { - font-weight: 500; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.25px; - padding: 0; - .mat-content { - flex: 0; - white-space: nowrap; - } - &.fill-width { - .mat-content { - flex: 1; - } - } - &:hover { - background: none; - } - .mat-expansion-indicator { - height: 32px; - padding: 2px; - } - } - > .mat-expansion-panel-header-description { - align-items: center; - } - > .mat-expansion-panel-content { - > .mat-expansion-panel-body { - display: flex; - flex-direction: column; - gap: 16px; - padding: 16px 0 0 !important; - } - } - .tb-json-object-panel, .tb-css-content-panel { - margin: 0 0 8px; - } - } - .mat-expansion-panel-content { - font: inherit; - } - } - .mat-slide { - margin: 0; - &.margin { - margin: 8px 0; - } - .mdc-form-field>label { - font-weight: 400; - font-size: 16px; - line-height: 24px; - margin-left: 12px; - } - } - } - - .tb-widget-config-panel-title { - font-weight: 500; - font-size: 16px; - } - .tb-widget-config-panel-hint { - font-size: 12px; - color: #808080; - } - .tb-widget-config-row { - height: 100%; - padding-top: 7px; - padding-bottom: 7px; - display: flex; - flex-direction: row; - align-items: center; - gap: 16px; - padding-left: 16px; - padding-right: 12px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 6px; - &.same-padding { - padding-right: 16px; - } - &.space-between { - justify-content: space-between; - } - .mat-divider-vertical { - height: 56px; - margin-top: -7px; - margin-bottom: -7px; - } - .mat-mdc-form-field { - width: 106px; - &.medium-width { - width: 220px; - } - } - .fixed-title-width { - min-width: 200px; - } - .mat-slide:only-child { - margin: 8px 0; - } - &.tb-chips { - .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field { - .mat-mdc-text-field-wrapper { - &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) { - .mat-mdc-form-field-infix { - padding-top: 4px; - padding-bottom: 4px; - - .mdc-evolution-chip-set { - min-height: 32px; - - .mdc-evolution-chip { - height: 24px; - } - } - } - } - } - } - } - } - - .tb-widget-config-row .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field { - &.mat-form-field-appearance-fill { - .mdc-text-field--filled:not(.mdc-text-field--disabled) { - &:before { - opacity: 0; - } - .mdc-line-ripple::before { - border-bottom-color: rgba(0, 0, 0, 0.12); - } - } - .mat-mdc-form-field-focus-overlay { - opacity: 0; - } - } - .mat-mdc-text-field-wrapper { - &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) { - padding-right: 12px; - padding-left: 12px; - &:not(.mdc-text-field--focused):not(.mdc-text-field--disabled):not(:hover) { - .mdc-notched-outline__leading, .mdc-notched-outline__trailing { - border-color: rgba(0, 0, 0, 0.12); - } - } - .mat-mdc-form-field-infix { - padding-top: 8px; - padding-bottom: 8px; - min-height: 40px; - width: auto; - .mdc-text-field__input, .mat-mdc-select { - font-weight: 400; - font-size: 14px; - line-height: 20px; - } - } - .mat-mdc-form-field-icon-suffix { - height: 40px; - font-size: 14px; - line-height: 40px; - letter-spacing: 0.2px; - color: rgba(0, 0, 0, 0.38); - > button.mat-mdc-icon-button { - width: 40px; - height: 40px; - padding: 8px; - .mat-icon { - width: 20px; - height: 20px; - font-size: 20px; - } - } - > .mat-icon { - width: 20px; - height: 20px; - padding: 10px; - font-size: 20px; - } - } - } - } - &.center { - .mat-mdc-text-field-wrapper { - .mat-mdc-form-field-infix { - .mdc-text-field__input { - text-align: center; - } - } - } - } - &.number { - .mat-mdc-text-field-wrapper { - padding-right: 4px; - .mat-mdc-form-field-infix { - input.mdc-text-field__input[type=number]::-webkit-inner-spin-button, - input.mdc-text-field__input[type=number]::-webkit-outer-spin-button { - opacity: 1; - } - } - } - } - } - }