From d3fa7d912493ac7bba2dd167a2805a61d860067c Mon Sep 17 00:00:00 2001 From: mpetrov Date: Tue, 9 Jul 2024 14:43:25 +0300 Subject: [PATCH 1/3] OPC-UA UI fixes --- .../action-button-basic-config.component.html | 6 +- ...command-button-basic-config.component.html | 4 +- .../power-button-basic-config.component.html | 8 +- .../toggle-button-basic-config.component.html | 8 +- .../status-widget-basic-config.component.html | 4 +- .../single-switch-basic-config.component.html | 8 +- .../rpc/slider-basic-config.component.html | 6 +- .../mapping-data-keys-panel.component.html | 12 +- .../mapping-table.component.html | 6 +- .../mapping-table/mapping-table.component.ts | 3 +- .../server-config.component.html | 16 +-- .../server-config.component.scss | 8 -- .../workers-config-control.component.html | 8 +- .../dialog/mapping-dialog.component.html | 34 +++--- .../dialog/mapping-dialog.component.scss | 1 + .../dialog/mapping-dialog.component.ts | 7 +- .../lib/gateway/gateway-widget.models.ts | 8 ++ ...tion-button-widget-settings.component.html | 4 +- ...mand-button-widget-settings.component.html | 4 +- ...ower-button-widget-settings.component.html | 8 +- ...ggle-button-widget-settings.component.html | 8 +- ...value-action-settings-panel.component.html | 2 +- ...tatus-widget-state-settings.component.html | 8 +- ...ngle-switch-widget-settings.component.html | 8 +- .../slider-widget-settings.component.html | 6 +- .../status-widget-settings.component.html | 4 +- .../widget/widget-config.component.html | 4 +- .../hint-tooltip-icon.component.html | 14 ++- .../hint-tooltip-icon.component.scss | 34 +++--- .../src/app/shared/directives/public-api.ts | 17 +++ .../directives/tooltip/tooltip.directive.ts | 108 ++++++++++++++++++ ui-ngx/src/app/shared/shared.module.ts | 2 + 32 files changed, 259 insertions(+), 119 deletions(-) create mode 100644 ui-ngx/src/app/shared/directives/public-api.ts create mode 100644 ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html index 6940cffc1f..a3030dec79 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html @@ -27,7 +27,7 @@
widgets.action-button.behavior
-
widgets.action-button.on-click
+
{{ 'widgets.action-button.on-click' | translate}}
-
widgets.button-state.activated-state
+
{{ 'widgets.button-state.activated-state' | translate }}
-
widgets.button-state.disabled-state
+
{{ 'widgets.button-state.disabled-state' | translate }}
widgets.command-button.behavior
-
widgets.command-button.on-click
+
{{ 'widgets.command-button.on-click' | translate }}
-
widgets.button-state.disabled-state
+
{{ 'widgets.button-state.disabled-state' | translate }}
widgets.power-button.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.power-button.power-on
+
{{ 'widgets.power-button.power-on' | translate }}
-
widgets.power-button.power-off
+
{{ 'widgets.power-button.power-off' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widgets.toggle-button.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.toggle-button.check
+
{{ 'widgets.toggle-button.check' | translate }}
-
widgets.toggle-button.uncheck
+
{{ 'widgets.toggle-button.uncheck' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widgets.status-widget.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widgets.single-switch.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.rpc-state.turn-on
+
{{ 'widgets.rpc-state.turn-on' | translate }}
-
widgets.rpc-state.turn-off
+
{{ 'widgets.rpc-state.turn-off' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widgets.slider.behavior
-
widgets.slider.initial-value
+
{{ 'widgets.slider.initial-value' | translate }}
-
widgets.slider.on-value-change
+
{{ 'widgets.slider.on-value-change' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
gateway.platform-side
- gateway.key + tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}"> + {{ 'gateway.key' | translate }}
@@ -97,8 +97,8 @@
- gateway.value + tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}"> + {{ 'gateway.value' | translate }}
-
- gateway.method-name +
+ {{ 'gateway.method-name' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html index 48e280bc67..7ebfb700bf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html @@ -61,11 +61,11 @@ + [class.request-column]="mappingType === mappingTypeEnum.REQUESTS"> {{ column.title | translate }} - + {{ mapping[column.def] }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts index 7042e5ae38..3e4ce09031 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts @@ -58,6 +58,7 @@ import { isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils'; import { coerceBoolean } from '@shared/decorators/coercion'; import { SharedModule } from '@shared/shared.module'; import { CommonModule } from '@angular/common'; +import { TooltipDirective } from '@shared/directives/public-api'; @Component({ selector: 'tb-mapping-table', @@ -77,7 +78,7 @@ import { CommonModule } from '@angular/common'; } ], standalone: true, - imports: [CommonModule, SharedModule] + imports: [CommonModule, SharedModule, TooltipDirective] }) export class MappingTableComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html index 43b15de06c..5182fb108e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html @@ -18,7 +18,7 @@
-
gateway.server-url
+
gateway.server-url
@@ -35,8 +35,8 @@
-
- gateway.timeout +
+ {{ 'gateway.timeout' | translate }}
@@ -55,7 +55,7 @@
-
gateway.security
+
gateway.security
@@ -65,8 +65,8 @@
-
- gateway.scan-period +
+ {{ 'gateway.scan-period' | translate }}
@@ -86,8 +86,8 @@
-
- gateway.sub-check-period +
+ {{ 'gateway.sub-check-period' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss index 64e886ffef..416f368279 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss @@ -17,12 +17,4 @@ width: 100%; height: 100%; display: block; - - .server-conf-field-title { - min-width: 250px; - width: 30%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html index 37f7b1422e..0062e476c2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html @@ -18,8 +18,8 @@
- gateway.max-number-of-workers + tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}"> + {{ 'gateway.max-number-of-workers' | translate }}
@@ -40,8 +40,8 @@
- gateway.max-messages-queue-for-worker + tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}"> + {{ 'gateway.max-messages-queue-for-worker' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html index 35ac90f671..17c002115c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html @@ -19,7 +19,7 @@

{{ MappingTypeTranslationsMap.get(this.data?.mappingType) | translate}}

-
+
-
- gateway.mqtt-qos +
+ {{ 'gateway.mqtt-qos' | translate }}
@@ -140,8 +140,8 @@
- gateway.extension + tb-hint-tooltip-icon="{{ 'gateway.extension-hint' | translate }}"> + {{ 'gateway.extension' | translate }}
@@ -369,8 +369,8 @@
- gateway.device-name-filter + tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}"> + {{ 'gateway.device-name-filter' | translate }}
@@ -388,8 +388,8 @@
-
- gateway.attribute-filter +
+ {{ 'gateway.attribute-filter' | translate }}
@@ -472,8 +472,8 @@
-
- gateway.device-name-filter +
+ {{ 'gateway.device-name-filter' | translate }}
@@ -491,8 +491,8 @@
-
- gateway.method-filter +
+ {{ 'gateway.method-filter' | translate }}
@@ -580,8 +580,8 @@
-
- gateway.response-topic-Qos +
+ {{ 'gateway.response-topic-Qos' | translate }}
@@ -618,8 +618,8 @@
-
- gateway.device-node +
+ {{ 'gateway.device-node' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss index 190422eeb0..4212e8f834 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss @@ -47,6 +47,7 @@ .mdc-evolution-chip-set__chips { justify-content: flex-end; align-items: center; + flex-wrap: nowrap; } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts index 3812fa161e..0e177df527 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts @@ -28,6 +28,7 @@ import { ConvertorTypeTranslationsMap, DataConversionTranslationsMap, DeviceInfoType, + HelpLinkByMappingTypeMap, MappingHintTranslationsMap, MappingInfo, MappingKeysAddKeyTranslationsMap, @@ -97,6 +98,8 @@ export class MappingDialogComponent extends DialogComponent(); @@ -187,10 +190,6 @@ export class MappingDialogComponent extends DialogComponent( ] ); +export const HelpLinkByMappingTypeMap = new Map( + [ + [MappingType.DATA, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping'], + [MappingType.OPCUA, 'https://thingsboard.io/docs/iot-gateway/config/opc-ua/#section-mapping'], + [MappingType.REQUESTS, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping'] + ] +); + export const QualityTypes = [0, 1 ,2]; export const QualityTypeTranslationsMap = new Map( diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html index 265a9c2501..a8cdf55efc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html @@ -19,7 +19,7 @@
widgets.action-button.behavior
-
widgets.button-state.activated-state
+
{{ 'widgets.button-state.activated-state' | translate }}
-
widgets.button-state.disabled-state
+
{{ 'widgets.button-state.disabled-state' | translate }}
widgets.command-button.behavior
-
widgets.command-button.on-click
+
{{ 'widgets.command-button.on-click' | translate }}
-
widgets.button-state.disabled-state
+
{{ 'widgets.button-state.disabled-state' | translate }}
widgets.power-button.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.power-button.power-on
+
{{ 'widgets.power-button.power-on' | translate }}
-
widgets.power-button.power-off
+
{{ 'widgets.power-button.power-off' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widgets.toggle-button.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.toggle-button.check
+
{{ 'widgets.toggle-button.check' | translate }}
-
widgets.toggle-button.uncheck
+
{{ 'widgets.toggle-button.uncheck' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
-
widgets.value-action.value
+
{{ 'widgets.value-action.value' | translate }}
-
widgets.status-widget.primary
+
{{ 'widgets.status-widget.primary' | translate }}
-
widgets.status-widget.secondary
+
{{ 'widgets.status-widget.secondary' | translate }}
@@ -88,14 +88,14 @@ [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'" style="gap: 12px;">
-
widgets.status-widget.primary
+
{{ 'widgets.status-widget.primary' | translate }}
-
widgets.status-widget.secondary
+
{{ 'widgets.status-widget.secondary' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html index 9208efd68a..d5b732b6bb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html @@ -19,7 +19,7 @@
widgets.single-switch.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.rpc-state.turn-on
+
{{ 'widgets.rpc-state.turn-on' | translate }}
-
widgets.rpc-state.turn-off
+
{{ 'widgets.rpc-state.turn-off' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widgets.slider.behavior
-
widgets.slider.initial-value
+
{{ 'widgets.slider.initial-value' | translate }}
-
widgets.slider.on-value-change
+
{{ 'widgets.slider.on-value-change' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widgets.status-widget.behavior
-
widgets.rpc-state.initial-state
+
{{ 'widgets.rpc-state.initial-state' | translate }}
-
widgets.rpc-state.disabled-state
+
{{ 'widgets.rpc-state.disabled-state' | translate }}
widget-config.data-settings
-
widget-config.units-by-default
+
{{ 'widget-config.units-by-default' | translate }}
-
widget-config.decimals-by-default
+
{{ 'widget-config.decimals-by-default' | translate }}
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 index 32b66fd2b7..20593f042b 100644 --- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html @@ -15,8 +15,12 @@ limitations under the License. --> - -{{ hintIcon }} +
+
+ +
+ {{ 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 index 7ed9925300..fb428e9fc3 100644 --- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss @@ -13,21 +13,29 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -:host(.tb-hint-tooltip) { - display: flex; - flex-direction: row; - align-items: center; - gap: 4px; -} :host { - .tb-hint-tooltip-icon { - color: #E0E0E0; - overflow: visible; - order: 3; - margin-left: 4px; - &:hover { - color: #9E9E9E; + .tb-hint-tooltip { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; + + &-content { + flex: 1 1 auto; + min-width: 0; + } + + &-icon { + color: #E0E0E0; + overflow: visible; + order: 3; + margin-left: 4px; + flex-shrink: 0; + + &:hover { + color: #9E9E9E; + } } } } diff --git a/ui-ngx/src/app/shared/directives/public-api.ts b/ui-ngx/src/app/shared/directives/public-api.ts new file mode 100644 index 0000000000..a82428fc19 --- /dev/null +++ b/ui-ngx/src/app/shared/directives/public-api.ts @@ -0,0 +1,17 @@ +/// +/// Copyright © 2016-2024 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. +/// + +export * from './tooltip/tooltip.directive'; diff --git a/ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts b/ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts new file mode 100644 index 0000000000..4d26c1388c --- /dev/null +++ b/ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts @@ -0,0 +1,108 @@ +/// +/// Copyright © 2016-2024 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 { + AfterViewInit, + Directive, + ElementRef, + inject, + Input, + OnDestroy, + OnInit, + Renderer2, +} from '@angular/core'; +import { fromEvent, Subject } from 'rxjs'; +import { filter, takeUntil, tap } from 'rxjs/operators'; +import { MatTooltip, TooltipPosition } from '@angular/material/tooltip'; + +@Directive({ + standalone: true, + selector: '[tbTruncateTooltip]', + providers: [MatTooltip], + +}) +export class TooltipDirective implements OnInit, AfterViewInit, OnDestroy { + @Input('tbTruncateTooltip') text: string; + @Input() tooltipEnabled = true; + @Input() position: TooltipPosition = 'above'; + + private elementRef = inject(ElementRef); + private renderer = inject(Renderer2); + private tooltip = inject(MatTooltip); + private destroy$ = new Subject(); + + ngOnInit(): void { + this.observeMouseEvents(); + } + + ngAfterViewInit(): void { + this.applyTruncationStyles(); + + if (!this.text) { + this.text = this.elementRef.nativeElement.innerText; + } + + this.tooltip.position = this.position; + } + + ngOnDestroy(): void { + if (this.tooltip._isTooltipVisible()) { + this.hideTooltip(); + } + this.destroy$.next(); + this.destroy$.complete(); + } + + private observeMouseEvents(): void { + fromEvent(this.elementRef.nativeElement, 'mouseenter') + .pipe( + filter(() => this.tooltipEnabled), + filter(() => this.isOverflown(this.elementRef.nativeElement)), + tap(() => this.showTooltip()), + takeUntil(this.destroy$), + ) + .subscribe(); + fromEvent(this.elementRef.nativeElement, 'mouseleave') + .pipe( + filter(() => this.tooltipEnabled), + filter(() => this.tooltip._isTooltipVisible()), + tap(() => this.hideTooltip()), + takeUntil(this.destroy$), + ) + .subscribe(); + } + + private applyTruncationStyles(): void { + this.renderer.setStyle(this.elementRef.nativeElement, 'white-space', 'nowrap'); + this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden'); + this.renderer.setStyle(this.elementRef.nativeElement, 'text-overflow', 'ellipsis'); + } + + private isOverflown(element: HTMLElement): boolean { + return element.clientWidth < element.scrollWidth; + } + + private showTooltip(): void { + this.tooltip.message = this.text; + + this.renderer.setAttribute(this.elementRef.nativeElement, 'matTooltip', this.text); + this.tooltip.show(); + } + + private hideTooltip(): void { + this.tooltip.hide(); + } +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 567b80ed83..aa74c96f29 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -219,6 +219,7 @@ import { ImageGalleryDialogComponent } from '@shared/components/image/image-gall import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rule-chain-select-panel.component'; import { WidgetButtonComponent } from '@shared/components/button/widget-button.component'; import { HexInputComponent } from '@shared/components/color-picker/hex-input.component'; +import { TooltipDirective } from '@shared/directives/public-api'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -472,6 +473,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) DndModule, NgxFlowModule, NgxFlowchartModule, + TooltipDirective, // ngx-markdown MarkdownModule.forRoot({ sanitize: SecurityContext.NONE, From d9807e797b3a21d77ffb6743c3713792d822c9be Mon Sep 17 00:00:00 2001 From: mpetrov Date: Wed, 10 Jul 2024 10:32:37 +0300 Subject: [PATCH 2/3] refactoring --- .../server-config/server-config.component.html | 12 ++++++------ .../server-config/server-config.component.ts | 2 ++ .../components/hint-tooltip-icon.component.html | 2 +- .../components/hint-tooltip-icon.component.scss | 1 + .../components/hint-tooltip-icon.component.ts | 3 +-- .../shared/directives/tooltip/tooltip.directive.ts | 13 +++++++------ ui-ngx/src/app/shared/shared.module.ts | 2 -- 7 files changed, 18 insertions(+), 17 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html index 5182fb108e..dbabe3acf6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html @@ -18,7 +18,7 @@
-
gateway.server-url
+
gateway.server-url
@@ -36,7 +36,7 @@
- {{ 'gateway.timeout' | translate }} +
{{ 'gateway.timeout' | translate }}
@@ -55,7 +55,7 @@
-
gateway.security
+
gateway.security
@@ -66,7 +66,7 @@
- {{ 'gateway.scan-period' | translate }} +
{{ 'gateway.scan-period' | translate }}
@@ -87,7 +87,7 @@
- {{ 'gateway.sub-check-period' | translate }} +
{{ 'gateway.sub-check-period' | translate }}
@@ -110,7 +110,7 @@
- {{ 'gateway.enable-subscription' | translate }} +
{{ 'gateway.enable-subscription' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts index 98a36182a6..66af025267 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts @@ -36,6 +36,7 @@ import { CommonModule } from '@angular/common'; import { SecurityConfigComponent } from '@home/components/widget/lib/gateway/connectors-configuration/public-api'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { TooltipDirective } from '@shared/directives/public-api'; @Component({ selector: 'tb-server-config', @@ -59,6 +60,7 @@ import { takeUntil } from 'rxjs/operators'; CommonModule, SharedModule, SecurityConfigComponent, + TooltipDirective, ] }) export class ServerConfigComponent implements ControlValueAccessor, Validator, OnDestroy { 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 index 20593f042b..cb98fa4608 100644 --- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html @@ -16,7 +16,7 @@ -->
-
+
(); + constructor( + private elementRef: ElementRef, + private renderer: Renderer2, + private tooltip: MatTooltip + ) {} + ngOnInit(): void { this.observeMouseEvents(); + this.applyTruncationStyles(); } ngAfterViewInit(): void { - this.applyTruncationStyles(); - if (!this.text) { this.text = this.elementRef.nativeElement.innerText; } diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index aa74c96f29..567b80ed83 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -219,7 +219,6 @@ import { ImageGalleryDialogComponent } from '@shared/components/image/image-gall import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rule-chain-select-panel.component'; import { WidgetButtonComponent } from '@shared/components/button/widget-button.component'; import { HexInputComponent } from '@shared/components/color-picker/hex-input.component'; -import { TooltipDirective } from '@shared/directives/public-api'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -473,7 +472,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) DndModule, NgxFlowModule, NgxFlowchartModule, - TooltipDirective, // ngx-markdown MarkdownModule.forRoot({ sanitize: SecurityContext.NONE, From a1d26e29b3cf6681701ffc68a1b09e6fe659dfd8 Mon Sep 17 00:00:00 2001 From: mpetrov Date: Wed, 10 Jul 2024 11:07:38 +0300 Subject: [PATCH 3/3] refactoring --- .../workers-config-control.component.html | 4 +- .../workers-config-control.component.ts | 2 + .../hint-tooltip-icon.component.html | 14 +++---- .../hint-tooltip-icon.component.scss | 39 +++++++++---------- .../components/hint-tooltip-icon.component.ts | 3 +- 5 files changed, 30 insertions(+), 32 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html index 0062e476c2..b348b49252 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html @@ -19,7 +19,7 @@
- {{ 'gateway.max-number-of-workers' | translate }} +
{{ 'gateway.max-number-of-workers' | translate }}
@@ -41,7 +41,7 @@
- {{ 'gateway.max-messages-queue-for-worker' | translate }} +
{{ 'gateway.max-messages-queue-for-worker' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts index 9a37bdb07c..c05b7c32b6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts @@ -33,6 +33,7 @@ import { CommonModule } from '@angular/common'; import { WorkersConfig } from '@home/components/widget/lib/gateway/gateway-widget.models'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { TooltipDirective } from '@shared/directives/tooltip/tooltip.directive'; @Component({ selector: 'tb-workers-config-control', @@ -42,6 +43,7 @@ import { takeUntil } from 'rxjs/operators'; imports: [ CommonModule, SharedModule, + TooltipDirective, ], providers: [ { 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 index cb98fa4608..f2413f0ad7 100644 --- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html @@ -15,12 +15,8 @@ limitations under the License. --> -
-
- -
- {{ hintIcon }} -
+ +{{ 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 index 60bd53aa43..b83c2ff1b9 100644 --- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss @@ -13,30 +13,29 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +:host(.tb-hint-tooltip) { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} :host { - .tb-hint-tooltip { - display: flex; - flex-direction: row; - align-items: center; - gap: 4px; - - &-content { - flex: 1 1 auto; - min-width: 0; - max-width: fit-content; - } + .tb-hint-tooltip-content { + flex: 1 1 auto; + min-width: 0; + max-width: fit-content; + } - &-icon { - color: #E0E0E0; - overflow: visible; - order: 3; - margin-left: 4px; - flex-shrink: 0; + .tb-hint-tooltip-icon { + color: #E0E0E0; + overflow: visible; + order: 3; + margin-left: 4px; + flex-shrink: 0; - &:hover { - color: #9E9E9E; - } + &: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 index 86a346012e..4518875bb6 100644 --- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts +++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, Input } from '@angular/core'; +import { Component, HostBinding, Input } from '@angular/core'; import { TooltipPosition } from '@angular/material/tooltip'; @Component({ @@ -24,6 +24,7 @@ import { TooltipPosition } from '@angular/material/tooltip'; }) export class HintTooltipIconComponent { + @HostBinding('class.tb-hint-tooltip') @Input('tb-hint-tooltip-icon') tooltipText: string; @Input()