jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 21:06:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow coloring inactive states in dashboard cards (#15177)

Browse Source
This commit is contained in:
Paul Bottein 2023-01-24 13:45:47 +01:00 committed by GitHub
parent 5e9ae36577
commit 98e799eda0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/entity/state-badge.ts
View File

@ -13,7 +13,6 @@ import { ifDefined } from "lit/directives/if-defined";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { computeDomain } from "../../common/entity/compute_domain"; import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color"; import { stateColorCss } from "../../common/entity/state_color";
import { iconColorCSS } from "../../common/style/icon_color_css"; import { iconColorCSS } from "../../common/style/icon_color_css";
import { cameraUrlWithWidthHeight } from "../../data/camera"; import { cameraUrlWithWidthHeight } from "../../data/camera";
@ -112,7 +111,7 @@ export class StateBadge extends LitElement {
} else if (this.color) { } else if (this.color) {
// Externally provided overriding color wins over state color // Externally provided overriding color wins over state color
iconStyle.color = this.color; iconStyle.color = this.color;
} else if (this._stateColor && stateActive(stateObj)) { } else if (this._stateColor) {
const color = stateColorCss(stateObj); const color = stateColorCss(stateObj);
if (color) { if (color) {
iconStyle.color = color; iconStyle.color = color;
@ -173,6 +172,7 @@ export class StateBadge extends LitElement {
line-height: 40px; line-height: 40px;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
--state-inactive-color: initial;
} }
:host(:focus) { :host(:focus) {
outline: none; outline: none;

5
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -25,7 +25,6 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { stateActive } from "../../../common/entity/state_active";
import { stateColorCss } from "../../../common/entity/state_color"; import { stateColorCss } from "../../../common/entity/state_color";
import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import { isValidEntityId } from "../../../common/entity/valid_entity_id";
import { iconColorCSS } from "../../../common/style/icon_color_css"; import { iconColorCSS } from "../../../common/style/icon_color_css";
@ -157,8 +156,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
? this._config.name || (stateObj ? computeStateName(stateObj) : "") ? this._config.name || (stateObj ? computeStateName(stateObj) : "")
: ""; : "";
const active = stateObj && stateActive(stateObj); const colored = stateObj && this.getStateColor(stateObj, this._config);
const colored = active && this.getStateColor(stateObj, this._config);
return html` return html`
<ha-card <ha-card
@ -291,6 +289,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
height: auto; height: auto;
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
--mdc-icon-size: 100%; --mdc-icon-size: 100%;
--state-inactive-color: var(--paper-item-icon-color, #44739e);
} }
ha-state-icon + span { ha-state-icon + span {

11
src/panels/lovelace/cards/hui-entity-card.ts
View File

@ -15,7 +15,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { stateActive } from "../../../common/entity/state_active";
import { stateColorCss } from "../../../common/entity/state_color"; import { stateColorCss } from "../../../common/entity/state_color";
import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import { isValidEntityId } from "../../../common/entity/valid_entity_id";
import { import {
@ -134,8 +133,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
const name = this._config.name || computeStateName(stateObj); const name = this._config.name || computeStateName(stateObj);
const active = stateObj && stateActive(stateObj); const colored = stateObj && this.getStateColor(stateObj, this._config);
const colored = active && this.getStateColor(stateObj, this._config);
return html` return html`
<ha-card @click=${this._handleClick} tabindex="0"> <ha-card @click=${this._handleClick} tabindex="0">
@ -202,7 +200,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
} }
return undefined; return undefined;
} }
if (stateObj.attributes.rgb_color && stateActive(stateObj)) { if (stateObj.attributes.rgb_color) {
return `rgb(${stateObj.attributes.rgb_color.join(",")})`; return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
} }
const iconColor = stateColorCss(stateObj); const iconColor = stateColorCss(stateObj);
@ -213,7 +211,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
} }
private _computeBrightness(stateObj: HassEntity | LightEntity): string { private _computeBrightness(stateObj: HassEntity | LightEntity): string {
if (stateObj.attributes.brightness && stateActive(stateObj)) { if (stateObj.attributes.brightness) {
const brightness = stateObj.attributes.brightness; const brightness = stateObj.attributes.brightness;
return `brightness(${(brightness + 245) / 5}%)`; return `brightness(${(brightness + 245) / 5}%)`;
} }
@ -284,7 +282,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
} }
.icon { .icon {
color: var(--state-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
--state-inactive-color: var(--paper-item-icon-color, #44739e);
line-height: 40px; line-height: 40px;
} }