From 7483833dcdb8dcb284185139de7dfd33a2cb094e Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 29 Aug 2023 15:11:30 +0200 Subject: [PATCH] Use active color for position cover tile feature even if it's closed (#17685) --- .../cover/ha-more-info-cover-position.ts | 6 +- .../cover/ha-more-info-cover-tilt-position.ts | 9 ++- src/panels/lovelace/cards/hui-tile-card.ts | 1 + .../hui-cover-position-tile-feature.ts | 64 ++++++++++++------- .../hui-cover-tilt-position-tile-feature.ts | 21 +++++- src/panels/lovelace/types.ts | 1 + 6 files changed, 67 insertions(+), 35 deletions(-) diff --git a/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts b/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts index bd3a365e8e..702a74c9e3 100644 --- a/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts +++ b/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts @@ -35,7 +35,9 @@ export class HaMoreInfoCoverPosition extends LitElement { } protected render(): TemplateResult { - const color = stateColorCss(this.stateObj); + const forcedState = this.stateObj.state === "closed" ? "open" : undefined; + + const color = stateColorCss(this.stateObj, forcedState); return html`
@@ -106,8 +107,6 @@ export class HaMoreInfoCoverTiltPosition extends LitElement { height: 45vh; max-height: 320px; min-height: 200px; - /* Force inactive state to be colored for the slider */ - --state-cover-inactive-color: var(--state-cover-active-color); --control-slider-thickness: 100px; --control-slider-border-radius: 24px; --control-slider-color: var(--primary-color); diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts index 5436d55f4b..c21b8bf172 100644 --- a/src/panels/lovelace/cards/hui-tile-card.ts +++ b/src/panels/lovelace/cards/hui-tile-card.ts @@ -424,6 +424,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard { if (this.hass) { element.hass = this.hass; (element as LovelaceTileFeature).stateObj = stateObj; + (element as LovelaceTileFeature).color = this._config!.color; } return html`${element}`; diff --git a/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts b/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts index 0a478866e0..5f6bd2b6a9 100644 --- a/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts +++ b/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts @@ -1,15 +1,18 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { styleMap } from "lit/directives/style-map"; +import { computeCssColor } from "../../../common/color/compute-color"; +import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display"; import { computeDomain } from "../../../common/entity/compute_domain"; +import { stateActive } from "../../../common/entity/state_active"; +import { stateColorCss } from "../../../common/entity/state_color"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { CoverEntityFeature } from "../../../data/cover"; +import { UNAVAILABLE } from "../../../data/entity"; import { HomeAssistant } from "../../../types"; import { LovelaceTileFeature } from "../types"; import { CoverPositionTileFeatureConfig } from "./types"; -import { stateActive } from "../../../common/entity/state_active"; -import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display"; -import { UNAVAILABLE } from "../../../data/entity"; export const supportsCoverPositionTileFeature = (stateObj: HassEntity) => { const domain = computeDomain(stateObj.entity_id); @@ -28,6 +31,8 @@ class HuiCoverPositionTileFeature @property({ attribute: false }) public stateObj?: HassEntity; + @property({ attribute: false }) public color?: string; + @state() private _config?: CoverPositionTileFeatureConfig; static getStubConfig(): CoverPositionTileFeatureConfig { @@ -59,24 +64,36 @@ class HuiCoverPositionTileFeature const value = Math.max(Math.round(percentage), 0); - return html`
- -
`; + const forcedState = this.stateObj.state === "closed" ? "open" : undefined; + + const color = this.color + ? computeCssColor(this.color) + : stateColorCss(this.stateObj, forcedState); + + const style = { + "--color": color, + }; + + return html` +
+ +
+ `; } private _valueChanged(ev: CustomEvent) { @@ -92,9 +109,8 @@ class HuiCoverPositionTileFeature static get styles() { return css` ha-control-slider { - /* Force inactive state to be colored for the slider */ - --control-slider-color: var(--tile-color); - --control-slider-background: var(--tile-color); + --control-slider-color: var(--color); + --control-slider-background: var(--color); --control-slider-background-opacity: 0.2; --control-slider-thickness: 40px; --control-slider-border-radius: 10px; diff --git a/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts b/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts index be174788a6..638fdbec74 100644 --- a/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts +++ b/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts @@ -1,8 +1,11 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { styleMap } from "lit/directives/style-map"; +import { computeCssColor } from "../../../common/color/compute-color"; import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display"; import { computeDomain } from "../../../common/entity/compute_domain"; +import { stateColorCss } from "../../../common/entity/state_color"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { CoverEntity, CoverEntityFeature } from "../../../data/cover"; import { UNAVAILABLE } from "../../../data/entity"; @@ -30,6 +33,8 @@ class HuiCoverTiltPositionTileFeature @property({ attribute: false }) public stateObj?: CoverEntity; + @property({ attribute: false }) public color?: string; + @state() private _config?: CoverTiltPositionTileFeatureConfig; static getStubConfig(): CoverTiltPositionTileFeatureConfig { @@ -59,8 +64,18 @@ class HuiCoverTiltPositionTileFeature const value = Math.max(Math.round(percentage), 0); + const forcedState = this.stateObj.state === "closed" ? "open" : undefined; + + const color = this.color + ? computeCssColor(this.color) + : stateColorCss(this.stateObj, forcedState); + + const style = { + "--color": color, + }; + return html` -
+