dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Sys admin home page mobile layout

Browse Source
This commit is contained in:
Igor Kulikov 2023-04-13 12:59:01 +03:00
parent 029aca6b33
commit ac08bb7921
9 changed files with 1062 additions and 621 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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>

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

@ -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, []],

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

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

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

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

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

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

1655
ui-ngx/src/app/modules/home/pages/home-links/sys_admin_home_page.raw
View File

File diff suppressed because it is too large Load Diff

1
ui-ngx/src/app/shared/models/dashboard.models.ts
View File

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

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

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