mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
✨ entity-button show/hide icon/name (#2936)
This commit is contained in:
parent
20ee3452dc
commit
6bf9ea5699
@ -31,7 +31,9 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
|
||||
export interface Config extends LovelaceCardConfig {
|
||||
entity: string;
|
||||
name?: string;
|
||||
snow_name?: boolean;
|
||||
icon?: string;
|
||||
show_icon?: boolean;
|
||||
theme?: string;
|
||||
tap_action?: ActionConfig;
|
||||
hold_action?: ActionConfig;
|
||||
@ -48,6 +50,8 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
|
||||
return {
|
||||
tap_action: { action: "toggle" },
|
||||
hold_action: { action: "more-info" },
|
||||
show_icon: true,
|
||||
show_name: true,
|
||||
};
|
||||
}
|
||||
|
||||
@ -68,6 +72,8 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
|
||||
theme: "default",
|
||||
hold_action: { action: "more-info" },
|
||||
...config,
|
||||
show_icon: true,
|
||||
show_name: true,
|
||||
};
|
||||
|
||||
if (DOMAINS_TOGGLE.has(computeDomain(config.entity))) {
|
||||
@ -126,6 +132,8 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
|
||||
@ha-hold="${this._handleHold}"
|
||||
.longPress="${longPress()}"
|
||||
>
|
||||
${this._config.show_icon
|
||||
? html`
|
||||
<ha-icon
|
||||
data-domain="${computeStateDomain(stateObj)}"
|
||||
data-state="${stateObj.state}"
|
||||
@ -135,9 +143,15 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
|
||||
color: this._computeColor(stateObj),
|
||||
})}"
|
||||
></ha-icon>
|
||||
`
|
||||
: ""}
|
||||
${this._config.show_name
|
||||
? html`
|
||||
<span>
|
||||
${this._config.name || computeStateName(stateObj)}
|
||||
</span>
|
||||
`
|
||||
: ""}
|
||||
<mwc-ripple></mwc-ripple>
|
||||
</ha-card>
|
||||
`;
|
||||
|
@ -28,7 +28,9 @@ const cardConfigStruct = struct({
|
||||
type: "string",
|
||||
entity: "string?",
|
||||
name: "string?",
|
||||
show_name: "boolean?",
|
||||
icon: "string?",
|
||||
show_icon: "boolean?",
|
||||
tap_action: struct.optional(actionConfigStruct),
|
||||
hold_action: struct.optional(actionConfigStruct),
|
||||
theme: "string?",
|
||||
@ -54,10 +56,18 @@ export class HuiEntityButtonCardEditor extends LitElement
|
||||
return this._config!.name || "";
|
||||
}
|
||||
|
||||
get _show_name(): boolean {
|
||||
return this._config!.show_name || true;
|
||||
}
|
||||
|
||||
get _icon(): string {
|
||||
return this._config!.icon || "";
|
||||
}
|
||||
|
||||
get _show_icon(): boolean {
|
||||
return this._config!.show_icon || true;
|
||||
}
|
||||
|
||||
get _tap_action(): ActionConfig {
|
||||
return this._config!.tap_action || { action: "more-info" };
|
||||
}
|
||||
@ -101,6 +111,20 @@ export class HuiEntityButtonCardEditor extends LitElement
|
||||
@value-changed="${this._valueChanged}"
|
||||
></paper-input>
|
||||
</div>
|
||||
<div class="side-by-side">
|
||||
<paper-toggle-button
|
||||
?checked="${this._config!.show_name !== false}"
|
||||
.configValue="${"show_name"}"
|
||||
@change="${this._valueChanged}"
|
||||
>Show Name?</paper-toggle-button
|
||||
>
|
||||
<paper-toggle-button
|
||||
?checked="${this._config!.show_icon !== false}"
|
||||
.configValue="${"show_icon"}"
|
||||
@change="${this._valueChanged}"
|
||||
>Show Icon?</paper-toggle-button
|
||||
>
|
||||
</div>
|
||||
<hui-theme-select-editor
|
||||
.hass="${this.hass}"
|
||||
.value="${this._theme}"
|
||||
@ -147,7 +171,12 @@ export class HuiEntityButtonCardEditor extends LitElement
|
||||
} else {
|
||||
this._config = {
|
||||
...this._config,
|
||||
[target.configValue!]: target.value ? target.value : target.config,
|
||||
[target.configValue!]:
|
||||
target.checked !== undefined
|
||||
? target.checked
|
||||
: target.value
|
||||
? target.value
|
||||
: target.config,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user