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 b6919ec670..a0b6f07647 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, + widgetErrorMessagesToken, widgetHeaderButtonActionToken, widgetTitlePanelToken } from '@home/models/widget-component.models'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; @@ -72,6 +72,7 @@ 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 b45869addf..9a200ef88c 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,9 +17,10 @@ -->
- - - + + + +
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 88157426f3..b8167ff06e 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,4 +34,7 @@ div.tb-widget-title { padding: 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 013a6c88a9..4bb2b11dd3 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,6 +15,7 @@ /// import { + AfterViewInit, ChangeDetectorRef, Component, ElementRef, @@ -45,7 +46,7 @@ import { DomSanitizer } from '@angular/platform-browser'; styleUrls: ['./map-widget.component.scss'], encapsulation: ViewEncapsulation.None }) -export class MapWidgetComponent implements OnInit, OnDestroy { +export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit { @ViewChild('mapElement', {static: false}) mapElement: ElementRef; @@ -58,6 +59,9 @@ export class MapWidgetComponent implements OnInit, OnDestroy { @Input() widgetTitlePanel: TemplateRef; + @Input() + widgetHeaderButtonAction: TemplateRef; + backgroundStyle$: Observable; overlayStyle: ComponentStyle = {}; padding: string; @@ -79,6 +83,14 @@ export class MapWidgetComponent implements OnInit, OnDestroy { 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-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html index 24658a8ad7..55182a8a01 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,33 +33,9 @@ -
-
- @for (action of widget.customHeaderActions; track action.name; let last = $last) { - - } -
- - - -
+ + +
+ [widgetTitlePanel]="widgetTitlePanel" + [widgetHeaderButtonAction]="widgetHeaderButtonAction">
@@ -102,6 +79,36 @@ + +
+
+ @for (action of widget.customHeaderActions; track action.name; let last = $last) { + + } +
+ + + +
+
+ @switch (action.buttonType) { @case (widgetHeaderActionButtonType.miniFab) { 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 f8fa032c8c..5b5bb2fe57 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,6 +75,7 @@ import { widgetContextToken, widgetErrorMessagesToken, WidgetHeaderAction, + widgetHeaderButtonActionToken, WidgetInfo, widgetTitlePanelToken, WidgetTypeInstance @@ -139,6 +140,9 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges, @Input() widgetTitlePanel: TemplateRef; + @Input() + widgetHeaderButtonAction: TemplateRef; + @Input() isEdit: boolean; @@ -817,6 +821,10 @@ 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 11adb2f806..a27f1727c5 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 @@ -559,6 +559,7 @@ 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;