[Lock, login & logout screen] Add visual feedback to action buttons when pressed
ClosedPublic

Authored by filipf on May 7 2019, 8:35 AM.

Details

Summary

The action buttons were missing a visual indication of when they were being pressed so this patch adds it by drawing another an animated rectangle when the button is pressed.

Test Plan

Diff Detail

Repository
R120 Plasma Workspace
Branch
add-pressed-state-to-action-buttons (branched from master)
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 11649
Build 11667: arc lint + arc unit
filipf created this revision.May 7 2019, 8:35 AM
Restricted Application added a project: Plasma. · View Herald TranscriptMay 7 2019, 8:35 AM
Restricted Application added a subscriber: plasma-devel. · View Herald Transcript
filipf requested review of this revision.May 7 2019, 8:35 AM
filipf retitled this revision from [Lock, login & logout screen] Add pressed visual feedback to action buttons to [Lock, login & logout screen] Add visual feedback to action buttons when pressed.May 7 2019, 8:36 AM
filipf edited the summary of this revision. (Show Details)
filipf edited the test plan for this revision. (Show Details)
filipf added reviewers: VDG, Plasma, ngraham.
davidedmundson accepted this revision.May 7 2019, 8:37 AM
This revision is now accepted and ready to land.May 7 2019, 8:37 AM
ngraham accepted this revision.May 7 2019, 1:59 PM

Lovely! These kinds of very subtle animations are super classy IMO.

broulik added a subscriber: broulik.May 7 2019, 2:50 PM

Looks lovely!

lookandfeel/contents/components/ActionButton.qml
69 ↗(On Diff #57699)

This item isn't referenced, so it doesn't need to have an id

71 ↗(On Diff #57699)

Are you sure you can assign undefined to this?

(Good catch using containsPress instead of pressed! to match proper button behavior! :)

76 ↗(On Diff #57699)

Can't you just scale the item instead of animating its width and height since the item is always "square" anyway

filipf updated this revision to Diff 57735.May 7 2019, 7:25 PM
  • remove ID
  • height = width
  • use and animate scale instead of height & width
filipf marked 3 inline comments as done.May 7 2019, 7:28 PM

I'm going to look into the different easing curves a bit more because I sometimes see the semi-scaled circle if clicking too fast.

lookandfeel/contents/components/ActionButton.qml
76 ↗(On Diff #57699)

Using scale now instead of messing with height and width, thanks for the tip :)

filipf marked an inline comment as done.May 8 2019, 8:03 PM

Here's what I'm trying to avoid:

When pressing fast and in the lock screen we can see the circle is still in the process of being scaled to 1. I have some easing types shortlisted which behave better than InOutQuad, but have to do round 2 of testing.

filipf updated this revision to Diff 57909.May 11 2019, 4:14 PM
  • change easing type from InOutQuad to InOutQuart to improve behavior when clicked fast
  • shorten the animation for the same reason
filipf edited the test plan for this revision. (Show Details)May 11 2019, 4:15 PM
This revision was automatically updated to reflect the committed changes.