From 1901808b26ab5660712fd41a1798065925780e2a Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 27 Mar 2025 18:04:16 +0200 Subject: [PATCH] UI: Ref after review --- .../json/system/widget_types/image_map.json | 4 ++-- .../data/json/system/widget_types/map.json | 4 ++-- .../json/system/widget_types/route_map.json | 4 ++-- .../json/system/widget_types/trip_map.json | 4 ++-- .../widget/dynamic-widget.component.ts | 3 +-- .../widget/lib/maps/map-widget.component.html | 12 ++++++++---- .../widget/lib/maps/map-widget.component.scss | 3 +++ .../widget/lib/maps/map-widget.component.ts | 18 +----------------- .../widget/widget-component.service.ts | 3 +++ .../widget/widget-container.component.html | 10 +++++----- .../widget/widget-container.component.ts | 7 +++++++ .../home/components/widget/widget.component.ts | 8 ++------ .../home/models/widget-component.models.ts | 2 +- ui-ngx/src/app/shared/models/widget.models.ts | 1 + 14 files changed, 40 insertions(+), 43 deletions(-) diff --git a/application/src/main/data/json/system/widget_types/image_map.json b/application/src/main/data/json/system/widget_types/image_map.json index 2a4fe71696..991c0b463f 100644 --- a/application/src/main/data/json/system/widget_types/image_map.json +++ b/application/src/main/data/json/system/widget_types/image_map.json @@ -9,9 +9,9 @@ "sizeX": 8.5, "sizeY": 6, "resources": [], - "templateHtml": "\n", + "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n embedActionsPanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}\n", "settingsForm": [], "dataKeySettingsForm": [], "settingsDirective": "tb-map-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/map.json b/application/src/main/data/json/system/widget_types/map.json index b9069d8af6..e498922d36 100644 --- a/application/src/main/data/json/system/widget_types/map.json +++ b/application/src/main/data/json/system/widget_types/map.json @@ -9,9 +9,9 @@ "sizeX": 8.5, "sizeY": 6, "resources": [], - "templateHtml": "\n", + "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n embedActionsPanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}\n", "settingsForm": [], "dataKeySettingsForm": [], "settingsDirective": "tb-map-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/route_map.json b/application/src/main/data/json/system/widget_types/route_map.json index f1d2cd571c..37346f1157 100644 --- a/application/src/main/data/json/system/widget_types/route_map.json +++ b/application/src/main/data/json/system/widget_types/route_map.json @@ -9,9 +9,9 @@ "sizeX": 8.5, "sizeY": 6, "resources": [], - "templateHtml": "\n", + "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n trip: true,\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n trip: true,\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n embedActionsPanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}", "settingsForm": [], "dataKeySettingsForm": [], "latestDataKeySettingsForm": [], diff --git a/application/src/main/data/json/system/widget_types/trip_map.json b/application/src/main/data/json/system/widget_types/trip_map.json index a596e74c1f..8f54f64b6b 100644 --- a/application/src/main/data/json/system/widget_types/trip_map.json +++ b/application/src/main/data/json/system/widget_types/trip_map.json @@ -9,9 +9,9 @@ "sizeX": 8.5, "sizeY": 6, "resources": [], - "templateHtml": "\n", + "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n trip: true,\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n return {\n trip: true,\n hideDataTab: true,\n hideDataSettings: true,\n previewWidth: '80%',\n embedTitlePanel: true,\n embedActionsPanel: true,\n datasourcesOptional: true,\n additionalWidgetActionTypes: ['placeMapItem']\n };\n}", "settingsForm": [], "dataKeySettingsForm": [], "latestDataKeySettingsForm": [], diff --git a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts index a0b6f07647..b6919ec670 100644 --- a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts @@ -19,7 +19,7 @@ import { Directive, inject, Injector, OnDestroy, OnInit } from '@angular/core'; import { IDynamicWidgetComponent, widgetContextToken, - widgetErrorMessagesToken, widgetHeaderButtonActionToken, + widgetErrorMessagesToken, widgetTitlePanelToken } from '@home/models/widget-component.models'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; @@ -72,7 +72,6 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid public readonly ctx = inject(widgetContextToken); public readonly errorMessages = inject(widgetErrorMessagesToken); public readonly widgetTitlePanel = inject(widgetTitlePanelToken); - public readonly widgetHeaderButtonAction = inject(widgetHeaderButtonActionToken); constructor() { super(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html index 9a200ef88c..e64ee71170 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html @@ -17,10 +17,14 @@ -->
- - - - + @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) { +
+ + +
+ } @else { + + }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss index b8167ff06e..eab92a664f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss @@ -34,6 +34,9 @@ div.tb-widget-title { padding: 0; } + .tb-widget-title-row .tb-widget-actions { + margin: 0; + } .tb-widget-actions.tb-widget-actions-absolute { z-index: 2; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts index 4bb2b11dd3..4ef3c3cd45 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts @@ -15,14 +15,12 @@ /// import { - AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, - TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; @@ -46,7 +44,7 @@ import { DomSanitizer } from '@angular/platform-browser'; styleUrls: ['./map-widget.component.scss'], encapsulation: ViewEncapsulation.None }) -export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit { +export class MapWidgetComponent implements OnInit, OnDestroy { @ViewChild('mapElement', {static: false}) mapElement: ElementRef; @@ -56,12 +54,6 @@ export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit { @Input() ctx: WidgetContext; - @Input() - widgetTitlePanel: TemplateRef; - - @Input() - widgetHeaderButtonAction: TemplateRef; - backgroundStyle$: Observable; overlayStyle: ComponentStyle = {}; padding: string; @@ -83,14 +75,6 @@ export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit { this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding; } - ngAfterViewInit() { - if (this.widgetComponent.dashboardWidget.showWidgetTitlePanel && !!this.widgetHeaderButtonAction) { - const tbWidgetTitle = $(".tb-widget-title")[0]; - if (getComputedStyle(tbWidgetTitle).getPropertyValue('min-height') === 'auto') - tbWidgetTitle.style.minHeight = $(".tb-widget-actions")[0].offsetHeight + 'px'; - } - } - ngOnDestroy() { if (this.map) { this.map.destroy(); diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts index 1a397d3a1f..f4e69c954c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts @@ -631,6 +631,9 @@ export class WidgetComponentService { if (isUndefined(result.typeParameters.embedTitlePanel)) { result.typeParameters.embedTitlePanel = false; } + if (isUndefined(result.typeParameters.embedActionsPanel)) { + result.typeParameters.embedActionsPanel = false; + } if (isUndefined(result.typeParameters.overflowVisible)) { result.typeParameters.overflowVisible = false; } diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html index 55182a8a01..531d0e3529 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html @@ -33,8 +33,8 @@ - - + +
@@ -45,7 +45,7 @@ [isPreview]="isPreview" [isMobile]="isMobile" [widgetTitlePanel]="widgetTitlePanel" - [widgetHeaderButtonAction]="widgetHeaderButtonAction"> + [widgetHeaderActionsPanel]="widgetHeaderActionsPanel">
@@ -79,10 +79,10 @@ - +
@for (action of widget.customHeaderActions; track action.name; let last = $last) { diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts index 430cce40b1..51ed592e7e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts @@ -48,6 +48,7 @@ import { TbContextMenuEvent } from '@shared/models/jquery-event.models'; import { WidgetHeaderActionButtonType } from '@shared/models/widget.models'; import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; import ITooltipsterGeoHelper = JQueryTooltipster.ITooltipsterGeoHelper; +import { WidgetComponent } from '@home/components/widget/widget.component'; export enum WidgetComponentActionType { MOUSE_DOWN, @@ -216,6 +217,12 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O }); } + widgetActionAbsolute(widgetComponent: WidgetComponent, absolute = false) { + return absolute ? true : + !(this.widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && + (this.widget.showTitle||this.widget.hasAggregation)) && !widgetComponent.widgetContext?.embedActionsPanel; + } + onClicked(event: MouseEvent): void { if (event && this.isEdit) { event.stopPropagation(); diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index 5b5bb2fe57..73f90d9665 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -75,7 +75,6 @@ import { widgetContextToken, widgetErrorMessagesToken, WidgetHeaderAction, - widgetHeaderButtonActionToken, WidgetInfo, widgetTitlePanelToken, WidgetTypeInstance @@ -141,7 +140,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges, widgetTitlePanel: TemplateRef; @Input() - widgetHeaderButtonAction: TemplateRef; + widgetHeaderActionsPanel: TemplateRef; @Input() isEdit: boolean; @@ -487,6 +486,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges, this.widgetType = this.widgetInfo.widgetTypeFunction; this.typeParameters = this.widgetInfo.typeParameters; this.widgetContext.embedTitlePanel = this.typeParameters.embedTitlePanel; + this.widgetContext.embedActionsPanel = this.typeParameters.embedActionsPanel; this.widgetContext.overflowVisible = this.typeParameters.overflowVisible; if (!this.widgetType) { @@ -821,10 +821,6 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges, { provide: widgetTitlePanelToken, useValue: this.widgetTitlePanel - }, - { - provide: widgetHeaderButtonActionToken, - useValue: this.widgetHeaderButtonAction } ], parent: this.injector diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts index a27f1727c5..00afa2b68d 100644 --- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts @@ -312,6 +312,7 @@ export class WidgetContext { timeWindow?: WidgetTimewindow; embedTitlePanel?: boolean; + embedActionsPanel?: boolean; overflowVisible?: boolean; hideTitlePanel = false; @@ -559,7 +560,6 @@ export class LabelVariablePattern { export const widgetContextToken = new InjectionToken('widgetContext'); export const widgetErrorMessagesToken = new InjectionToken('errorMessages'); export const widgetTitlePanelToken = new InjectionToken>('widgetTitlePanel'); -export const widgetHeaderButtonActionToken = new InjectionToken>('widgetHeaderButtonAction'); export interface IDynamicWidgetComponent { readonly ctx: WidgetContext; diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 2300ae2341..038c738bb0 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -185,6 +185,7 @@ export interface WidgetTypeParameters { previewWidth?: string; previewHeight?: string; embedTitlePanel?: boolean; + embedActionsPanel?: boolean; overflowVisible?: boolean; hideDataTab?: boolean; hideDataSettings?: boolean;