diff --git a/ui-ngx/src/app/modules/common/modules-map.ts b/ui-ngx/src/app/modules/common/modules-map.ts index eab8bcf5d5..a46c6b29f9 100644 --- a/ui-ngx/src/app/modules/common/modules-map.ts +++ b/ui-ngx/src/app/modules/common/modules-map.ts @@ -183,6 +183,7 @@ import * as ToggleSelectComponent from '@shared/components/toggle-select.compone import * as UnitInputComponent from '@shared/components/unit-input.component'; import * as MaterialIconsComponent from '@shared/components/material-icons.component'; import * as TbIconComponent from '@shared/components/icon.component'; +import * as HintTooltipIconComponent from '@shared/components/hint-tooltip-icon.component'; import * as AddEntityDialogComponent from '@home/components/entity/add-entity-dialog.component'; import * as EntitiesTableComponent from '@home/components/entity/entities-table.component'; @@ -486,6 +487,7 @@ class ModulesMap implements IModulesMap { '@shared/components/unit-input.component': UnitInputComponent, '@shared/components/material-icons.component': MaterialIconsComponent, '@shared/components/icon.component': TbIconComponent, + '@shared/components/hint-tooltip-icon.component': HintTooltipIconComponent, '@home/components/entity/add-entity-dialog.component': AddEntityDialogComponent, '@home/components/entity/entities-table.component': EntitiesTableComponent, diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index 23440260d4..732d6e3119 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -275,14 +275,14 @@
widget-config.data-settings
-
-
widget-config.units
+
+
widget-config.units-by-default
-
-
widget-config.decimals
+
+
widget-config.decimals-by-default
diff --git a/ui-ngx/src/app/shared/components/help-popup.component.ts b/ui-ngx/src/app/shared/components/help-popup.component.ts index 64722348a2..7c698f52a5 100644 --- a/ui-ngx/src/app/shared/components/help-popup.component.ts +++ b/ui-ngx/src/app/shared/components/help-popup.component.ts @@ -31,7 +31,6 @@ import { isDefinedAndNotNull } from '@core/utils'; import { coerceBoolean } from '@shared/decorators/coercion'; @Component({ - // eslint-disable-next-line @angular-eslint/component-selector selector: '[tb-help-popup], [tb-help-popup-content]', templateUrl: './help-popup.component.html', styleUrls: ['./help-popup.component.scss'], @@ -42,10 +41,8 @@ export class HelpPopupComponent implements OnChanges, OnDestroy { @ViewChild('toggleHelpButton', {read: ElementRef, static: false}) toggleHelpButton: ElementRef; @ViewChild('toggleHelpTextButton', {read: ElementRef, static: false}) toggleHelpTextButton: ElementRef; - // eslint-disable-next-line @angular-eslint/no-input-rename @Input('tb-help-popup') helpId: string; - // eslint-disable-next-line @angular-eslint/no-input-rename @Input('tb-help-popup-content') helpContent: string; // eslint-disable-next-line @angular-eslint/no-input-rename diff --git a/ui-ngx/src/app/shared/components/help.component.ts b/ui-ngx/src/app/shared/components/help.component.ts index d7be6942dc..3ea2653658 100644 --- a/ui-ngx/src/app/shared/components/help.component.ts +++ b/ui-ngx/src/app/shared/components/help.component.ts @@ -18,13 +18,11 @@ import { Component, Input } from '@angular/core'; import { HelpLinks } from '@shared/models/constants'; @Component({ - // eslint-disable-next-line @angular-eslint/component-selector selector: '[tb-help]', templateUrl: './help.component.html' }) export class HelpComponent { - // eslint-disable-next-line @angular-eslint/no-input-rename @Input('tb-help') helpLinkId: string; gotoHelpPage(): void { diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html new file mode 100644 index 0000000000..7fff74a55e --- /dev/null +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html @@ -0,0 +1,21 @@ + + +{{ hintIcon }} diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss new file mode 100644 index 0000000000..4febf04f15 --- /dev/null +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss @@ -0,0 +1,29 @@ +/** + * 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. + */ +:host { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + + .tb-hint-tooltip-icon { + color: #E0E0E0; + overflow: visible; + &:hover { + color: #9E9E9E; + } + } +} diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts new file mode 100644 index 0000000000..2d6ee282c1 --- /dev/null +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts @@ -0,0 +1,35 @@ +/// +/// 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. +/// + +import { Component, Input } from '@angular/core'; +import { TooltipPosition } from '@angular/material/tooltip'; + +@Component({ + selector: '[tb-hint-tooltip-icon]', + templateUrl: './hint-tooltip-icon.component.html', + styleUrls: ['./hint-tooltip-icon.component.scss'] +}) +export class HintTooltipIconComponent { + + @Input('tb-hint-tooltip-icon') tooltipText: string; + + @Input() + tooltipPosition: TooltipPosition = 'right'; + + @Input() + hintIcon = 'info'; + +} diff --git a/ui-ngx/src/app/shared/components/public-api.ts b/ui-ngx/src/app/shared/components/public-api.ts index 35ab83900e..4647fc6bad 100644 --- a/ui-ngx/src/app/shared/components/public-api.ts +++ b/ui-ngx/src/app/shared/components/public-api.ts @@ -28,3 +28,4 @@ export * from './toggle-select.component'; export * from './unit-input.component'; export * from './material-icons.component'; export * from './icon.component'; +export * from './hint-tooltip-icon.component'; diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 88d21fd0c5..2211f2e0e1 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -198,6 +198,7 @@ import { UnitInputComponent } from '@shared/components/unit-input.component'; import { MaterialIconsComponent } from '@shared/components/material-icons.component'; import { ColorPickerPanelComponent } from '@shared/components/color-picker/color-picker-panel.component'; import { TbIconComponent } from '@shared/components/icon.component'; +import { HintTooltipIconComponent } from '@shared/components/hint-tooltip-icon.component'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -375,7 +376,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) UnitInputComponent, MaterialIconsComponent, RuleChainSelectComponent, - TbIconComponent + TbIconComponent, + HintTooltipIconComponent ], imports: [ CommonModule, @@ -609,7 +611,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) UnitInputComponent, MaterialIconsComponent, RuleChainSelectComponent, - TbIconComponent + TbIconComponent, + HintTooltipIconComponent ] }) export class SharedModule { } 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 2cc757f1a6..e982f2440f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4721,7 +4721,10 @@ "mobile-hide": "Hide widget in mobile mode", "desktop-hide": "Hide widget in desktop mode", "units": "Special symbol to show next to value", + "units-by-default": "Units by default", "decimals": "Number of digits after floating point", + "decimals-by-default": "Decimals by default", + "default-data-key-parameter-hint": "This parameter applies to all widget values unless overridden by data key configuration", "units-short": "Units", "decimals-short": "Decimals", "decimals-suffix": "decimals",