diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html deleted file mode 100644 index c135369793..0000000000 --- a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html +++ /dev/null @@ -1,35 +0,0 @@ - -
-
- - - - - - - - - -
- - - - -
- diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts b/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts deleted file mode 100644 index 445b65a969..0000000000 --- a/ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -/// -/// Copyright © 2016-2023 The Thingsboard Authors -/// -/// Licensed under the Apache License, Version 2.0 (the "License"); -/// you may not use this file except in compliance with the License. -/// You may obtain a copy of the License at -/// -/// http://www.apache.org/licenses/LICENSE-2.0 -/// -/// Unless required by applicable law or agreed to in writing, software -/// distributed under the License is distributed on an "AS IS" BASIS, -/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -/// See the License for the specific language governing permissions and -/// limitations under the License. -/// - -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - EventEmitter, - Input, - OnInit, - Output -} from '@angular/core'; -import { Color } from '@iplab/ngx-color-picker'; -import { ColorType } from '@shared/components/color-picker/color-picker.component'; - -@Component({ - selector: `tb-color-picker-input-component`, - templateUrl: `./color-picker-input.component.html`, - styleUrls: [], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ColorPickerInputComponent { - - @Input() - public hue: Color; - - @Output() - public hueChange = new EventEmitter(false); - - @Input() - public color: Color; - - @Output() - public colorChange = new EventEmitter(false); - - public labelVisible: boolean; - - @Input() - public set label(value) { - this.labelVisible = true; - } - - @Input() - public colorFormat: string; - - public isAlphaVisible = true; - - @Input() - public set alpha(isVisible: boolean) { - this.isAlphaVisible = isVisible; - } - - public get value() { - return this.color ? this.color.getRgba() : null; - } - - constructor() { - } - - public onInputChange(newValue, color: 'R' | 'G' | 'B' | 'A') { - const value = this.value; - const red = color === 'R' ? newValue : value.red; - const green = color === 'G' ? newValue : value.green; - const blue = color === 'B' ? newValue : value.blue; - const alpha = color === 'A' ? newValue : value.alpha; - - const newColor = new Color().setRgba(red, green, blue, alpha); - const hue = new Color().setHsva(newColor.getHsva().hue); - - this.hueChange.emit(hue); - this.colorChange.emit(newColor); - } -} diff --git a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html index 4751d498f2..1005fa4a58 100644 --- a/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html +++ b/ui-ngx/src/app/shared/components/color-picker/color-picker.component.html @@ -29,28 +29,17 @@
- - - - {{type}} - - - - - - - - - - - - - - - - - +
+
+ + + + + +
+
+ +
+
- - 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 f2140e02a5..ab8fb847dd 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 @@ -23,10 +23,12 @@ import { OnChanges, OnDestroy, OnInit, - Output, SimpleChanges + Output, + SimpleChanges } from '@angular/core'; import { Color, ColorPickerControl } from '@iplab/ngx-color-picker'; import { Subscription } from 'rxjs'; + export enum ColorType { hex = 'hex', hexa = 'hexa', @@ -46,7 +48,7 @@ export enum ColorType { export class ColorPickerComponent implements OnInit, OnChanges, OnDestroy { public selectedPresentation = 0; - public presentations = [ColorType.hex, ColorType.hexa, ColorType.rgb, ColorType.rgba, ColorType.hsl, ColorType.hsla]; + public presentations = [ColorType.hex, ColorType.rgb, ColorType.rgba, ColorType.hsla, ColorType.hsl]; @Input() public color: string; @@ -67,6 +69,12 @@ export class ColorPickerComponent implements OnInit, OnChanges, OnDestroy { this.control = new ColorPickerControl(); } + if (this.control.initType === ColorType.hexa) { + this.control.initType = ColorType.hex; + } + + this.selectedPresentation = this.presentations.indexOf(this.control.initType); + if (this.color) { this.control.setValueFrom(this.color); } @@ -74,13 +82,13 @@ export class ColorPickerComponent implements OnInit, OnChanges, OnDestroy { this.subscriptions.push( this.control.valueChanges.subscribe((value) => { this.cdr.markForCheck(); - this.colorChange.emit(this.getValueByType(value, this.control.initType)); + this.colorChange.emit(this.getValueByType(value, this.presentations[this.selectedPresentation])); }) ); } changeColorFormat(event: Event) { - this.colorChange.emit(this.getValueByType(this.control.value, this.control.initType)); + this.colorChange.emit(this.getValueByType(this.control.value, this.presentations[this.selectedPresentation])); } public ngOnDestroy(): void { @@ -90,7 +98,8 @@ export class ColorPickerComponent implements OnInit, OnChanges, OnDestroy { } public ngOnChanges(changes: SimpleChanges): void { - if (this.color && this.control && this.getValueByType(this.control.value, this.control.initType) !== this.color) { + if (this.color && this.control && + this.getValueByType(this.control.value, this.presentations[this.selectedPresentation]) !== this.color) { this.control.setValueFrom(this.color); } } @@ -98,14 +107,14 @@ export class ColorPickerComponent implements OnInit, OnChanges, OnDestroy { 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(); } getValueByType(color: Color, type: ColorType): string { switch (type) { - case ColorType.hex: - return color.toHexString(); - case ColorType.hexa: - return color.toHexString(true); + case ColorType.hex || ColorType.hexa: + return color.toHexString(this.control.value.getRgba().getAlpha() !== 1); case ColorType.rgb: return color.toRgbString(); case ColorType.rgba: 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 8de970de65..aedeff35b2 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,14 +15,8 @@ limitations under the License. --> -
+
- - - - - -
diff --git a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts index 784da8da25..8a9d5cbdf8 100644 --- a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts +++ b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts @@ -30,8 +30,6 @@ import { import { Router } from '@angular/router'; import { DialogComponent } from '@shared/components/dialog.component'; import { ColorPickerControl } from '@iplab/ngx-color-picker'; -import { ColorType } from '@shared/components/color-picker/color-picker.component'; -import * as tinycolor_ from 'tinycolor2'; export interface ColorPickerDialogData { color: string; @@ -50,8 +48,6 @@ export class ColorPickerDialogComponent extends DialogComponent, diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 10dbbef4aa..e05275a7af 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -170,7 +170,6 @@ import { CustomPaginatorIntl } from '@shared/services/custom-paginator-intl'; import { TbScriptLangComponent } from '@shared/components/script-lang.component'; import { DateAgoPipe } from '@shared/pipe/date-ago.pipe'; import { ColorPickerComponent } from '@shared/components/color-picker/color-picker.component'; -import { ColorPickerInputComponent } from '@shared/components/color-picker/color-picker-input.component'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { return markedOptionsService; @@ -312,8 +311,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) PhoneInputComponent, TbScriptLangComponent, DateAgoPipe, - ColorPickerComponent, - ColorPickerInputComponent + ColorPickerComponent ], imports: [ CommonModule,