UI: Sys admin home page mobile layout

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -238,6 +238,7 @@ export class DashboardUtilsService {
       backgroundColor: '#eeeeee',
       columns: 24,
       margin: 10,
+      outerMargin: true,
       backgroundSizeMode: '100%'
     };
   }
@@ -282,6 +283,7 @@ export class DashboardUtilsService {
       layout.gridSettings.margin = layout.gridSettings.margins[0];
       delete layout.gridSettings.margins;
     }
+    layout.gridSettings.outerMargin = isDefined(layout.gridSettings.outerMargin) ? layout.gridSettings.outerMargin : true;
     layout.gridSettings.margin = isDefined(layout.gridSettings.margin) ? layout.gridSettings.margin : 10;
   }
 

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

@@ -132,6 +132,9 @@
               {{ 'dashboard.max-margin-message' | translate }}
             </mat-error>
           </mat-form-field>
+          <mat-slide-toggle fxFlex formControlName="outerMargin" style="display: block; padding-bottom: 12px;">
+            {{ 'dashboard.apply-outer-margin' | translate }}
+          </mat-slide-toggle>
           <mat-slide-toggle fxFlex formControlName="autoFillHeight" style="display: block; padding-bottom: 12px;">
             {{ 'dashboard.autofill-height' | translate }}
           </mat-slide-toggle>

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

@@ -156,6 +156,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
         columns: [this.gridSettings.columns || 24, [Validators.required, Validators.min(10), Validators.max(1000)]],
         margin: [isDefined(this.gridSettings.margin) ? this.gridSettings.margin : 10,
           [Validators.required, Validators.min(0), Validators.max(50)]],
+        outerMargin: [isUndefined(this.gridSettings.outerMargin) ? true : this.gridSettings.outerMargin, []],
         autoFillHeight: [isUndefined(this.gridSettings.autoFillHeight) ? false : this.gridSettings.autoFillHeight, []],
         backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []],
         backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []],

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

@@ -46,7 +46,10 @@ export class DashboardStateComponent extends PageComponent implements OnInit, On
   defaultAutofillLayout = true;
 
   @Input()
-  defaultMargin;
+  defaultMargin: number;
+
+  @Input()
+  defaultOuterMargin: boolean;
 
   @Input()
   defaultBackgroundColor;
@@ -86,6 +89,9 @@ export class DashboardStateComponent extends PageComponent implements OnInit, On
         if (isDefinedAndNotNull(this.defaultMargin)) {
           state.layouts[layoutId as DashboardLayoutId].gridSettings.margin = this.defaultMargin;
         }
+        if (isDefinedAndNotNull(this.defaultOuterMargin)) {
+          state.layouts[layoutId as DashboardLayoutId].gridSettings.outerMargin = this.defaultOuterMargin;
+        }
         if (isNotEmptyStr(this.defaultBackgroundColor)) {
           state.layouts[layoutId as DashboardLayoutId].gridSettings.backgroundColor = this.defaultBackgroundColor;
         }

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

@@ -42,6 +42,7 @@
                 [widgets]="layoutCtx.widgets"
                 [widgetLayouts]="layoutCtx.widgetLayouts"
                 [columns]="layoutCtx.gridSettings.columns"
+                [outerMargin]="layoutCtx.gridSettings.outerMargin"
                 [margin]="layoutCtx.gridSettings.margin"
                 [aliasController]="dashboardCtx.aliasController"
                 [stateController]="dashboardCtx.stateController"

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

@@ -91,6 +91,9 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
   @Input()
   margin: number;
 
+  @Input()
+  outerMargin: boolean;
+
   @Input()
   isEdit: boolean;
 
@@ -214,7 +217,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
       maxItemCols: 1000,
       maxItemRows: 1000,
       maxItemArea: 1000000,
-      outerMargin: true,
+      outerMargin: isDefined(this.outerMargin) ? this.outerMargin : true,
       margin: isDefined(this.margin) ? this.margin : 10,
       minItemCols: 1,
       minItemRows: 1,
@@ -270,7 +273,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
       if (!change.firstChange && change.currentValue !== change.previousValue) {
         if (['isMobile', 'isMobileDisabled', 'autofillHeight', 'mobileAutofillHeight', 'mobileRowHeight'].includes(propName)) {
           updateMobileOpts = true;
-        } else if (['margin', 'columns'].includes(propName)) {
+        } else if (['outerMargin', 'margin', 'columns'].includes(propName)) {
           updateLayoutOpts = true;
         } else if (propName === 'isEdit') {
           updateEditingOpts = true;
@@ -543,6 +546,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
 
   private updateLayoutOpts() {
     this.gridsterOpts.minCols = this.columns ? this.columns : 24;
+    this.gridsterOpts.outerMargin = isDefined(this.outerMargin) ? this.outerMargin : true;
     this.gridsterOpts.margin = isDefined(this.margin) ? this.margin : 10;
   }
 
@@ -586,7 +590,8 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
         for (const widget of this.dashboardWidgets.dashboardWidgets) {
           totalRows += widget.rows;
         }
-        rowHeight = (parentHeight - this.gridsterOpts.margin * (this.dashboardWidgets.dashboardWidgets.length + 2)) / totalRows;
+        rowHeight = ( parentHeight - this.gridsterOpts.margin *
+          ( totalRows + (this.gridsterOpts.outerMargin ? 1 : -1) ) ) / totalRows;
       }
     }
     return rowHeight;

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

@@ -52,6 +52,7 @@ export interface GridSettings {
   backgroundColor?: string;
   columns?: number;
   margin?: number;
+  outerMargin?: boolean;
   backgroundSizeMode?: string;
   backgroundImageUrl?: string;
   autoFillHeight?: boolean;

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

@@ -995,6 +995,7 @@
         "vertical-margin-required": "Vertical margin value is required.",
         "min-vertical-margin-message": "Only 0 is allowed as minimum vertical margin value.",
         "max-vertical-margin-message": "Only 50 is allowed as maximum vertical margin value.",
+        "apply-outer-margin": "Apply margin to the sides of the layout",
         "autofill-height": "Auto fill layout height",
         "mobile-layout": "Mobile layout settings",
         "mobile-row-height": "Mobile row height, px",