Merge pull request #1791

e0796b2 standard-button: fix layout (xiphon)
f8a920d standard-button: add hover color animation (xiphon)
831dc59 standard-button: remove redundant 'icon' property (xiphon)

components/StandardButton.qml

@@ -35,7 +35,6 @@ Item {
     id: button
     property string rightIcon: ""
     property string rightIconInactive: ""
-    property string icon: ""
     property string textColor: button.enabled? MoneroComponents.Style.buttonTextColor: MoneroComponents.Style.buttonTextColorDisabled
     property string textAlign: rightIcon !== "" ? "left" : "center"
     property bool small: false
@@ -46,22 +45,9 @@ Item {
     }
     signal clicked()
 
-    // Dynamic height/width
-    Layout.minimumWidth: {
-        var _padding = 22;
-        if(button.rightIcon !== ""){
-            _padding += 60;
-        }
-
-        var _width = label.contentWidth + _padding;
-        if(_width <= 50) {
-            return 60;
-        }
-
-        return _width;
-    }
-
     height: small ?  30 * scaleRatio : 36 * scaleRatio
+    width: buttonLayout.width + 22 * scaleRatio
+    Component.onCompleted: width = width
 
     function doClick() {
         // Android workaround
@@ -70,70 +56,79 @@ Item {
     }
 
     Rectangle {
-        anchors.left: parent.left
+        id: buttonRect
-        anchors.right: parent.right
+        anchors.fill: parent
-        height: parent.height - 1
         radius: 3
-        color: parent.enabled ? MoneroComponents.Style.buttonBackgroundColor : MoneroComponents.Style.buttonBackgroundColorDisabled
         border.width: parent.focus ? 1 : 0
 
-        MouseArea {
+        state: button.enabled ? "active" : "disabled"
-            anchors.fill: parent
+        Component.onCompleted: state = state
-            cursorShape: Qt.PointingHandCursor
+        states: [
-            hoverEnabled: true
+            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 }
+        }
+    }
 
-            propagateComposedEvents: true
+    RowLayout {
-
+        id: buttonLayout
-            // possibly do some hover effects here
+        height: button.height
-            onEntered: {
+        spacing: 11 * scaleRatio
-//                if(button.enabled) parent.color = Style.buttonBackgroundColorHover;
+        anchors.centerIn: parent
-//                else parent.color = Style.buttonBackgroundColorDisabledHover;
-            }
-            onExited: {
-//                if(button.enabled) parent.color = Style.buttonBackgroundColor;
-//                else parent.color = Style.buttonBackgroundColorDisabled;
-            }
-        }
-    }
 
         Text {
             id: label
-        anchors.verticalCenter: parent.verticalCenter
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        anchors.left: parent.left
-        anchors.right: parent.right
             horizontalAlignment: textAlign === "center" ? Text.AlignHCenter : Text.AlignLeft
-        anchors.leftMargin: textAlign === "center" ? 0 : 11
             font.family: MoneroComponents.Style.fontBold.name
             font.bold: true
             font.pixelSize: buttonArea.pressed ? button.fontSize - 1 : button.fontSize
-        color: parent.textColor
+            color: button.textColor
-        visible: parent.icon === ""
+            visible: text !== ""
         }
 
         Image {
-        anchors.centerIn: parent
+            visible: button.rightIcon !== ""
-        visible: parent.icon !== ""
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-        source: parent.icon
+            width: button.small ? 16 * scaleRatio : 20 * scaleRatio
-    }
+            height: button.small ? 16 * scaleRatio : 20 * scaleRatio
-
-    Image {
-        visible: parent.rightIcon !== ""
-        anchors.right: parent.right
-        anchors.rightMargin: 11 * scaleRatio
-        anchors.verticalCenter: parent.verticalCenter
-        width: parent.small ? 16 * scaleRatio : 20 * scaleRatio
-        height: parent.small ? 16 * scaleRatio : 20 * scaleRatio
             source: {
-            if(parent.rightIconInactive !== "" && !parent.enabled){
+                if(button.rightIconInactive !== "" && !button.enabled) {
-                return parent.rightIconInactive;
+                    return button.rightIconInactive;
+                }
+                return button.rightIcon;
             }
-            return parent.rightIcon;
         }
     }
 
     MouseArea {
         id: buttonArea
         anchors.fill: parent
+        hoverEnabled: true
         onClicked: doClick()
         cursorShape: Qt.PointingHandCursor
     }