From a8406155648f5d9630b9b4ebaa5571aa12969e03 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Fri, 19 Aug 2022 13:57:49 +0300
Subject: [PATCH] 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)">
               <mat-icon>settings</mat-icon>
             </button>
             <button fxFlex
@@ -64,14 +65,15 @@
                     mat-raised-button
                     color="primary"
                     class="tb-layout-button"
-                    [matTooltip]="layoutButtonTooltip('main', true)"
+                    [matTooltip]="layoutButtonTextAndClass('main', true)"
                     matTooltipPosition="above"
+                    matTooltipClass="tb-layout-button-tooltip"
                     (click)="setFixedLayout('main')"
-                    [ngClass]="layoutButtonTooltip('main', false)"
+                    [ngClass]="layoutButtonTextAndClass('main', false)"
                     [ngStyle]="layoutsFormGroup.get('right').value ?
                               {'border-radius': '5px 0 0 5px;'} :
                               {'border-radius': '5px 5px 5px 5px;'}">
-              <span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
+              <span>{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
             </button>
             <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('main')">
               <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
@@ -98,7 +100,8 @@
                     matTooltipPosition="above"
                     (click)="openLayoutSettings('right')"
                     class="tb-layout-preview-element"
-                    aria-label="Layout settings">
+                    aria-label="Layout settings"
+                    [ngClass]="layoutButtonTextAndClass('right', false)">
               <mat-icon>settings</mat-icon>
             </button>
             <button fxFlex
@@ -106,12 +109,13 @@
                     mat-raised-button
                     color="primary"
                     class="tb-layout-button"
-                    [matTooltip]="layoutButtonTooltip('right', true)"
+                    [matTooltip]="layoutButtonTextAndClass('right', true)"
                     matTooltipPosition="above"
+                    matTooltipClass="tb-layout-button-tooltip"
                     (click)="setFixedLayout('right')"
-                    [ngClass]="layoutButtonTooltip('right', false)"
+                    [ngClass]="layoutButtonTextAndClass('right', false)"
                     style="border-radius: 0 5px 5px 0;">
-              <span >{{ 'layout.right' | translate }}</span>
+              <span>{{ 'layout.right' | translate }}</span>
             </button>
             <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('right')">
               <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
@@ -133,30 +137,28 @@
           </div>
         </div>
       </div>
-      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 100%">
-        <div style="width: 80%">
-          <mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
-                      min="10"
-                      step="1"
-                      max="90"
-                      style="width: 100%;"
-                      formControlName="sliderPercentage"
-                      thumbLabel
-                      [displayWith]="formatSliderTooltipLabel.bind(this)">
-          </mat-slider>
-          <mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
-                      min="150"
-                      step="1"
-                      max="1700"
-                      style="width: 100%;"
-                      formControlName="sliderFixed"
-                      thumbLabel
-                      [displayWith]="formatSliderTooltipLabel.bind(this)">
-          </mat-slider>
-          <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group">
-            <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '0 %' : '150px'}}</label>
-            <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '100 %' : '1700px'}}</label>
-          </div>
+      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 80%">
+        <mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
+                    min="10"
+                    step="1"
+                    max="90"
+                    style="width: 100%;"
+                    formControlName="sliderPercentage"
+                    thumbLabel
+                    [displayWith]="formatSliderTooltipLabel.bind(this)">
+        </mat-slider>
+        <mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
+                    min="150"
+                    step="1"
+                    max="1700"
+                    style="width: 100%;"
+                    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 ? '10 %' : '150px'}}</label>
+          <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '90 %' : '1700px'}}</label>
         </div>
       </div>
     </div>
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<Manag
               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;
@@ -281,6 +282,21 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
   }
 
   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);
     }
@@ -321,14 +337,14 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     }
   }
 
-  layoutButtonTooltip(side: string, isText: boolean): string {
+  layoutButtonTextAndClass(side: string, isText: boolean): string {
     const formValues = this.layoutsFormGroup.value;
     if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) {
       if (isText) {
         if (side === 'main') {
-          return this.translate.instant('layout.right-side');
-        } else {
           return this.translate.instant('layout.left-side');
+        } else {
+          return this.translate.instant('layout.right-side');
         }
       } else {
         return 'tb-fixed-layout-button';