mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 00:06:35 +00:00
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:
parent
4a1cf250c4
commit
9c3f77532c
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user