Merge pull request #8364 from ArtemDzhereleiko/AD/color-picker

Redesign of color picker

ui-ngx/package.json

@@ -31,6 +31,7 @@
     "@flowjs/flow.js": "^2.14.1",
     "@flowjs/ngx-flow": "~0.6.0",
     "@geoman-io/leaflet-geoman-free": "^2.13.0",
+    "@iplab/ngx-color-picker": "^15.0.2",
     "@juggle/resize-observer": "^3.4.0",
     "@mat-datetimepicker/core": "~11.0.3",
     "@material-ui/core": "4.12.3",
@@ -73,7 +74,6 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.42",
     "ngx-clipboard": "^15.1.0",
-    "ngx-color-picker": "^14.0.0",
     "ngx-daterangepicker-material": "^6.0.4",
     "ngx-drag-drop": "^15.0.1",
     "ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/2.0.0",

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

@@ -0,0 +1,41 @@
+<!--
+
+    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.
+
+-->
+<saturation-component class="saturation-component" [hue]="control.hue" [(color)]="control.value"></saturation-component>
+
+<div class="control-component">
+  <indicator-component class="indicator-component"
+                       [colorType]="presentations[selectedPresentation]"
+                       [color]="control.value">
+  </indicator-component>
+  <div class="hue-alpha-range">
+    <hue-component [(hue)]="control.hue" [(color)]="control.value"></hue-component>
+    <alpha-component [(color)]="control.value"></alpha-component>
+  </div>
+</div>
+
+<div class="color-input-block">
+  <div class="color-input" [ngSwitch]="presentations[selectedPresentation]">
+    <rgba-input-component *ngSwitchCase="'rgba'" label
+                          [(color)]="control.value" [(hue)]="control.hue"></rgba-input-component>
+    <hsla-input-component *ngSwitchCase="'hsla'" 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="type-btn" (click)="changePresentation()"></div>
+</div>

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

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ */
+:host {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .saturation-component {
+    height: 100%;
+    min-height: 200px;
+    max-height: 300px;
+    border-radius: 8px;
+  }
+
+  .control-component {
+    max-height: 48px;
+    display: flex;
+    gap: 16px;
+
+    .indicator-component {
+      height: 48px;
+      width: 48px;
+      border-radius: 8px;
+      background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMUAFg9Gm0AAAAPSURBVAjXY2D4jxXhEgYAfr8P8QhChVEAAAAASUVORK5CYII=') repeat;
+    }
+
+    .hue-alpha-range {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      flex: 1;
+
+      > * {
+        height: 18px;
+        overflow: hidden;
+        border-radius: 9px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  .color-input-block {
+    display: flex;
+
+    .color-input {
+      flex: 1;
+    }
+
+    .type-btn {
+      height: 26px;
+      width: 20px;
+      background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAMAAAAootjDAAAAM1BMVEUAAAAzMzMzMzMzMzMzMzM0NDQzMzMzMzM0NDQzMzMzMzM0NDQzMzMzMzMyMjIrKyszMzPF8UZlAAAAEHRSTlMA1fHr4ZxxSRP45sG+sCkGH2+Z6QAAAHJJREFUKM+9kkkSgCAQA0FEVLb5/2tViqgQvNrHviSzKGCt6nDGuNass8i8NsrLiX+bZbrUtDwm7VLYE0zWUtEZ+RvUZpEvN8YhH9QmQRoC8kFpEnVHVP/DJUZVeSAem5fDKxwtms/BR+PT8gN8vwk/0wE1gQzNVYryIwAAAABJRU5ErkJggg==') no-repeat center;
+      background-size: 6px 12px;
+
+      &:hover {
+        background-color: #eee;
+      }
+    }
+  }
+}
+
+:host ::ng-deep {
+  .saturation-component {
+    .pointer {
+      border-width: 2px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  indicator-component {
+    svg {
+      vertical-align: -70% !important;
+    }
+  }
+
+  .hue-alpha-range {
+    alpha-component, hue-component {
+      .pointer {
+        height: 18px;
+        width: 18px;
+        background: none;
+        border: 2px solid #fff;
+      }
+      .gradient-color {
+        border-radius: 9px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,124 @@
+///
+/// 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 { Component, forwardRef, OnDestroy } 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',
+  hexa = 'hexa',
+  rgba = 'rgba',
+  rgb = 'rgb',
+  hsla = 'hsla',
+  hsl = 'hsl',
+  cmyk = 'cmyk'
+}
+
+@Component({
+  selector: `tb-color-picker`,
+  templateUrl: `./color-picker.component.html`,
+  styleUrls: [`./color-picker.component.scss`],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ColorPickerComponent),
+      multi: true
+    }
+  ]
+})
+export class ColorPickerComponent implements ControlValueAccessor, OnDestroy {
+
+  selectedPresentation = 0;
+  presentations = [ColorType.hex, ColorType.rgba, ColorType.hsla];
+  control = new ColorPickerControl();
+
+  private modelValue: string;
+
+  private subscriptions: Array<Subscription> = [];
+
+  private propagateChange = (v: any) => {};
+
+  private setValue = false;
+
+  constructor() {
+    this.subscriptions.push(
+      this.control.valueChanges.subscribe(() => {
+        if (!this.setValue) {
+          this.updateModel();
+        } else {
+          this.setValue = false;
+        }
+      })
+    );
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  writeValue(value: string): void {
+    this.setValue = !!value;
+    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);
+  }
+
+  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.subscriptions.forEach((subscription) => subscription.unsubscribe());
+    this.subscriptions.length = 0;
+  }
+
+  public changePresentation(): void {
+    this.selectedPresentation =
+      this.selectedPresentation === this.presentations.length - 1 ? 0 : this.selectedPresentation + 1;
+    this.updateModel();
+  }
+
+  getValueByType(color: Color, type: ColorType): string {
+    switch (type) {
+      case ColorType.hex:
+        return color.toHexString(this.control.value.getRgba().getAlpha() !== 1);
+      case ColorType.rgba:
+        return this.control.value.getRgba().getAlpha() !== 1 ? color.toRgbaString() : color.toRgbString();
+      case ColorType.hsla:
+        return this.control.value.getRgba().getAlpha() !== 1 ? color.toHslaString() : color.toHslString();
+      default:
+        return color.toRgbaString();
+    }
+  }
+}

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

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

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

@@ -14,12 +14,11 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
-import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@shared/components/dialog.component';
 
@@ -30,22 +29,18 @@ export interface ColorPickerDialogData {
 @Component({
   selector: 'tb-color-picker-dialog',
   templateUrl: './color-picker-dialog.component.html',
-  providers: [{provide: ErrorStateMatcher, useExisting: ColorPickerDialogComponent}],
   styleUrls: []
 })
 export class ColorPickerDialogComponent extends DialogComponent<ColorPickerDialogComponent, string>
-  implements OnInit, ErrorStateMatcher {
+  implements OnInit {
 
-  colorPickerFormGroup: UntypedFormGroup;
+  colorPickerFormGroup: FormGroup;
-
-  submitted = false;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: ColorPickerDialogData,
-              @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<ColorPickerDialogComponent, string>,
-              public fb: UntypedFormBuilder) {
+              public fb: FormBuilder) {
     super(store, router, dialogRef);
   }
 
@@ -55,23 +50,11 @@ export class ColorPickerDialogComponent extends DialogComponent<ColorPickerDialo
     });
   }
 
-  isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
-    const customErrorState = !!(control && control.invalid && this.submitted);
-    return originalErrorState || customErrorState;
-  }
-
-  onColorChange(color: string) {
-    this.colorPickerFormGroup.get('color').setValue(color);
-    this.colorPickerFormGroup.markAsDirty();
-  }
-
   cancel(): void {
     this.dialogRef.close(null);
   }
 
   select(): void {
-    this.submitted = true;
     const color: string = this.colorPickerFormGroup.get('color').value;
     this.dialogRef.close(color);
   }

ui-ngx/src/app/shared/shared.module.ts

@@ -63,7 +63,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { ShareModule as ShareButtonsModule } from 'ngx-sharebuttons';
 import { HotkeyModule } from 'angular2-hotkeys';
-import { ColorPickerModule } from 'ngx-color-picker';
+import { ColorPickerModule } from '@iplab/ngx-color-picker';
 import { NgxHmCarouselModule } from 'ngx-hm-carousel';
 import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import { UserMenuComponent } from '@shared/components/user-menu.component';
@@ -187,6 +187,7 @@ import {
   GtMdLgLayoutGapDirective,
   GtMdLgShowHideDirective
 } from '@shared/layout/layout.directives';
+import { ColorPickerComponent } from '@shared/components/color-picker/color-picker.component';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -353,7 +354,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     GtMdLgLayoutDirective,
     GtMdLgLayoutAlignDirective,
     GtMdLgLayoutGapDirective,
-    GtMdLgShowHideDirective
+    GtMdLgShowHideDirective,
+    ColorPickerComponent
   ],
   imports: [
     CommonModule,
@@ -576,7 +578,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     GtMdLgLayoutDirective,
     GtMdLgLayoutAlignDirective,
     GtMdLgLayoutGapDirective,
-    GtMdLgShowHideDirective
+    GtMdLgShowHideDirective,
+    ColorPickerComponent
   ]
 })
 export class SharedModule { }

ui-ngx/yarn.lock

@@ -1672,6 +1672,13 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@iplab/ngx-color-picker@^15.0.2":
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@iplab/ngx-color-picker/-/ngx-color-picker-15.0.2.tgz#856bf2571378e792e5e42b566ac1aa79a9262763"
+  integrity sha512-wum0Hg4Ky/6mhvzolEpFpjGckOjN8L2nkXvy3mWUVclFHP9MZqqgpJaxghtax7/tMdEWQnwQI3PYsNyKfF15ug==
+  dependencies:
+    tslib "^2.3.0"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -8130,13 +8137,6 @@ ngx-clipboard@^15.1.0:
     ngx-window-token ">=6.0.0"
     tslib "^2.0.0"
 
-ngx-color-picker@^14.0.0:
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/ngx-color-picker/-/ngx-color-picker-14.0.0.tgz#4587f517ac5683a705d4e55cd0939afa91faa853"
-  integrity sha512-w28zx2DyVpIJeNsTB3T2LUI4Ed/Ujf5Uhxuh0dllputfpxXwZG9ocSJM/0L67+fxA3UnfvvXVZNUX1Ny5nZIIw==
-  dependencies:
-    tslib "^2.3.0"
-
 ngx-daterangepicker-material@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/ngx-daterangepicker-material/-/ngx-daterangepicker-material-6.0.4.tgz#4e2432698ded28021a5fc0b0025dd1e0a3a13412"