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

UI: Improve widget resizable options.

Browse Source
This commit is contained in:
Igor Kulikov 2024-09-05 12:48:55 +03:00
parent 1c2d1f8780
commit cfcf627fe1
3 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -349,6 +349,7 @@ export class DashboardUtilsService {
const config = widget.config; const config = widget.config;
config.showTitle = false; config.showTitle = false;
config.dropShadow = false; config.dropShadow = false;
config.resizable = !isScada;
config.preserveAspectRatio = isScada; config.preserveAspectRatio = isScada;
config.padding = '0'; config.padding = '0';
config.margin = '0'; config.margin = '0';

9
ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts
View File

@ -130,7 +130,14 @@ export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogCom
this.widgetConfig = { this.widgetConfig = {
widgetName: widgetInfo.widgetName, widgetName: widgetInfo.widgetName,
config: this.widget.config, config: this.widget.config,
layout: {}, layout: {
resizable: this.widget.config.resizable,
preserveAspectRatio: this.widget.config.preserveAspectRatio,
mobileHide: this.widget.config.mobileHide,
desktopHide: this.widget.config.desktopHide,
mobileOrder: this.widget.config.mobileOrder,
mobileHeight: this.widget.config.mobileHeight
},
widgetType: this.widget.type, widgetType: this.widget.type,
typeParameters, typeParameters,
actionSources, actionSources,

23
ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
View File

@ -63,7 +63,7 @@ import { UtilsService } from '@core/services/utils.service';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { EntityType } from '@shared/models/entity-type.models'; import { EntityType } from '@shared/models/entity-type.models';
import { Observable, of, Subject, Subscription } from 'rxjs'; import { merge, Observable, of, Subject, Subscription } from 'rxjs';
import { import {
IBasicWidgetConfigComponent, IBasicWidgetConfigComponent,
WidgetConfigCallbacks WidgetConfigCallbacks
@ -248,10 +248,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
noDataDisplayMessage: [null, []] noDataDisplayMessage: [null, []]
}); });
this.widgetSettings.get('showTitle').valueChanges.subscribe(() => { merge(this.widgetSettings.get('showTitle').valueChanges,
this.updateWidgetSettingsEnabledState(); this.widgetSettings.get('showTitleIcon').valueChanges).subscribe(() => {
});
this.widgetSettings.get('showTitleIcon').valueChanges.subscribe(() => {
this.updateWidgetSettingsEnabledState(); this.updateWidgetSettingsEnabledState();
}); });
@ -263,6 +261,11 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
mobileHide: [false], mobileHide: [false],
desktopHide: [false] desktopHide: [false]
}); });
this.layoutSettings.get('resizable').valueChanges.subscribe(() => {
this.updateLayoutEnabledState();
});
this.actionsSettings = this.fb.group({ this.actionsSettings = this.fb.group({
actions: [null, []] actions: [null, []]
}); });
@ -589,6 +592,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
{emitEvent: false} {emitEvent: false}
); );
} }
this.updateLayoutEnabledState();
} }
this.createChangeSubscriptions(); this.createChangeSubscriptions();
} }
@ -622,6 +626,15 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, OnDe
} }
} }
private updateLayoutEnabledState() {
const resizable: boolean = this.layoutSettings.get('resizable').value;
if (resizable) {
this.layoutSettings.get('preserveAspectRatio').enable({emitEvent: false});
} else {
this.layoutSettings.get('preserveAspectRatio').disable({emitEvent: false});
}
}
private updateSchemaForm(settings?: any) { private updateSchemaForm(settings?: any) {
const widgetSettingsFormData: JsonFormComponentData = {}; const widgetSettingsFormData: JsonFormComponentData = {};
if (this.modelValue.settingsSchema && this.modelValue.settingsSchema.schema) { if (this.modelValue.settingsSchema && this.modelValue.settingsSchema.schema) {