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

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

@@ -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 *ngIf="!propertyRow.switch" class="fixed-title-width fixed-title-height">{{ propertyRow.label | customTranslate }}</div>
-      <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+      <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="tb-form-row flex-wrap overflow-auto" formGroupName="behavior">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ behavior.hint | customTranslate }}">{{ behavior.name | customTranslate }}</div>
+      <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"

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

@@ -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) => {

ui-ngx/src/form.scss

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