dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Redesign of color picker
This commit is contained in:
Igor Kulikov 2023-04-17 17:40:42 +03:00 committed by GitHub
commit efda403ea5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 291 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/package.json
View File

@ -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",

41
ui-ngx/src/app/shared/components/color-picker/color-picker.component.html Normal file
View File

@ -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>

104
ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss Normal file
View File

@ -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;
}
}
}
}

124
ui-ngx/src/app/shared/components/color-picker/color-picker.component.ts Normal file
View File

@ -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();
}
}
}

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

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

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

@ -14,12 +14,11 @@
/// limitations under the License.
///
import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
import { ErrorStateMatcher } from '@angular/material/core';
import { Component, Inject, OnInit } from '@angular/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;
submitted = false;
colorPickerFormGroup: FormGroup;
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);
}

9
ui-ngx/src/app/shared/shared.module.ts
View File

@ -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 { }

14
ui-ngx/yarn.lock
View File

@ -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"