-
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss
index 38b55346aa..ddd870c7d0 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss
@@ -14,17 +14,17 @@
* limitations under the License.
*/
:host {
- display: block;
width: 100%;
- max-width: 320px;
- min-width: 100%;
- border-radius: 2px;
- background: #fff;
+ display: flex;
+ flex-direction: column;
::ng-deep {
.saturation-component {
- height: 200px;
+ height: 100%;
+ min-height: 200px;
+ max-height: 300px;
border-radius: 8px;
+ margin-bottom: 16px;
div.pointer {
border-width: 2px;
width: 16px;
@@ -56,25 +56,9 @@
}
}
-
-
-.controls {
- padding: 15px 0;
-}
-
-.controls-row {
- display: table;
- width: 100%;
-}
-
-.column {
- display: table-cell;
- vertical-align: middle;
-}
-
-.hue-alpha .column:first-child {
- width: 42px;
- padding: 0 10px 0 0;
+.control-component {
+ max-height: 48px;
+ margin-bottom: 16px;
}
indicator-component {
@@ -90,17 +74,8 @@ indicator-component {
}
}
-hue-component {
- margin-bottom: 16px;
-}
-
color-presets-component {
border-top: 1px solid #d0d0d0;
- padding: 12px;
-
- ::ng-deep .presets-row {
- padding: 12px 0 0;
- }
}
.type-btn {
@@ -114,12 +89,3 @@ color-presets-component {
background-color: #eee;
}
}
-
-.type-column {
- width: 25px;
- text-align: right;
-}
-
-.presentation {
- padding: 12px 0 0;
-}
diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
index ab8fb847dd..dd7afee70a 100644
--- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
+++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts
@@ -14,20 +14,10 @@
/// limitations under the License.
///
-import {
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- Component,
- EventEmitter,
- Input,
- OnChanges,
- OnDestroy,
- OnInit,
- Output,
- SimpleChanges
-} from '@angular/core';
+import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core';
import { Color, ColorPickerControl } from '@iplab/ngx-color-picker';
import { Subscription } from 'rxjs';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export enum ColorType {
hex = 'hex',
@@ -43,89 +33,90 @@ export enum ColorType {
selector: `tb-color-picker`,
templateUrl: `./color-picker.component.html`,
styleUrls: [`./color-picker.component.scss`],
- changeDetection: ChangeDetectionStrategy.OnPush
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => ColorPickerComponent),
+ multi: true
+ }
+ ]
})
-export class ColorPickerComponent implements OnInit, OnChanges, OnDestroy {
-
- public selectedPresentation = 0;
- public presentations = [ColorType.hex, ColorType.rgb, ColorType.rgba, ColorType.hsla, ColorType.hsl];
+export class ColorPickerComponent implements OnInit, ControlValueAccessor, OnDestroy {
- @Input()
- public color: string;
+ selectedPresentation = 0;
+ presentations = [ColorType.hex, ColorType.rgba, ColorType.hsla];
+ control = new ColorPickerControl();
- @Input()
- public control: ColorPickerControl;
-
- @Output()
- public colorChange: EventEmitter
= new EventEmitter(false);
+ private modelValue: string;
private subscriptions: Array = [];
- constructor(private readonly cdr: ChangeDetectorRef) {
+ private propagateChange = null;
+
+ constructor() {
}
public ngOnInit(): void {
- if (!this.control) {
- this.control = new ColorPickerControl();
- }
+ this.subscriptions.push(
+ this.control.valueChanges.subscribe(value => {
+ if (this.modelValue) {
+ this.updateModel();
+ }
+ })
+ );
+ }
+
+ registerOnChange(fn: any): void {
+ this.propagateChange = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ }
+
+ writeValue(value: string): void {
+ this.control. setValueFrom(value || '#fff');
+ this.modelValue = value;
if (this.control.initType === ColorType.hexa) {
this.control.initType = ColorType.hex;
+ } else if (this.control.initType === ColorType.rgb) {
+ this.control.initType = ColorType.rgba;
+ } else if (this.control.initType === ColorType.hsl) {
+ this.control.initType = ColorType.hsla;
}
this.selectedPresentation = this.presentations.indexOf(this.control.initType);
-
- if (this.color) {
- this.control.setValueFrom(this.color);
- }
-
- this.subscriptions.push(
- this.control.valueChanges.subscribe((value) => {
- this.cdr.markForCheck();
- this.colorChange.emit(this.getValueByType(value, this.presentations[this.selectedPresentation]));
- })
- );
}
- changeColorFormat(event: Event) {
- this.colorChange.emit(this.getValueByType(this.control.value, this.presentations[this.selectedPresentation]));
+ private updateModel() {
+ const color: string = this.getValueByType(this.control.value, this.presentations[this.selectedPresentation]);
+ if (this.modelValue !== color) {
+ this.modelValue = color;
+ this.propagateChange(color);
+ }
}
public ngOnDestroy(): void {
- this.cdr.detach();
this.subscriptions.forEach((subscription) => subscription.unsubscribe());
this.subscriptions.length = 0;
}
- public ngOnChanges(changes: SimpleChanges): void {
- if (this.color && this.control &&
- this.getValueByType(this.control.value, this.presentations[this.selectedPresentation]) !== this.color) {
- this.control.setValueFrom(this.color);
- }
- }
-
public changePresentation(): void {
this.selectedPresentation =
this.selectedPresentation === this.presentations.length - 1 ? 0 : this.selectedPresentation + 1;
- this.colorChange.emit(this.getValueByType(this.control.value, this.presentations[this.selectedPresentation]));
- this.cdr.markForCheck();
+ this.updateModel();
}
getValueByType(color: Color, type: ColorType): string {
switch (type) {
- case ColorType.hex || ColorType.hexa:
+ case ColorType.hex:
return color.toHexString(this.control.value.getRgba().getAlpha() !== 1);
- case ColorType.rgb:
- return color.toRgbString();
case ColorType.rgba:
- return color.toRgbaString();
- case ColorType.hsl:
- return color.toHslString();
+ return this.control.value.getRgba().getAlpha() !== 1 ? color.toRgbaString() : color.toRgbString();
case ColorType.hsla:
- return color.toHslaString();
+ return this.control.value.getRgba().getAlpha() !== 1 ? color.toHslaString() : color.toHslString();
default:
return color.toRgbaString();
}
}
-
}
diff --git a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html
index aedeff35b2..de733b2a20 100644
--- a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html
@@ -15,9 +15,9 @@
limitations under the License.
-->
-