Entities & Glance Card: Add state color to editors (#6723)

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -47,6 +47,7 @@ const cardConfigStruct = object({
   title: optional(union([string(), boolean()])),
   theme: optional(string()),
   show_header_toggle: optional(boolean()),
+  state_color: optional(boolean()),
   entities: array(entitiesConfigStruct),
   header: optional(headerFooterConfigStructs),
   footer: optional(headerFooterConfigStructs),
@@ -89,33 +90,47 @@ export class HuiEntitiesCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
-          .value="${this._title}"
+          .value=${this._title}
-          .configValue="${"title"}"
+          .configValue=${"title"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
         ></paper-input>
         <hui-theme-select-editor
           .hass=${this.hass}
-          .value="${this._theme}"
+          .value=${this._theme}
-          .configValue="${"theme"}"
+          .configValue=${"theme"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
-        <ha-formfield
+        <div class="side-by-side">
-          .label=${this.hass.localize(
+          <ha-formfield
-            "ui.panel.lovelace.editor.card.entities.show_header_toggle"
+            .label=${this.hass.localize(
-          )}
+              "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-          .dir=${computeRTLDirection(this.hass)}
+            )}
-        >
+            .dir=${computeRTLDirection(this.hass)}
-          <ha-switch
+          >
-            .checked="${this._config!.show_header_toggle !== false}"
+            <ha-switch
-            .configValue="${"show_header_toggle"}"
+              .checked=${this._config!.show_header_toggle !== false}
-            @change="${this._valueChanged}"
+              .configValue=${"show_header_toggle"}
-          ></ha-switch>
+              @change=${this._valueChanged}
-        </ha-formfield>
+            ></ha-switch>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.state_color"
+            )}
+            .dir=${computeRTLDirection(this.hass)}
+          >
+            <ha-switch
+              .checked=${this._config!.state_color}
+              .configValue=${"state_color"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-formfield>
+        </div>
       </div>
       <hui-entity-editor
         .hass=${this.hass}
-        .entities="${this._configEntities}"
+        .entities=${this._configEntities}
-        @entities-changed="${this._valueChanged}"
+        @entities-changed=${this._valueChanged}
       ></hui-entity-editor>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts

@@ -47,6 +47,7 @@ const cardConfigStruct = object({
   show_name: optional(boolean()),
   show_state: optional(boolean()),
   show_icon: optional(boolean()),
+  state_color: optional(boolean()),
   entities: array(entitiesConfigStruct),
 });
 
@@ -89,6 +90,10 @@ export class HuiGlanceCardEditor extends LitElement
     return this._config!.show_state || true;
   }
 
+  get _state_color(): boolean {
+    return this._config!.state_color ?? true;
+  }
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -105,16 +110,16 @@ export class HuiGlanceCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
-          .value="${this._title}"
+          .value=${this._title}
-          .configValue="${"title"}"
+          .configValue=${"title"}
-          @value-changed="${this._valueChanged}"
+          @value-changed=${this._valueChanged}
         ></paper-input>
         <div class="side-by-side">
           <hui-theme-select-editor
             .hass=${this.hass}
-            .value="${this._theme}"
+            .value=${this._theme}
-            .configValue="${"theme"}"
+            .configValue=${"theme"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
           <paper-input
             .label="${this.hass.localize(
@@ -123,9 +128,9 @@ export class HuiGlanceCardEditor extends LitElement
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             type="number"
-            .value="${this._columns}"
+            .value=${this._columns}
-            .configValue="${"columns"}"
+            .configValue=${"columns"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
         <div class="side-by-side">
@@ -138,8 +143,8 @@ export class HuiGlanceCardEditor extends LitElement
             >
               <ha-switch
                 .checked=${this._config!.show_name !== false}
-                .configValue="${"show_name"}"
+                .configValue=${"show_name"}
-                @change="${this._valueChanged}"
+                @change=${this._valueChanged}
               ></ha-switch>
             </ha-formfield>
           </div>
@@ -152,8 +157,8 @@ export class HuiGlanceCardEditor extends LitElement
             >
               <ha-switch
                 .checked=${this._config!.show_icon !== false}
-                .configValue="${"show_icon"}"
+                .configValue=${"show_icon"}
-                @change="${this._valueChanged}"
+                @change=${this._valueChanged}
               >
               </ha-switch>
             </ha-formfield>
@@ -167,18 +172,30 @@ export class HuiGlanceCardEditor extends LitElement
             >
               <ha-switch
                 .checked=${this._config!.show_state !== false}
-                .configValue="${"show_state"}"
+                .configValue=${"show_state"}
-                @change="${this._valueChanged}"
+                @change=${this._valueChanged}
               >
               </ha-switch>
             </ha-formfield>
           </div>
         </div>
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.state_color"
+          )}
+          .dir=${computeRTLDirection(this.hass)}
+        >
+          <ha-switch
+            .checked=${this._config!.state_color}
+            .configValue=${"state_color"}
+            @change=${this._valueChanged}
+          ></ha-switch>
+        </ha-formfield>
       </div>
       <hui-entity-editor
         .hass=${this.hass}
-        .entities="${this._configEntities}"
+        .entities=${this._configEntities}
-        @entities-changed="${this._valueChanged}"
+        @entities-changed=${this._valueChanged}
       ></hui-entity-editor>
     `;
   }

src/translations/en.json

@@ -2256,7 +2256,8 @@
               "url": "Url",
               "state": "State",
               "secondary_info_attribute": "Secondary Info Attribute",
-              "search": "Search"
+              "search": "Search",
+              "state_color": "Color icons based on state?"
             },
             "map": {
               "name": "Map",