feat(cover): possibility to set a color per cover state with theme (#384

) * Make the icon active state dependant on the device class of the cover * Revert rollup port change * Revert change in lang file * Implement theme variables for the different cover states * Remove import * Also apply per state color to slider element * Merge main * Fix rollup config * Old cover code * Old cover code * Refactor enums to strings * Update src/utils/theme.ts Co-authored-by: Paul Bottein <paul.bottein@gmail.com> * Fix state mapping Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
piitaya · May 1, 2022 · 032e668 · 032e668
1 parent 8c42308
commit 032e668
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 11 deletions.
diff --git a/src/cards/cover-card/controls/cover-position-control.ts b/src/cards/cover-card/controls/cover-position-control.ts
@@ -2,7 +2,7 @@ import { HomeAssistant } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { CoverEntity } from "../../../ha/data/cover";
-import { isActive, isAvailable } from "../../../ha/data/entity";
+import { isAvailable } from "../../../ha/data/entity";
 import "../../../shared/slider";
 import { getPosition } from "../utils";
 
@@ -39,7 +39,6 @@ export class CoverPositionControl extends LitElement {
             <mushroom-slider
                 .value=${position}
                 .disabled=${!isAvailable(this.entity)}
-                .inactive=${!isActive(this.entity)}
                 .showActive=${true}
                 @change=${this.onChange}
                 @current-change=${this.onCurrentChange}
@@ -49,9 +48,13 @@ export class CoverPositionControl extends LitElement {
 
     static get styles(): CSSResultGroup {
         return css`
+            :host {
+                --slider-color: rgb(var(--rgb-state-cover));
+                --slider-bg-color: rgba(var(--rgb-state-cover), 0.2);
+            }
             mushroom-slider {
-                --main-color: rgb(var(--rgb-state-cover));
-                --bg-color: rgba(var(--rgb-state-cover), 0.2);
+                --main-color: var(--slider-color);
+                --bg-color: var(--slider-bg-color);
             }
         `;
     }

diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts
@@ -9,11 +9,12 @@ import {
 } from "custom-card-helpers";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
 import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
 import { CoverEntity } from "../../ha/data/cover";
-import { isActive, isAvailable } from "../../ha/data/entity";
+import { isAvailable } from "../../ha/data/entity";
 import "../../shared/badge-icon";
 import "../../shared/button";
 import "../../shared/card";
@@ -158,6 +159,8 @@ export class CoverCard extends MushroomBaseElement implements LovelaceCard {
             stateValue += ` - ${this.position}%`;
         }
 
+        const available = isAvailable(entity);
+
         const rtl = computeRTL(this.hass);
 
         return html`
@@ -172,12 +175,8 @@ export class CoverCard extends MushroomBaseElement implements LovelaceCard {
                             hasDoubleClick: hasAction(this._config.double_tap_action),
                         })}
                     >
-                        <mushroom-shape-icon
-                            slot="icon"
-                            .disabled=${!isActive(entity)}
-                            .icon=${icon}
-                        ></mushroom-shape-icon>
-                        ${!isAvailable(entity)
+                        ${this.renderIcon(entity as CoverEntity, icon, available)}
+                        ${!available
                             ? html`
                                   <mushroom-badge-icon
                                       class="unavailable"
@@ -205,6 +204,34 @@ export class CoverCard extends MushroomBaseElement implements LovelaceCard {
         `;
     }
 
+    private renderIcon(entity: CoverEntity, icon: string, available: boolean): TemplateResult {
+        const iconStyle = {
+            "--icon-color": "rgb(var(--rgb-state-cover))",
+            "--shape-color": "rgba(var(--rgb-state-cover), 0.2)",
+        };
+
+        const currentState = this.getStyleState(entity);
+        if (currentState) {
+            iconStyle["--icon-color"] = `rgb(var(--rgb-state-cover-${currentState}))`;
+            iconStyle["--shape-color"] = `rgba(var(--rgb-state-cover-${currentState}), 0.2)`;
+        }
+
+        return html`
+            <mushroom-shape-icon
+                slot="icon"
+                .disabled=${!available}
+                .icon=${icon}
+                style=${styleMap(iconStyle)}
+            ></mushroom-shape-icon>
+        `;
+    }
+
+    private getStyleState(entity: CoverEntity): string | null {
+        if (entity.state === "open" || entity.state === "opening") return "open"
+        if (entity.state === "closed" || entity.state === "closing") return "closed"
+        return null;
+    }
+
     private renderNextControlButton(): TemplateResult | null {
         if (!this._nextControl || this._nextControl == this._activeControl) return null;
 
@@ -227,11 +254,19 @@ export class CoverCard extends MushroomBaseElement implements LovelaceCard {
                     />
                 `;
             case "position_control":
+                const currentState = this.getStyleState(entity as CoverEntity);
+                const style = {}
+                if (currentState) {
+                    style["--slider-color"] = `rgb(var(--rgb-state-cover-${currentState}))`;
+                    style["--slider-bg-color"] = `rgba(var(--rgb-state-cover-${currentState}), 0.2)`;
+                }
+
                 return html`
                     <mushroom-cover-position-control
                         .hass=${this.hass}
                         .entity=${entity}
                         @current-change=${this.onCurrentPositionChange}
+                        style=${styleMap(style)}
                     />
                 `;
             default:

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -95,4 +95,8 @@ export const themeColorCss = css`
     --rgb-state-lock-locked: var(--mush-rgb-state-lock-locked, var(--rgb-green));
     --rgb-state-lock-unlocked: var(--mush-rgb-state-lock-unlocked, var(--rgb-red));
     --rgb-state-lock-pending: var(--mush-rgb-state-lock-pending, var(--rgb-orange));
+
+    /* State cover colors */
+    --rgb-state-cover-open: var(--mush-rgb-state-cover-open, var(--rgb-state-cover));
+    --rgb-state-cover-closed: var(--mush-rgb-state-cover-closed, var(--rgb-disabled));
 `;