From 0f5131ea333dabf72a63a66c585be9e99aa735ad Mon Sep 17 00:00:00 2001 From: johnny9 <985648+johnny9@users.noreply.github.com> Date: Sat, 24 Aug 2024 00:40:20 -0400 Subject: [PATCH 1/4] qml: Introduce AddWalletButton --- src/Makefile.qt.include | 1 + src/qml/bitcoin_qml.qrc | 1 + src/qml/controls/AddWalletButton.qml | 79 +++++++++++++++++++++++++++ src/qml/pages/wallet/WalletSelect.qml | 23 +------- 4 files changed, 82 insertions(+), 22 deletions(-) create mode 100644 src/qml/controls/AddWalletButton.qml diff --git a/src/Makefile.qt.include b/src/Makefile.qt.include index 8217d04798..6936bd0ca4 100644 --- a/src/Makefile.qt.include +++ b/src/Makefile.qt.include @@ -382,6 +382,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 \ diff --git a/src/qml/bitcoin_qml.qrc b/src/qml/bitcoin_qml.qrc index 61d2607fca..04c3fe7a85 100644 --- a/src/qml/bitcoin_qml.qrc +++ b/src/qml/bitcoin_qml.qrc @@ -20,6 +20,7 @@ components/ThemeSettings.qml components/TotalBytesIndicator.qml components/Tooltip.qml + controls/AddWalletButton.qml controls/ContinueButton.qml controls/CoreText.qml controls/CoreTextField.qml diff --git a/src/qml/controls/AddWalletButton.qml b/src/qml/controls/AddWalletButton.qml new file mode 100644 index 0000000000..048d67e27a --- /dev/null +++ b/src/qml/controls/AddWalletButton.qml @@ -0,0 +1,79 @@ +// 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 + property color iconColor: "transparent" + property string iconSource: "" + property bool showBalance: true + property bool showIcon: true + + hoverEnabled: AppMode.isDesktop + implicitHeight: 46 + implicitWidth: 220 + bottomPadding: 10 + topPadding: 0 + + contentItem: RowLayout { + implicitWidth: addIcon.size + addText.width + implicitHeight: 45 + 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 + } + } + + background: Rectangle { + id: bg + height: 30 + width: 220 + radius: 5 + anchors.topMargin: 5 + anchors.bottomMargin: 10 + 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 + } + ] +} diff --git a/src/qml/pages/wallet/WalletSelect.qml b/src/qml/pages/wallet/WalletSelect.qml index 9905bc242f..4eba52621c 100644 --- a/src/qml/pages/wallet/WalletSelect.qml +++ b/src/qml/pages/wallet/WalletSelect.qml @@ -89,29 +89,8 @@ 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 - } } } } From 162ec17b3c227b8fde62b618ca671052a0045e5e Mon Sep 17 00:00:00 2001 From: johnny9 <985648+johnny9@users.noreply.github.com> Date: Sat, 24 Aug 2024 00:41:11 -0400 Subject: [PATCH 2/4] qml: Start AddWallet flow when AddWalletButton is clicked --- src/qml/pages/main.qml | 8 ++++++-- src/qml/pages/wallet/DesktopWallets.qml | 6 ++++++ src/qml/pages/wallet/WalletSelect.qml | 6 ++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/qml/pages/main.qml b/src/qml/pages/main.qml index 7e0854a7c2..ca52806ada 100644 --- a/src/qml/pages/main.qml +++ b/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() } } diff --git a/src/qml/pages/wallet/DesktopWallets.qml b/src/qml/pages/wallet/DesktopWallets.qml index 1e45d8d248..ccaa787933 100644 --- a/src/qml/pages/wallet/DesktopWallets.qml +++ b/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 { diff --git a/src/qml/pages/wallet/WalletSelect.qml b/src/qml/pages/wallet/WalletSelect.qml index 4eba52621c..cea514c57b 100644 --- a/src/qml/pages/wallet/WalletSelect.qml +++ b/src/qml/pages/wallet/WalletSelect.qml @@ -16,6 +16,8 @@ Popup { implicitWidth: 250 clip: true + signal addWallet() + background: Item { anchors.fill: parent Rectangle { @@ -91,6 +93,10 @@ Popup { AddWalletButton { id: addWallet + onClicked: { + root.addWallet() + root.close() + } } } } From cab584f586a9d3d8866ddf88af85c358da907a99 Mon Sep 17 00:00:00 2001 From: johnny9 <985648+johnny9@users.noreply.github.com> Date: Sun, 1 Dec 2024 18:41:41 -0500 Subject: [PATCH 3/4] qml: Update layout and colors for AddWallet button --- src/qml/controls/AddWalletButton.qml | 55 +++++++++++++-------------- src/qml/pages/wallet/WalletSelect.qml | 5 ++- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/qml/controls/AddWalletButton.qml b/src/qml/controls/AddWalletButton.qml index 048d67e27a..7d4599e922 100644 --- a/src/qml/controls/AddWalletButton.qml +++ b/src/qml/controls/AddWalletButton.qml @@ -15,37 +15,34 @@ Button { property color textColor: Theme.color.neutral7 property color textHoverColor: Theme.color.orange property color textActiveColor: Theme.color.orange - property color iconColor: "transparent" - property string iconSource: "" - property bool showBalance: true - property bool showIcon: true hoverEnabled: AppMode.isDesktop - implicitHeight: 46 + implicitHeight: 30 implicitWidth: 220 - bottomPadding: 10 - topPadding: 0 - contentItem: RowLayout { - implicitWidth: addIcon.size + addText.width - implicitHeight: 45 - 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 + 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 + } } } @@ -54,8 +51,6 @@ Button { height: 30 width: 220 radius: 5 - anchors.topMargin: 5 - anchors.bottomMargin: 10 color: Theme.color.neutral3 visible: root.hovered || root.checked @@ -74,6 +69,8 @@ Button { }, State { name: "HOVER"; when: root.hovered + PropertyChanges { target: addText; color: textHoverColor } + PropertyChanges { target: addIcon; color: textHoverColor } } ] } diff --git a/src/qml/pages/wallet/WalletSelect.qml b/src/qml/pages/wallet/WalletSelect.qml index cea514c57b..28d0eae0cc 100644 --- a/src/qml/pages/wallet/WalletSelect.qml +++ b/src/qml/pages/wallet/WalletSelect.qml @@ -12,7 +12,7 @@ Popup { id: root property alias model: listView.model - implicitHeight: layout.height + arrow.height + implicitHeight: layout.height + arrow.height + 11 implicitWidth: 250 clip: true @@ -93,6 +93,9 @@ Popup { AddWalletButton { id: addWallet + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: 220 + Layout.preferredHeight: 30 onClicked: { root.addWallet() root.close() From 482c1f02fea3a58e29566597302ed114da9d19b8 Mon Sep 17 00:00:00 2001 From: johnny9 <985648+johnny9@users.noreply.github.com> Date: Sun, 1 Dec 2024 20:37:50 -0500 Subject: [PATCH 4/4] qml: Change mousepointer when hovering over AddWallet button --- src/qml/controls/AddWalletButton.qml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/qml/controls/AddWalletButton.qml b/src/qml/controls/AddWalletButton.qml index 7d4599e922..8a2bca3dc5 100644 --- a/src/qml/controls/AddWalletButton.qml +++ b/src/qml/controls/AddWalletButton.qml @@ -20,6 +20,13 @@ Button { implicitHeight: 30 implicitWidth: 220 + MouseArea { + anchors.fill: parent + enabled: false + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + } + contentItem: Item { anchors.fill: parent RowLayout {