layouts dialog minor improvements

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

@@ -27,12 +27,9 @@
   </mat-toolbar>
   <div mat-dialog-content fxLayout="column" fxLayoutGap="8px" style="min-width: 300px;">
     <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-checkbox fxFlex formControlName="main">
+        <mat-slide-toggle formControlName="right">
-        {{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}
+          {{ 'layout.divider' | translate }}
-      </mat-checkbox>
+        </mat-slide-toggle>
-      <mat-checkbox fxFlex formControlName="right">
-        {{ 'layout.right' | translate }}
-      </mat-checkbox>
     </div>
     <div fxLayout="column" fxLayoutGap="8px">
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%">
@@ -56,15 +53,6 @@
         </button>
       </div>
       <div fxLayout="column" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value">
-        <mat-button-toggle-group aria-label="Select width value type"
-                                 formControlName="type">
-          <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 [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
           <mat-slider min="10"
                       step="1"
@@ -153,6 +141,15 @@
             </mat-error>
           </mat-form-field>
         </div>
+        <mat-button-toggle-group aria-label="Select width value type"
+                                 formControlName="type">
+          <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>
     </div>
   </div>

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;
   }
 }

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",