From dae8704c8d213b8cfbe8d44c4680c8ca4f2d9e05 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Tue, 5 Apr 2022 13:56:44 +0300 Subject: [PATCH 01/19] 6371:dashboard_layouts_width_sizing --- .../core/services/dashboard-utils.service.ts | 46 ++++--- .../dashboard-page.component.ts | 53 ++++++-- .../dashboard-page/dashboard-page.models.ts | 10 +- .../layout/dashboard-layout.component.html | 2 +- .../layout/dashboard-layout.component.scss | 9 +- .../dashboard-page/layout/layout.models.ts | 11 ++ ...ge-dashboard-layouts-dialog.component.html | 127 +++++++++++++++--- ...ge-dashboard-layouts-dialog.component.scss | 33 +++++ ...nage-dashboard-layouts-dialog.component.ts | 89 +++++++++++- .../components/dashboard/layout-button.scss | 4 +- .../home/components/home-components.module.ts | 4 +- .../src/app/shared/models/dashboard.models.ts | 11 +- .../assets/locale/locale.constant-en_US.json | 10 +- 13 files changed, 347 insertions(+), 62 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index e95990e530..500e7247fa 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -287,12 +287,12 @@ export class DashboardUtilsService { let addedCount = 0; let removedCount = 0; for (const l of Object.keys(state.layouts)) { - if (!newLayouts[l]) { + if (!newLayouts[l] && l !== 'layoutDimension') { removedCount++; } } - for (const l of Object.keys(newLayouts)) { - if (!state.layouts[l]) { + for (const l of Object.keys(newLayouts) ) { + if (!state.layouts[l] && l !== 'layoutDimension') { addedCount++; } } @@ -301,17 +301,21 @@ export class DashboardUtilsService { let newColumns; if (addedCount) { for (const l of Object.keys(state.layouts)) { - newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount; - if (newColumns > 0) { - state.layouts[l].gridSettings.columns = newColumns; + if(l !== 'layoutDimension') { + newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount; + if (newColumns > 0) { + state.layouts[l].gridSettings.columns = newColumns; + } } } } if (removedCount) { for (const l of Object.keys(state.layouts)) { - newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount; - if (newColumns > 0) { - state.layouts[l].gridSettings.columns = newColumns; + if(l !== 'layoutDimension') { + newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount; + if (newColumns > 0) { + state.layouts[l].gridSettings.columns = newColumns; + } } } } @@ -335,18 +339,20 @@ export class DashboardUtilsService { if (state) { const result: DashboardLayoutsInfo = {}; for (const l of Object.keys(state.layouts)) { - const layout: DashboardLayout = state.layouts[l]; - if (layout) { - result[l] = { - widgetIds: [], - widgetLayouts: {}, - gridSettings: {} - } as DashboardLayoutInfo; - for (const id of Object.keys(layout.widgets)) { - result[l].widgetIds.push(id); + if(l !== 'layoutDimension') { + const layout: DashboardLayout = state.layouts[l]; + if (layout) { + result[l] = { + widgetIds: [], + widgetLayouts: {}, + gridSettings: {} + } as DashboardLayoutInfo; + for (const id of Object.keys(layout.widgets)) { + result[l].widgetIds.push(id); + } + result[l].widgetLayouts = layout.widgets; + result[l].gridSettings = layout.gridSettings; } - result[l].widgetLayouts = layout.widgets; - result[l].gridSettings = layout.gridSettings; } } return result; 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 c360846941..9c2a521acd 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 @@ -266,7 +266,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC ctrl: null, dashboardCtrl: this } - } + }, + layoutDimension: null }; addWidgetFabButtons: FooterFabButtons = { @@ -654,7 +655,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') { return '100%'; } else { - return this.layouts.right.show && !this.isMobile ? '50%' : '100%'; + return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%'; } } @@ -670,10 +671,32 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') { return '100%'; } else { - return this.isMobile ? '100%' : '50%'; + return this.isMobile ? '100%' : this.calculateWidth('right'); } } + private calculateWidth(layout: string): string { + const layoutDimension = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.layoutDimension; + if (layoutDimension) { + if (layoutDimension.type === 'percentage') { + if(layout === 'right') { + return (100 - layoutDimension.leftWidthPercentage) + '%'; + } else { + return layoutDimension.leftWidthPercentage + '%'; + } + } else { + if (layoutDimension.fixedLayout === layout) { + return layoutDimension.fixedWidth + 'px'; + } else { + const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth; + return layoutWidth + 'px'; + } + } + } else { + return '50%'; + } + } + public rightLayoutHeight(): string { if (!this.isEditingWidget || this.editingLayoutCtx.id === 'right') { return '100%'; @@ -887,13 +910,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } for (const l of Object.keys(this.layouts)) { const layout: DashboardPageLayout = this.layouts[l]; - if (layoutsData[l]) { - layout.show = true; - const layoutInfo: DashboardLayoutInfo = layoutsData[l]; - this.updateLayout(layout, layoutInfo); - } else { - layout.show = false; - this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null}); + if(l !== 'layoutDimension') { + if (layoutsData[l]) { + layout.show = true; + const layoutInfo: DashboardLayoutInfo = layoutsData[l]; + this.updateLayout(layout, layoutInfo); + } else { + layout.show = false; + this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null}); + } } } } @@ -942,9 +967,11 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC private resetHighlight() { for (const l of Object.keys(this.layouts)) { - if (this.layouts[l].layoutCtx) { - if (this.layouts[l].layoutCtx.ctrl) { - this.layouts[l].layoutCtx.ctrl.resetHighlight(); + if(l !== 'layoutDimension' ) { + if (this.layouts[l].layoutCtx) { + if (this.layouts[l].layoutCtx.ctrl) { + this.layouts[l].layoutCtx.ctrl.resetHighlight(); + } } } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index 4fadc96039..de11bf24f2 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -14,7 +14,13 @@ /// limitations under the License. /// -import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models'; +import { + Dashboard, + DashboardLayoutId, + GridSettings, + LayoutDimension, + WidgetLayouts +} from '@app/shared/models/dashboard.models'; import { Widget, WidgetPosition } from '@app/shared/models/widget.models'; import { Timewindow } from '@shared/models/time/time.models'; import { IAliasController, IStateController } from '@core/api/widget-api.models'; @@ -68,7 +74,7 @@ export interface DashboardPageLayout { layoutCtx: DashboardPageLayoutContext; } -export declare type DashboardPageLayouts = {[key in DashboardLayoutId]: DashboardPageLayout}; +export declare type DashboardPageLayouts = {[key in DashboardLayoutId | 'layoutDimension']: DashboardPageLayout & LayoutDimension}; export class LayoutWidgetsArray implements Iterable { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html index 4e7d11255b..3c3e6b9110 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html @@ -34,7 +34,7 @@ -
+
- {{ 'layout.main' | translate }} + {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }} {{ 'layout.right' | translate }}
-
- - +
+
+ + +
+
+ + + {{ 'layout.percentage-width' | translate }} + + + {{ 'layout.fixed-width' | translate }} + + +
+
+ +
+
+
+ + {{ 'layout.left-width' | translate }} + + + + {{ 'layout.right-width' | translate }} + + +
+ {{'layout.layout-min-max' | translate: { min: 10, max: 90 } }} +
+
+
+
+ + + + {{ 'layout.left' | translate }} + + + {{ 'layout.right' | translate }} + + +
+
+ + {{ 'layout.layout-fixed-width' | translate }} + + + {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700 } }} +
+
+
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss new file mode 100644 index 0000000000..b660dc60d0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -0,0 +1,33 @@ +/** + * Copyright © 2016-2022 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 { + ::ng-deep .mat-slider-wrapper { + + .mat-slider-thumb-container { + .mat-slider-thumb-label { + width: 35px; + height: 35px; + } + } + } + + .tb-layout-fixed-container { + width: 100%; + min-width: 368px; + padding: 8px 8px 8px 0; + min-height: 48px; + } +} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index bc61fd46e4..cebaa4c7ae 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -19,7 +19,7 @@ import { ErrorStateMatcher } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { DialogComponent } from '@app/shared/components/dialog.component'; import { UtilsService } from '@core/services/utils.service'; @@ -31,6 +31,8 @@ import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; +import { MatSliderChange } from "@angular/material/slider"; +import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; @@ -40,7 +42,7 @@ export interface ManageDashboardLayoutsDialogData { selector: 'tb-manage-dashboard-layouts-dialog', templateUrl: './manage-dashboard-layouts-dialog.component.html', providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardLayoutsDialogComponent}], - styleUrls: ['../../../components/dashboard/layout-button.scss'] + styleUrls: ['./manage-dashboard-layouts-dialog.component.scss', '../../../components/dashboard/layout-button.scss'] }) export class ManageDashboardLayoutsDialogComponent extends DialogComponent implements OnInit, ErrorStateMatcher { @@ -67,14 +69,29 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent 90) { + widthValue = 90; + } else if (Number(($event.target as any).value) < 10) { + widthValue = 10; + } else { + widthValue = Number(($event.target as any).value); + } + if(layout === LaouytType.MAIN) { + this.layoutsFormGroup.get('leftWidthPercentage').setValue(widthValue); + } else { + this.layoutsFormGroup.get('leftWidthPercentage').setValue(100 - widthValue); + } + this.layoutsFormGroup.markAsDirty(); + } + + formatSliderTooltipLabel(value: number):string { + return `${value}|${100 - value}`; + } + + sliderChange($event: MatSliderChange) { + this.layoutsFormGroup.get('leftWidthPercentage').setValue($event.value); + } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss index 89d036db08..9b80660c1f 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss @@ -17,7 +17,9 @@ button.tb-layout-button { width: 100%; height: 100%; - padding: 40px 20px; + padding: 40px 10px; + transition-duration: 0.5s; + transition-property: max-width; } &::ng-deep { diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index 0c58328e46..1b26096084 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -17,6 +17,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedModule } from '@app/shared/shared.module'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { AddEntityDialogComponent } from '@home/components/entity/add-entity-dialog.component'; import { EntitiesTableComponent } from '@home/components/entity/entities-table.component'; import { DetailsPanelComponent } from '@home/components/details-panel.component'; @@ -277,7 +278,8 @@ import { EntityDetailsPageComponent } from '@home/components/entity/entity-detai SnmpDeviceProfileTransportModule, StatesControllerModule, DeviceCredentialsModule, - DeviceProfileCommonModule + DeviceProfileCommonModule, + MatButtonToggleModule ], exports: [ EntitiesTableComponent, diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts index 4332e484f6..c6dd45aa22 100644 --- a/ui-ngx/src/app/shared/models/dashboard.models.ts +++ b/ui-ngx/src/app/shared/models/dashboard.models.ts @@ -69,9 +69,18 @@ export interface DashboardLayoutInfo { gridSettings?: GridSettings; } +export interface LayoutDimension { + type?: LayoutType, + fixedWidth?: number, + fixedLayout?: DashboardLayoutId, + leftWidthPercentage?: number +} + export declare type DashboardLayoutId = 'main' | 'right'; -export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout}; +export declare type LayoutType = 'percentage' | 'fixed'; + +export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension }; export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo}; 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 4021f7af29..4bd1802fe6 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2344,7 +2344,15 @@ "color": "Color", "main": "Main", "right": "Right", - "select": "Select target layout" + "left": "Left", + "select": "Select target layout", + "percentage-width": "Percentage width (%)", + "fixed-width": "Fixed width (px)", + "left-width": "Left width (%)", + "right-width": "Right width (%)", + "pick-fixed-side": "Fixed side: ", + "layout-fixed-width": "Fixed width (px)", + "layout-min-max": "Width should not be lower then {{min}} and higher then {{max}}" }, "legend": { "direction": "Legend direction", From 1a6ad0512383d6bc2b0faa93ec518648b2e521e3 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Tue, 5 Apr 2022 14:29:14 +0300 Subject: [PATCH 02/19] 6371:dashboard_layouts_width_sizing --- .../core/services/dashboard-utils.service.ts | 8 ++++---- .../dashboard-page.component.ts | 9 +++++---- ...nage-dashboard-layouts-dialog.component.ts | 20 +++++++++---------- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index 500e7247fa..7d55904768 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -291,7 +291,7 @@ export class DashboardUtilsService { removedCount++; } } - for (const l of Object.keys(newLayouts) ) { + for (const l of Object.keys(newLayouts)) { if (!state.layouts[l] && l !== 'layoutDimension') { addedCount++; } @@ -301,7 +301,7 @@ export class DashboardUtilsService { let newColumns; if (addedCount) { for (const l of Object.keys(state.layouts)) { - if(l !== 'layoutDimension') { + if (l !== 'layoutDimension') { newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount; if (newColumns > 0) { state.layouts[l].gridSettings.columns = newColumns; @@ -311,7 +311,7 @@ export class DashboardUtilsService { } if (removedCount) { for (const l of Object.keys(state.layouts)) { - if(l !== 'layoutDimension') { + if (l !== 'layoutDimension') { newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount; if (newColumns > 0) { state.layouts[l].gridSettings.columns = newColumns; @@ -339,7 +339,7 @@ export class DashboardUtilsService { if (state) { const result: DashboardLayoutsInfo = {}; for (const l of Object.keys(state.layouts)) { - if(l !== 'layoutDimension') { + if (l !== 'layoutDimension') { const layout: DashboardLayout = state.layouts[l]; if (layout) { result[l] = { 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 9c2a521acd..a644b2919a 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 @@ -135,6 +135,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import cssjs from '@core/css/css'; import { DOCUMENT } from '@angular/common'; import { IAliasController } from '@core/api/widget-api.models'; +import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; // @dynamic @Component({ @@ -671,15 +672,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') { return '100%'; } else { - return this.isMobile ? '100%' : this.calculateWidth('right'); + return this.isMobile ? '100%' : this.calculateWidth(LaouytType.RIGHT); } } - private calculateWidth(layout: string): string { + private calculateWidth(layout: DashboardLayoutId): string { const layoutDimension = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.layoutDimension; if (layoutDimension) { - if (layoutDimension.type === 'percentage') { - if(layout === 'right') { + if (layoutDimension.type === LayoutWidthType.PERCENTAGE) { + if (layout === LaouytType.RIGHT) { return (100 - layoutDimension.leftWidthPercentage) + '%'; } else { return layoutDimension.leftWidthPercentage + '%'; diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index cebaa4c7ae..43fb551ac8 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -76,9 +76,9 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent 90) { + if (Number(($event.target as any).value) > 90) { widthValue = 90; } else if (Number(($event.target as any).value) < 10) { widthValue = 10; } else { widthValue = Number(($event.target as any).value); } - if(layout === LaouytType.MAIN) { + if (layout === LaouytType.MAIN) { this.layoutsFormGroup.get('leftWidthPercentage').setValue(widthValue); } else { this.layoutsFormGroup.get('leftWidthPercentage').setValue(100 - widthValue); From 664d6bc1d32c7c0797f857598e86d67b061ce924 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Tue, 5 Apr 2022 14:35:35 +0300 Subject: [PATCH 03/19] 6371:typo_corrections --- .../components/dashboard-page/dashboard-page.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 a644b2919a..116e1acea0 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 @@ -653,15 +653,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public mainLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') { + if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.MAIN) { return '100%'; } else { - return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%'; + return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LaouytType.MAIN) : '100%'; } } public mainLayoutHeight(): string { - if (!this.isEditingWidget || this.editingLayoutCtx.id === 'main') { + if (!this.isEditingWidget || this.editingLayoutCtx.id === LaouytType.MAIN) { return '100%'; } else { return '0px'; @@ -669,7 +669,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public rightLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') { + if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.RIGHT) { return '100%'; } else { return this.isMobile ? '100%' : this.calculateWidth(LaouytType.RIGHT); From 570c078f3443920ee6542c7cdb3d1e621d3b9f74 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Tue, 5 Apr 2022 15:58:47 +0300 Subject: [PATCH 04/19] 6371:minor_corrections --- .../layout/manage-dashboard-layouts-dialog.component.html | 4 ++-- ui-ngx/src/assets/locale/locale.constant-en_US.json | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 6a32a166d9..7c16d2eb67 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -110,7 +110,7 @@ max="90">
- {{'layout.layout-min-max' | translate: { min: 10, max: 90 } }} + {{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}
- {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700 } }} + {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}
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 4bd1802fe6..4eb47a55d6 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2348,11 +2348,11 @@ "select": "Select target layout", "percentage-width": "Percentage width (%)", "fixed-width": "Fixed width (px)", - "left-width": "Left width (%)", - "right-width": "Right width (%)", + "left-width": "Left column (%)", + "right-width": "Right column (%)", "pick-fixed-side": "Fixed side: ", "layout-fixed-width": "Fixed width (px)", - "layout-min-max": "Width should not be lower then {{min}} and higher then {{max}}" + "layout-min-max": "Minimum width: {{min}}{{units}}, maximum width: {{max}}{{units}}" }, "legend": { "direction": "Legend direction", From 8526b390d1cc569fc726e4eaf27d7a7b0cdde528 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Mon, 11 Apr 2022 16:31:43 +0300 Subject: [PATCH 05/19] 6371:reactive_forms_refactoring --- ...ge-dashboard-layouts-dialog.component.html | 9 +++-- ...nage-dashboard-layouts-dialog.component.ts | 36 ++++--------------- 2 files changed, 10 insertions(+), 35 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 7c16d2eb67..1e9cbf6cff 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -81,9 +81,9 @@ step="1" style="width: 100%;" max="90" - (input)="sliderChange($event)" formControlName="leftWidthPercentage" thumbLabel + [value]="layoutsFormGroup.value.leftWidthPercentage" [displayWith]="formatSliderTooltipLabel" > @@ -92,8 +92,8 @@ {{ 'layout.left-width' | translate }} {{ 'layout.right-width' | translate }} { + this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(value)); + }); } ngOnInit(): void { @@ -163,36 +168,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent 90) { - widthValue = 90; - } else if (Number(($event.target as any).value) < 10) { - widthValue = 10; - } else { - widthValue = Number(($event.target as any).value); - } - if (layout === LaouytType.MAIN) { - this.layoutsFormGroup.get('leftWidthPercentage').setValue(widthValue); - } else { - this.layoutsFormGroup.get('leftWidthPercentage').setValue(100 - widthValue); - } - this.layoutsFormGroup.markAsDirty(); - } - formatSliderTooltipLabel(value: number):string { return `${value}|${100 - value}`; } - - sliderChange($event: MatSliderChange) { - this.layoutsFormGroup.get('leftWidthPercentage').setValue($event.value); - } } From 8c60300c4cf41354a112b01b55f6814271b4de63 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Mon, 11 Apr 2022 19:00:46 +0300 Subject: [PATCH 06/19] 6371:formControls_change_improvement --- .../manage-dashboard-layouts-dialog.component.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 17f8a85c8a..928a45fbdf 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -94,9 +94,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent { - this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(value)); - }); + this.layoutsFormGroup.get('leftWidthPercentage').valueChanges.subscribe((value) => this.layoutControlChange('rightWidthPercentage', value)); + this.layoutsFormGroup.get('rightWidthPercentage').valueChanges.subscribe((value) => this.layoutControlChange('leftWidthPercentage', value)); } ngOnInit(): void { @@ -171,4 +170,12 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent Date: Thu, 16 Jun 2022 22:10:30 +0300 Subject: [PATCH 07/19] editions after review --- .../core/services/dashboard-utils.service.ts | 48 +++++------ .../dashboard-page.component.ts | 40 +++++---- .../dashboard-page/dashboard-page.models.ts | 3 +- .../dashboard-page/layout/layout.models.ts | 2 +- ...ge-dashboard-layouts-dialog.component.html | 44 +++++----- ...nage-dashboard-layouts-dialog.component.ts | 82 +++++++++++-------- .../src/app/shared/models/dashboard.models.ts | 4 +- 7 files changed, 116 insertions(+), 107 deletions(-) diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index 7d55904768..8e64822897 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -287,35 +287,27 @@ export class DashboardUtilsService { let addedCount = 0; let removedCount = 0; for (const l of Object.keys(state.layouts)) { - if (!newLayouts[l] && l !== 'layoutDimension') { - removedCount++; - } + removedCount++; } for (const l of Object.keys(newLayouts)) { - if (!state.layouts[l] && l !== 'layoutDimension') { - addedCount++; - } + addedCount++; } state.layouts = newLayouts; const layoutsCount = Object.keys(state.layouts).length; let newColumns; if (addedCount) { for (const l of Object.keys(state.layouts)) { - if (l !== 'layoutDimension') { - newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount; - if (newColumns > 0) { - state.layouts[l].gridSettings.columns = newColumns; - } + newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount; + if (newColumns > 0) { + state.layouts[l].gridSettings.columns = newColumns; } } } if (removedCount) { for (const l of Object.keys(state.layouts)) { - if (l !== 'layoutDimension') { - newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount; - if (newColumns > 0) { - state.layouts[l].gridSettings.columns = newColumns; - } + newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount; + if (newColumns > 0) { + state.layouts[l].gridSettings.columns = newColumns; } } } @@ -339,20 +331,18 @@ export class DashboardUtilsService { if (state) { const result: DashboardLayoutsInfo = {}; for (const l of Object.keys(state.layouts)) { - if (l !== 'layoutDimension') { - const layout: DashboardLayout = state.layouts[l]; - if (layout) { - result[l] = { - widgetIds: [], - widgetLayouts: {}, - gridSettings: {} - } as DashboardLayoutInfo; - for (const id of Object.keys(layout.widgets)) { - result[l].widgetIds.push(id); - } - result[l].widgetLayouts = layout.widgets; - result[l].gridSettings = layout.gridSettings; + const layout: DashboardLayout = state.layouts[l]; + if (layout) { + result[l] = { + widgetIds: [], + widgetLayouts: {}, + gridSettings: {} + } as DashboardLayoutInfo; + for (const id of Object.keys(layout.widgets)) { + result[l].widgetIds.push(id); } + result[l].widgetLayouts = layout.widgets; + result[l].gridSettings = layout.gridSettings; } } return result; 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 116e1acea0..f9ecf6646b 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 @@ -43,7 +43,7 @@ import { DashboardLayoutsInfo, DashboardState, DashboardStateLayouts, - GridSettings, + GridSettings, LayoutDimension, WidgetLayout } from '@app/shared/models/dashboard.models'; import { WINDOW } from '@core/services/window.service'; @@ -135,7 +135,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import cssjs from '@core/css/css'; import { DOCUMENT } from '@angular/common'; import { IAliasController } from '@core/api/widget-api.models'; -import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; // @dynamic @Component({ @@ -267,8 +267,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC ctrl: null, dashboardCtrl: this } - }, - layoutDimension: null + } }; addWidgetFabButtons: FooterFabButtons = { @@ -653,15 +652,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public mainLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.MAIN) { + if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.MAIN) { return '100%'; } else { - return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LaouytType.MAIN) : '100%'; + return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LayoutType.MAIN) : '100%'; } } public mainLayoutHeight(): string { - if (!this.isEditingWidget || this.editingLayoutCtx.id === LaouytType.MAIN) { + if (!this.isEditingWidget || this.editingLayoutCtx.id === LayoutType.MAIN) { return '100%'; } else { return '0px'; @@ -669,18 +668,27 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public rightLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.RIGHT) { + if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.RIGHT) { return '100%'; } else { - return this.isMobile ? '100%' : this.calculateWidth(LaouytType.RIGHT); + return this.isMobile ? '100%' : this.calculateWidth(LayoutType.RIGHT); } } private calculateWidth(layout: DashboardLayoutId): string { - const layoutDimension = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.layoutDimension; + let layoutDimension: LayoutDimension; + const mainLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.main; + const rightLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.right; + if (rightLayout) { + if (mainLayout.gridSettings.layoutDimension) { + layoutDimension = mainLayout.gridSettings.layoutDimension; + } else { + layoutDimension = rightLayout.gridSettings.layoutDimension; + } + } if (layoutDimension) { if (layoutDimension.type === LayoutWidthType.PERCENTAGE) { - if (layout === LaouytType.RIGHT) { + if (layout === LayoutType.RIGHT) { return (100 - layoutDimension.leftWidthPercentage) + '%'; } else { return layoutDimension.leftWidthPercentage + '%'; @@ -911,7 +919,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } for (const l of Object.keys(this.layouts)) { const layout: DashboardPageLayout = this.layouts[l]; - if(l !== 'layoutDimension') { if (layoutsData[l]) { layout.show = true; const layoutInfo: DashboardLayoutInfo = layoutsData[l]; @@ -920,7 +927,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC layout.show = false; this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null}); } - } } } @@ -968,11 +974,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC private resetHighlight() { for (const l of Object.keys(this.layouts)) { - if(l !== 'layoutDimension' ) { - if (this.layouts[l].layoutCtx) { - if (this.layouts[l].layoutCtx.ctrl) { - this.layouts[l].layoutCtx.ctrl.resetHighlight(); - } + if (this.layouts[l].layoutCtx) { + if (this.layouts[l].layoutCtx.ctrl) { + this.layouts[l].layoutCtx.ctrl.resetHighlight(); } } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index de11bf24f2..c7ffd6f49c 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -18,7 +18,6 @@ import { Dashboard, DashboardLayoutId, GridSettings, - LayoutDimension, WidgetLayouts } from '@app/shared/models/dashboard.models'; import { Widget, WidgetPosition } from '@app/shared/models/widget.models'; @@ -74,7 +73,7 @@ export interface DashboardPageLayout { layoutCtx: DashboardPageLayoutContext; } -export declare type DashboardPageLayouts = {[key in DashboardLayoutId | 'layoutDimension']: DashboardPageLayout & LayoutDimension}; +export declare type DashboardPageLayouts = {[key in DashboardLayoutId ]: DashboardPageLayout }; export class LayoutWidgetsArray implements Iterable { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts index a9ccd0a67f..49ff9052c2 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts @@ -28,7 +28,7 @@ export enum LayoutWidthType { FIXED = "fixed" } -export enum LaouytType { +export enum LayoutType { MAIN = "main", RIGHT = "right", LEFT = "left" diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 1e9cbf6cff..8ac16e2bb3 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -39,40 +39,40 @@
- -
+ [fxShow]="layoutsFormGroup.get(LayoutType.RIGHT).value"> - + {{ 'layout.percentage-width' | translate }} - + {{ 'layout.fixed-width' | translate }} -
+
+ [value]="layoutsFormGroup.get('leftWidthPercentage').value" + [displayWith]="formatSliderTooltipLabel"> + +
@@ -93,9 +94,9 @@ {{ 'layout.left-width' | translate }} @@ -104,16 +105,15 @@
- {{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }} +
-
@@ -137,12 +137,12 @@ - {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }} +
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 928a45fbdf..32cf52a917 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, OnInit, SkipSelf} from '@angular/core'; import { ErrorStateMatcher } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Store } from '@ngrx/store'; @@ -24,14 +24,14 @@ import { Router } from '@angular/router'; import { DialogComponent } from '@app/shared/components/dialog.component'; import { UtilsService } from '@core/services/utils.service'; import { TranslateService } from '@ngx-translate/core'; -import { DashboardLayoutId, DashboardStateLayouts } from '@app/shared/models/dashboard.models'; +import { DashboardLayoutId, DashboardStateLayouts, LayoutDimension } from '@app/shared/models/dashboard.models'; import { deepClone, isDefined } from '@core/utils'; import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; @@ -50,6 +50,10 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent, @@ -61,7 +65,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent this.layoutControlChange('rightWidthPercentage', value)); @@ -134,36 +146,38 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent Date: Thu, 16 Jun 2022 22:13:57 +0300 Subject: [PATCH 08/19] fixes after review --- .../dashboard-page/dashboard-page.component.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 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 6a07046742..436be6a399 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 @@ -919,14 +919,14 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } for (const l of Object.keys(this.layouts)) { const layout: DashboardPageLayout = this.layouts[l]; - if (layoutsData[l]) { - layout.show = true; - const layoutInfo: DashboardLayoutInfo = layoutsData[l]; - this.updateLayout(layout, layoutInfo); - } else { - layout.show = false; - this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null}); - } + if (layoutsData[l]) { + layout.show = true; + const layoutInfo: DashboardLayoutInfo = layoutsData[l]; + this.updateLayout(layout, layoutInfo); + } else { + layout.show = false; + this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null}); + } } } From 97657284a88169708be9df4943de6cdc3e4c5b17 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Thu, 16 Jun 2022 22:23:14 +0300 Subject: [PATCH 09/19] fixes after review --- ui-ngx/src/app/core/services/dashboard-utils.service.ts | 8 ++++++-- .../components/dashboard-page/dashboard-page.component.ts | 3 ++- .../components/dashboard-page/dashboard-page.models.ts | 2 +- ui-ngx/src/app/shared/models/dashboard.models.ts | 3 +-- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index 8e64822897..e95990e530 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -287,10 +287,14 @@ export class DashboardUtilsService { let addedCount = 0; let removedCount = 0; for (const l of Object.keys(state.layouts)) { - removedCount++; + if (!newLayouts[l]) { + removedCount++; + } } for (const l of Object.keys(newLayouts)) { - addedCount++; + if (!state.layouts[l]) { + addedCount++; + } } state.layouts = newLayouts; const layoutsCount = Object.keys(state.layouts).length; 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 436be6a399..366679cba8 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 @@ -43,7 +43,8 @@ import { DashboardLayoutsInfo, DashboardState, DashboardStateLayouts, - GridSettings, LayoutDimension, + GridSettings, + LayoutDimension, WidgetLayout } from '@app/shared/models/dashboard.models'; import { WINDOW } from '@core/services/window.service'; diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index c7ffd6f49c..ea2421ed1e 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -73,7 +73,7 @@ export interface DashboardPageLayout { layoutCtx: DashboardPageLayoutContext; } -export declare type DashboardPageLayouts = {[key in DashboardLayoutId ]: DashboardPageLayout }; +export declare type DashboardPageLayouts = {[key in DashboardLayoutId]: DashboardPageLayout}; export class LayoutWidgetsArray implements Iterable { diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts index 370faad98b..30c1446722 100644 --- a/ui-ngx/src/app/shared/models/dashboard.models.ts +++ b/ui-ngx/src/app/shared/models/dashboard.models.ts @@ -81,8 +81,7 @@ export declare type DashboardLayoutId = 'main' | 'right'; export declare type LayoutType = 'percentage' | 'fixed'; -// export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension }; -export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout }; +export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout}; export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo}; From 97a70366fa2e01b205c91d4aaa34986c927ced6a Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Fri, 15 Jul 2022 18:23:10 +0300 Subject: [PATCH 10/19] corrections-after-review --- .../dashboard-page.component.ts | 74 ++++- .../dashboard-page/layout/layout.models.ts | 5 - ...ge-dashboard-layouts-dialog.component.html | 54 +++- ...nage-dashboard-layouts-dialog.component.ts | 46 +-- .../assets/locale/locale.constant-en_US.json | 300 +++++++++++++----- 5 files changed, 358 insertions(+), 121 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 366679cba8..a8acb51291 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 @@ -17,13 +17,13 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, - Component, ElementRef, HostBinding, + Component, ElementRef, EventEmitter, HostBinding, Inject, Injector, Input, NgZone, OnDestroy, - OnInit, Optional, + OnInit, Optional, Renderer2, StaticProvider, ViewChild, ViewContainerRef, @@ -136,7 +136,11 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import cssjs from '@core/css/css'; import { DOCUMENT } from '@angular/common'; import { IAliasController } from '@core/api/widget-api.models'; -import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { MatButton } from '@angular/material/button'; +import { VersionControlComponent } from '@home/components/vc/version-control.component'; +import { TbPopoverService } from '@shared/components/popover.service'; +import { tap } from 'rxjs/operators'; +import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; // @dynamic @Component({ @@ -292,6 +296,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC ] }; + updateBreadcrumbs = new EventEmitter(); + private rxSubscriptions = new Array(); get toolbarOpened(): boolean { @@ -331,6 +337,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC private fb: FormBuilder, private dialog: MatDialog, private translate: TranslateService, + private popoverService: TbPopoverService, + private renderer: Renderer2, private ngZone: NgZone, @Optional() @Inject('embeddedValue') private embeddedValue, private overlay: Overlay, @@ -653,15 +661,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public mainLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.MAIN) { + if (this.isEditingWidget && this.editingLayoutCtx.id === 'main') { return '100%'; } else { - return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LayoutType.MAIN) : '100%'; + return this.layouts.right.show && !this.isMobile ? this.calculateWidth('main') : '100%'; } } public mainLayoutHeight(): string { - if (!this.isEditingWidget || this.editingLayoutCtx.id === LayoutType.MAIN) { + if (!this.isEditingWidget || this.editingLayoutCtx.id === 'main') { return '100%'; } else { return '0px'; @@ -669,10 +677,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } public rightLayoutWidth(): string { - if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.RIGHT) { + if (this.isEditingWidget && this.editingLayoutCtx.id === 'right') { return '100%'; } else { - return this.isMobile ? '100%' : this.calculateWidth(LayoutType.RIGHT); + return this.isMobile ? '100%' : this.calculateWidth('right'); } } @@ -689,7 +697,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } if (layoutDimension) { if (layoutDimension.type === LayoutWidthType.PERCENTAGE) { - if (layout === LayoutType.RIGHT) { + if (layout === 'right') { return (100 - layoutDimension.leftWidthPercentage) + '%'; } else { return layoutDimension.leftWidthPercentage + '%'; @@ -1432,4 +1440,52 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } }); } + + toggleVersionControl($event: Event, versionControlButton: MatButton) { + if ($event) { + $event.stopPropagation(); + } + const trigger = versionControlButton._elementRef.nativeElement; + if (this.popoverService.hasPopover(trigger)) { + this.popoverService.hidePopover(trigger); + } else { + const versionControlPopover = this.popoverService.displayPopover(trigger, this.renderer, + this.viewContainerRef, VersionControlComponent, 'leftTop', true, null, + { + detailsMode: true, + active: true, + singleEntityMode: true, + externalEntityId: this.dashboard.externalId || this.dashboard.id, + entityId: this.dashboard.id, + entityName: this.dashboard.name, + onBeforeCreateVersion: () => { + return this.dashboardService.saveDashboard(this.dashboard).pipe( + tap((dashboard) => { + this.dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard); + this.prevDashboard = deepClone(this.dashboard); + }) + ); + } + }, {}, {}, {}, true); + versionControlPopover.tbComponentRef.instance.popoverComponent = versionControlPopover; + versionControlPopover.tbComponentRef.instance.versionRestored.subscribe(() => { + this.dashboardService.getDashboard(this.currentDashboardId).subscribe((dashboard) => { + dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard); + const data = { + dashboard, + widgetEditMode: false, + currentDashboardId: this.currentDashboardId + } as any; + this.init(data); + this.dashboardCtx.stateController.cleanupPreservedStates(); + this.dashboardCtx.stateController.resetState(); + this.setEditMode(true, false); + this.updateBreadcrumbs.emit(); + this.ngZone.run(() => { + this.cd.detectChanges(); + }); + }); + }); + } + } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts index 49ff9052c2..768d300934 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts @@ -28,8 +28,3 @@ export enum LayoutWidthType { FIXED = "fixed" } -export enum LayoutType { - MAIN = "main", - RIGHT = "right", - LEFT = "left" -} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 8ac16e2bb3..a4923cd305 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -38,30 +38,31 @@
-
+
+ style="width: 100%;" + [fxShow]="layoutsFormGroup.get('right').value"> @@ -72,9 +73,8 @@ {{ 'layout.fixed-width' | translate }} -
-
+
-
-
+
- + {{ 'layout.left-width' | translate }} + + {{ 'layout.left-width-percentage-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 90 } }} + + + {{ 'layout.value-min-error' | translate: { min: 10 } }} + {{ 'layout.right-width' | translate }} @@ -108,6 +116,15 @@ step="1" min="10" max="90"> + + {{ 'layout.right-width-percentage-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 90 } }} + + + {{ 'layout.value-min-error' | translate: { min: 10 } }} +
@@ -115,8 +132,9 @@
-
+
+ max="1700"> + + {{ 'layout.layout-fixed-width-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 1700 } }} + + + {{ 'layout.value-min-error' | translate: { min: 150 } }} +
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 32cf52a917..b3cf784fc5 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, Inject, OnInit, SkipSelf} from '@angular/core'; +import { Component, Inject, OnInit, SkipSelf} from '@angular/core'; import { ErrorStateMatcher } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Store } from '@ngrx/store'; @@ -31,7 +31,8 @@ import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { Subscription } from "rxjs"; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; @@ -52,7 +53,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent; submitted = false; @@ -65,19 +66,18 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent this.layoutControlChange('rightWidthPercentage', value)); - this.layoutsFormGroup.get('rightWidthPercentage').valueChanges.subscribe((value) => this.layoutControlChange('leftWidthPercentage', value)); + const leftWidthPercentageSub = this.layoutsFormGroup.get('leftWidthPercentage').valueChanges + .subscribe((value) => this.layoutControlChange('rightWidthPercentage', value)); + const rightWidthPercentageSub = this.layoutsFormGroup.get('rightWidthPercentage').valueChanges + .subscribe((value) => this.layoutControlChange('leftWidthPercentage', value)); + this.subscriptions = [leftWidthPercentageSub, rightWidthPercentageSub]; } ngOnInit(): void { } + ngOnDestroy(): void { + for (let subscription of this.subscriptions) { + subscription.unsubscribe(); + } + } + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const originalErrorState = this.errorStateMatcher.isErrorState(control, form); const customErrorState = !!(control && control.invalid && this.submitted); @@ -143,7 +152,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent{ modified, plural, 0 {No entities} 1 {1 entity} other {# entities} } modified.
{ removed, plural, 0 {No entities} 1 {1 entity} other {# entities} } removed.", + "remove-other-entities": "Remove other entities", + "find-existing-entity-by-name": "Find existing entity by name", + "restore-entities-from-version": "Restore entities from version '{{versionName}}'", + "restoring-entities-from-version": "Restoring entities... Please wait", + "no-entities-restored": "No entities restored", + "created": "{{created}} created", + "updated": "{{updated}} updated", + "deleted": "{{deleted}} deleted", + "remove-other-entities-confirm-text": "Be careful! This will permanently delete all current entities
not present in the version you want to restore.

Please type remove other entities to confirm.", + "auto-commit-to-branch": "auto-commit to {{ branch }} branch", + "default-create-entity-version-name": "{{entityName}} update", + "sync-strategy-merge-hint": "Creates or updates selected entities in the repository. All other repository entities are not modified.", + "sync-strategy-overwrite-hint": "Creates or updates selected entities in the repository. All other repository entities are deleted.", + "device-credentials-conflict": "Failed to load the device with external id {{entityId}}
due to the same credentials are already present in the database for another device.
Please consider disabling the load credentials setting in the restore form.", + "missing-referenced-entity": "Failed to load the {{sourceEntityTypeName}} with external id {{sourceEntityId}}
because it references missing {{targetEntityTypeName}} with id {{targetEntityId}}.", + "runtime-failed": "Failed: {{message}}" + }, "widget": { "widget-library": "Widgets Library", "widget-bundle": "Widgets Bundle", @@ -4235,6 +4384,7 @@ "default-map-zoom-level": "Default map zoom level (0 - 20)", "default-map-center-position": "Default map center position (0,0)", "disable-scroll-zooming": "Disable scroll zooming", + "disable-double-click-zooming": "Disable double click zooming", "disable-zoom-control-buttons": "Disable zoom control buttons", "fit-map-bounds": "Fit map bounds to cover all markers", "use-default-map-center-position": "Use default map center position", From 00a56bf6cdb0c6d583f5bb47f43068d1b94c852a Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Wed, 27 Jul 2022 13:56:11 +0300 Subject: [PATCH 11/19] UI: Refactoring code --- .../dashboard-page.component.ts | 48 ++-- .../dashboard-page/dashboard-page.models.ts | 7 +- .../dashboard-page/layout/layout.models.ts | 4 +- ...ge-dashboard-layouts-dialog.component.html | 272 ++++++++---------- ...ge-dashboard-layouts-dialog.component.scss | 23 +- ...nage-dashboard-layouts-dialog.component.ts | 111 ++++--- .../home/components/home-components.module.ts | 4 +- ui-ngx/src/app/shared/shared.module.ts | 3 + 8 files changed, 246 insertions(+), 226 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 a8acb51291..85f12c2a32 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 @@ -140,7 +140,7 @@ import { MatButton } from '@angular/material/button'; import { VersionControlComponent } from '@home/components/vc/version-control.component'; import { TbPopoverService } from '@shared/components/popover.service'; import { tap } from 'rxjs/operators'; -import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; +import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; // @dynamic @Component({ @@ -685,34 +685,34 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } private calculateWidth(layout: DashboardLayoutId): string { - let layoutDimension: LayoutDimension; - const mainLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.main; - const rightLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.right; - if (rightLayout) { - if (mainLayout.gridSettings.layoutDimension) { - layoutDimension = mainLayout.gridSettings.layoutDimension; - } else { - layoutDimension = rightLayout.gridSettings.layoutDimension; - } + let layoutDimension: LayoutDimension; + const mainLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.main; + const rightLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.right; + if (rightLayout) { + if (mainLayout.gridSettings.layoutDimension) { + layoutDimension = mainLayout.gridSettings.layoutDimension; + } else { + layoutDimension = rightLayout.gridSettings.layoutDimension; } - if (layoutDimension) { - if (layoutDimension.type === LayoutWidthType.PERCENTAGE) { - if (layout === 'right') { - return (100 - layoutDimension.leftWidthPercentage) + '%'; - } else { - return layoutDimension.leftWidthPercentage + '%'; - } + } + if (layoutDimension) { + if (layoutDimension.type === LayoutWidthType.PERCENTAGE) { + if (layout === 'right') { + return (100 - layoutDimension.leftWidthPercentage) + '%'; } else { - if (layoutDimension.fixedLayout === layout) { - return layoutDimension.fixedWidth + 'px'; - } else { - const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth; - return layoutWidth + 'px'; - } + return layoutDimension.leftWidthPercentage + '%'; } } else { - return '50%'; + if (layoutDimension.fixedLayout === layout) { + return layoutDimension.fixedWidth + 'px'; + } else { + const layoutWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width - layoutDimension.fixedWidth; + return layoutWidth + 'px'; + } } + } else { + return '50%'; + } } public rightLayoutHeight(): string { diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts index ea2421ed1e..4fadc96039 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts @@ -14,12 +14,7 @@ /// limitations under the License. /// -import { - Dashboard, - DashboardLayoutId, - GridSettings, - WidgetLayouts -} from '@app/shared/models/dashboard.models'; +import { Dashboard, DashboardLayoutId, GridSettings, WidgetLayouts } from '@app/shared/models/dashboard.models'; import { Widget, WidgetPosition } from '@app/shared/models/widget.models'; import { Timewindow } from '@shared/models/time/time.models'; import { IAliasController, IStateController } from '@core/api/widget-api.models'; diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts index 768d300934..d27922f500 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts @@ -24,7 +24,7 @@ export interface ILayoutController { } export enum LayoutWidthType { - PERCENTAGE = "percentage", - FIXED = "fixed" + PERCENTAGE = 'percentage', + FIXED = 'fixed' } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index a4923cd305..7cc135e68f 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -25,167 +25,147 @@ close - - -
-
-
- - {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }} - - - {{ 'layout.right' | translate }} - +
+
+ + {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }} + + + {{ 'layout.right' | translate }} + +
+
+
+ +
-
-
- - +
+ + + {{ 'layout.percentage-width' | translate }} + + + {{ 'layout.fixed-width' | translate }} + + +
+ + +
+ + {{ 'layout.left-width' | translate }} + + + {{ 'layout.left-width-percentage-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 90 } }} + + + {{ 'layout.value-min-error' | translate: { min: 10 } }} + + + + {{ 'layout.right-width' | translate }} + + + {{ 'layout.right-width-percentage-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 90 } }} + + + {{ 'layout.value-min-error' | translate: { min: 10 } }} + + +
+
-
- - - {{ 'layout.percentage-width' | translate }} - - - {{ 'layout.fixed-width' | translate }} - - -
-
- - -
-
-
- - {{ 'layout.left-width' | translate }} - - - {{ 'layout.left-width-percentage-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 90 } }} - - - {{ 'layout.value-min-error' | translate: { min: 10 } }} - - - - {{ 'layout.right-width' | translate }} - - - {{ 'layout.right-width-percentage-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 90 } }} - - - {{ 'layout.value-min-error' | translate: { min: 10 } }} - - -
- -
-
-
-
- - - - {{ 'layout.left' | translate }} - - - {{ 'layout.right' | translate }} - - -
-
- - {{ 'layout.layout-fixed-width' | translate }} - - - {{ 'layout.layout-fixed-width-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 1700 } }} - - - {{ 'layout.value-min-error' | translate: { min: 150 } }} - - - -
+
+
+ + + + {{ 'layout.left' | translate }} + + + {{ 'layout.right' | translate }} + +
+ + {{ 'layout.layout-fixed-width' | translate }} + + + {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }} + + + {{ 'layout.layout-fixed-width-required' | translate }} + + + {{ 'layout.value-max-error' | translate: { max: 1700 } }} + + + {{ 'layout.value-min-error' | translate: { min: 150 } }} + +
-
+
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss index b660dc60d0..0021216211 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -14,8 +14,22 @@ * limitations under the License. */ :host { - ::ng-deep .mat-slider-wrapper { + .tb-layout-fixed-container { + width: 100%; + min-width: 368px; + padding: 8px 8px 8px 0; + min-height: 48px; + } + .tb-hint-group { + padding: 0; + margin-top: -15px; + display: block; + } +} + +:host ::ng-deep { + .mat-slider-wrapper { .mat-slider-thumb-container { .mat-slider-thumb-label { width: 35px; @@ -23,11 +37,4 @@ } } } - - .tb-layout-fixed-container { - width: 100%; - min-width: 368px; - padding: 8px 8px 8px 0; - min-height: 48px; - } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index b3cf784fc5..295b01476f 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, Inject, OnInit, SkipSelf} from '@angular/core'; +import { Component, Inject, SkipSelf } from '@angular/core'; import { ErrorStateMatcher } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Store } from '@ngrx/store'; @@ -31,8 +31,8 @@ import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import { LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models"; -import { Subscription } from "rxjs"; +import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; +import { Subscription } from 'rxjs'; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; @@ -45,7 +45,7 @@ export interface ManageDashboardLayoutsDialogData { styleUrls: ['./manage-dashboard-layouts-dialog.component.scss', '../../../components/dashboard/layout-button.scss'] }) export class ManageDashboardLayoutsDialogComponent extends DialogComponent - implements OnInit, ErrorStateMatcher { + implements ErrorStateMatcher { layoutsFormGroup: FormGroup; @@ -53,7 +53,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent; + subscriptions: Array = []; submitted = false; @@ -71,53 +71,90 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent { + if (value === LayoutWidthType.FIXED) { + this.layoutsFormGroup.get('leftWidthPercentage').disable(); + this.layoutsFormGroup.get('rightWidthPercentage').disable(); + this.layoutsFormGroup.get('fixedWidth').enable(); + this.layoutsFormGroup.get('fixedLayout').enable(); + } else { + this.layoutsFormGroup.get('leftWidthPercentage').enable(); + this.layoutsFormGroup.get('rightWidthPercentage').enable(); + this.layoutsFormGroup.get('fixedWidth').disable(); + this.layoutsFormGroup.get('fixedLayout').disable(); + } + } + ) + ); + if (this.layouts.right) { if (this.layouts.right.gridSettings.layoutDimension) { - this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.right.gridSettings.layoutDimension.fixedLayout); - this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED); - this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.right.gridSettings.layoutDimension.fixedWidth); + this.layoutsFormGroup.patchValue({ + fixedLayout: this.layouts.right.gridSettings.layoutDimension.fixedLayout, + type: LayoutWidthType.FIXED, + fixedWidth: this.layouts.right.gridSettings.layoutDimension.fixedWidth + }, {emitEvent: false}); } else if (this.layouts.main.gridSettings.layoutDimension) { if (this.layouts.main.gridSettings.layoutDimension.type === LayoutWidthType.FIXED) { - this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.main.gridSettings.layoutDimension.fixedLayout); - this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED); - this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.main.gridSettings.layoutDimension.fixedWidth); + this.layoutsFormGroup.patchValue({ + fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout, + type: LayoutWidthType.FIXED, + fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth + }, {emitEvent: false}); } else { const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage); - this.layoutsFormGroup.get('leftWidthPercentage').setValue(leftWidthPercentage); - this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(leftWidthPercentage)); + this.layoutsFormGroup.patchValue({ + leftWidthPercentage, + sliderPercentage: leftWidthPercentage, + rightWidthPercentage: 100 - Number(leftWidthPercentage) + }, {emitEvent: false}); } } } - if (!this.layouts['main']) { - this.layouts['main'] = this.dashboardUtils.createDefaultLayoutData(); + if (!this.layouts.main) { + this.layouts.main = this.dashboardUtils.createDefaultLayoutData(); } - if (!this.layouts['right']) { - this.layouts['right'] = this.dashboardUtils.createDefaultLayoutData(); + if (!this.layouts.right) { + this.layouts.right = this.dashboardUtils.createDefaultLayoutData(); } - const leftWidthPercentageSub = this.layoutsFormGroup.get('leftWidthPercentage').valueChanges - .subscribe((value) => this.layoutControlChange('rightWidthPercentage', value)); - const rightWidthPercentageSub = this.layoutsFormGroup.get('rightWidthPercentage').valueChanges - .subscribe((value) => this.layoutControlChange('leftWidthPercentage', value)); - this.subscriptions = [leftWidthPercentageSub, rightWidthPercentageSub]; - } - - ngOnInit(): void { + this.subscriptions.push( + this.layoutsFormGroup.get('sliderPercentage').valueChanges + .subscribe( + (value) => this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value) + )); + this.subscriptions.push( + this.layoutsFormGroup.get('leftWidthPercentage').valueChanges + .subscribe( + (value) => { + this.layoutControlChange('rightWidthPercentage', value); + } + )); + this.subscriptions.push( + this.layoutsFormGroup.get('rightWidthPercentage').valueChanges + .subscribe( + (value) => { + this.layoutControlChange('leftWidthPercentage', value); + } + )); } ngOnDestroy(): void { - for (let subscription of this.subscriptions) { + for (const subscription of this.subscriptions) { subscription.unsubscribe(); } } @@ -186,20 +223,20 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent Date: Wed, 3 Aug 2022 15:52:05 +0300 Subject: [PATCH 12/19] layouts dialog minor improvements --- ...ge-dashboard-layouts-dialog.component.html | 27 +++++++++---------- ...ge-dashboard-layouts-dialog.component.scss | 2 +- .../assets/locale/locale.constant-en_US.json | 3 ++- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 7cc135e68f..b5074f63b2 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -27,12 +27,9 @@
- - {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main') | translate }} - - - {{ 'layout.right' | translate }} - + + {{ 'layout.divider' | translate }} +
@@ -56,15 +53,6 @@
- - - {{ 'layout.percentage-width' | translate }} - - - {{ 'layout.fixed-width' | translate }} - -
+ + + {{ 'layout.percentage-width' | translate }} + + + {{ 'layout.fixed-width' | translate }} + +
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss index 0021216211..9436529bec 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -23,7 +23,7 @@ .tb-hint-group { padding: 0; - margin-top: -15px; + margin-top: -14px; display: block; } } 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 a7cd8dee81..0239631da7 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2504,7 +2504,8 @@ "value-max-error": "Value must be less then {{max}}", "layout-fixed-width-required": "Fixed width is required", "right-width-percentage-required": "Right percentage is required", - "left-width-percentage-required": "Left percentage is required" + "left-width-percentage-required": "Left percentage is required", + "divider": "Divider" }, "legend": { "direction": "Legend direction", From ff842d85ce0a57cf984304aac73346614e1ae4f3 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Mon, 15 Aug 2022 12:07:24 +0300 Subject: [PATCH 13/19] UI:6371: Layouts sizing design refactoring --- ...ge-dashboard-layouts-dialog.component.html | 232 +++++++++--------- ...ge-dashboard-layouts-dialog.component.scss | 132 ++++++++++ ...nage-dashboard-layouts-dialog.component.ts | 147 +++++++++-- .../components/dashboard/layout-button.scss | 3 +- .../assets/locale/locale.constant-en_US.json | 9 +- 5 files changed, 384 insertions(+), 139 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index b5074f63b2..fa61d49b66 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -25,131 +25,139 @@ close -
-
+
+
{{ 'layout.divider' | translate }}
-
-
- - +
+ + + {{ 'layout.percentage-width' | translate }} + + + {{ 'layout.fixed-width' | translate }} + + +
+
+
+ + +
+ + +
+
+
+ + +
+ + +
+
+
-
-
- +
+ + [displayWith]="formatSliderTooltipLabel.bind(this)"> -
- - {{ 'layout.left-width' | translate }} - - - {{ 'layout.left-width-percentage-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 90 } }} - - - {{ 'layout.value-min-error' | translate: { min: 10 } }} - - - - {{ 'layout.right-width' | translate }} - - - {{ 'layout.right-width-percentage-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 90 } }} - - - {{ 'layout.value-min-error' | translate: { min: 10 } }} - - + + +
+ +
-
-
-
- - - - {{ 'layout.left' | translate }} - - - {{ 'layout.right' | translate }} - - -
- - {{ 'layout.layout-fixed-width' | translate }} - - - {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }} - - - {{ 'layout.layout-fixed-width-required' | translate }} - - - {{ 'layout.value-max-error' | translate: { max: 1700 } }} - - - {{ 'layout.value-min-error' | translate: { min: 150 } }} - - -
- - - {{ 'layout.percentage-width' | translate }} - - - {{ 'layout.fixed-width' | translate }} - -
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss index 9436529bec..0c4a8da175 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -26,6 +26,93 @@ margin-top: -14px; display: block; } + + .tb-layout-preview { + width: 120%; + background-color: rgba(243,246,251,255); + padding: 35px; + + &-container { + width: 75%; + + button.tb-fixed-layout-button { + background-color: transparent; + color: black; + cursor: pointer; + + &:hover { + background-color: lightgrey; + } + } + + div { + transition-duration: 0.5s; + transition-property: max-width; + position: relative; + + .mat-icon-button { + align-self: end; + } + } + + .tb-layout-preview-element { + position: absolute; + z-index: 99; + + .mat-icon { + font-size: 20px; + width: 20px; + height: 20px; + line-height: 20px; + color: rgba(0, 0, 0, 0.38); + + &:hover { + transform: rotate(180deg); + transition: transform 0.5s; + } + } + } + + &-main { + min-width: 25%; + } + + /* remove arrows from input for Chrome, Safari, Edge, Opera */ + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + /* remove arrows from input for Firefox */ + input[type=number] { + -moz-appearance: textfield; + } + + .tb-layout-preview-input { + margin: 80px 0 0; + color: white; + + input { + border: 1px solid lightslategray; + background-color: transparent; + color: white; + border-radius: 4px; + text-align: center; + outline: none; + width: 37px; + height: 28px; + font-size: 14px; + + &:invalid { + outline: 2px solid red; + border: 1px solid transparent; + background-color: rgba(255, 5, 5, 0.2); + } + } + } + } + } } :host ::ng-deep { @@ -37,4 +124,49 @@ } } } + + .mat-button-toggle-group { + width: 100%; + min-width: 354px; + border: 2px solid rgba(0, 0, 0, 0.06); + + .mat-button-toggle-checked { + background: rgba(0, 0, 0, 0.06); + } + + .mat-button-toggle { + border: none !important; + } + } + + /* Make mat-slider tooltip always visible */ + .mat-slider-thumb-label { + transform: rotate(45deg) !important; + border-radius: 50% 50% 0 !important; + } + + .mat-slider-thumb { + transform: scale(0) !important; + } + + .mat-slider-thumb-label-text { + opacity: 1 !important; + } +} + +::ng-deep { + /* Alarm tooltip with side-to-side movement */ + .tb-layout-error-tooltip-right { + background-color: #b71c1c !important; + margin: 5px 0 0 105px; + width: 160px; + text-align: center; + } + + .tb-layout-error-tooltip-main { + background-color: #b71c1c !important; + margin: 5px 105px 0 0; + width: 160px; + text-align: center; + } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 295b01476f..95a91e24c2 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,25 +14,34 @@ /// limitations under the License. /// -import { Component, Inject, SkipSelf } from '@angular/core'; -import { ErrorStateMatcher } from '@angular/material/core'; -import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; -import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; -import { Router } from '@angular/router'; -import { DialogComponent } from '@app/shared/components/dialog.component'; -import { UtilsService } from '@core/services/utils.service'; -import { TranslateService } from '@ngx-translate/core'; -import { DashboardLayoutId, DashboardStateLayouts, LayoutDimension } from '@app/shared/models/dashboard.models'; -import { deepClone, isDefined } from '@core/utils'; -import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; +import {Component, Inject, SkipSelf, ViewChild} from '@angular/core'; +import {ErrorStateMatcher} from '@angular/material/core'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog'; +import {Store} from '@ngrx/store'; +import {AppState} from '@core/core.state'; +import { + AbstractControl, + FormBuilder, + FormControl, + FormGroup, + FormGroupDirective, + NgForm, + Validators +} from '@angular/forms'; +import {Router} from '@angular/router'; +import {DialogComponent} from '@app/shared/components/dialog.component'; +import {UtilsService} from '@core/services/utils.service'; +import {TranslateService} from '@ngx-translate/core'; +import {DashboardLayoutId, DashboardStateLayouts, LayoutDimension} from '@app/shared/models/dashboard.models'; +import {deepClone, isDefined} from '@core/utils'; +import {DashboardUtilsService} from '@core/services/dashboard-utils.service'; import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; -import { Subscription } from 'rxjs'; +import {LayoutWidthType} from '@home/components/dashboard-page/layout/layout.models'; +import {Subscription} from 'rxjs'; +import {MatTooltip} from "@angular/material/tooltip"; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; @@ -47,6 +56,8 @@ export interface ManageDashboardLayoutsDialogData { export class ManageDashboardLayoutsDialogComponent extends DialogComponent implements ErrorStateMatcher { + @ViewChild('tooltip') tooltip: MatTooltip; + layoutsFormGroup: FormGroup; layouts: DashboardStateLayouts; @@ -70,10 +81,12 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value) )); + this.subscriptions.push( + this.layoutsFormGroup.get('sliderFixed').valueChanges + .subscribe( + (value) => { + this.layoutsFormGroup.get('fixedWidth').patchValue(value) + } + )); this.subscriptions.push( this.layoutsFormGroup.get('leftWidthPercentage').valueChanges .subscribe( (value) => { + this.showTooltip(this.layoutsFormGroup.get('leftWidthPercentage'), LayoutWidthType.PERCENTAGE, 'main'); this.layoutControlChange('rightWidthPercentage', value); } )); @@ -148,9 +171,18 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent { + this.showTooltip(this.layoutsFormGroup.get('rightWidthPercentage'), LayoutWidthType.PERCENTAGE, 'right'); this.layoutControlChange('leftWidthPercentage', value); } )); + this.subscriptions.push( + this.layoutsFormGroup.get('fixedWidth').valueChanges + .subscribe( + (value) => { + this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED, this.layoutsFormGroup.get('fixedLayout').value); + this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false}); + } + )); } ngOnDestroy(): void { @@ -224,13 +256,21 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent Date: Mon, 15 Aug 2022 12:15:02 +0300 Subject: [PATCH 14/19] UI:6371: Layouts sizing typo edits --- ...nage-dashboard-layouts-dialog.component.ts | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 95a91e24c2..51b1338f95 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,11 +14,11 @@ /// limitations under the License. /// -import {Component, Inject, SkipSelf, ViewChild} from '@angular/core'; -import {ErrorStateMatcher} from '@angular/material/core'; -import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog'; -import {Store} from '@ngrx/store'; -import {AppState} from '@core/core.state'; +import { Component, Inject, SkipSelf, ViewChild } from '@angular/core'; +import { ErrorStateMatcher } from '@angular/material/core'; +import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; import { AbstractControl, FormBuilder, @@ -28,20 +28,20 @@ import { NgForm, Validators } from '@angular/forms'; -import {Router} from '@angular/router'; -import {DialogComponent} from '@app/shared/components/dialog.component'; -import {UtilsService} from '@core/services/utils.service'; -import {TranslateService} from '@ngx-translate/core'; -import {DashboardLayoutId, DashboardStateLayouts, LayoutDimension} from '@app/shared/models/dashboard.models'; -import {deepClone, isDefined} from '@core/utils'; -import {DashboardUtilsService} from '@core/services/dashboard-utils.service'; +import { Router } from '@angular/router'; +import { DialogComponent } from '@app/shared/components/dialog.component'; +import { UtilsService } from '@core/services/utils.service'; +import { TranslateService } from '@ngx-translate/core'; +import { DashboardLayoutId, DashboardStateLayouts, LayoutDimension } from '@app/shared/models/dashboard.models'; +import { deepClone, isDefined } from '@core/utils'; +import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import {LayoutWidthType} from '@home/components/dashboard-page/layout/layout.models'; -import {Subscription} from 'rxjs'; -import {MatTooltip} from "@angular/material/tooltip"; +import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; +import { Subscription } from 'rxjs'; +import { MatTooltip } from "@angular/material/tooltip"; export interface ManageDashboardLayoutsDialogData { layouts: DashboardStateLayouts; From a8406155648f5d9630b9b4ebaa5571aa12969e03 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Fri, 19 Aug 2022 13:57:49 +0300 Subject: [PATCH 15/19] UI: layout preview improvements --- ...ge-dashboard-layouts-dialog.component.html | 66 ++++++++++--------- ...ge-dashboard-layouts-dialog.component.scss | 18 +++-- ...nage-dashboard-layouts-dialog.component.ts | 26 ++++++-- 3 files changed, 68 insertions(+), 42 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index fa61d49b66..442c584402 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -56,7 +56,8 @@ matTooltipPosition="above" (click)="openLayoutSettings('main')" class="tb-layout-preview-element" - aria-label="Layout settings"> + aria-label="Layout settings" + [ngClass]="layoutButtonTextAndClass('main', false)"> settings
+ aria-label="Layout settings" + [ngClass]="layoutButtonTextAndClass('right', false)"> settings
-
-
- - - - -
- - -
+
+ + + + +
+ +
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss index 0c4a8da175..cf6a3813c4 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -37,11 +37,15 @@ button.tb-fixed-layout-button { background-color: transparent; - color: black; + color: #000000; cursor: pointer; + .mat-icon { + color: rgba(0, 0, 0, 0.38); + } + &:hover { - background-color: lightgrey; + background-color: #d3d3d3; } } @@ -64,7 +68,7 @@ width: 20px; height: 20px; line-height: 20px; - color: rgba(0, 0, 0, 0.38); + color: rgba(255, 255, 255, 0.76); &:hover { transform: rotate(180deg); @@ -94,7 +98,7 @@ color: white; input { - border: 1px solid lightslategray; + border: 1px solid #778899; background-color: transparent; color: white; border-radius: 4px; @@ -105,7 +109,7 @@ font-size: 14px; &:invalid { - outline: 2px solid red; + outline: 2px solid #b71c1c; border: 1px solid transparent; background-color: rgba(255, 5, 5, 0.2); } @@ -169,4 +173,8 @@ width: 160px; text-align: center; } + + .tb-layout-button-tooltip { + margin: 30px 40px -35px -50px; + } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index 51b1338f95..96d4bfa20c 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { Component, Inject, SkipSelf, ViewChild } from '@angular/core'; +import { Component, ElementRef, Inject, SkipSelf, ViewChild } from '@angular/core'; import { ErrorStateMatcher } from '@angular/material/core'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Store } from '@ngrx/store'; @@ -77,7 +77,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent { + elementToDisable.disabled = false; + }, 250); + } + if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED) { this.layoutsFormGroup.get('fixedLayout').setValue(layout); } @@ -321,14 +337,14 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent Date: Mon, 22 Aug 2022 13:28:38 +0300 Subject: [PATCH 16/19] UI: layouts preview styles additions --- ...nage-dashboard-layouts-dialog.component.html | 4 +++- ...nage-dashboard-layouts-dialog.component.scss | 17 ++++++++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 442c584402..95f05dcab2 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -27,7 +27,7 @@
- + {{ 'layout.divider' | translate }}
@@ -143,6 +143,7 @@ step="1" max="90" style="width: 100%;" + color="accent" formControlName="sliderPercentage" thumbLabel [displayWith]="formatSliderTooltipLabel.bind(this)"> @@ -152,6 +153,7 @@ step="1" max="1700" style="width: 100%;" + color="accent" formControlName="sliderFixed" thumbLabel [displayWith]="formatSliderTooltipLabel.bind(this)"> diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss index cf6a3813c4..2d1eb7ee47 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -13,6 +13,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +@use '~@angular/material' as mat; +@import '../theme.scss'; + :host { .tb-layout-fixed-container { width: 100%; @@ -29,7 +33,7 @@ .tb-layout-preview { width: 120%; - background-color: rgba(243,246,251,255); + background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.6); padding: 35px; &-container { @@ -45,7 +49,7 @@ } &:hover { - background-color: #d3d3d3; + background-color: rgba(211, 211, 211, 0.6); } } @@ -95,12 +99,11 @@ .tb-layout-preview-input { margin: 80px 0 0; - color: white; input { border: 1px solid #778899; background-color: transparent; - color: white; + color: #ffffff; border-radius: 4px; text-align: center; outline: none; @@ -109,7 +112,7 @@ font-size: 14px; &:invalid { - outline: 2px solid #b71c1c; + outline: 2px solid rgb(221, 44, 0); border: 1px solid transparent; background-color: rgba(255, 5, 5, 0.2); } @@ -161,14 +164,14 @@ ::ng-deep { /* Alarm tooltip with side-to-side movement */ .tb-layout-error-tooltip-right { - background-color: #b71c1c !important; + background-color: rgb(221, 44, 0) !important; margin: 5px 0 0 105px; width: 160px; text-align: center; } .tb-layout-error-tooltip-main { - background-color: #b71c1c !important; + background-color: rgb(221, 44, 0) !important; margin: 5px 105px 0 0; width: 160px; text-align: center; From b384c73119c246c1122225ff21976406f07a04f9 Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Thu, 25 Aug 2022 12:17:36 +0300 Subject: [PATCH 17/19] UI: layout preview warn palette --- .../manage-dashboard-layouts-dialog.component.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss index 2d1eb7ee47..1e82f6b3e3 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss @@ -17,6 +17,8 @@ @use '~@angular/material' as mat; @import '../theme.scss'; +$tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text); + :host { .tb-layout-fixed-container { width: 100%; @@ -112,9 +114,9 @@ font-size: 14px; &:invalid { - outline: 2px solid rgb(221, 44, 0); + outline: 2px solid $tb-warn; border: 1px solid transparent; - background-color: rgba(255, 5, 5, 0.2); + background-color: rgba($tb-warn, 0.2); } } } @@ -164,14 +166,14 @@ ::ng-deep { /* Alarm tooltip with side-to-side movement */ .tb-layout-error-tooltip-right { - background-color: rgb(221, 44, 0) !important; + background-color: $tb-warn !important; margin: 5px 0 0 105px; width: 160px; text-align: center; } .tb-layout-error-tooltip-main { - background-color: rgb(221, 44, 0) !important; + background-color: $tb-warn !important; margin: 5px 105px 0 0; width: 160px; text-align: center; From 32ce3d08a7074dbbc5464c463d312a8ca3b98b8b Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Mon, 12 Sep 2022 15:52:27 +0300 Subject: [PATCH 18/19] UI: Refactoring code --- ...ge-dashboard-layouts-dialog.component.html | 3 +- ...nage-dashboard-layouts-dialog.component.ts | 37 +++++++++---------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html index 95f05dcab2..6c03c79bdb 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html @@ -49,7 +49,7 @@ #tooltip="matTooltip" matTooltip="" matTooltipPosition="below"> -
+
-
- + -
-
+
-
- + -
-
- + -
- - + +
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts index d4ac0a9fd3..917ee619f9 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts @@ -39,7 +39,11 @@ import { DashboardSettingsDialogComponent, DashboardSettingsDialogData } from '@home/components/dashboard-page/dashboard-settings-dialog.component'; -import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models'; +import { + LayoutFixedSize, + LayoutPercentageSize, + LayoutWidthType +} from '@home/components/dashboard-page/layout/layout.models'; import { Subscription } from 'rxjs'; import { MatTooltip } from '@angular/material/tooltip'; @@ -60,7 +64,11 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent