Merge pull request #6374 from Dmitriymush/feature/6371

[3.4.2] UI:Feature/dashboard layouts width sizing

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -49,6 +49,7 @@ import {
   DashboardState,
   DashboardStateLayouts,
   GridSettings,
+  LayoutDimension,
   WidgetLayout
 } from '@app/shared/models/dashboard.models';
 import { WINDOW } from '@core/services/window.service';
@@ -145,6 +146,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 { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 
 // @dynamic
@@ -672,7 +674,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%';
     }
   }
 
@@ -688,7 +690,47 @@ 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: 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;
+      }
+    }
+    if (layoutDimension) {
+      if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
+        if (layout === 'right') {
+          return (100 - layoutDimension.leftWidthPercentage) + '%';
+        } else {
+          return layoutDimension.leftWidthPercentage + '%';
+        }
+      } else {
+        const dashboardWidth = this.dashboardContainer.nativeElement.getBoundingClientRect().width;
+        const minAvailableWidth = dashboardWidth - LayoutFixedSize.MIN;
+        if (layoutDimension.fixedLayout === layout) {
+          if (minAvailableWidth <= layoutDimension.fixedWidth) {
+            return minAvailableWidth + 'px';
+          } else {
+            return layoutDimension.fixedWidth + 'px';
+          }
+        } else {
+          if (minAvailableWidth <= layoutDimension.fixedWidth) {
+            return LayoutFixedSize.MIN + 'px';
+          } else {
+            return (dashboardWidth - layoutDimension.fixedWidth) + 'px';
+          }
+        }
+      }
+    } else {
+      return '50%';
     }
   }
 

ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html

@@ -28,13 +28,13 @@
   <section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
            style="display: flex; z-index: 1; pointer-events: none;"
            class="mat-headline tb-absolute-fill">
-    <span *ngIf="!isEdit">
+    <span *ngIf="!isEdit" style="text-align: center;">
       {{'dashboard.no-widgets' | translate}}
     </span>
     <button mat-button *ngIf="isEdit && !widgetEditMode" class="tb-add-new-widget"
             (click)="addWidget($event)">
       <mat-icon class="tb-mat-96">add</mat-icon>
-      {{ 'dashboard.add-widget' | translate }}
+      <span>{{ 'dashboard.add-widget' | translate }}</span>
     </button>
   </section>
   <tb-dashboard #dashboard [dashboardStyle]="dashboardStyle"

ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.scss

@@ -16,8 +16,15 @@
 :host {
   button.tb-add-new-widget {
     padding-right: 12px;
-    font-size: 24px;
+    font-size: 20px;
     border-style: dashed;
     border-width: 2px;
+
+    ::ng-deep .mat-button-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }

ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts

@@ -22,3 +22,19 @@ export interface ILayoutController {
   pasteWidget($event: MouseEvent);
   pasteWidgetReference($event: MouseEvent);
 }
+
+export enum LayoutWidthType {
+  PERCENTAGE = 'percentage',
+  FIXED = 'fixed'
+}
+
+export enum LayoutPercentageSize {
+  MIN = 10,
+  MAX = 90
+}
+
+export enum LayoutFixedSize {
+  MIN = 150,
+  MAX = 4000
+}
+

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html

@@ -25,45 +25,155 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+  <div mat-dialog-content fxLayout="column" fxLayoutGap="20px" style="min-width: 300px; overflow: hidden;">
-  </mat-progress-bar>
+    <div fxLayout="row" fxLayoutAlign="start center">
-  <div mat-dialog-content>
+        <mat-slide-toggle formControlName="right" color="accent">
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
+          {{ 'layout.divider' | translate }}
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        </mat-slide-toggle>
-        <mat-checkbox fxFlex formControlName="main">
+    </div>
-          {{ 'layout.main' | translate }}
+    <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="20px">
-        </mat-checkbox>
+      <mat-button-toggle-group aria-label="Select width value type"
-        <mat-checkbox fxFlex formControlName="right">
+                               formControlName="type"
-          {{ 'layout.right' | translate }}
+                               [fxShow]="layoutsFormGroup.get('right').value">
-        </mat-checkbox>
+        <mat-button-toggle fxFlex value="percentage">
+          {{ 'layout.percentage-width' | translate }}
+        </mat-button-toggle>
+        <mat-button-toggle fxFlex value="fixed">
+          {{ 'layout.fixed-width' | translate }}
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+      <div fxLayout="row" fxLayoutAlign="center center" class="tb-layout-preview">
+        <div fxLayout="row"
+             fxLayoutAlign="start center"
+             class="tb-layout-preview-container"
+             #tooltip="matTooltip"
+             matTooltip=""
+             matTooltipPosition="below">
+          <div fxLayout="column" fxLayoutAlign="start center" fxFlex="{{ buttonFlexValue() }}" class="tb-layout-preview-container-main">
+            <button mat-icon-button
+                    type="button"
+                    matTooltip="{{ 'dashboard.layout-settings' | translate }}"
+                    matTooltipPosition="above"
+                    (click)="openLayoutSettings('main')"
+                    class="tb-layout-preview-element"
+                    aria-label="Layout settings"
+                    [ngClass]="layoutButtonClass('main')">
+              <mat-icon>settings</mat-icon>
+            </button>
+            <button fxFlex
+                    type="button"
+                    mat-raised-button
+                    color="primary"
+                    class="tb-layout-button"
+                    [matTooltip]="layoutButtonText('main')"
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-layout-button-tooltip"
+                    (click)="setFixedLayout('main')"
+                    [ngClass]="layoutButtonClass('main', true)">
+              <span>{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
+            </button>
+            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('main')">
+              <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
+                     formControlName="leftWidthPercentage"
+                     type="number"
+                     step="1"
+                     min="{{ layoutPercentageSize.MIN }}"
+                     max="{{ layoutPercentageSize.MAX }}"
+                     required>
+              <input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED &&
+                            layoutsFormGroup.get('fixedLayout').value === 'main'"
+                     formControlName="fixedWidth"
+                     type="number"
+                     step="1"
+                     min="{{ layoutFixedSize.MIN }}"
+                     max="{{ layoutFixedSize.MAX }}"
+                     required>
+            </div>
+          </div>
+          <div fxLayout="column" fxLayoutAlign="start center" fxFlex *ngIf="layoutsFormGroup.get('right').value" matTooltip="">
+            <button mat-icon-button
+                    type="button"
+                    matTooltip="{{ 'dashboard.layout-settings' | translate }}"
+                    matTooltipPosition="above"
+                    (click)="openLayoutSettings('right')"
+                    class="tb-layout-preview-element"
+                    aria-label="Layout settings"
+                    [ngClass]="layoutButtonClass('right')">
+              <mat-icon>settings</mat-icon>
+            </button>
+            <button fxFlex
+                    type="button"
+                    mat-raised-button
+                    color="primary"
+                    class="tb-layout-button tb-layout-button-right"
+                    [matTooltip]="layoutButtonText('right')"
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-layout-button-tooltip"
+                    (click)="setFixedLayout('right')"
+                    [ngClass]="layoutButtonClass('right')">
+              <span>{{ 'layout.right' | translate }}</span>
+            </button>
+            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" *ngIf="showPreviewInputs('right')">
+              <input *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.FIXED"
+                     formControlName="rightWidthPercentage"
+                     type="number"
+                     step="1"
+                     min="{{ layoutPercentageSize.MIN }}"
+                     max="{{ layoutPercentageSize.MAX }}"
+                     required>
+              <input *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.FIXED"
+                     formControlName="fixedWidth"
+                     type="number"
+                     step="1"
+                     min="{{ layoutFixedSize.MIN }}"
+                     max="{{ layoutFixedSize.MAX }}"
+                     required>
+            </div>
+          </div>
+        </div>
       </div>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" *ngIf="layoutsFormGroup.get('right').value" style="width: 80%">
-        <button fxFlex
+        <mat-slider *ngIf="layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE"
-                type="button" mat-raised-button color="primary"
+                    step="1"
-                class="tb-layout-button"
+                    min="{{ layoutPercentageSize.MIN }}"
-                (click)="openLayoutSettings('main')">
+                    max="{{ layoutPercentageSize.MAX }}"
-          <span translate>layout.main</span>
+                    style="width: 100%;"
-        </button>
+                    color="accent"
-        <button fxFlex [fxShow]="layoutsFormGroup.get('right').value"
+                    formControlName="sliderPercentage"
-                type="button" mat-raised-button color="primary"
+                    thumbLabel
-                class="tb-layout-button"
+                    [displayWith]="formatSliderTooltipLabel.bind(this)">
-                (click)="openLayoutSettings('right')">
+        </mat-slider>
-          <span translate>layout.right</span>
+        <mat-slider *ngIf="layoutsFormGroup.get('type').value !== layoutWidthType.PERCENTAGE"
-        </button>
+                    step="1"
+                    min="{{ layoutFixedSize.MIN }}"
+                    max="{{ layoutFixedSize.MAX }}"
+                    style="width: 100%;"
+                    color="accent"
+                    formControlName="sliderFixed"
+                    thumbLabel
+                    [displayWith]="formatSliderTooltipLabel.bind(this)">
+        </mat-slider>
+        <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group" style="width: 100%;">
+          <label>
+            {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MIN + '%' : layoutFixedSize.MIN + 'px'}}
+          </label>
+          <label>
+            {{layoutsFormGroup.get('type').value === layoutWidthType.PERCENTAGE ? layoutPercentageSize.MAX + '%' : layoutFixedSize.MAX + 'px'}}
+          </label>
+        </div>
       </div>
-    </fieldset>
+    </div>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button
             color="primary"
             type="button"
-            [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
       {{ 'action.cancel' | translate }}
     </button>
     <button mat-raised-button color="primary"
             type="submit"
-            [disabled]="(isLoading$ | async) || layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
+            [disabled]="layoutsFormGroup.invalid || !layoutsFormGroup.dirty">
       {{ 'action.save' | translate }}
     </button>
   </div>

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss

@@ -0,0 +1,185 @@
+/**
+ * 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.
+ */
+
+@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%;
+    min-width: 368px;
+    padding: 8px 8px 8px 0;
+    min-height: 48px;
+  }
+
+  .tb-hint-group {
+    padding: 0;
+    margin-top: -14px;
+    display: block;
+  }
+
+  .tb-layout-preview {
+    width: 120%;
+    background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.6);
+    padding: 35px;
+
+    &-container {
+      width: 75%;
+
+      button.tb-fixed-layout-button {
+        background-color: transparent;
+        color: #000000;
+        cursor: pointer;
+
+        .mat-icon {
+          color: rgba(0, 0, 0, 0.38);
+        }
+
+        &:hover {
+          background-color: rgba(211, 211, 211, 0.6);
+        }
+      }
+
+      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(255, 255, 255, 0.76);
+
+          &: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;
+
+        input {
+          border: 1px solid #778899;
+          background-color: transparent;
+          color: #ffffff;
+          border-radius: 4px;
+          text-align: center;
+          outline: none;
+          width: 37px;
+          height: 28px;
+          font-size: 14px;
+
+          &:invalid {
+            outline: 2px solid $tb-warn;
+            border: 1px solid transparent;
+            background-color: rgba($tb-warn, 0.2);
+          }
+        }
+      }
+    }
+  }
+}
+
+:host ::ng-deep {
+  .mat-slider-wrapper {
+    .mat-slider-thumb-container {
+      .mat-slider-thumb-label {
+        width: 35px;
+        height: 35px;
+      }
+    }
+  }
+
+  .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: $tb-warn !important;
+    margin: 5px 0 0 105px;
+    width: 160px;
+    text-align: center;
+  }
+
+  .tb-layout-error-tooltip-main {
+    background-color: $tb-warn !important;
+    margin: 5px 105px 0 0;
+    width: 160px;
+    text-align: center;
+  }
+
+  .tb-layout-button-tooltip {
+    margin: 30px 40px -35px -50px;
+  }
+}

ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts

@@ -14,23 +14,38 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } 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';
 import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
+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 } 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 {
+  LayoutFixedSize,
+  LayoutPercentageSize,
+  LayoutWidthType
+} from '@home/components/dashboard-page/layout/layout.models';
+import { Subscription } from 'rxjs';
+import { MatTooltip } from '@angular/material/tooltip';
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;
@@ -40,44 +55,150 @@ 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<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
-  implements OnInit, ErrorStateMatcher {
+  implements ErrorStateMatcher {
+
+  @ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
 
   layoutsFormGroup: FormGroup;
 
-  layouts: DashboardStateLayouts;
+  layoutWidthType = LayoutWidthType;
 
-  submitted = false;
+  layoutPercentageSize = LayoutPercentageSize;
+
+  layoutFixedSize = LayoutFixedSize;
+
+  private readonly layouts: DashboardStateLayouts;
+
+  private subscriptions: Array<Subscription> = [];
+
+  private submitted = false;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: ManageDashboardLayoutsDialogData,
+              @Inject(MAT_DIALOG_DATA) private data: ManageDashboardLayoutsDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-              public dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
+              protected dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>,
               private fb: FormBuilder,
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private translate: TranslateService,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private elementRef: ElementRef) {
     super(store, router, dialogRef);
 
     this.layouts = this.data.layouts;
+
     this.layoutsFormGroup = this.fb.group({
-        main:  [{value: isDefined(this.layouts.main), disabled: true}, []],
+        main: [{value: isDefined(this.layouts.main), disabled: true}],
-        right: [isDefined(this.layouts.right), []],
+        right: [isDefined(this.layouts.right)],
+        sliderPercentage: [50],
+        sliderFixed: [this.layoutFixedSize.MIN],
+        leftWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
+        rightWidthPercentage: [50, [Validators.min(this.layoutPercentageSize.MIN), Validators.max(this.layoutPercentageSize.MAX), Validators.required]],
+        type: [LayoutWidthType.PERCENTAGE],
+        fixedWidth: [this.layoutFixedSize.MIN, [Validators.min(this.layoutFixedSize.MIN), Validators.max(this.layoutFixedSize.MAX), Validators.required]],
+        fixedLayout: ['main', []]
       }
     );
-    for (const l of Object.keys(this.layoutsFormGroup.controls)) {
+
-      const control = this.layoutsFormGroup.controls[l];
+    this.subscriptions.push(
-      if (!this.layouts[l]) {
+      this.layoutsFormGroup.get('type').valueChanges.subscribe(
-        this.layouts[l] = this.dashboardUtils.createDefaultLayoutData();
+        (value) => {
+          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.patchValue({
+          fixedLayout: this.layouts.right.gridSettings.layoutDimension.fixedLayout,
+          type: LayoutWidthType.FIXED,
+          fixedWidth: this.layouts.right.gridSettings.layoutDimension.fixedWidth,
+          sliderFixed: 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.patchValue({
+            fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
+            type: LayoutWidthType.FIXED,
+            fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth,
+            sliderFixed: this.layouts.main.gridSettings.layoutDimension.fixedWidth
+          }, {emitEvent: false});
+        } else {
+          const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.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.right) {
+      this.layouts.right = this.dashboardUtils.createDefaultLayoutData();
+    }
+
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('sliderPercentage').valueChanges
+        .subscribe(
+          (value) => 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);
+          }
+        ));
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
+        .subscribe(
+          (value) => {
+            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});
+          }
+        ));
   }
 
-  ngOnInit(): void {
+  ngOnDestroy(): void {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
   }
 
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -110,12 +231,147 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   save(): void {
     this.submitted = true;
-    for (const l of Object.keys(this.layoutsFormGroup.controls)) {
+    const layouts = ['main', 'right'];
+    for (const l of layouts) {
       const control = this.layoutsFormGroup.controls[l];
       if (!control.value) {
-        delete this.layouts[l];
+        if (this.layouts[l]) {
+          delete this.layouts[l];
+        }
+      }
+    }
+    delete this.layouts.main.gridSettings.layoutDimension;
+    if (this.layouts.right?.gridSettings) {
+      delete this.layouts.right.gridSettings.layoutDimension;
+    }
+    if (this.layoutsFormGroup.value.right) {
+      const formValues = this.layoutsFormGroup.value;
+      const widthType = formValues.type;
+      const layoutDimension: LayoutDimension = {
+        type: widthType
+      };
+      if (widthType === LayoutWidthType.PERCENTAGE) {
+        layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
+        this.layouts.main.gridSettings.layoutDimension = layoutDimension;
+      } else {
+        layoutDimension.fixedWidth = formValues.fixedWidth;
+        layoutDimension.fixedLayout = formValues.fixedLayout;
+        if (formValues.fixedLayout === 'main') {
+          this.layouts.main.gridSettings.layoutDimension = layoutDimension;
+        } else {
+          this.layouts.right.gridSettings.layoutDimension = layoutDimension;
+        }
       }
     }
     this.dialogRef.close(this.layouts);
   }
+
+  buttonFlexValue(): number {
+    const formValues = this.layoutsFormGroup.value;
+    if (formValues.right) {
+      if (formValues.type !== LayoutWidthType.FIXED) {
+        return formValues.leftWidthPercentage;
+      } else {
+        if (formValues.fixedLayout === 'main') {
+          return 10;
+        } else {
+          return 90;
+        }
+      }
+    }
+  }
+
+  formatSliderTooltipLabel(value: number): string | number {
+    return this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED ? value : `${value}|${100 - value}`;
+  }
+
+  private layoutControlChange(key: string, value) {
+    const valueToSet = 100 - Number(value);
+    this.layoutsFormGroup.get(key).setValue(valueToSet, {emitEvent: false});
+    this.layoutsFormGroup.get('sliderPercentage')
+      .setValue(key === 'leftWidthPercentage' ? valueToSet : Number(value), {emitEvent: false});
+  }
+
+  setFixedLayout(layout: string): void {
+    const layoutButtons = this.elementRef.nativeElement.querySelectorAll('.tb-layout-button');
+    if (layoutButtons?.length) {
+      let elementToDisable: HTMLButtonElement;
+      if (layout === 'right') {
+        elementToDisable = layoutButtons[0];
+      } else {
+        elementToDisable = layoutButtons[1];
+      }
+
+      elementToDisable.disabled = true;
+      setTimeout(() => {
+        elementToDisable.disabled = false;
+      }, 250);
+    }
+
+    if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED) {
+      this.layoutsFormGroup.get('fixedLayout').setValue(layout);
+    }
+  }
+
+  private showTooltip(control: AbstractControl, layoutType: LayoutWidthType, layoutSide: DashboardLayoutId): void {
+    if (control.errors) {
+      let message: string;
+      const unit = layoutType === LayoutWidthType.FIXED ? 'px' : '%';
+
+      if (control.errors.required) {
+        if (layoutType === LayoutWidthType.FIXED) {
+          message = this.translate.instant('layout.layout-fixed-width-required');
+        } else {
+          if (layoutSide === 'right') {
+            message = this.translate.instant('layout.right-width-percentage-required');
+          } else {
+            message = this.translate.instant('layout.left-width-percentage-required');
+          }
+        }
+      } else if (control.errors.min) {
+        message = this.translate.instant('layout.value-min-error', {min: control.errors.min.min, unit});
+      } else if (control.errors.max) {
+        message = this.translate.instant('layout.value-max-error', {max: control.errors.max.max, unit});
+      }
+
+      if (layoutSide === 'main') {
+        this.tooltip.tooltipClass = 'tb-layout-error-tooltip-main';
+      } else {
+        this.tooltip.tooltipClass = 'tb-layout-error-tooltip-right';
+      }
+
+      this.tooltip.message = message;
+      this.tooltip.show(1300);
+    } else {
+      this.tooltip.message = '';
+      this.tooltip.hide();
+    }
+  }
+
+  layoutButtonClass(side: DashboardLayoutId, border: boolean = false): string {
+    const formValues = this.layoutsFormGroup.value;
+    if (formValues.right) {
+      let classString = border ? 'tb-layout-button-main ' : '';
+      if (!(formValues.fixedLayout === side || formValues.type === LayoutWidthType.PERCENTAGE)) {
+        classString += 'tb-fixed-layout-button';
+      }
+      return classString;
+    }
+  }
+
+  layoutButtonText(side: DashboardLayoutId): string {
+    const formValues = this.layoutsFormGroup.value;
+    if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) {
+      if (side === 'main') {
+        return this.translate.instant('layout.left-side');
+      } else {
+        return this.translate.instant('layout.right-side');
+      }
+    }
+  }
+
+  showPreviewInputs(side: DashboardLayoutId): boolean {
+    const formValues = this.layoutsFormGroup.value;
+    return formValues.right && (formValues.type === LayoutWidthType.PERCENTAGE || formValues.fixedLayout === side);
+  }
 }

ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss

@@ -17,7 +17,17 @@
   button.tb-layout-button {
     width: 100%;
     height: 100%;
-    padding: 40px 20px;
+    padding: 40px 10px;
+    cursor: default;
+    border-radius: 5px;
+
+    &-right {
+      border-radius: 0 5px 5px 0;
+    }
+
+    &-main {
+      border-radius: 5px 0 0 5px;
+    }
   }
 
   &::ng-deep {

ui-ngx/src/app/shared/models/dashboard.models.ts

@@ -55,6 +55,7 @@ export interface GridSettings {
   autoFillHeight?: boolean;
   mobileAutoFillHeight?: boolean;
   mobileRowHeight?: number;
+  layoutDimension?: LayoutDimension;
   [key: string]: any;
 }
 
@@ -69,8 +70,17 @@ 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 LayoutType = 'percentage' | 'fixed';
+
 export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout};
 
 export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo};

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2559,7 +2559,22 @@
         "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 column (%)",
+        "right-width": "Right column (%)",
+        "pick-fixed-side": "Fixed side: ",
+        "layout-fixed-width": "Fixed width (px)",
+        "value-min-error": "Value must be more then {{min}}{{unit}}",
+        "value-max-error": "Value must be less then {{max}}{{unit}}",
+        "layout-fixed-width-required": "Fixed width is required",
+        "right-width-percentage-required": "Right percentage is required",
+        "left-width-percentage-required": "Left percentage is required",
+        "divider": "Divider",
+        "right-side": "Right side layout",
+        "left-side": "Left side layout"
     },
     "legend": {
         "direction": "Legend direction",