jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

add name option to buttons row (#5083)

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

2
src/panels/lovelace/cards/types.ts
View File

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

53
src/panels/lovelace/components/hui-buttons-base.ts
View File

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