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

Make the full generic entity row clickable (#24968)

Browse Source 
* 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
1 changed files with 98 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/panels/lovelace/components/hui-generic-entity-row.ts
View File

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