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

UI: Improve SCADA symbol appearance form layout. Improve widget edit tooltip position.

Browse Source
This commit is contained in:
Igor Kulikov 2024-09-23 12:09:48 +03:00
parent 66bf460aa8
commit 4f581e9bfe
3 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html
View File

@ -39,12 +39,12 @@
<div [fxShow]="propertyRows?.length || appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
<div class="tb-form-panel-title" translate>widget-config.appearance</div>
<div #appearanceProperties><ng-content select=".tb-scada-symbol-appearance-properties"></ng-content></div>
<div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between" [class]="propertyRow.rowClass">
<div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between flex-wrap overflow-auto" [class]="propertyRow.rowClass">
<mat-slide-toggle *ngIf="propertyRow.switch" class="mat-slide fixed-title-width margin" formControlName="{{ propertyRow.switch.id }}">
{{ propertyRow.label | customTranslate }}
</mat-slide-toggle>
<div *ngIf="!propertyRow.switch" class="fixed-title-width">{{ propertyRow.label | customTranslate }}</div>
<div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
<div *ngIf="!propertyRow.switch" class="fixed-title-width fixed-title-height">{{ propertyRow.label | customTranslate }}</div>
<div *ngIf="propertyRow.properties.length" class="tb-flex row flex-end align-center">
<ng-container *ngFor="let property of propertyRow.properties">
<div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
<mat-form-field *ngIf="property.type === ScadaSymbolPropertyType.text" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic">
@ -98,10 +98,10 @@
<ng-template #behaviorTpl let-behavior="behavior">
<ng-container [formGroup]="scadaSymbolObjectSettingsFormGroup">
<div class="tb-form-row" formGroupName="behavior">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{ behavior.hint | customTranslate }}">{{ behavior.name | customTranslate }}</div>
<div class="tb-form-row flex-wrap overflow-auto" formGroupName="behavior">
<div class="fixed-title-width fixed-title-height" tb-hint-tooltip-icon="{{ behavior.hint | customTranslate }}">{{ behavior.name | customTranslate }}</div>
<tb-get-value-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.value"
fxFlex
class="tb-flex"
panelTitle="{{ behavior.name | customTranslate }}"
[valueType]="behavior.valueType"
[trueLabel]="behavior.trueLabel | customTranslate"
@ -113,7 +113,7 @@
formControlName="{{ behavior.id }}">
</tb-get-value-action-settings>
<tb-set-value-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.action"
fxFlex
class="tb-flex"
panelTitle="{{ behavior.name | customTranslate }}"
[valueType]="behavior.valueType"
[aliasController]="aliasController"
@ -122,7 +122,7 @@
formControlName="{{ behavior.id }}">
</tb-set-value-action-settings>
<tb-widget-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.widgetAction"
fxFlex
class="tb-flex"
panelTitle="{{ behavior.name | customTranslate }}"
[callbacks]="callbacks"
[widgetType]="widgetType"

8
ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
View File

@ -286,6 +286,14 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
position.coord.left = clientRect.right - position.size.width - container.left;
position.coord.top = position.coord.top - container.top;
position.target = clientRect.right;
const rightOverflow = container.right - (position.coord.left + position.size.width);
if (rightOverflow < 0) {
position.coord.left += rightOverflow;
}
const leftOverflow = container.left - position.coord.left;
if (leftOverflow > 0) {
position.coord.left += leftOverflow;
}
return position;
},
functionReady: (_instance, helper) => {

6
ui-ngx/src/form.scss
View File

@ -205,6 +205,12 @@
&.space-between {
justify-content: space-between;
}
&.flex-wrap {
flex-wrap: wrap;
}
&.overflow-auto {
overflow: auto;
}
.mat-divider-vertical {
height: 56px;
margin-top: -7px;