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

[Nathaniel Graham]

ngraham accepted this revision.
ngraham added a comment.


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

REPOSITORY
  R120 Plasma Workspace

BRANCH
  add-pressed-state-to-action-buttons (branched from master)

REVISION DETAIL
  https://phabricator.kde.org/D21062

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, abetts, sebas, apol, mart

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

[Andres Betts]

abetts added a comment.


  +1

REPOSITORY
  R120 Plasma Workspace

BRANCH
  add-pressed-state-to-action-buttons (branched from master)

REVISION DETAIL
  https://phabricator.kde.org/D21062

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: abetts, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, lesliezhai, 
ali-mohamed, jensreuterberg, sebas, apol, mart

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

[Kai Uwe Broulik]

broulik added a comment.


  Looks lovely!

INLINE COMMENTS

> ActionButton.qml:69
> +Rectangle {
> +id: highlightCircle
> +anchors.centerIn: iconCircle

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

> ActionButton.qml:71
> +anchors.centerIn: iconCircle
> +width: mouseArea.containsPress ? iconCircle.width : undefined
> +height: mouseArea.containsPress ? iconCircle.height : undefined

Are you sure you can assign `undefined` to this?

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

> ActionButton.qml:76
> +opacity: 0.15
> +Behavior on width {
> +PropertyAnimation {

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

REPOSITORY
  R120 Plasma Workspace

BRANCH
  add-pressed-state-to-action-buttons (branched from master)

REVISION DETAIL
  https://phabricator.kde.org/D21062

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: broulik, abetts, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, 
lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart

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

[Filip Fila]

filipf updated this revision to Diff 57735.
filipf added a comment.


  - remove ID
  - height = width
  - use and animate scale instead of height & width

REPOSITORY
  R120 Plasma Workspace

CHANGES SINCE LAST UPDATE
  https://phabricator.kde.org/D21062?vs=57699&id=57735

BRANCH
  add-pressed-state-to-action-buttons (branched from master)

REVISION DETAIL
  https://phabricator.kde.org/D21062

AFFECTED FILES
  lookandfeel/contents/components/ActionButton.qml

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: broulik, abetts, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, 
lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart

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

[Filip Fila]

filipf marked 3 inline comments as done.
filipf added a comment.


  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.

INLINE COMMENTS

> broulik wrote in ActionButton.qml:76
> Can't you just `scale` the item instead of animating its width and height 
> since the item is always "square" anyway

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

REPOSITORY
  R120 Plasma Workspace

BRANCH
  add-pressed-state-to-action-buttons (branched from master)

REVISION DETAIL
  https://phabricator.kde.org/D21062

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: broulik, abetts, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, 
lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart

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

[Filip Fila]

filipf marked an inline comment as done.
filipf added a comment.


  Here's what I'm trying to avoid:
  
  F6815617: ActionButtonPressedEffect 
  
  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.

REPOSITORY
  R120 Plasma Workspace

BRANCH
  add-pressed-state-to-action-buttons (branched from master)

REVISION DETAIL
  https://phabricator.kde.org/D21062

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: broulik, abetts, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, 
lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart

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

[Filip Fila]

filipf updated this revision to Diff 57909.
filipf added a comment.


  - change easing type from InOutQuad to InOutQuart to improve behavior when 
clicked fast
  - shorten the animation for the same reason

REPOSITORY
  R120 Plasma Workspace

CHANGES SINCE LAST UPDATE
  https://phabricator.kde.org/D21062?vs=57735&id=57909

BRANCH
  add-pressed-state-to-action-buttons (branched from master)

REVISION DETAIL
  https://phabricator.kde.org/D21062

AFFECTED FILES
  lookandfeel/contents/components/ActionButton.qml

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: broulik, abetts, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, 
lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart

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

[Filip Fila]

This revision was automatically updated to reflect the committed changes.
Closed by commit R120:eaa5f94c0584: [Lock, login & logout screen] Add 
visual feedback to action buttons when pressed (authored by filipf).

REPOSITORY
  R120 Plasma Workspace

CHANGES SINCE LAST UPDATE
  https://phabricator.kde.org/D21062?vs=57909&id=57910

REVISION DETAIL
  https://phabricator.kde.org/D21062

AFFECTED FILES
  lookandfeel/contents/components/ActionButton.qml

To: filipf, #vdg, #plasma, ngraham, davidedmundson
Cc: broulik, abetts, plasma-devel, jraleigh, GB_2, ragreen, Pitel, ZrenBot, 
lesliezhai, ali-mohamed, jensreuterberg, sebas, apol, mart