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

Merge pull request #10225 from vvlladd28/bug/background-settings/jump

Browse Source 
Fixed background settings panel jump when edit content
This commit is contained in:
Igor Kulikov 2024-02-27 10:01:51 +02:00 committed by GitHub
commit c6c6293153
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 55 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
View File

@ -17,6 +17,7 @@
--> -->
<div class="tb-background-settings-panel" [formGroup]="backgroundSettingsFormGroup"> <div class="tb-background-settings-panel" [formGroup]="backgroundSettingsFormGroup">
<div class="tb-background-settings-title" translate>widgets.background.background-settings</div> <div class="tb-background-settings-title" translate>widgets.background.background-settings</div>
<div class="tb-background-settings-panel-content">
<div class="tb-form-panel tb-background-form-panel"> <div class="tb-form-panel tb-background-form-panel">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
<div class="tb-form-panel-title" translate>widgets.background.background</div> <div class="tb-form-panel-title" translate>widgets.background.background</div>
@ -27,8 +28,10 @@
</tb-toggle-option> </tb-toggle-option>
</tb-toggle-select> </tb-toggle-select>
</div> </div>
<tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image" formControlName="imageUrl"></tb-gallery-image-input> <tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image"
<div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color" class="tb-form-row space-between tb-background-color-field"> 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> <div translate>widgets.color.color</div>
<tb-color-input asBoxInput <tb-color-input asBoxInput
formControlName="color"> formControlName="color">
@ -49,7 +52,8 @@
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div translate>widgets.background.blur</div> <div translate>widgets.background.blur</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="blur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput formControlName="blur" type="number" min="0" step="1"
placeholder="{{ 'widget-config.set' | translate }}">
<div matSuffix>px</div> <div matSuffix>px</div>
</mat-form-field> </mat-form-field>
</div> </div>
@ -63,6 +67,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="tb-background-settings-panel-buttons"> <div class="tb-background-settings-panel-buttons">
<button mat-button <button mat-button
color="primary" color="primary"

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.scss
View File

@ -67,6 +67,14 @@
left: 7.998px; left: 7.998px;
right: 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 { .tb-background-settings-panel-buttons {
height: 40px; height: 40px;
display: flex; display: flex;

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts
View File

@ -110,7 +110,7 @@ export class BackgroundSettingsComponent implements OnInit, ControlValueAccessor
backgroundSettings: this.modelValue backgroundSettings: this.modelValue
}; };
const backgroundSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer, const backgroundSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
this.viewContainerRef, BackgroundSettingsPanelComponent, 'left', true, null, this.viewContainerRef, BackgroundSettingsPanelComponent, ['leftOnly', 'leftTopOnly', 'leftBottomOnly'], true, null,
ctx, ctx,
{}, {},
{}, {}, true); {}, {}, true);