mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
add state_color option to glance, button and state-icon (#4854)
* add state_color option to glance, button and state-icon * address comments * address comments
This commit is contained in:
parent
49b0c8d549
commit
fb7fbf2dac
@ -49,6 +49,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
|
||||
hold_action: { action: "more-info" },
|
||||
show_icon: true,
|
||||
show_name: true,
|
||||
state_color: true,
|
||||
};
|
||||
}
|
||||
|
||||
@ -148,7 +149,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
|
||||
? html`
|
||||
<ha-icon
|
||||
data-domain=${ifDefined(
|
||||
stateObj ? computeStateDomain(stateObj) : undefined
|
||||
this._config.state_color && stateObj
|
||||
? computeStateDomain(stateObj)
|
||||
: undefined
|
||||
)}
|
||||
data-state=${ifDefined(
|
||||
stateObj ? computeActiveState(stateObj) : undefined
|
||||
@ -226,7 +229,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
private _computeBrightness(stateObj: HassEntity | LightEntity): string {
|
||||
if (!stateObj.attributes.brightness) {
|
||||
if (!stateObj.attributes.brightness || !this._config?.state_color) {
|
||||
return "";
|
||||
}
|
||||
const brightness = stateObj.attributes.brightness;
|
||||
@ -234,7 +237,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
private _computeColor(stateObj: HassEntity | LightEntity): string {
|
||||
if (!stateObj.attributes.hs_color) {
|
||||
if (!stateObj.attributes.hs_color || !this._config?.state_color) {
|
||||
return "";
|
||||
}
|
||||
const [hue, sat] = stateObj.attributes.hs_color;
|
||||
|
@ -59,7 +59,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
public setConfig(config: GlanceCardConfig): void {
|
||||
this._config = { theme: "default", ...config };
|
||||
this._config = { theme: "default", state_color: true, ...config };
|
||||
const entities = processConfigEntities<GlanceConfigEntity>(config.entities);
|
||||
|
||||
for (const entity of entities) {
|
||||
@ -237,7 +237,9 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
||||
.stateObj=${stateObj}
|
||||
.overrideIcon=${entityConf.icon}
|
||||
.overrideImage=${entityConf.image}
|
||||
stateColor
|
||||
.stateColor=${(entityConf.state_color === false ||
|
||||
entityConf.state_color) ??
|
||||
this._config!.state_color}
|
||||
></state-badge>
|
||||
`
|
||||
: ""}
|
||||
|
@ -57,6 +57,7 @@ export interface ButtonCardConfig extends LovelaceCardConfig {
|
||||
tap_action?: ActionConfig;
|
||||
hold_action?: ActionConfig;
|
||||
double_tap_action?: ActionConfig;
|
||||
state_color?: boolean;
|
||||
}
|
||||
|
||||
export interface EntityFilterCardConfig extends LovelaceCardConfig {
|
||||
@ -102,6 +103,7 @@ export interface GlanceConfigEntity extends ConfigEntity {
|
||||
show_last_changed?: boolean;
|
||||
image?: string;
|
||||
show_state?: boolean;
|
||||
state_color?: boolean;
|
||||
}
|
||||
|
||||
export interface GlanceCardConfig extends LovelaceCardConfig {
|
||||
@ -112,6 +114,7 @@ export interface GlanceCardConfig extends LovelaceCardConfig {
|
||||
theme?: string;
|
||||
entities: ConfigEntity[];
|
||||
columns?: number;
|
||||
state_color?: boolean;
|
||||
}
|
||||
|
||||
export interface IframeCardConfig extends LovelaceCardConfig {
|
||||
|
@ -32,7 +32,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
|
||||
throw Error("Invalid Configuration: 'entity' required");
|
||||
}
|
||||
|
||||
this._config = config;
|
||||
this._config = { state_color: true, ...config };
|
||||
}
|
||||
|
||||
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
||||
@ -71,7 +71,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
|
||||
hasAction(this._config.tap_action) ? "0" : undefined
|
||||
)}
|
||||
.overrideIcon=${this._config.icon}
|
||||
stateColor
|
||||
.stateColor=${this._config.state_color}
|
||||
></state-badge>
|
||||
`;
|
||||
}
|
||||
|
@ -59,6 +59,7 @@ export interface StateIconElementConfig extends LovelaceElementConfig {
|
||||
hold_action?: ActionConfig;
|
||||
double_tap_action?: ActionConfig;
|
||||
icon?: string;
|
||||
state_color?: boolean;
|
||||
}
|
||||
|
||||
export interface StateLabelElementConfig extends LovelaceElementConfig {
|
||||
|
Loading…
x
Reference in New Issue
Block a user