Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Button animation #771

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Button animation #771

wants to merge 4 commits into from

Conversation

HansDP
Copy link

@HansDP HansDP commented Oct 12, 2022 •
edited
Loading

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
Copy link
Owner

piitaya commented Oct 12, 2022 •
edited
Loading

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
Copy link
Author

HansDP commented Oct 12, 2022

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

@HansDP
Copy link
Author

HansDP commented Oct 12, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@HansDP @piitaya