-
-
+
+
+
+ {{ 'layout.percentage-width' | translate }}
+
+
+ {{ 'layout.fixed-width' | translate }}
+
+
+
-
-
-
- {{ 'layout.percentage-width' | translate }}
-
-
- {{ 'layout.fixed-width' | translate }}
-
-
-
-
-
-
-
-
- {{ '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