From 16eb835d46708c97a1a506f3acb9bc8f51bb13c8 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 28 Dec 2022 12:22:04 +0200 Subject: [PATCH 1/3] UI: Fixed incorrect calculate width when used right layout dashboard --- .../dashboard-page.component.html | 10 +-- .../dashboard-page.component.ts | 66 +++++++++++++------ 2 files changed, 50 insertions(+), 26 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index ca1bae3de7..5fcce69f76 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -168,9 +168,9 @@ [ngClass]="{ 'tb-shrinked' : isEditingWidget }"> + [ngStyle]="{width: mainLayoutSize.width, + height: mainLayoutSize.height}"> this.dashboard, @@ -402,6 +409,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC .observe(MediaBreakpoints['gt-sm']) .subscribe((state: BreakpointState) => { this.isMobile = !state.matches; + this.updateLayoutSizes(); } )); if (this.isMobileApp && this.syncStateWithQueryParam) { @@ -414,6 +422,13 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } } + ngAfterViewInit() { + this.dashboardResize$ = new ResizeObserver(() => { + this.updateLayoutSizes(); + }); + this.dashboardResize$.observe(this.dashboardContainer.nativeElement); + } + private init(data: DashboardPageInitData) { this.reset(); @@ -537,6 +552,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC subscription.unsubscribe(); }); this.rxSubscriptions.length = 0; + if (this.dashboardResize$) { + this.dashboardResize$.disconnect(); + } } public runChangeDetection() { @@ -672,34 +690,45 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC public toggleLayouts() { this.isRightLayoutOpened = !this.isRightLayoutOpened; this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened); + this.updateLayoutSizes(); } public openRightLayout() { this.isRightLayoutOpened = true; this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened); + this.updateLayoutSizes(); } - public mainLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') { - return '100%'; - } else { - return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%'; + private updateLayoutSizes() { + if (this.dashboardCtx.state) { + this.updateMainLayoutSize(); + this.updateRightLayoutSize(); } } - public mainLayoutHeight(): string { + private updateMainLayoutSize() { + if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') { + this.mainLayoutSize.width = '100%'; + } else { + this.mainLayoutSize.width = this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%'; + } if (!this.isEditingWidget || this.editingLayoutCtx.id === 'main') { - return '100%'; + this.mainLayoutSize.height = '100%'; } else { - return '0px'; + this.mainLayoutSize.height = '0px'; } } - public rightLayoutWidth(): string { + private updateRightLayoutSize() { if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') { - return '100%'; + this.rightLayoutSize.width = '100%'; } else { - return this.isMobile ? '100%' : this.calculateWidth('right'); + this.rightLayoutSize.width = this.isMobile ? '100%' : this.calculateWidth('right'); + } + if (!this.isEditingWidget || this.editingLayoutCtx.id === 'right') { + this.rightLayoutSize.height = '100%'; + } else { + this.rightLayoutSize.height = '0px'; } } @@ -743,14 +772,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } } - public rightLayoutHeight(): string { - if (!this.isEditingWidget || this.editingLayoutCtx.id === 'right') { - return '100%'; - } else { - return '0px'; - } - } - public isPublicUser(): boolean { return this.authUser.isPublic; } @@ -977,6 +998,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC layout.layoutCtx.ctrl.reload(); } layout.layoutCtx.ignoreLoading = true; + this.updateLayoutSizes(); } private setEditMode(isEdit: boolean, revert: boolean) { @@ -1191,6 +1213,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.editingLayoutCtx = null; this.editingWidgetSubtitle = null; this.isEditingWidget = false; + this.updateLayoutSizes(); this.resetHighlight(); this.forceDashboardMobileMode = false; } @@ -1216,6 +1239,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.editingWidgetSubtitle = this.widgetComponentService.getInstantWidgetInfo(this.editingWidget).widgetName; this.forceDashboardMobileMode = true; this.isEditingWidget = true; + this.updateLayoutSizes(); if (layoutCtx) { const delayOffset = transition ? 350 : 0; const delay = transition ? 400 : 300; From 59df8e7942109af83f2076bc4d727d069d675a25 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 28 Dec 2022 12:38:20 +0200 Subject: [PATCH 2/3] UI: Fixed import --- .../home/components/dashboard-page/dashboard-page.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index a6dd046ade..4db291424b 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -150,6 +150,7 @@ import { TbPopoverService } from '@shared/components/popover.service'; import { tap } from 'rxjs/operators'; import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; import { TbPopoverComponent } from '@shared/components/popover.component'; +import { ResizeObserver } from '@juggle/resize-observer'; // @dynamic @Component({ From 85557231a8ed5480fe1cd93a7541ce49084cccdb Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 28 Dec 2022 13:04:49 +0200 Subject: [PATCH 3/3] UI: Optimize call calculate new layout resize --- .../dashboard-page.component.ts | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts index 4db291424b..b0984a65fb 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts @@ -691,23 +691,28 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC public toggleLayouts() { this.isRightLayoutOpened = !this.isRightLayoutOpened; this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened); - this.updateLayoutSizes(); } public openRightLayout() { this.isRightLayoutOpened = true; this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened); - this.updateLayoutSizes(); } private updateLayoutSizes() { + let changeMainLayoutSize = false; + let changeRightLayoutSize = false; if (this.dashboardCtx.state) { - this.updateMainLayoutSize(); - this.updateRightLayoutSize(); + changeMainLayoutSize = this.updateMainLayoutSize(); + changeRightLayoutSize = this.updateRightLayoutSize(); + } + if (changeMainLayoutSize || changeRightLayoutSize) { + this.cd.markForCheck(); } } - private updateMainLayoutSize() { + private updateMainLayoutSize(): boolean { + const prevMainLayoutWidth = this.mainLayoutSize.width; + const prevMainLayoutHeight = this.mainLayoutSize.height; if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') { this.mainLayoutSize.width = '100%'; } else { @@ -718,9 +723,12 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } else { this.mainLayoutSize.height = '0px'; } + return prevMainLayoutWidth !== this.mainLayoutSize.width || prevMainLayoutHeight !== this.mainLayoutSize.height; } - private updateRightLayoutSize() { + private updateRightLayoutSize(): boolean { + const prevRightLayoutWidth = this.rightLayoutSize.width; + const prevRightLayoutHeight = this.rightLayoutSize.height; if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') { this.rightLayoutSize.width = '100%'; } else { @@ -731,6 +739,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } else { this.rightLayoutSize.height = '0px'; } + return prevRightLayoutWidth !== this.rightLayoutSize.width || prevRightLayoutHeight !== this.rightLayoutSize.height; } private calculateWidth(layout: DashboardLayoutId): string {