standard-button: add hover color animation

1 files changed, 31 insertions, 16 deletions

diff --git a/components/StandardButton.qml b/components/StandardButton.qml
index 88076894..bfb90716 100644
--- a/components/StandardButton.qml
+++ b/components/StandardButton.qml
@@ -57,27 +57,41 @@ Item {
     }
 
     Rectangle {
+        id: buttonRect
         anchors.fill: parent
         radius: 3
-        color: parent.enabled ? MoneroComponents.Style.buttonBackgroundColor : MoneroComponents.Style.buttonBackgroundColorDisabled
         border.width: parent.focus ? 1 : 0
 
-        MouseArea {
-            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
-            hoverEnabled: true
-
-            propagateComposedEvents: true
-
-            // possibly do some hover effects here
-            onEntered: {
-//                if(button.enabled) parent.color = Style.buttonBackgroundColorHover;
-//                else parent.color = Style.buttonBackgroundColorDisabledHover;
-            }
-            onExited: {
-//                if(button.enabled) parent.color = Style.buttonBackgroundColor;
-//                else parent.color = Style.buttonBackgroundColorDisabled;
+        state: button.enabled ? "active" : "disabled"
+        Component.onCompleted: state = state
+        states: [
+            State {
+                name: "hover"
+                when: buttonArea.containsMouse || button.focus
+                PropertyChanges {
+                    target: buttonRect
+                    color: MoneroComponents.Style.buttonBackgroundColorHover
+                }
+            },
+            State {
+                name: "active"
+                when: button.enabled
+                PropertyChanges {
+                    target: buttonRect
+                    color: MoneroComponents.Style.buttonBackgroundColor
+                }
+            },
+            State {
+                name: "disabled"
+                when: !button.enabled
+                PropertyChanges {
+                    target: buttonRect
+                    color: MoneroComponents.Style.buttonBackgroundColorDisabled
+                }
             }
+        ]
+        transitions: Transition {
+            ColorAnimation { duration: 100 }
         }
     }
 
@@ -122,6 +136,7 @@ Item {
     MouseArea {
         id: buttonArea
         anchors.fill: parent
+        hoverEnabled: true
         onClicked: doClick()
         cursorShape: Qt.PointingHandCursor
     }