Button animation

[HansDP]

Description

When press-holding a mushroom card, the UI shows a semi-transparent gray circle only once the holdTime has passed. The animation to show this circle also takes some milliseconds.

This behavior makes it very hard and slow for a user to understand when the press-hold is accepted by the UI.

This code changes the behavior from mwc-ripple to a custom animation that scales the button when being pressed.

Related Issue

#772

Motivation and Context

This new behavior makes it more understandable for an end-user when the press-hold is accepted. Next to that, the UI feels more up-to-date.

The new behavior scales the button to a smaller version of the button (90%) and makes the holdTime 400ms instead of 500ms (+the time to animate the ripple element)

How Has This Been Tested

The interaction has been tested manually by me using the development HA instance .

Types of changes

• 🐛 Bug fix (non-breaking change which fixes an issue)
• 🚀 New feature (non-breaking change which adds functionality)
• 🌎 Translation (addition or update a translation)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have tested the change locally.

[piitaya]

Hi! Can you share a video/demo?
This file is a copy-paste of Home Assistant Frontend and I prefer to keep it for easy maintenance. If you have a good idea for the effect, it would be nice to add it by default in Home Assistant so it can be available for all cards, not just Mushroom ones.

[HansDP]

Screen.Recording.2022-10-12.at.15.17.39.mov

[HansDP]

This file is a copy-paste of Home Assistant Frontend and I prefer to keep it for easy maintenance.

That explains why the code (in the master branch https://github.com/piitaya/lovelace-mushroom/blob/main/src/ha/panels/lovelace/common/directives/action-handler-directive.ts) is not used/executed.

The code in the master branch defines the class

class ActionHandler extends HTMLElement implements ActionHandler

But that class is not linked to the <action-handler /> tag (as used in document.createElement("action-handler")).

Instead, it is still using the <action-handler /> implemented in HA (and HA probably registers the custom tag)

That is why I had to define a new @customElement("mush-action-handler") (and use document.createElement("mush-action-handler") instead of document.createElement("action-handler")) to implement my own behavior