From 1422558ac68b1ffcd9ebcf18254ae699941d4d93 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 16 Aug 2023 17:41:05 +0300 Subject: [PATCH] UI: Improve aggregated value card widget. Improve data key aggregation config form. --- .../aggregated-data-key-row.component.html | 3 + .../aggregated-data-key-row.component.scss | 15 +-- .../aggregated-data-key-row.component.ts | 26 +++- .../aggregated-data-keys-panel.component.html | 1 + .../aggregated-data-keys-panel.component.scss | 13 +- ...ted-value-card-basic-config.component.html | 35 +++-- ...gated-value-card-basic-config.component.ts | 15 ++- .../config/data-key-config.component.html | 121 ++++++++++-------- .../widget/config/datasources.component.scss | 2 +- ...ggregated-value-card-widget.component.html | 4 +- .../aggregated-value-card-widget.component.ts | 26 ++-- .../lib/cards/aggregated-value-card.models.ts | 16 +-- .../pages/admin/mail-server.component.scss | 2 +- .../inbox/inbox-table-header.component.scss | 2 +- ...cipient-notification-dialog.component.scss | 1 - .../rule-notification-dialog.component.scss | 1 - .../sent-notification-dialog.component.scss | 1 - .../button/copy-button.component.scss | 2 +- .../color-picker/color-picker.component.ts | 10 +- .../components/material-icons.component.html | 12 +- .../components/material-icons.component.scss | 4 +- .../components/toggle-header.component.scss | 1 - .../shared/models/widget-settings.models.ts | 6 +- .../assets/locale/locale.constant-en_US.json | 1 + ui-ngx/src/form.scss | 48 +++++-- ui-ngx/src/scss/constants.scss | 7 + ui-ngx/src/theme.scss | 6 - 27 files changed, 234 insertions(+), 147 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html index 6616eb02f9..60e0ab43cc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html @@ -64,6 +64,9 @@ +
+ +
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss index 9280b98ff6..6ce4e5b9b5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.scss @@ -25,7 +25,7 @@ &.tb-aggregation-header { flex: 1; - min-width: 150px; + min-width: 120px; } &.tb-units-header { @@ -38,14 +38,13 @@ min-width: 60px; } - &.tb-font-header { - width: 40px; - min-width: 40px; - } - - &.tb-color-header { + &.tb-font-header, &.tb-color-header, &.tb-arrow-header { width: 40px; min-width: 40px; + display: none; + @media #{$mat-gt-xs} { + display: block; + } } &.tb-actions-header { diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html index 4c2742173b..8f0b79cca6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html @@ -29,7 +29,7 @@
widget-config.appearance
-
+
{{ 'widget-config.title' | translate }} @@ -48,7 +48,7 @@
-
+
{{ 'widgets.value-card.icon' | translate }} @@ -68,7 +68,7 @@
-
+
{{ 'widgets.aggregated-value-card.subtitle' | translate }} @@ -80,8 +80,10 @@ clearButton [previewText]="aggregatedValueCardWidgetConfigForm.get('subtitle').value"> - - + +
@@ -93,16 +95,27 @@ - - + +
-
- +
+ {{ 'widgets.aggregated-value-card.chart' | translate }} - - +
+ + + +
widget-config.decimals-suffix
+ + + +
- - datakey.aggregation - - - {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} - - - -
- {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }} -
- {{ 'datakey.aggregation-type-hint-common' | translate }} -
+
+
+
{{ 'datakey.aggregation' | translate }}
+ + + + {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} + + + +
+
+ {{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }} +
+ {{ 'datakey.aggregation-type-hint-common' | translate }} +
+
+ class="tb-form-panel">
datakey.delta-calculation
- +
+ - + {{ 'datakey.enable-delta-calculation' | translate }} - {{ 'datakey.enable-delta-calculation-hint' | translate }} + {{ 'datakey.enable-delta-calculation-hint' | translate }} -
- - widgets.chart.time-for-comparison - - - {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }} - - - {{ 'widgets.chart.time-for-comparison-days' | translate }} - - - {{ 'widgets.chart.time-for-comparison-weeks' | translate }} - - - {{ 'widgets.chart.time-for-comparison-months' | translate }} - - - {{ 'widgets.chart.time-for-comparison-years' | translate }} - - - {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }} - - - - - widgets.chart.custom-interval-value - - - - datakey.delta-calculation-result - - - {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }} - - - -
+ +
+
{{ 'widgets.chart.time-for-comparison' | translate }}
+ + + + {{ 'widgets.chart.time-for-comparison-previous-interval' | translate }} + + + {{ 'widgets.chart.time-for-comparison-days' | translate }} + + + {{ 'widgets.chart.time-for-comparison-weeks' | translate }} + + + {{ 'widgets.chart.time-for-comparison-months' | translate }} + + + {{ 'widgets.chart.time-for-comparison-years' | translate }} + + + {{ 'widgets.chart.time-for-comparison-custom-interval' | translate }} + + + +
+
+
{{ 'widgets.chart.custom-interval-value' | translate }}
+ + + +
+
+
{{ 'datakey.delta-calculation-result' | translate }}
+ + + + {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }} + + + +
+ +
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss index a42020611d..a173debf8c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/config/datasources.component.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import "../../../../../../theme"; +@import "../../../../../../scss/constants"; .tb-datasource-list-item { &.mat-mdc-list-item { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html index b20431fa64..edd0cda3b2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html @@ -28,7 +28,7 @@
{{ subtitle$ | async }}
+ [style]="subtitleStyle" [style.color]="subtitleColor">{{ subtitle$ | async }}
@@ -73,7 +73,7 @@
-
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts index fca9f31084..e5441b1629 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts @@ -36,9 +36,9 @@ import { WidgetContext } from '@home/models/widget-component.models'; import { Observable } from 'rxjs'; import { backgroundStyle, - ColorProcessor, ComponentStyle, - DateFormatProcessor, getDataKey, + DateFormatProcessor, + getDataKey, getLatestSingleTsValue, overlayStyle, textStyle @@ -47,7 +47,7 @@ import { DatePipe } from '@angular/common'; import { TbFlot } from '@home/components/widget/lib/flot-widget'; import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models'; import { DataKey } from '@shared/models/widget.models'; -import { formatNumberValue, formatValue, isDefined, isNumeric } from '@core/utils'; +import { formatNumberValue, formatValue, isDefined } from '@core/utils'; import { map } from 'rxjs/operators'; @Component({ @@ -72,19 +72,19 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit showSubtitle = true; subtitle$: Observable; subtitleStyle: ComponentStyle = {}; - subtitleColor: ColorProcessor; + subtitleColor: string; showValues = false; values: {[key: string]: AggregatedValueCardValue} = {}; showChart = true; - chartColor: ColorProcessor; + chartColor: string; showDate = true; dateFormat: DateFormatProcessor; dateStyle: ComponentStyle = {}; - dateColor: ColorProcessor; + dateColor: string; backgroundStyle: ComponentStyle = {}; overlayStyle: ComponentStyle = {}; @@ -108,7 +108,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit const subtitle = this.settings.subtitle; this.subtitle$ = this.ctx.registerLabelPattern(subtitle, this.subtitle$); this.subtitleStyle = textStyle(this.settings.subtitleFont, '0.25px'); - this.subtitleColor = ColorProcessor.fromSettings(this.settings.subtitleColor); + this.subtitleColor = this.settings.subtitleColor; const dataKey = getDataKey(this.ctx.defaultSubscription.datasources); if (dataKey?.name && this.ctx.defaultSubscription.firstDatasource?.latestDataKeys?.length) { @@ -123,7 +123,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit } this.showChart = this.settings.showChart; - this.chartColor = ColorProcessor.fromSettings(this.settings.chartColor); + this.chartColor = this.settings.chartColor; if (this.showChart) { if (this.ctx.defaultSubscription.firstDatasource?.dataKeys?.length) { this.flotDataKey = this.ctx.defaultSubscription.firstDatasource?.dataKeys[0]; @@ -132,14 +132,14 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit showLines: true, lineWidth: 2 } as TbFlotKeySettings; - this.flotDataKey.color = this.chartColor.color; + this.flotDataKey.color = this.chartColor; } } this.showDate = this.settings.showDate; this.dateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.dateFormat); this.dateStyle = textStyle(this.settings.dateFont, '0.25px'); - this.dateColor = ColorProcessor.fromSettings(this.settings.dateColor); + this.dateColor = this.settings.dateColor; this.backgroundStyle = backgroundStyle(this.settings.background); this.overlayStyle = overlayStyle(this.settings.background.overlay); @@ -188,17 +188,11 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit public onDataUpdated() { const tsValue = getLatestSingleTsValue(this.ctx.data); let ts; - let value; if (tsValue) { ts = tsValue[0]; - value = tsValue[1]; } - this.subtitleColor.update(value); - this.dateColor.update(value); if (this.showChart) { - this.chartColor.update(value); - this.flot.updateSeriesColor(this.chartColor.color); this.flot.update(); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts index 273ca1edaa..5306ad3988 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts @@ -24,7 +24,6 @@ import { constantColor, DateFormatSettings, Font, - iconStyle, lastUpdateAgoDateFormat, textStyle } from '@shared/models/widget-settings.models'; @@ -36,13 +35,13 @@ export interface AggregatedValueCardWidgetSettings { showSubtitle: boolean; subtitle: string; subtitleFont: Font; - subtitleColor: ColorSettings; + subtitleColor: string; showDate: boolean; dateFormat: DateFormatSettings; dateFont: Font; - dateColor: ColorSettings; + dateColor: string; showChart: boolean; - chartColor: ColorSettings; + chartColor: string; background: BackgroundSettings; } @@ -83,7 +82,8 @@ export interface AggregatedValueCardValue { downArrow: boolean; } -export const computeAggregatedCardValue = (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition): AggregatedValueCardValue => { +export const computeAggregatedCardValue = + (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition): AggregatedValueCardValue => { const key = dataKeys.find(dataKey => ( dataKey.name === keyName && (dataKey.settings?.position === position || (!dataKey.settings?.position && position === AggregatedValueCardKeyPosition.center)) )); if (key) { @@ -123,7 +123,7 @@ export const aggregatedValueCardDefaultSettings: AggregatedValueCardWidgetSettin weight: '400', lineHeight: '16px' }, - subtitleColor: constantColor('rgba(0, 0, 0, 0.38)'), + subtitleColor: 'rgba(0, 0, 0, 0.38)', showDate: true, dateFormat: lastUpdateAgoDateFormat(), dateFont: { @@ -134,9 +134,9 @@ export const aggregatedValueCardDefaultSettings: AggregatedValueCardWidgetSettin weight: '400', lineHeight: '16px' }, - dateColor: constantColor('rgba(0, 0, 0, 0.38)'), + dateColor: 'rgba(0, 0, 0, 0.38)', showChart: true, - chartColor: constantColor('rgba(0, 0, 0, 0.87)'), + chartColor: 'rgba(0, 0, 0, 0.87)', background: { type: BackgroundType.color, color: '#fff', diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss index cd6c18af9e..e8da0e042a 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss +++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import "../../../../../theme"; +@import "../../../../../scss/constants"; :host { .fields-group { diff --git a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss index 01519235aa..628a964d4d 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification/inbox/inbox-table-header.component.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import "../../../../../../theme"; +@import "../../../../../../scss/constants"; :host ::ng-deep { .mat-button-toggle-group.tb-notification-unread-toggle-group { diff --git a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss index 8406cae3fe..8dfc5db5d5 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-notification-dialog.component.scss @@ -14,7 +14,6 @@ * limitations under the License. */ @import "../../../../../../scss/constants"; -@import "../../../../../../theme"; :host { form.tb-dialog-container { diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss index 7e582d2b7d..8aae1a038f 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.scss @@ -13,7 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import "../../../../../../theme"; @import "../../../../../../scss/constants"; :host { diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss index 0702d6bf52..6459ac3b64 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss @@ -14,7 +14,6 @@ * limitations under the License. */ @import "../../../../../../scss/constants"; -@import "../../../../../../theme"; :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) { width: 820px; diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss index 0818466a38..e26f6978cb 100644 --- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss +++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import "../../../../theme"; +@import "../../../../scss/constants"; :host { .mini-button { diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts index 47a745819d..5990caa6ed 100644 --- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts +++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts @@ -18,6 +18,7 @@ import { Component, forwardRef, OnDestroy } from '@angular/core'; import { Color, ColorPickerControl } from '@iplab/ngx-color-picker'; import { Subscription } from 'rxjs'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms'; +import { isString } from '@core/utils'; export enum ColorType { hex = 'hex', @@ -87,8 +88,9 @@ export class ColorPickerComponent implements ControlValueAccessor, OnDestroy { } writeValue(value: string): void { - this.setValue = !!value; - this.control.setValueFrom(value || '#fff'); + const valid = this.isValidColorValue(value); + this.setValue = valid; + this.control.setValueFrom(valid ? value : '#fff'); this.modelValue = value; if (this.control.initType === ColorType.hexa) { @@ -101,6 +103,10 @@ export class ColorPickerComponent implements ControlValueAccessor, OnDestroy { this.presentationControl.patchValue(this.presentations.indexOf(this.control.initType), {emitEvent: false}); } + private isValidColorValue(value: string): boolean { + return value && isString(value) && value.trim().length > 0; + } + private updateModel() { const color: string = this.getValueByType(this.control.value, this.presentations[this.presentationControl.value]); if (this.modelValue !== color) { diff --git a/ui-ngx/src/app/shared/components/material-icons.component.html b/ui-ngx/src/app/shared/components/material-icons.component.html index 79476572f6..bbc50a9292 100644 --- a/ui-ngx/src/app/shared/components/material-icons.component.html +++ b/ui-ngx/src/app/shared/components/material-icons.component.html @@ -53,22 +53,24 @@
-
{{ 'icon.no-icons-found' | translate:{iconSearch: searchIconControl.value} }}
 -
- + +
diff --git a/ui-ngx/src/app/shared/components/material-icons.component.scss b/ui-ngx/src/app/shared/components/material-icons.component.scss index 8cf84e0687..b9c7a74c9a 100644 --- a/ui-ngx/src/app/shared/components/material-icons.component.scss +++ b/ui-ngx/src/app/shared/components/material-icons.component.scss @@ -26,7 +26,7 @@ letter-spacing: 0.25px; color: rgba(0, 0, 0, 0.87); } - .tb-material-icons-title, .tb-material-icons-search, .tb-material-icons-show-more { + .tb-material-icons-title, .tb-material-icons-search { width: 100%; } .tb-material-icons-viewport { @@ -64,6 +64,6 @@ flex-direction: row; gap: 16px; align-items: flex-start; - align-self: flex-start; + align-self: stretch; } } diff --git a/ui-ngx/src/app/shared/components/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss index ac24f7bf29..7091c68c93 100644 --- a/ui-ngx/src/app/shared/components/toggle-header.component.scss +++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss @@ -14,7 +14,6 @@ * limitations under the License. */ -@import "../../../theme"; @import "../../../scss/constants"; :host { diff --git a/ui-ngx/src/app/shared/models/widget-settings.models.ts b/ui-ngx/src/app/shared/models/widget-settings.models.ts index fb15622754..4bba815a37 100644 --- a/ui-ngx/src/app/shared/models/widget-settings.models.ts +++ b/ui-ngx/src/app/shared/models/widget-settings.models.ts @@ -149,7 +149,7 @@ type ValueColorFunction = (value: any) => string; export abstract class ColorProcessor { static fromSettings(color: ColorSettings): ColorProcessor { - const settings = color || constantColor('rgba(0, 0, 0, 0.87)'); + const settings = color || constantColor(null); switch (settings.type) { case ColorType.constant: return new ConstantColorProcessor(settings); @@ -192,7 +192,7 @@ class RangeColorProcessor extends ColorProcessor { if (this.settings.rangeList?.length && isDefinedAndNotNull(value) && isNumeric(value)) { const num = Number(value); for (const range of this.settings.rangeList) { - if (this.constantRange(range) && range.from === num) { + if (RangeColorProcessor.constantRange(range) && range.from === num) { return range.color; } else if ((!isNumber(range.from) || num >= range.from) && (!isNumber(range.to) || num < range.to)) { return range.color; @@ -202,7 +202,7 @@ class RangeColorProcessor extends ColorProcessor { return this.settings.color; } - private constantRange(range: ColorRange): boolean { + private static constantRange(range: ColorRange): boolean { return isNumber(range.from) && isNumber(range.to) && range.from === range.to; } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 52d95afded..9dedb852d9 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5756,6 +5756,7 @@ "position-left-bottom": "Left bottom", "font": "Font", "color": "Color", + "arrow": "Arrow", "display-up-down-arrow": "Display Up/Down arrow", "add-value": "Add value", "remove-value": "Remove value", diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index c5115add1b..141a8db6ea 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -16,12 +16,16 @@ @import './scss/constants'; -@mixin form-row-column($breakpoint) { +@mixin form-row-column() { + flex-direction: column; + align-items: stretch; + gap: 12px; + padding: 12px 7px 12px 16px; +} + +@mixin form-row-column-breakpoint($breakpoint) { @media #{$breakpoint} { - flex-direction: column; - align-items: stretch; - gap: 12px; - padding: 12px 7px 12px 16px; + @include form-row-column; .mat-mdc-form-field, tb-unit-input { width: auto; &.medium-width { @@ -132,6 +136,16 @@ font-size: 12px; color: #808080; } + .tb-form-hint { + padding: 12px 16px; + font-size: var(--mdc-typography-caption-font-size, 12px); + line-height: var(--mdc-typography-caption-line-height, 20px); + font-weight: var(--mdc-typography-caption-font-weight, 400); + letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em); + color: rgba(0, 0, 0, 0.6); + white-space: normal; + border-radius: 6px; + } .tb-form-row { height: 100%; display: flex; @@ -142,11 +156,12 @@ border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; &.column { + @include form-row-column; &-xs { - @include form-row-column($mat-xs) + @include form-row-column-breakpoint($mat-xs) } &-lt-md { - @include form-row-column($mat-lt-md) + @include form-row-column-breakpoint($mat-lt-md) } } &.no-border { @@ -450,7 +465,7 @@ left: 0; right: 0; bottom: 0; - background: #305680; + background: $tb-primary-color; mask-image: url(/assets/home/no_data_folder_bg.svg); mask-repeat: no-repeat; mask-size: contain; @@ -470,6 +485,23 @@ } } + .tb-primary-fill { + position: relative; + overflow: hidden; + &:before { + display: block; + height: auto; + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: $tb-primary-color; + opacity: 0.04; + } + } + button.mat-mdc-button-base.tb-box-button, .tb-form-table-row-cell-buttons button.mat-mdc-icon-button.mat-mdc-button-base { width: 40px; min-width: 40px; diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss index f19480ecef..9b410612a7 100644 --- a/ui-ngx/src/scss/constants.scss +++ b/ui-ngx/src/scss/constants.scss @@ -30,3 +30,10 @@ $mat-gt-xl: "screen and (min-width: 1920px)"; $mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)"; $primary-hue-3: rgb(207, 216, 220) !default; + +$tb-primary-color: #305680; +$tb-secondary-color: #527dad; +$tb-hue3-color: #a7c1de; + +$tb-dark-primary-color: #9fa8da; + diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss index df1b2bca3e..a8a3943660 100644 --- a/ui-ngx/src/theme.scss +++ b/ui-ngx/src/theme.scss @@ -21,12 +21,6 @@ @include mat.all-component-typographies(); @include mat.core(); -$tb-primary-color: #305680; -$tb-secondary-color: #527dad; -$tb-hue3-color: #a7c1de; - -$tb-dark-primary-color: #9fa8da; - $tb-mat-indigo: ( 50: #e8eaf6, 100: #c5cae9,