Remove tile pointer/ripple/index when it has no action (#19137)

* Remove tile pointer/ripple/index when it has no action

* update

* Apply suggestions from code review

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
karwosts 2024-01-03 05:58:59 -08:00 committed by GitHub
parent 8368fb4408
commit 41bb677ebe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -287,21 +287,40 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
@eventOptions({ passive: true })
private handleRippleActivate(evt?: Event) {
if (!this.hasCardAction) return;
this._rippleHandlers.startPress(evt);
}
private handleRippleDeactivate() {
if (!this.hasCardAction) return;
this._rippleHandlers.endPress();
}
private handleRippleMouseEnter() {
if (!this.hasCardAction) return;
this._rippleHandlers.startHover();
}
private handleRippleMouseLeave() {
if (!this.hasCardAction) return;
this._rippleHandlers.endHover();
}
get hasCardAction() {
return (
!this._config?.tap_action ||
hasAction(this._config?.tap_action) ||
hasAction(this._config?.hold_action) ||
hasAction(this._config?.double_tap_action)
);
}
get hasIconAction() {
return (
!this._config?.icon_tap_action || hasAction(this._config?.icon_tap_action)
);
}
protected render() {
if (!this._config || !this.hass) {
return nothing;
@ -368,8 +387,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
hasHold: hasAction(this._config!.hold_action),
hasDoubleClick: hasAction(this._config!.double_tap_action),
})}
role="button"
tabindex="0"
role=${ifDefined(this.hasCardAction ? "button" : undefined)}
tabindex=${ifDefined(this.hasCardAction ? "0" : undefined)}
aria-labelledby="info"
@mousedown=${this.handleRippleActivate}
@mouseup=${this.handleRippleDeactivate}
@ -386,8 +405,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
<div class="content ${classMap(contentClasses)}">
<div
class="icon-container"
role="button"
tabindex="0"
role=${ifDefined(this.hasIconAction ? "button" : undefined)}
tabindex=${ifDefined(this.hasIconAction ? "0" : undefined)}
@action=${this._handleIconAction}
.actionHandler=${actionHandler()}
>