entity-button show/hide icon/name (#2936)

This commit is contained in:
Ian Richardson 2019-03-22 13:55:52 -05:00 committed by Paulus Schoutsen
parent 20ee3452dc
commit 6bf9ea5699
2 changed files with 56 additions and 13 deletions

View File

@ -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>
`;

View File

@ -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,
};
}
}