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

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

@ -17,49 +17,54 @@
--> -->
<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-form-panel tb-background-form-panel"> <div class="tb-background-settings-panel-content">
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> <div class="tb-form-panel tb-background-form-panel">
<div class="tb-form-panel-title" translate>widgets.background.background</div> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
<tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs"> <div class="tb-form-panel-title" translate>widgets.background.background</div>
<tb-toggle-option *ngFor="let type of backgroundTypes" <tb-toggle-select formControlName="type" fxFlex selectMediaBreakpoint="xs">
[value]="type"> <tb-toggle-option *ngFor="let type of backgroundTypes"
{{ backgroundTypeTranslationsMap.get(type) | translate }} [value]="type">
</tb-toggle-option> {{ backgroundTypeTranslationsMap.get(type) | translate }}
</tb-toggle-select> </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>
<tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image" formControlName="imageUrl"></tb-gallery-image-input> <div class="tb-form-panel" formGroupName="overlay">
<div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color" class="tb-form-row space-between tb-background-color-field"> <div class="tb-form-panel-title" translate>widgets.background.overlay</div>
<div translate>widgets.color.color</div> <mat-slide-toggle class="mat-slide" formControlName="enabled">
<tb-color-input asBoxInput {{ 'widgets.background.enable-overlay' | translate }}
formControlName="color"> </mat-slide-toggle>
</tb-color-input> <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>
</div> <div class="tb-background-settings-preview">
<div class="tb-form-panel" formGroupName="overlay"> <div class="tb-background-settings-preview-title" translate>
<div class="tb-form-panel-title" translate>widgets.background.overlay</div> widgets.background.preview
<mat-slide-toggle class="mat-slide" formControlName="enabled"> </div>
{{ 'widgets.background.enable-overlay' | translate }} <div class="tb-background-settings-preview-box mat-elevation-z4" [style]="backgroundStyle$ | async">
</mat-slide-toggle> <div class="tb-background-settings-preview-overlay" [style]="overlayStyle">
<div class="tb-form-row space-between"> </div>
<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">
<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>
</div> </div>

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