From d4e02f480a530687fe229e96ed2400af0e199d4e Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 19 Feb 2024 13:02:31 +0200
Subject: [PATCH] UI: Fixed background settings panel jump when edit content

---
 .../background-settings-panel.component.html  | 87 ++++++++++---------
 .../background-settings-panel.component.scss  |  8 ++
 .../common/background-settings.component.ts   |  2 +-
 3 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
index 6cca169f5a..9038f2a22f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
@@ -17,49 +17,54 @@
 -->
 <div class="tb-background-settings-panel" [formGroup]="backgroundSettingsFormGroup">
   <div class="tb-background-settings-title" translate>widgets.background.background-settings</div>
-  <div class="tb-form-panel tb-background-form-panel">
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
-      <div class="tb-form-panel-title" translate>widgets.background.background</div>
-      <tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs">
-        <tb-toggle-option *ngFor="let type of backgroundTypes"
-                          [value]="type">
-          {{ backgroundTypeTranslationsMap.get(type) | translate }}
-        </tb-toggle-option>
-      </tb-toggle-select>
-    </div>
-    <tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image" formControlName="imageUrl"></tb-gallery-image-input>
-    <div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color" class="tb-form-row space-between tb-background-color-field">
-      <div translate>widgets.color.color</div>
-      <tb-color-input asBoxInput
-                      formControlName="color">
-      </tb-color-input>
-    </div>
-  </div>
-  <div class="tb-form-panel" formGroupName="overlay">
-    <div class="tb-form-panel-title" translate>widgets.background.overlay</div>
-    <mat-slide-toggle class="mat-slide" formControlName="enabled">
-      {{ 'widgets.background.enable-overlay' | translate }}
-    </mat-slide-toggle>
-    <div class="tb-form-row space-between">
-      <div translate>widgets.color.color</div>
-      <tb-color-input asBoxInput
-                      formControlName="color">
-      </tb-color-input>
-    </div>
-    <div class="tb-form-row space-between">
-      <div translate>widgets.background.blur</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="blur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}">
-        <div matSuffix>px</div>
-      </mat-form-field>
+  <div class="tb-background-settings-panel-content">
+    <div class="tb-form-panel tb-background-form-panel">
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+        <div class="tb-form-panel-title" translate>widgets.background.background</div>
+        <tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs">
+          <tb-toggle-option *ngFor="let type of backgroundTypes"
+                            [value]="type">
+            {{ backgroundTypeTranslationsMap.get(type) | translate }}
+          </tb-toggle-option>
+        </tb-toggle-select>
+      </div>
+      <tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image"
+                              formControlName="imageUrl"></tb-gallery-image-input>
+      <div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color"
+           class="tb-form-row space-between tb-background-color-field">
+        <div translate>widgets.color.color</div>
+        <tb-color-input asBoxInput
+                        formControlName="color">
+        </tb-color-input>
+      </div>
     </div>
-  </div>
-  <div class="tb-background-settings-preview">
-    <div class="tb-background-settings-preview-title" translate>
-      widgets.background.preview
+    <div class="tb-form-panel" formGroupName="overlay">
+      <div class="tb-form-panel-title" translate>widgets.background.overlay</div>
+      <mat-slide-toggle class="mat-slide" formControlName="enabled">
+        {{ 'widgets.background.enable-overlay' | translate }}
+      </mat-slide-toggle>
+      <div class="tb-form-row space-between">
+        <div translate>widgets.color.color</div>
+        <tb-color-input asBoxInput
+                        formControlName="color">
+        </tb-color-input>
+      </div>
+      <div class="tb-form-row space-between">
+        <div translate>widgets.background.blur</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="blur" type="number" min="0" step="1"
+                 placeholder="{{ 'widget-config.set' | translate }}">
+          <div matSuffix>px</div>
+        </mat-form-field>
+      </div>
     </div>
-    <div class="tb-background-settings-preview-box mat-elevation-z4" [style]="backgroundStyle$ | async">
-      <div class="tb-background-settings-preview-overlay" [style]="overlayStyle">
+    <div class="tb-background-settings-preview">
+      <div class="tb-background-settings-preview-title" translate>
+        widgets.background.preview
+      </div>
+      <div class="tb-background-settings-preview-box mat-elevation-z4" [style]="backgroundStyle$ | async">
+        <div class="tb-background-settings-preview-overlay" [style]="overlayStyle">
+        </div>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.scss
index 01297b9d12..6bc83fe967 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.scss
@@ -67,6 +67,14 @@
     left: 7.998px;
     right: 7.998px;
   }
+  .tb-background-settings-panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow: auto;
+    margin: -10px;
+    padding: 10px;
+  }
   .tb-background-settings-panel-buttons {
     height: 40px;
     display: flex;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts
index 5ac54cbbe3..66dd774a21 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts
@@ -110,7 +110,7 @@ export class BackgroundSettingsComponent implements OnInit, ControlValueAccessor
         backgroundSettings: this.modelValue
       };
      const backgroundSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
-        this.viewContainerRef, BackgroundSettingsPanelComponent, 'left', true, null,
+        this.viewContainerRef, BackgroundSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
         ctx,
         {},
         {}, {}, true);