From 0fb35fd0d00adcaacf0f89aa54246a3bf6f55f47 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 12 Dec 2022 15:52:33 +0100 Subject: [PATCH] Transparent unavailable state in history (#14710) * Use transparent color for unavailable state for history * Remove inactive color * Only color active state for badge icon * Simplify condition * Update src/components/chart/timeline-chart/textbar-element.ts Co-authored-by: Bram Kragten Co-authored-by: Bram Kragten --- src/common/color/compute-color.ts | 1 - .../chart/timeline-chart/textbar-element.ts | 7 +++-- .../chart/timeline-chart/timeline-color.ts | 4 +-- src/components/entity/state-badge.ts | 30 +++++++++---------- src/panels/lovelace/cards/hui-button-card.ts | 10 ++++--- src/panels/lovelace/cards/hui-entity-card.ts | 10 ++++--- src/resources/ha-style.ts | 7 ++--- src/resources/styles.ts | 1 - 8 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/common/color/compute-color.ts b/src/common/color/compute-color.ts index 40b43c44d4..e7e3409a9d 100644 --- a/src/common/color/compute-color.ts +++ b/src/common/color/compute-color.ts @@ -4,7 +4,6 @@ export const THEME_COLORS = new Set([ "primary", "accent", "disabled", - "inactive", "red", "pink", "purple", diff --git a/src/components/chart/timeline-chart/textbar-element.ts b/src/components/chart/timeline-chart/textbar-element.ts index 93cc953ccd..1f11a8f433 100644 --- a/src/components/chart/timeline-chart/textbar-element.ts +++ b/src/components/chart/timeline-chart/textbar-element.ts @@ -37,8 +37,11 @@ export class TextBarElement extends BarElement { } const textColor = options.textColor || - (options.backgroundColor && - (luminosity(hex2rgb(options.backgroundColor)) > 0.5 ? "#000" : "#fff")); + (options?.backgroundColor === "transparent" + ? "transparent" + : luminosity(hex2rgb(options.backgroundColor)) > 0.5 + ? "#000" + : "#fff"); // ctx.font = "12px arial"; ctx.fillStyle = textColor; diff --git a/src/components/chart/timeline-chart/timeline-color.ts b/src/components/chart/timeline-chart/timeline-color.ts index a61ad01e08..ecbf9a78cc 100644 --- a/src/components/chart/timeline-chart/timeline-color.ts +++ b/src/components/chart/timeline-chart/timeline-color.ts @@ -51,9 +51,7 @@ function computeTimelineStateColor( stateObj?: HassEntity ): string | undefined { if (!stateObj || state === UNAVAILABLE) { - const rgb = cssToRgb("--rgb-state-unavailable-color", computedStyles); - if (!rgb) return undefined; - return rgb2hex(rgb); + return "transparent"; } const color = stateColor(stateObj, state); diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index 50458e1f88..fdf507b0d0 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -107,27 +107,25 @@ export class StateBadge extends LitElement { } hostStyle.backgroundImage = `url(${imageUrl})`; this._showIcon = false; - } else if (this._stateColor) { + } else if (this._stateColor && stateActive(stateObj)) { const color = stateColorCss(stateObj); if (color) { iconStyle.color = `rgb(${color})`; } - if (stateActive(stateObj)) { - if (stateObj.attributes.rgb_color) { - iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`; - } - if (stateObj.attributes.brightness) { - const brightness = stateObj.attributes.brightness; - if (typeof brightness !== "number") { - const errorMessage = `Type error: state-badge expected number, but type of ${ - stateObj.entity_id - }.attributes.brightness is ${typeof brightness} (${brightness})`; - // eslint-disable-next-line - console.warn(errorMessage); - } - // lowest brightness will be around 50% (that's pretty dark) - iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`; + if (stateObj.attributes.rgb_color) { + iconStyle.color = `rgb(${stateObj.attributes.rgb_color.join(",")})`; + } + if (stateObj.attributes.brightness) { + const brightness = stateObj.attributes.brightness; + if (typeof brightness !== "number") { + const errorMessage = `Type error: state-badge expected number, but type of ${ + stateObj.entity_id + }.attributes.brightness is ${typeof brightness} (${brightness})`; + // eslint-disable-next-line + console.warn(errorMessage); } + // lowest brightness will be around 50% (that's pretty dark) + iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`; } } } else if (this.overrideImage) { diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 480d86f542..4686c82f50 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -156,8 +156,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { ? this._config.name || (stateObj ? computeStateName(stateObj) : "") : ""; - const colored = stateObj && this.getStateColor(stateObj, this._config); - const active = stateObj && colored && stateActive(stateObj); + const active = stateObj && stateActive(stateObj); + const colored = active && this.getStateColor(stateObj, this._config); return html` @@ -193,12 +193,14 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { `; } - private _computeColor(stateObj: HassEntity | LightEntity): string { + private _computeColor( + stateObj: HassEntity | LightEntity + ): string | undefined { const iconColor = stateColorCss(stateObj); if (iconColor) { return `rgb(${iconColor})`; } - return ""; + return undefined; } protected shouldUpdate(changedProps: PropertyValues): boolean { diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index 5bcf388d54..07b2fbde32 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -107,7 +107,6 @@ documentContainer.innerHTML = ` --rgb-primary-color: 3, 169, 244; --rgb-accent-color: 255, 152, 0; --rgb-disabled-color: 189, 189, 189; - --rgb-inactive-color: 114, 114, 114; --rgb-primary-text-color: 33, 33, 33; --rgb-secondary-text-color: 114, 114, 114; --rgb-text-primary-color: 255, 255, 255; @@ -136,13 +135,13 @@ documentContainer.innerHTML = ` /* rgb state color */ --rgb-state-default-color: var(--rgb-dark-primary-color, 68, 115, 158); - --rgb-state-inactive-color: var(--rgb-inactive-color); + --rgb-state-inactive-color: var(--rgb-grey-color); --rgb-state-unavailable-color: var(--rgb-disabled-color); /* rgb state domain colors */ --rgb-state-alarm-armed-color: var(--rgb-green-color); --rgb-state-alarm-arming-color: var(--rgb-orange-color); - --rgb-state-alarm-disarmed-color: var(--rgb-inactive-color); + --rgb-state-alarm-disarmed-color: var(--rgb-grey-color); --rgb-state-alarm-pending-color: var(--rgb-orange-color); --rgb-state-alarm-triggered-color: var(--rgb-red-color); --rgb-state-alert-color: var(--rgb-red-color); @@ -170,7 +169,7 @@ documentContainer.innerHTML = ` --rgb-state-lock-unlocked-color: var(--rgb-red-color); --rgb-state-media-player-color: var(--rgb-light-blue-color); --rgb-state-person-home-color: var(--rgb-green-color); - --rgb-state-person-not-home-color: var(--rgb-inactive-color); + --rgb-state-person-not-home-color: var(--rgb-grey-color); --rgb-state-person-zone-color: var(--rgb-blue-color); --rgb-state-remote-color: var(--rgb-amber-color); --rgb-state-script-color: var(--rgb-amber-color); diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 4b49cf06aa..3f18eb7445 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -49,7 +49,6 @@ export const darkStyles = { "map-filter": "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)", "rgb-disabled-color": "70, 70, 70", - "rgb-inactive-color": "141, 141, 141", }; export const derivedStyles = {