jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,9 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
export interface Config extends LovelaceCardConfig { export interface Config extends LovelaceCardConfig {
entity: string; entity: string;
name?: string; name?: string;
snow_name?: boolean;
icon?: string; icon?: string;
show_icon?: boolean;
theme?: string; theme?: string;
tap_action?: ActionConfig; tap_action?: ActionConfig;
hold_action?: ActionConfig; hold_action?: ActionConfig;
@ -48,6 +50,8 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
return { return {
tap_action: { action: "toggle" }, tap_action: { action: "toggle" },
hold_action: { action: "more-info" }, hold_action: { action: "more-info" },
show_icon: true,
show_name: true,
}; };
} }
@ -68,6 +72,8 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
theme: "default", theme: "default",
hold_action: { action: "more-info" }, hold_action: { action: "more-info" },
...config, ...config,
show_icon: true,
show_name: true,
}; };
if (DOMAINS_TOGGLE.has(computeDomain(config.entity))) { if (DOMAINS_TOGGLE.has(computeDomain(config.entity))) {
@ -126,18 +132,26 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
@ha-hold="${this._handleHold}" @ha-hold="${this._handleHold}"
.longPress="${longPress()}" .longPress="${longPress()}"
> >
<ha-icon ${this._config.show_icon
data-domain="${computeStateDomain(stateObj)}" ? html`
data-state="${stateObj.state}" <ha-icon
.icon="${this._config.icon || stateIcon(stateObj)}" data-domain="${computeStateDomain(stateObj)}"
style="${styleMap({ data-state="${stateObj.state}"
filter: this._computeBrightness(stateObj), .icon="${this._config.icon || stateIcon(stateObj)}"
color: this._computeColor(stateObj), style="${styleMap({
})}" filter: this._computeBrightness(stateObj),
></ha-icon> color: this._computeColor(stateObj),
<span> })}"
${this._config.name || computeStateName(stateObj)} ></ha-icon>
</span> `
: ""}
${this._config.show_name
? html`
<span>
${this._config.name || computeStateName(stateObj)}
</span>
`
: ""}
<mwc-ripple></mwc-ripple> <mwc-ripple></mwc-ripple>
</ha-card> </ha-card>
`; `;

31
src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts
View File

@ -28,7 +28,9 @@ const cardConfigStruct = struct({
type: "string", type: "string",
entity: "string?", entity: "string?",
name: "string?", name: "string?",
show_name: "boolean?",
icon: "string?", icon: "string?",
show_icon: "boolean?",
tap_action: struct.optional(actionConfigStruct), tap_action: struct.optional(actionConfigStruct),
hold_action: struct.optional(actionConfigStruct), hold_action: struct.optional(actionConfigStruct),
theme: "string?", theme: "string?",
@ -54,10 +56,18 @@ export class HuiEntityButtonCardEditor extends LitElement
return this._config!.name || ""; return this._config!.name || "";
} }
get _show_name(): boolean {
return this._config!.show_name || true;
}
get _icon(): string { get _icon(): string {
return this._config!.icon || ""; return this._config!.icon || "";
} }
get _show_icon(): boolean {
return this._config!.show_icon || true;
}
get _tap_action(): ActionConfig { get _tap_action(): ActionConfig {
return this._config!.tap_action || { action: "more-info" }; return this._config!.tap_action || { action: "more-info" };
} }
@ -101,6 +111,20 @@ export class HuiEntityButtonCardEditor extends LitElement
@value-changed="${this._valueChanged}" @value-changed="${this._valueChanged}"
></paper-input> ></paper-input>
</div> </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 <hui-theme-select-editor
.hass="${this.hass}" .hass="${this.hass}"
.value="${this._theme}" .value="${this._theme}"
@ -147,7 +171,12 @@ export class HuiEntityButtonCardEditor extends LitElement
} else { } else {
this._config = { this._config = {
...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,
}; };
} }
} }