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

UI: Implement 'copy color settings from' for color settings component.

Browse Source
This commit is contained in:
Igor Kulikov 2023-10-09 18:01:39 +03:00
parent 00a09cd80b
commit b45b5827a9
16 changed files with 121 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
View File

@ -61,7 +61,7 @@
</tb-font-settings>
</div>
<div class="tb-color-field">
<tb-color-settings formControlName="color">
<tb-color-settings formControlName="color" settingsKey="{{ (index+1) }}. {{ aggregatedValueCardKeyPositionTranslationMap.get(keyRowFormGroup.get('position').value) | translate }}">
</tb-color-settings>
</div>
<div class="tb-arrow-field">

3
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
View File

@ -87,6 +87,9 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
@Input()
keyName: string;
@Input()
index: number;
@Output()
keyRemoved = new EventEmitter();

1
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
View File

@ -32,6 +32,7 @@
<div *ngFor="let keyControl of keysFormArray().controls; trackBy: trackByKey; let $index = index;">
<tb-aggregated-data-key-row fxFlex
[formControl]="keyControl"
[index]="$index"
[datasourceType]="datasourceType"
[keyName]="keyName"
(keyRemoved)="removeKey($index)">

8
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
View File

@ -56,7 +56,7 @@
<tb-font-settings formControlName="labelFont"
[previewText]="valueCardWidgetConfigForm.get('label').value">
</tb-font-settings>
<tb-color-settings formControlName="labelColor">
<tb-color-settings formControlName="labelColor" settingsKey="{{'widgets.value-card.label' | translate }}">
</tb-color-settings>
</div>
</div>
@ -74,7 +74,7 @@
[color]="valueCardWidgetConfigForm.get('iconColor').value?.color"
formControlName="icon">
</tb-material-icon-select>
<tb-color-settings formControlName="iconColor">
<tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.value-card.icon' | translate }}">
</tb-color-settings>
</div>
</div>
@ -89,7 +89,7 @@
<tb-font-settings formControlName="valueFont"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="valueColor">
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.value-card.value' | translate }}">
</tb-color-settings>
</div>
</div>
@ -102,7 +102,7 @@
<tb-font-settings formControlName="dateFont"
[previewText]="datePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="dateColor">
<tb-color-settings formControlName="dateColor" settingsKey="{{'widgets.value-card.date' | translate }}">
</tb-color-settings>
</div>
</div>

6
ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
View File

@ -91,18 +91,18 @@
[autoScale]="batteryLevelWidgetConfigForm.get('autoScaleValueSize').value"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="valueColor">
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.battery-level.value' | translate }}">
</tb-color-settings>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.battery-level.battery-level-color' | translate }}</div>
<tb-color-settings formControlName="batteryLevelColor">
<tb-color-settings formControlName="batteryLevelColor" settingsKey="{{'widgets.battery-level.battery-level-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.battery-level.battery-shape-color' | translate }}</div>
<tb-color-settings formControlName="batteryShapeColor">
<tb-color-settings formControlName="batteryShapeColor" settingsKey="{{'widgets.battery-level.battery-shape-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">

4
ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
View File

@ -49,7 +49,7 @@
[previewText]="centerValuePreviewFn">
</tb-font-settings>
<tb-color-settings *ngIf="!windSpeedDirectionWidgetConfigForm.get('centerValueKey').value"
formControlName="centerValueColor">
formControlName="centerValueColor" settingsKey="{{'widgets.wind-speed-direction.wind-direction' | translate }}">
</tb-color-settings>
</div>
</div>
@ -71,7 +71,7 @@
[previewText]="centerValuePreviewFn">
</tb-font-settings>
<tb-color-settings *ngIf="windSpeedDirectionWidgetConfigForm.get('centerValueKey').value"
formControlName="centerValueColor">
formControlName="centerValueColor" settingsKey="{{'widgets.wind-speed-direction.center-value' | translate }}">
</tb-color-settings>
</div>
</div>

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
View File

@ -36,7 +36,7 @@
</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.aggregated-value-card.color' | translate }}</div>
<tb-color-settings formControlName="color">
<tb-color-settings formControlName="color" settingsKey="{{'widgets.aggregated-value-card.color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row">

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
View File

@ -41,7 +41,7 @@
<tb-font-settings formControlName="labelFont"
[previewText]="label">
</tb-font-settings>
<tb-color-settings formControlName="labelColor">
<tb-color-settings formControlName="labelColor" settingsKey="{{'widgets.value-card.label' | translate }}">
</tb-color-settings>
</div>
</div>
@ -59,7 +59,7 @@
[color]="valueCardWidgetSettingsForm.get('iconColor').value?.color"
formControlName="icon">
</tb-material-icon-select>
<tb-color-settings formControlName="iconColor">
<tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.value-card.icon' | translate }}">
</tb-color-settings>
</div>
</div>
@ -69,7 +69,7 @@
<tb-font-settings formControlName="valueFont"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="valueColor">
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.value-card.value' | translate }}">
</tb-color-settings>
</div>
</div>
@ -82,7 +82,7 @@
<tb-font-settings formControlName="dateFont"
[previewText]="datePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="dateColor">
<tb-color-settings formControlName="dateColor" settingsKey="{{'widgets.value-card.date' | translate }}">
</tb-color-settings>
</div>
</div>

16
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
View File

@ -40,6 +40,22 @@
<ng-container *ngTemplateOutlet="function"></ng-container>
</div>
<div class="tb-color-settings-panel-buttons">
<button *ngIf="settingsComponents?.length"
#copySettingsButton
mat-stroked-button
color="primary"
type="button"
[matMenuTriggerFor]="settingsSourcesMenu" [matMenuTriggerData]="{menuWidth: copySettingsButton._elementRef.nativeElement.clientWidth}">
{{ 'widgets.color.copy-color-settings-from' | translate }}
</button>
<mat-menu #settingsSourcesMenu="matMenu">
<ng-template matMenuContent let-menuWidth="menuWidth">
<div [style.min-width.px]="menuWidth">
<button mat-menu-item *ngFor="let comp of settingsComponents" (click)="copyColorSettings(comp)">{{ comp.settingsKey }}</button>
</div>
</ng-template>
</mat-menu>
<span fxFlex></span>
<button mat-button
color="primary"
type="button"

35
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
View File

@ -16,27 +16,14 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { PageComponent } from '@shared/components/page.component';
import {
ColorRange,
ColorSettings,
ColorType,
colorTypeTranslations
} from '@shared/models/widget-settings.models';
import { ColorRange, ColorSettings, ColorType, colorTypeTranslations } from '@shared/models/widget-settings.models';
import { TbPopoverComponent } from '@shared/components/popover.component';
import {
AbstractControl,
FormControl,
FormGroup,
UntypedFormArray,
UntypedFormBuilder,
UntypedFormGroup
} from '@angular/forms';
import { AbstractControl, FormGroup, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { Datasource, DatasourceType } from '@shared/models/widget.models';
import { deepClone } from '@core/utils';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { WidgetService } from '@core/http/widget.service';
import { ColorSettingsComponent } from '@home/components/widget/lib/settings/common/color-settings.component';
@Component({
selector: 'tb-color-settings-panel',
@ -53,6 +40,9 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
@Input()
popover: TbPopoverComponent<ColorSettingsPanelComponent>;
@Input()
settingsComponents: ColorSettingsComponent[];
@Output()
colorSettingsApplied = new EventEmitter<ColorSettings>();
@ -121,6 +111,19 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
setTimeout(() => {this.popover?.updatePosition();}, 0);
}
copyColorSettings(comp: ColorSettingsComponent) {
const sourceSettings = deepClone(comp.modelValue);
this.colorSettings = sourceSettings;
this.colorSettingsFormGroup.patchValue({
type: this.colorSettings.type,
color: this.colorSettings.color,
colorFunction: this.colorSettings.colorFunction
}, {emitEvent: false});
this.colorSettingsFormGroup.setControl('rangeList',
this.fb.array((this.colorSettings.rangeList || []).map(r => this.colorRangeControl(r))), {emitEvent: false});
this.colorSettingsFormGroup.markAsDirty();
}
cancel() {
this.popover?.hide();
}

54
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts
View File

@ -14,7 +14,16 @@
/// limitations under the License.
///
import { Component, forwardRef, Input, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
import {
Component,
forwardRef,
Injectable,
Input,
OnDestroy,
OnInit,
Renderer2,
ViewContainerRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ColorSettings, ColorType, ComponentStyle } from '@shared/models/widget-settings.models';
import { MatButton } from '@angular/material/button';
@ -23,6 +32,33 @@ import {
ColorSettingsPanelComponent
} from '@home/components/widget/lib/settings/common/color-settings-panel.component';
@Injectable()
export class ColorSettingsComponentService {
private colorSettingsComponents = new Set<ColorSettingsComponent>();
constructor() {}
public registerColorSettingsComponent(comp: ColorSettingsComponent) {
this.colorSettingsComponents.add(comp);
}
public unregisterColorSettingsComponent(comp: ColorSettingsComponent) {
this.colorSettingsComponents.delete(comp);
}
public getOtherColorSettingsComponents(comp: ColorSettingsComponent): ColorSettingsComponent[] {
const result: ColorSettingsComponent[] = [];
for (const component of this.colorSettingsComponents.values()) {
if (component.settingsKey && component.modelValue && component !== comp) {
result.push(component);
}
}
return result;
}
}
@Component({
selector: 'tb-color-settings',
templateUrl: './color-settings.component.html',
@ -35,11 +71,14 @@ import {
}
]
})
export class ColorSettingsComponent implements OnInit, ControlValueAccessor {
export class ColorSettingsComponent implements OnInit, ControlValueAccessor, OnDestroy {
@Input()
disabled: boolean;
@Input()
settingsKey: string;
colorType = ColorType;
modelValue: ColorSettings;
@ -50,9 +89,15 @@ export class ColorSettingsComponent implements OnInit, ControlValueAccessor {
constructor(private popoverService: TbPopoverService,
private renderer: Renderer2,
private viewContainerRef: ViewContainerRef) {}
private viewContainerRef: ViewContainerRef,
private colorSettingsComponentService: ColorSettingsComponentService) {}
ngOnInit(): void {
this.colorSettingsComponentService.registerColorSettingsComponent(this);
}
ngOnDestroy() {
this.colorSettingsComponentService.unregisterColorSettingsComponent(this);
}
registerOnChange(fn: any): void {
@ -81,7 +126,8 @@ export class ColorSettingsComponent implements OnInit, ControlValueAccessor {
this.popoverService.hidePopover(trigger);
} else {
const ctx: any = {
colorSettings: this.modelValue
colorSettings: this.modelValue,
settingsComponents: this.colorSettingsComponentService.getOtherColorSettingsComponents(this)
};
const colorSettingsPanelPopover = this.popoverService.displayPopover(trigger, this.renderer,
this.viewContainerRef, ColorSettingsPanelComponent, 'left', true, null,

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
View File

@ -42,7 +42,7 @@
<tb-font-settings formControlName="labelFont"
[previewText]="countWidgetConfigForm.get('label').value">
</tb-font-settings>
<tb-color-settings formControlName="labelColor">
<tb-color-settings formControlName="labelColor" settingsKey="{{'widgets.count.label' | translate }}">
</tb-color-settings>
</div>
</div>
@ -63,7 +63,7 @@
: ''"
formControlName="icon">
</tb-material-icon-select>
<tb-color-settings formControlName="iconColor">
<tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.count.icon' | translate }}">
</tb-color-settings>
</div>
</div>
@ -76,7 +76,7 @@
<input matInput type="number" min="0" formControlName="iconBackgroundSize" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-css-unit-select fxFlex formControlName="iconBackgroundSizeUnit"></tb-css-unit-select>
<tb-color-settings formControlName="iconBackgroundColor">
<tb-color-settings formControlName="iconBackgroundColor" settingsKey="{{'widgets.count.icon-background' | translate }}">
</tb-color-settings>
</div>
</div>
@ -86,7 +86,7 @@
<tb-font-settings formControlName="valueFont"
previewText="10">
</tb-font-settings>
<tb-color-settings formControlName="valueColor">
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.count.value' | translate }}">
</tb-color-settings>
</div>
</div>

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
View File

@ -27,7 +27,10 @@ import {
} from '@home/components/widget/lib/settings/common/image-cards-select.component';
import { FontSettingsComponent } from '@home/components/widget/lib/settings/common/font-settings.component';
import { FontSettingsPanelComponent } from '@home/components/widget/lib/settings/common/font-settings-panel.component';
import { ColorSettingsComponent } from '@home/components/widget/lib/settings/common/color-settings.component';
import {
ColorSettingsComponent,
ColorSettingsComponentService
} from '@home/components/widget/lib/settings/common/color-settings.component';
import {
ColorSettingsPanelComponent
} from '@home/components/widget/lib/settings/common/color-settings-panel.component';
@ -83,6 +86,9 @@ import {
LegendConfigComponent,
WidgetFontComponent,
CountWidgetSettingsComponent
],
providers: [
ColorSettingsComponentService
]
})
export class WidgetSettingsCommonModule {

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
View File

@ -40,18 +40,18 @@
[autoScale]="batteryLevelWidgetSettingsForm.get('autoScaleValueSize').value"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="valueColor">
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.battery-level.value' | translate }}">
</tb-color-settings>
</div>
</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.battery-level.battery-level-color' | translate }}</div>
<tb-color-settings formControlName="batteryLevelColor">
<tb-color-settings formControlName="batteryLevelColor" settingsKey="{{'widgets.battery-level.battery-level-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">
<div>{{ 'widgets.battery-level.battery-shape-color' | translate }}</div>
<tb-color-settings formControlName="batteryShapeColor">
<tb-color-settings formControlName="batteryShapeColor" settingsKey="{{'widgets.battery-level.battery-shape-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
View File

@ -36,7 +36,7 @@
[initialPreviewStyle]="{ color: windSpeedDirectionWidgetSettingsForm.get('centerValueColor').value?.color }"
[previewText]="centerValuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="centerValueColor">
<tb-color-settings formControlName="centerValueColor" settingsKey="{{ (hasCenterValue ? 'widgets.wind-speed-direction.center-value' : 'widgets.wind-speed-direction.wind-direction') | translate }}">
</tb-color-settings>
</div>
</div>

3
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -5201,7 +5201,8 @@
"value-range": "Value range",
"from": "From",
"to": "To",
"color-function": "Color function"
"color-function": "Color function",
"copy-color-settings-from": "Copy color settings from"
},
"dashboard-state": {
"dashboard-state-settings": "Dashboard state settings",