UI: color-picker

ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.html

@@ -1,35 +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.
-
--->
-<div fxLayoutAlign="row">
-  <div fxLayoutAlign="row">
-    <mat-form-field class="mat-block">
-      <input matInput pattern="[0-9]*" min="0" max="255" [value]="value?.getRed().toString()" (input)="onInputChange($event, 'R')">
-    </mat-form-field>
-    <mat-form-field class="mat-block">
-      <input matInput pattern="[0-9]*" min="0" max="255" [value]="value?.getGreen().toString()" (input)="onInputChange($event, 'G')">
-    </mat-form-field>
-    <mat-form-field class="mat-block">
-      <input matInput pattern="[0-9]*" min="0" max="255" [value]="value?.getBlue().toString()" (input)="onInputChange($event, 'B')">
-    </mat-form-field>
-  </div>
-
-  <mat-form-field class="mat-block">
-    <input matInput min="0" max="1" [value]="value?.getAlpha().toString()" (input)="onInputChange($event, 'A')">
-  </mat-form-field>
-</div>
-

ui-ngx/src/app/shared/components/color-picker/color-picker-input.component.ts

@@ -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<Color>(false);
-
-  @Input()
-  public color: Color;
-
-  @Output()
-  public colorChange = new EventEmitter<Color>(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);
-  }
-}

ui-ngx/src/app/shared/components/color-picker/color-picker.component.html

@@ -29,28 +29,17 @@
   </div>
 
   <div fxLayoutAlign="row">
-  <mat-form-field class="mat-block">
+    <div class="controls-row presentation">
-    <mat-select [(value)]="this.control.initType" (valueChange)="changeColorFormat($event)">
+      <div class="column" [ngSwitch]="presentations[selectedPresentation]">
-      <mat-option *ngFor="let type of presentations" [value]="type">
+        <rgba-input-component *ngSwitchCase="'rgba'" [alpha]="control.alphaChannelVisibilityChanges | async" label [(color)]="control.value" [(hue)]="control.hue"></rgba-input-component>
-        {{type}}
+        <rgba-input-component *ngSwitchCase="'rgb'" [alpha]="false" label [(color)]="control.value" [(hue)]="control.hue"></rgba-input-component>
-      </mat-option>
+        <hsla-input-component *ngSwitchCase="'hsla'" [alpha]="control.alphaChannelVisibilityChanges | async" label [(color)]="control.value" [(hue)]="control.hue"></hsla-input-component>
-    </mat-select>
+        <hsla-input-component *ngSwitchCase="'hsl'" [alpha]="false" label [(color)]="control.value" [(hue)]="control.hue"></hsla-input-component>
-  </mat-form-field>
+        <hex-input-component *ngSwitchCase="'hex'" label prefix="#" [(color)]="control.value" [(hue)]="control.hue"></hex-input-component>
-
+      </div>
-  <tb-color-picker-input-component [alpha]="control.alphaChannelVisibilityChanges | async" [colorFormat]="this.control.initType" [(color)]="control.value" [(hue)]="control.hue">
+      <div class="column type-column">
-  </tb-color-picker-input-component>
+        <span class="type-btn" (click)="changePresentation()"></span>
-
+      </div>
-<!--  <div class="controls-row presentation">-->
+    </div>
-<!--    <div class="column" [ngSwitch]="presentations[selectedPresentation]">-->
-<!--      <rgba-input-component *ngSwitchCase="'rgba'" [alpha]="control.alphaChannelVisibilityChanges | async" label [(color)]="control.value" [(hue)]="control.hue"></rgba-input-component>-->
-<!--      <hsla-input-component *ngSwitchCase="'hsla'" [alpha]="control.alphaChannelVisibilityChanges | async" label [(color)]="control.value" [(hue)]="control.hue"></hsla-input-component>-->
-<!--      <hex-input-component *ngSwitchCase="'hex'" label prefix="#" [(color)]="control.value" [(hue)]="control.hue"></hex-input-component>-->
-<!--    </div>-->
-<!--    <div class="column type-column">-->
-<!--      <span class="type-btn" (click)="changePresentation()"></span>-->
-<!--    </div>-->
-<!--  </div>-->
   </div>
 </div>
-
-<!--<color-presets-component *ngIf="control.presetsVisibilityChanges | async" [(color)]="control.value" [colorPresets]="control.presets" [(hue)]="control.hue"></color-presets-component>-->

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:
+      case ColorType.hex || ColorType.hexa:
-        return color.toHexString();
+        return color.toHexString(this.control.value.getRgba().getAlpha() !== 1);
-      case ColorType.hexa:
-        return color.toHexString(true);
       case ColorType.rgb:
         return color.toRgbString();
       case ColorType.rgba:

ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.html

@@ -15,14 +15,8 @@
     limitations under the License.
 
 -->
-<form [formGroup]="colorPickerFormGroup" (ngSubmit)="select()">
+<form [formGroup]="colorPickerFormGroup" (ngSubmit)="select()" style="width: 320px;">
   <div mat-dialog-content style="padding: 16px" fxLayout="row" fxLayoutAlign="center">
-<!--    <span [style.background]="colorPickerFormGroup.get('color').value"-->
-<!--          [cpToggle]="true"-->
-<!--          [cpDialogDisplay]="'inline'"-->
-<!--          [colorPicker]="colorPickerFormGroup.get('color').value"-->
-<!--          (colorPickerChange)="onColorChange($event)">-->
-<!--    </span>-->
     <tb-color-picker [control]="sketchControl" (colorChange)="onColorChange($event)"></tb-color-picker>
   </div>
   <div mat-dialog-actions fxLayout="row">

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<ColorPickerDialo
 
   submitted = false;
 
-  colorType: ColorType = ColorType.rgba;
-
   sketchControl = new ColorPickerControl().setValueFrom(this.data.color);
 
   constructor(protected store: Store<AppState>,

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,
+    ColorPickerComponent
-    ColorPickerInputComponent
   ],
   imports: [
     CommonModule,