qml: Replace NavButton with IconButton in Send

Author: johnny9

src/Makefile.qt.include

@@ -425,12 +425,12 @@ QML_RES_QML = \
   qml/controls/CoreCheckBox.qml \
   qml/controls/CoreText.qml \
   qml/controls/CoreTextField.qml \
-  qml/controls/EllipsisMenuButton.qml \
   qml/controls/EllipsisMenuToggleItem.qml \
   qml/controls/ExternalLink.qml \
   qml/controls/FocusBorder.qml \
   qml/controls/Header.qml \
   qml/controls/Icon.qml \
+  qml/controls/IconButton.qml \
   qml/controls/InformationPage.qml \
   qml/controls/IPAddressValueInput.qml \
   qml/controls/KeyValueRow.qml \

src/qml/bitcoin_qml.qrc

@@ -30,12 +30,12 @@
         <file>controls/FocusBorder.qml</file>
         <file>controls/Header.qml</file>
         <file>controls/Icon.qml</file>
+        <file>controls/IconButton.qml</file>
         <file>controls/InformationPage.qml</file>
         <file>controls/IPAddressValueInput.qml</file>
         <file>controls/KeyValueRow.qml</file>
         <file>controls/LabeledTextInput.qml</file>
         <file>controls/LabeledCoinControlButton.qml</file>
-        <file>controls/EllipsisMenuButton.qml</file>
         <file>controls/EllipsisMenuToggleItem.qml</file>
         <file>controls/NavButton.qml</file>
         <file>controls/NavigationBar.qml</file>

src/qml/controls/EllipsisMenuButton.qml renamed to src/qml/controls/IconButton.qml

@@ -11,12 +11,16 @@ import org.bitcoincore.qt 1.0
 Button {
     id: root
 
+    property color iconColor: Theme.color.orange
     property color hoverColor: Theme.color.orange
     property color activeColor: Theme.color.orange
+    property int size: 35
+    property alias iconSource: icon.source
 
     hoverEnabled: AppMode.isDesktop
-    implicitHeight: 35
-    implicitWidth: 35
+    height: root.size
+    width: root.size
+    padding: 0
 
     MouseArea {
         anchors.fill: parent
@@ -25,28 +29,44 @@ Button {
         cursorShape: Qt.PointingHandCursor
     }
 
-    background: null
+    background: Rectangle {
+        id: bg
+        anchors.fill: parent
+        radius: 5
+        color: Theme.color.background
+
+
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
+    }
 
     contentItem: Icon {
-        id: ellipsisIcon
+        id: icon
         anchors.fill: parent
         source: "image://images/ellipsis"
-        color: Theme.color.neutral9
-        size: 35
+        size: root.size
+        color: iconColor
+
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
     }
 
     states: [
         State {
             name: "CHECKED"; when: root.checked
-            PropertyChanges { target: ellipsisIcon; color: activeColor }
+            PropertyChanges { target: icon; color: activeColor }
         },
         State {
             name: "HOVER"; when: root.hovered
-            PropertyChanges { target: ellipsisIcon; color: hoverColor }
+            PropertyChanges { target: icon; color: hoverColor }
+            PropertyChanges { target: bg; color: Theme.color.neutral2 }
         },
         State {
             name: "DISABLED"; when: !root.enabled
-            PropertyChanges { target: ellipsisIcon; color: Theme.color.neutral4 }
+            PropertyChanges { target: icon; color: Theme.color.neutral2 }
+            PropertyChanges { target: bg; color: Theme.color.background }
         }
     ]
 }

src/qml/pages/wallet/Send.qml

@@ -67,11 +67,12 @@ PageStack {
                         bold: true
                     }
 
-                    EllipsisMenuButton {
+                    IconButton {
                         id: menuButton
                         anchors.right: parent.right
                         anchors.verticalCenter: parent.verticalCenter
                         checked: sendOptionsPopup.opened
+                        iconSource: "image://images/ellipsis"
                         onClicked: {
                             sendOptionsPopup.open()
                         }
@@ -91,54 +92,55 @@ PageStack {
                     Layout.bottomMargin: 10
                     visible: settings.multipleRecipientsEnabled
 
-                    NavButton {
+                    CoreText {
+                        Layout.fillWidth: true
+                        Layout.alignment: Qt.AlignLeft
+                        id: selectAndAddRecipientsLabel
+                        text: qsTr("Recipient %1 of %2").arg(wallet.recipients.currentIndex).arg(wallet.recipients.count)
+                        horizontalAlignment: Text.AlignLeft
+                        font.pixelSize: 18
+                        color: Theme.color.neutral9
+                    }
+
+                    IconButton {
                         Layout.preferredWidth: 30
                         Layout.preferredHeight: 30
-                        iconWidth: 30
-                        iconHeight: 30
+                        size: 30
                         iconSource: "image://images/caret-left"
+                        enabled: wallet.recipients.currentIndex - 1 > 0
                         onClicked: {
                             wallet.recipients.prev()
+
                         }
                     }
 
-                    NavButton {
+                    IconButton {
                         Layout.preferredWidth: 30
                         Layout.preferredHeight: 30
-                        iconWidth: 30
-                        iconHeight: 30
+                        size: 30
                         iconSource: "image://images/caret-right"
+                        enabled: wallet.recipients.currentIndex < wallet.recipients.count
                         onClicked: {
                             wallet.recipients.next()
                         }
                     }
 
-                    CoreText {
-                        Layout.fillWidth: true
-                        Layout.alignment: Qt.AlignLeft
-                        id: selectAndAddRecipientsLabel
-                        text: qsTr("Recipient %1 of %2").arg(wallet.recipients.currentIndex).arg(wallet.recipients.count)
-                        font.pixelSize: 18
-                        color: Theme.color.neutral9
-                    }
-
-                    NavButton {
+                    IconButton {
                         Layout.preferredWidth: 30
                         Layout.preferredHeight: 30
-                        iconWidth: 20
-                        iconHeight: 20
-                        iconSource: "image://images/plus"
+                        size: 30
+                        iconSource: "image://images/plus-big-filled"
                         onClicked: {
                             wallet.recipients.add()
                         }
                     }
-                    NavButton {
+
+                    IconButton {
                         Layout.preferredWidth: 30
                         Layout.preferredHeight: 30
-                        iconWidth: 20
-                        iconHeight: 20
+                        size: 30
                         iconSource: "image://images/minus"
-                        visible: wallet.recipients.count > 1
+                        enabled: wallet.recipients.count > 1
                         onClicked: {
                             wallet.recipients.remove()
                         }