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

Merge pull request #11002 from ArtemDzhereleiko/AD/hot-fix/color-settings

Browse Source 
Hotfix for color settings
This commit is contained in:
Igor Kulikov 2024-06-14 12:18:01 +03:00 committed by GitHub
commit 145f4d40c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts
View File

@ -111,7 +111,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
).subscribe(() => this.updateModel());
this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
}
ngOnDestroy() {
@ -175,7 +175,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
public removeAdvancedRange(index: number) {
(this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index);
Promise.resolve().then(() => this.popover?.updatePosition());
setTimeout(() => {this.popover?.updatePosition();}, 0);
}
get advancedRangeFormArray(): UntypedFormArray {
@ -189,7 +189,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
removeRange(index: number) {
this.rangeListFormArray.removeAt(index);
this.colorRangeListFormGroup.markAsDirty();
Promise.resolve().then(() => this.popover?.updatePosition());
setTimeout(() => {this.popover?.updatePosition();}, 0);
}
rangeDrop(event: CdkDragDrop<string[]>, range: string) {
@ -212,7 +212,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray;
const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]);
advancedRangeColorsArray.push(advancedRangeColorControl);
Promise.resolve().then(() => this.popover?.updatePosition());
setTimeout(() => {this.popover?.updatePosition();}, 0);
}
addRange() {
@ -224,7 +224,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
};
this.rangeListFormArray.push(this.colorRangeControl(newRange));
this.colorRangeListFormGroup.markAsDirty();
Promise.resolve().then(() => this.popover?.updatePosition());
setTimeout(() => {this.popover?.updatePosition();}, 0);
}
}

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

@ -106,7 +106,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
}
);
this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => {
Promise.resolve().then(() => this.popover?.updatePosition());
setTimeout(() => {this.popover?.updatePosition();}, 0);
});
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss
View File

@ -23,7 +23,7 @@
.gradient-preview {
width: 100%;
padding: 40px 12px 0;
padding: 40px 15px 0;
.gradient-background {
position: relative;
height: 56px;
@ -120,11 +120,13 @@
display: flex;
align-items: center;
justify-content: center;
width: 33px;
width: 38px;
height: 24px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.06);
&-text {
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
font-weight: 500;
}

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

@ -119,7 +119,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
).subscribe(() => this.updateModel());
this.gradientFormGroup.get('advancedMode').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
}
ngOnDestroy() {
@ -167,8 +167,8 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
this.advancedGradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, null, true)).join('') +
`<div class="pointer end"></div>`;
} else {
const min = this.gradientFormGroup.get('minValue').value;
const max = this.gradientFormGroup.get('maxValue').value;
const min = this.gradientFormGroup.get('minValue').value || 0;
const max = this.gradientFormGroup.get('maxValue').value || 100;
const point = (+max - +min) / (this.gradientListFormArray.value.length + 1);
const shift = 100 / (this.gradientListFormArray.value.length + 1);
return `<div class="pointer start"><div class="pointer-value"><span class="pointer-value-text">${min}</span></div></div>` +
@ -236,7 +236,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
this.gradientListFormArray.removeAt(index);
}
this.gradientFormGroup.markAsDirty();
Promise.resolve().then(() => this.popover?.updatePosition());
setTimeout(() => {this.popover?.updatePosition();}, 0);
}
gradientDrop(event: CdkDragDrop<string[]>, advanced = false) {
@ -255,7 +255,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)'));
}
this.gradientFormGroup.markAsDirty();
Promise.resolve().then(() => this.popover?.updatePosition());
setTimeout(() => {this.popover?.updatePosition();}, 0);
}
updateModel() {