add name option to buttons row (#5083)

* add name option to buttons row

* explicit show_name

* Update src/panels/lovelace/components/hui-buttons-base.ts

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* Update src/panels/lovelace/components/hui-buttons-base.ts

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* lint

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Ian Richardson 2020-03-29 06:49:27 -05:00 committed by GitHub
parent 54b57e6222
commit ff873e2f71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 18 deletions

View File

@ -33,6 +33,8 @@ export interface EntitiesCardEntityConfig extends EntityConfig {
hold_action?: ActionConfig;
double_tap_action?: ActionConfig;
state_color?: boolean;
show_name?: boolean;
show_icon?: boolean;
}
export interface EntitiesCardConfig extends LovelaceCardConfig {

View File

@ -22,6 +22,7 @@ import { hasAction } from "../common/has-action";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { handleAction } from "../common/handle-action";
import { EntitiesCardEntityConfig } from "../cards/types";
import { computeStateName } from "../../../common/entity/compute_state_name";
@customElement("hui-buttons-base")
export class HuiButtonsBase extends LitElement {
@ -31,9 +32,12 @@ export class HuiButtonsBase extends LitElement {
set hass(hass: HomeAssistant) {
this._hass = hass;
const entitiesShowingIcons = this.configEntities?.filter(
(entity) => entity.show_icon !== false
);
this._badges.forEach((badge, index: number) => {
badge.hass = hass;
badge.stateObj = hass.states[this.configEntities![index].entity];
badge.stateObj = hass.states[entitiesShowingIcons![index].entity];
});
}
@ -46,22 +50,33 @@ export class HuiButtonsBase extends LitElement {
}
return html`
<div>
<state-badge
title=${computeTooltip(this._hass!, entityConf)}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(entityConf.hold_action),
hasDoubleClick: hasAction(entityConf.double_tap_action),
})}
.config=${entityConf}
.hass=${this._hass}
.stateObj=${stateObj}
.overrideIcon=${entityConf.icon}
.overrideImage=${entityConf.image}
stateColor
tabindex="0"
></state-badge>
<div
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(entityConf.hold_action),
hasDoubleClick: hasAction(entityConf.double_tap_action),
})}
.config=${entityConf}
tabindex="0"
>
${entityConf.show_icon !== false
? html`
<state-badge
title=${computeTooltip(this._hass!, entityConf)}
.hass=${this._hass}
.stateObj=${stateObj}
.overrideIcon=${entityConf.icon}
.overrideImage=${entityConf.image}
stateColor
></state-badge>
`
: ""}
<span>
${entityConf.show_name ||
(entityConf.name && entityConf.show_name !== false)
? entityConf.name || computeStateName(stateObj)
: ""}
</span>
<mwc-ripple unbounded></mwc-ripple>
</div>
`;
@ -88,8 +103,10 @@ export class HuiButtonsBase extends LitElement {
.missing {
color: #fce588;
}
state-badge {
div {
cursor: pointer;
align-items: center;
display: inline-flex;
}
`;
}