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

UI: color-picker

Browse Source
This commit is contained in:
Artem Dzhereleiko 2023-04-12 13:00:51 +03:00
parent 4022f4a8c3
commit 0987c65681
7 changed files with 32 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -29,28 +29,17 @@
</div>
<div fxLayoutAlign="row">
<mat-form-field class="mat-block">
<mat-select [(value)]="this.control.initType" (valueChange)="changeColorFormat($event)">
<mat-option *ngFor="let type of presentations" [value]="type">
{{type}}
</mat-option>
</mat-select>
</mat-form-field>
<tb-color-picker-input-component [alpha]="control.alphaChannelVisibilityChanges | async" [colorFormat]="this.control.initType" [(color)]="control.value" [(hue)]="control.hue">
</tb-color-picker-input-component>
<!-- <div class="controls-row presentation">-->
<!-- <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 class="controls-row presentation">
<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>
<rgba-input-component *ngSwitchCase="'rgb'" [alpha]="false" 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>
<hsla-input-component *ngSwitchCase="'hsl'" [alpha]="false" 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>-->

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

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

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

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

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

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

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

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