mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
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:
parent
54b57e6222
commit
ff873e2f71
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user