widgets.color.gradient-end
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss
index 25e14cb0d5..d5dd0b57e5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss
@@ -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;
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
index 8b78190f5a..0042f3be4b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
@@ -31,7 +31,7 @@ import { takeUntil } from 'rxjs/operators';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { IAliasController } from '@core/api/widget-api.models';
import { DomSanitizer } from '@angular/platform-browser';
-import { coerceBoolean, coerceNumber } from '@shared/decorators/coercion';
+import { coerceBoolean } from '@shared/decorators/coercion';
import { isDefinedAndNotNull } from '@core/utils';
import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models';
import { Datasource } from '@shared/models/widget.models';
@@ -71,11 +71,9 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
datasource: Datasource;
@Input()
- @coerceNumber()
minValue: number;
@Input()
- @coerceNumber()
maxValue: number;
@Input()
@@ -111,7 +109,9 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
source: [{type: ValueSourceType.constant}],
color: ['rgba(255, 0, 0, 1)']
})
- })
+ }),
+ minValue: {value: 0, disabled: isFinite(this.minValue)},
+ maxValue: {value: 100, disabled: isFinite(this.maxValue)}
});
this.gradientFormGroup.valueChanges.pipe(
@@ -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() {
@@ -141,6 +141,8 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
writeValue(value: ColorGradientSettings): void {
if (isDefinedAndNotNull(value)) {
this.gradientFormGroup.get('advancedMode').patchValue(value.advancedMode, {emitEvent: false});
+ this.gradientFormGroup.get('minValue').patchValue(isFinite(value.minValue) ? value.minValue : this.minValue, {emitEvent: false});
+ this.gradientFormGroup.get('maxValue').patchValue(isFinite(value.maxValue) ? value.maxValue : this.maxValue, {emitEvent: false});
if (value?.gradient?.length) {
this.gradientFormGroup.get('gradient').get('start').patchValue(value.gradient[0], {emitEvent: false});
this.gradientFormGroup.get('gradient').get('end').patchValue(value.gradient[value.gradient.length - 1], {emitEvent: false});
@@ -165,10 +167,10 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
this.advancedGradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, null, true)).join('') +
`
`;
} else {
- const point = (+this.maxValue - +this.minValue) / (this.gradientListFormArray.value.length + 1);
+ 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);
- const min = isDefinedAndNotNull(this.minValue) ? this.minValue : 0;
- const max = isDefinedAndNotNull(this.maxValue) ? this.maxValue : 100;
return `
` +
this.gradientListFormArray.value.map((v, i) => this.pointer(shift * (i + 1), i+1, point)).join('') +
`
`;
@@ -180,7 +182,8 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
return `
`;
} else {
return `
` +
- `
${Math.floor(+this.minValue + (value * index))}
`;
+ `
` +
+ `${Math.floor(+this.gradientFormGroup.get('minValue').value + (value * index))}
`;
}
}
@@ -233,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