Merge #418: Introduce AddWalletButton and connect it to the AddWallet flow

2d2be8c qml: Start AddWallet flow when AddWalletButton is clicked (johnny9)
b2c1a15 qml: Introduce AddWalletButton (johnny9)

Pull request description:

  These commits enable the "Add Wallet" button at the bottom of the Wallet Select menu on Desktop

  <!--
  Link to github actions build artifacts.

  [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green
  )]()

  -->

ACKs for top commit:
  hebasto:
    ACK 2d2be8c,  tested on Ubuntu 24.10.

Tree-SHA512: 9e04760443f94ffdc3675ed3232b79549f4de1d63db5457879d80eeced79e981887c822754f529f4314080b2f01d07f1d32de31befd04a8c64d3d1db504c5900

Author: hebasto

src/Makefile.qt.include

@@ -388,6 +388,7 @@ QML_RES_QML = \
   qml/components/ThemeSettings.qml \
   qml/components/TotalBytesIndicator.qml \
   qml/components/Tooltip.qml \
+  qml/controls/AddWalletButton.qml \
   qml/controls/CaretRightIcon.qml \
   qml/controls/ContinueButton.qml \
   qml/controls/CoreText.qml \

src/qml/bitcoin_qml.qrc

@@ -20,6 +20,7 @@
         <file>components/ThemeSettings.qml</file>
         <file>components/TotalBytesIndicator.qml</file>
         <file>components/Tooltip.qml</file>
+        <file>controls/AddWalletButton.qml</file>
         <file>controls/ContinueButton.qml</file>
         <file>controls/CoreText.qml</file>
         <file>controls/CoreTextField.qml</file>

src/qml/controls/AddWalletButton.qml

@@ -0,0 +1,83 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import org.bitcoincore.qt 1.0
+
+Button {
+    id: root
+
+    property color bgActiveColor: Theme.color.neutral2
+    property color textColor: Theme.color.neutral7
+    property color textHoverColor: Theme.color.orange
+    property color textActiveColor: Theme.color.orange
+
+    hoverEnabled: AppMode.isDesktop
+    implicitHeight: 30
+    implicitWidth: 220
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: false
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+        RowLayout {
+            anchors.centerIn: parent
+            spacing: 3
+            Icon {
+                id: addIcon
+                Layout.alignment: Qt.AlignRight
+                source: "image://images/plus"
+                color: Theme.color.neutral7
+                size: 16
+                Layout.minimumWidth: 16
+                Layout.preferredWidth: 16
+                Layout.maximumWidth: 16
+            }
+            CoreText {
+                id: addText
+                Layout.fillHeight: true
+                Layout.alignment: Qt.AlignLeft
+                text: qsTr("Add Wallet")
+                color: Theme.color.neutral7
+                font.pixelSize: 15
+            }
+        }
+    }
+
+    background: Rectangle {
+        id: bg
+        height: 30
+        width: 220
+        radius: 5
+        color: Theme.color.neutral3
+        visible: root.hovered || root.checked
+
+        FocusBorder {
+            visible: root.visualFocus
+        }
+
+        Behavior on color {
+            ColorAnimation { duration: 150 }
+        }
+    }
+
+    states: [
+        State {
+            name: "CHECKED"; when: root.checked
+        },
+        State {
+            name: "HOVER"; when: root.hovered
+            PropertyChanges { target: addText; color: textHoverColor }
+            PropertyChanges { target: addIcon; color: textHoverColor }
+        }
+    ]
+}

src/qml/pages/main.qml

@@ -80,13 +80,17 @@ ApplicationWindow {
 
     Component {
         id: desktopWallets
-        DesktopWallets {}
+        DesktopWallets {
+            onAddWallet: {
+                main.push(createWalletWizard)
+            }
+        }
     }
 
     Component {
         id: createWalletWizard
         CreateWalletWizard {
-            onFinished: {
+           onFinished: {
                 main.pop()
             }
         }

src/qml/pages/wallet/DesktopWallets.qml

@@ -19,6 +19,8 @@ Page {
 
     ButtonGroup { id: navigationTabs }
 
+    signal addWallet()
+
     header: NavigationBar2 {
         id: navBar
         leftItem: WalletBadge {
@@ -41,6 +43,10 @@ Page {
                 closePolicy: Popup.CloseOnPressOutside
                 x: 0
                 y: parent.height
+
+                onAddWallet: {
+                    root.addWallet()
+                }
             }
         }
         centerItem: RowLayout {

src/qml/pages/wallet/WalletSelect.qml

@@ -12,10 +12,12 @@ Popup {
     id: root
 
     property alias model: listView.model
-    implicitHeight: layout.height + arrow.height
+    implicitHeight: layout.height + arrow.height + 11
     implicitWidth: 250
     clip: true
 
+    signal addWallet()
+
     background: Item {
         anchors.fill: parent
         Rectangle {
@@ -89,28 +91,15 @@ Popup {
             }
         }
 
-        RowLayout {
+        AddWalletButton {
             id: addWallet
-            Layout.preferredWidth: addIcon.size + addText.width
-            Layout.preferredHeight: 45
+
             Layout.alignment: Qt.AlignHCenter
-            Icon {
-                id: addIcon
-                Layout.alignment: Qt.AlignHCenter
-                source: "image://images/plus"
-                color: Theme.color.neutral8
-                size: 14
-                topPadding: 5
-                bottomPadding: 10
-            }
-            CoreText {
-                id: addText
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("Add Wallet")
-                color: Theme.color.neutral9
-                font.pixelSize: 15
-                topPadding: 5
-                bottomPadding: 10
+            Layout.preferredWidth: 220
+            Layout.preferredHeight: 30
+            onClicked: {
+                root.addWallet()
+                root.close()
             }
         }
     }