Merge pull request #7591 from vvlladd28/bug/manage-dashboard-layout/setFixedLayout

[3.4.2] UI: Fixed function setFixedLayout in dashboard layout

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

@@ -65,12 +65,15 @@
                     mat-raised-button
                     color="primary"
                     class="tb-layout-button"
-                    [matTooltip]="layoutButtonText('main')"
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-layout-button-tooltip"
+                    (mouseover)="mainLayoutTooltip.show()"
+                    (mouseleave)="mainLayoutTooltip.hide()"
                     (click)="setFixedLayout('main')"
                     [ngClass]="layoutButtonClass('main', true)">
-              <span>{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
+              <span [matTooltip]="layoutButtonText('main')"
+                    #mainLayoutTooltip="matTooltip"
+                    matTooltipPosition="above">
+                {{ (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"
@@ -106,12 +109,15 @@
                     mat-raised-button
                     color="primary"
                     class="tb-layout-button tb-layout-button-right"
-                    [matTooltip]="layoutButtonText('right')"
-                    matTooltipPosition="above"
-                    matTooltipClass="tb-layout-button-tooltip"
+                    (mouseover)="rightLayoutTooltip.show()"
+                    (mouseleave)="rightLayoutTooltip.hide()"
                     (click)="setFixedLayout('right')"
                     [ngClass]="layoutButtonClass('right')">
-              <span>{{ 'layout.right' | translate }}</span>
+              <span [matTooltip]="layoutButtonText('right')"
+                    #rightLayoutTooltip="matTooltip"
+                    matTooltipPosition="above">
+                {{ '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"

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

@@ -178,8 +178,4 @@ $tb-warn: mat.get-color-from-palette(map-get($tb-theme, warn), text);
     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,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, Inject, SkipSelf, ViewChild } from '@angular/core';
+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';
@@ -85,8 +85,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private translate: TranslateService,
-              private dialog: MatDialog,
-              private elementRef: ElementRef) {
+              private dialog: MatDialog) {
     super(store, router, dialogRef);
 
     this.layouts = this.data.layouts;
@@ -96,10 +95,13 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         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]],
+        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]],
+        fixedWidth: [this.layoutFixedSize.MIN,
+          [Validators.min(this.layoutFixedSize.MIN), Validators.max(this.layoutFixedSize.MAX), Validators.required]],
         fixedLayout: ['main', []]
       }
     );
@@ -293,22 +295,7 @@ 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) {
+    if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED && this.layoutsFormGroup.get('right').value) {
       this.layoutsFormGroup.get('fixedLayout').setValue(layout);
     }
   }