From b45b5827a99d7c7a041bae209b3e6c1dcb99a26f Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 9 Oct 2023 18:01:39 +0300
Subject: [PATCH] UI: Implement 'copy color settings from' for color settings
 component.

---
 .../aggregated-data-key-row.component.html    |  2 +-
 .../aggregated-data-key-row.component.ts      |  3 ++
 .../aggregated-data-keys-panel.component.html |  1 +
 .../value-card-basic-config.component.html    |  8 +--
 .../battery-level-basic-config.component.html |  6 +--
 ...peed-direction-basic-config.component.html |  4 +-
 ...ted-value-card-key-settings.component.html |  2 +-
 .../value-card-widget-settings.component.html |  8 +--
 .../color-settings-panel.component.html       | 16 ++++++
 .../common/color-settings-panel.component.ts  | 35 ++++++------
 .../common/color-settings.component.ts        | 54 +++++++++++++++++--
 .../count-widget-settings.component.html      |  8 +--
 .../common/widget-settings-common.module.ts   |  8 ++-
 ...ttery-level-widget-settings.component.html |  6 +--
 ...d-direction-widget-settings.component.html |  2 +-
 .../assets/locale/locale.constant-en_US.json  |  3 +-
 16 files changed, 121 insertions(+), 45 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
index 60e0ab43cc..2c8c78f3ce 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
@@ -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">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
index cea09a91c1..0f7bfe648e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
@@ -87,6 +87,9 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
   @Input()
   keyName: string;
 
+  @Input()
+  index: number;
+
   @Output()
   keyRemoved = new EventEmitter();
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
index e507334aac..f8503b3c4d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.html
@@ -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)">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 4550263a76..f99eec5de0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
index 5b238435b6..245ae063a1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html
@@ -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">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
index 7644d3760e..4c2c4ae8a9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.html
@@ -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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
index 32d48347ac..30e0a7ed15 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/aggregated-value-card-key-settings.component.html
@@ -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">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
index fe543dc330..6bfa573477 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
index cd8cf1bc06..8712322d2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.html
@@ -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"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
index 483674437d..d6d0ead7f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
@@ -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();
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts
index f92203459e..39893d27f0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts
@@ -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,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
index e33d9ee86e..d9baff69fa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html
@@ -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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
index 5a2a91b56b..4018549863 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-settings-common.module.ts
@@ -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 {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
index 1221e5bfc2..7e53d17df1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html
@@ -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">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
index e81519ff3c..1bf2095b10 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.html
@@ -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>
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 40abb989c1..e755f16420 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -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",