jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-13 12:26:35 +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 { computeDomain } from "../../common/entity/compute_domain";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color";
import { iconColorCSS } from "../../common/style/icon_color_css";
import { cameraUrlWithWidthHeight } from "../../data/camera";
@ -112,7 +111,7 @@ export class StateBadge extends LitElement {
} else if (this.color) {
// Externally provided overriding color wins over state color
iconStyle.color = this.color;
} else if (this._stateColor && stateActive(stateObj)) {
} else if (this._stateColor) {
const color = stateColorCss(stateObj);
if (color) {
iconStyle.color = color;
@ -173,6 +172,7 @@ export class StateBadge extends LitElement {
line-height: 40px;
vertical-align: middle;
box-sizing: border-box;
--state-inactive-color: initial;
}
:host(:focus) {
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 { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { stateActive } from "../../../common/entity/state_active";
import { stateColorCss } from "../../../common/entity/state_color";
import { isValidEntityId } from "../../../common/entity/valid_entity_id";
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) : "")
: "";
const active = stateObj && stateActive(stateObj);
const colored = active && this.getStateColor(stateObj, this._config);
const colored = stateObj && this.getStateColor(stateObj, this._config);
return html`
<ha-card
@ -291,6 +289,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
height: auto;
color: var(--paper-item-icon-color, #44739e);
--mdc-icon-size: 100%;
--state-inactive-color: var(--paper-item-icon-color, #44739e);
}
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 { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { stateActive } from "../../../common/entity/state_active";
import { stateColorCss } from "../../../common/entity/state_color";
import { isValidEntityId } from "../../../common/entity/valid_entity_id";
import {
@ -134,8 +133,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
const name = this._config.name || computeStateName(stateObj);
const active = stateObj && stateActive(stateObj);
const colored = active && this.getStateColor(stateObj, this._config);
const colored = stateObj && this.getStateColor(stateObj, this._config);
return html`
<ha-card @click=${this._handleClick} tabindex="0">
@ -202,7 +200,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
}
return undefined;
}
if (stateObj.attributes.rgb_color && stateActive(stateObj)) {
if (stateObj.attributes.rgb_color) {
return `rgb(${stateObj.attributes.rgb_color.join(",")})`;
}
const iconColor = stateColorCss(stateObj);
@ -213,7 +211,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
}
private _computeBrightness(stateObj: HassEntity | LightEntity): string {
if (stateObj.attributes.brightness && stateActive(stateObj)) {
if (stateObj.attributes.brightness) {
const brightness = stateObj.attributes.brightness;
return `brightness(${(brightness + 245) / 5}%)`;
}
@ -284,7 +282,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
}
.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;
}