Make the full generic entity row clickable (#24968)

* Make the full generic entity row clickable

* Apply suggestions from code review

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Paul Bottein 2025-04-08 15:17:05 +02:00 committed by GitHub
parent 4a1cf250c4
commit 9c3f77532c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -61,15 +61,8 @@ export class HuiGenericEntityRow extends LitElement {
const name = this.config.name ?? computeStateName(stateObj);
return html`
<state-badge
class=${classMap({
pointer,
})}
.hass=${this.hass}
.stateObj=${stateObj}
.overrideIcon=${this.config.icon}
.overrideImage=${this.config.image}
.stateColor=${this.config.state_color}
<div
class="row ${classMap({ pointer })}"
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this.config!.hold_action),
@ -80,18 +73,17 @@ export class HuiGenericEntityRow extends LitElement {
? "0"
: undefined
)}
>
<state-badge
.hass=${this.hass}
.stateObj=${stateObj}
.overrideIcon=${this.config.icon}
.overrideImage=${this.config.image}
.stateColor=${this.config.state_color}
></state-badge>
${!this.hideName
? html`<div
class="info ${classMap({
pointer,
"text-content": !hasSecondary,
})}"
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this.config!.hold_action),
hasDoubleClick: hasAction(this.config!.double_tap_action),
})}
class="info ${classMap({ "text-content": !hasSecondary })}"
.title=${name}
>
${this.config.name || computeStateName(stateObj)}
@ -138,24 +130,25 @@ export class HuiGenericEntityRow extends LitElement {
)}: ${stateObj.attributes.current_position}`
: this.config.secondary_info ===
"tilt-position" &&
stateObj.attributes.current_tilt_position !==
undefined
stateObj.attributes
.current_tilt_position !== undefined
? `${this.hass.localize(
"ui.card.cover.tilt_position"
)}: ${
stateObj.attributes.current_tilt_position
}`
: this.config.secondary_info === "brightness" &&
: this.config.secondary_info ===
"brightness" &&
stateObj.attributes.brightness
? html`${Math.round(
(stateObj.attributes.brightness / 255) *
100
)}
%`
: "")}
: nothing)}
</div>
`
: ""}
: nothing}
</div>`
: nothing}
${(this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain))
@ -172,6 +165,7 @@ export class HuiGenericEntityRow extends LitElement {
<div class="state"><slot></slot></div>
</div>`
: html`<slot></slot>`}
</div>
`;
}
@ -194,6 +188,17 @@ export class HuiGenericEntityRow extends LitElement {
align-items: center;
flex-direction: row;
}
.row {
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
outline: none;
transition: background-color 180ms ease-in-out;
}
.row:focus-visible {
background-color: var(--primary-background-color);
}
.info {
padding-left: 16px;
padding-right: 8px;