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