From 6ac40e8482748225f6e913be50a742ba420a74b2 Mon Sep 17 00:00:00 2001 From: jarolrod Date: Fri, 9 Dec 2022 03:01:59 -0500 Subject: [PATCH 1/2] qml: entangle the About and Developer options pages Currently, the parent SwipeView of the AboutOptions page needs to have an id of introductions. We abuse the knowledge that in our codebase we will have that available, but this limits when and where the AboutOptions can be used. This entangles the About and Developer options so that we can avoid this, and have these pages truly be reusable. Co-Authored-By: Johnny Carlson --- src/qml/components/AboutOptions.qml | 2 +- src/qml/pages/onboarding/OnboardingCover.qml | 9 ---- src/qml/pages/settings/SettingsAbout.qml | 47 ++++++++++++++------ 3 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/qml/components/AboutOptions.qml b/src/qml/components/AboutOptions.qml index 5408d68e51..ec512bf9b2 100644 --- a/src/qml/components/AboutOptions.qml +++ b/src/qml/components/AboutOptions.qml @@ -56,7 +56,7 @@ ColumnLayout { icon.width: 18 background: null onClicked: { - introductions.incrementCurrentIndex() + aboutSwipe.incrementCurrentIndex() } } } diff --git a/src/qml/pages/onboarding/OnboardingCover.qml b/src/qml/pages/onboarding/OnboardingCover.qml index 759638f97e..8e4312ad9c 100644 --- a/src/qml/pages/onboarding/OnboardingCover.qml +++ b/src/qml/pages/onboarding/OnboardingCover.qml @@ -52,14 +52,5 @@ Page { } } } - SettingsDeveloper { - navLeftDetail: NavButton { - iconSource: "image://images/caret-left" - text: qsTr("Back") - onClicked: { - introductions.decrementCurrentIndex() - } - } - } } } diff --git a/src/qml/pages/settings/SettingsAbout.qml b/src/qml/pages/settings/SettingsAbout.qml index 4f74b2c88d..d6f9e98199 100644 --- a/src/qml/pages/settings/SettingsAbout.qml +++ b/src/qml/pages/settings/SettingsAbout.qml @@ -8,19 +8,40 @@ import QtQuick.Layouts 1.15 import "../../controls" import "../../components" -InformationPage { - bannerActive: false - bold: true - headerText: qsTr("About") - headerMargin: 0 - description: qsTr("Bitcoin Core is an open source project.\nIf you find it useful, please contribute.\n\n This is experimental software.") - descriptionMargin: 20 - detailActive: true - detailItem: ColumnLayout { - spacing: 0 - AboutOptions { - Layout.maximumWidth: 450 - Layout.alignment: Qt.AlignCenter +Item { + property alias navLeftDetail: aboutSwipe.navLeftDetail + SwipeView { + id: aboutSwipe + property alias navLeftDetail: about_settings.navLeftDetail + anchors.fill: parent + interactive: false + orientation: Qt.Horizontal + InformationPage { + id: about_settings + bannerActive: false + bannerMargin: 0 + bold: true + headerText: qsTr("About") + headerMargin: 0 + description: qsTr("Bitcoin Core is an open source project.\nIf you find it useful, please contribute.\n\n This is experimental software.") + descriptionMargin: 20 + detailActive: true + detailItem: ColumnLayout { + spacing: 0 + AboutOptions { + Layout.maximumWidth: 450 + Layout.alignment: Qt.AlignCenter + } + } + } + SettingsDeveloper { + navLeftDetail: NavButton { + iconSource: "image://images/caret-left" + text: qsTr("Back") + onClicked: { + aboutSwipe.decrementCurrentIndex() + } + } } } } From 6037471dbbe88a4c34daefc0095a7d183af2b38d Mon Sep 17 00:00:00 2001 From: jarolrod Date: Fri, 9 Dec 2022 03:03:42 -0500 Subject: [PATCH 2/2] qml: use node specific pages, introduce node settings Co-Authored-By: Johnny Carlson --- src/Makefile.qt.include | 2 + src/qml/bitcoin_qml.qrc | 2 + src/qml/pages/main.qml | 40 +++++----- src/qml/pages/node/NodeRunner.qml | 43 ++++++++++ src/qml/pages/node/NodeSettings.qml | 120 ++++++++++++++++++++++++++++ 5 files changed, 187 insertions(+), 20 deletions(-) create mode 100644 src/qml/pages/node/NodeRunner.qml create mode 100644 src/qml/pages/node/NodeSettings.qml diff --git a/src/Makefile.qt.include b/src/Makefile.qt.include index c32b022ee8..f65fd164a0 100644 --- a/src/Makefile.qt.include +++ b/src/Makefile.qt.include @@ -343,6 +343,8 @@ QML_RES_QML = \ qml/controls/ValueInput.qml \ qml/pages/initerrormessage.qml \ qml/pages/main.qml \ + qml/pages/node/NodeRunner.qml \ + qml/pages/node/NodeSettings.qml \ qml/pages/onboarding/OnboardingBlockclock.qml \ qml/pages/onboarding/OnboardingConnection.qml \ qml/pages/onboarding/OnboardingCover.qml \ diff --git a/src/qml/bitcoin_qml.qrc b/src/qml/bitcoin_qml.qrc index 28e716d544..86a5afe6da 100644 --- a/src/qml/bitcoin_qml.qrc +++ b/src/qml/bitcoin_qml.qrc @@ -26,6 +26,8 @@ controls/ValueInput.qml pages/initerrormessage.qml pages/main.qml + pages/node/NodeRunner.qml + pages/node/NodeSettings.qml pages/onboarding/OnboardingBlockclock.qml pages/onboarding/OnboardingConnection.qml pages/onboarding/OnboardingCover.qml diff --git a/src/qml/pages/main.qml b/src/qml/pages/main.qml index 008782cf0a..c37825370a 100644 --- a/src/qml/pages/main.qml +++ b/src/qml/pages/main.qml @@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15 import "../components" import "../controls" import "./onboarding" +import "./node" ApplicationWindow { id: appWindow @@ -44,30 +45,29 @@ ApplicationWindow { Component { id: node - Page { + SwipeView { + id: node_swipe anchors.fill: parent - background: null - ColumnLayout { - width: 600 - spacing: 0 - anchors.centerIn: parent - Component.onCompleted: nodeModel.startNodeInitializionThread(); - Image { - Layout.alignment: Qt.AlignCenter - source: "image://images/app" - sourceSize.width: 64 - sourceSize.height: 64 + interactive: false + orientation: Qt.Vertical + NodeRunner { + navRightDetail: NavButton { + iconSource: "image://images/gear" + iconHeight: 24 + onClicked: node_swipe.incrementCurrentIndex() } - BlockCounter { - Layout.alignment: Qt.AlignCenter - blockHeight: nodeModel.blockTipHeight + } + NodeSettings { + navMiddleDetail: Header { + bold: true + headerSize: 18 + header: "Settings" } - ProgressIndicator { - width: 200 - Layout.alignment: Qt.AlignCenter - progress: nodeModel.verificationProgress + navRightDetail: NavButton { + text: qsTr("Done") + onClicked: node_swipe.decrementCurrentIndex() } } - } + } } } diff --git a/src/qml/pages/node/NodeRunner.qml b/src/qml/pages/node/NodeRunner.qml new file mode 100644 index 0000000000..161289dc29 --- /dev/null +++ b/src/qml/pages/node/NodeRunner.qml @@ -0,0 +1,43 @@ +// Copyright (c) 2022 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 "../../controls" +import "../../components" + +Page { + background: null + clip: true + property alias navRightDetail: navbar.rightDetail + header: NavigationBar { + id: navbar + } + ColumnLayout { + spacing: 0 + anchors.fill: parent + ColumnLayout { + width: 600 + spacing: 0 + anchors.centerIn: parent + Component.onCompleted: nodeModel.startNodeInitializionThread(); + Image { + Layout.alignment: Qt.AlignCenter + source: "image://images/app" + sourceSize.width: 64 + sourceSize.height: 64 + } + BlockCounter { + Layout.alignment: Qt.AlignCenter + blockHeight: nodeModel.blockTipHeight + } + ProgressIndicator { + width: 200 + Layout.alignment: Qt.AlignCenter + progress: nodeModel.verificationProgress + } + } + } +} diff --git a/src/qml/pages/node/NodeSettings.qml b/src/qml/pages/node/NodeSettings.qml new file mode 100644 index 0000000000..445c8ac2af --- /dev/null +++ b/src/qml/pages/node/NodeSettings.qml @@ -0,0 +1,120 @@ +// Copyright (c) 2022 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 "../../controls" +import "../../components" +import "../settings" + +Item { + id: nodeSettings + property alias navMiddleDetail: nodeSettingsView.navMiddleDetail + property alias navRightDetail: nodeSettingsView.navRightDetail + StackView { + id: nodeSettingsView + property alias navMiddleDetail: node_settings.navMiddleDetail + property alias navRightDetail: node_settings.navRightDetail + initialItem: Page { + id: node_settings + property alias navMiddleDetail: navbar.middleDetail + property alias navRightDetail: navbar.rightDetail + background: null + header: NavigationBar { + id: navbar + } + ColumnLayout { + spacing: 0 + width: parent.width + ColumnLayout { + spacing: 20 + Layout.maximumWidth: 450 + Layout.topMargin: 30 + Layout.leftMargin: 20 + Layout.rightMargin: 20 + Layout.alignment: Qt.AlignCenter + Setting { + Layout.fillWidth: true + header: qsTr("Dark Mode") + actionItem: OptionSwitch { + checked: Theme.dark + onToggled: Theme.toggleDark() + } + } + Setting { + Layout.fillWidth: true + header: qsTr("About") + actionItem: NavButton { + iconSource: "image://images/caret-right" + background: null + onClicked: { + nodeSettingsView.push(about_page) + } + } + } + Setting { + Layout.fillWidth: true + header: qsTr("Storage") + actionItem: NavButton { + iconSource: "image://images/caret-right" + background: null + onClicked: { + nodeSettingsView.push(storage_page) + } + } + } + Setting { + Layout.fillWidth: true + header: qsTr("Connection") + actionItem: NavButton { + iconSource: "image://images/caret-right" + background: null + onClicked: { + nodeSettingsView.push(connection_page) + } + } + } + } + } + } + anchors.fill: parent + } + Component { + id: about_page + SettingsAbout { + navLeftDetail: NavButton { + iconSource: "image://images/caret-left" + text: qsTr("Back") + onClicked: { + nodeSettingsView.pop() + } + } + } + } + Component { + id: storage_page + SettingsStorage { + navLeftDetail: NavButton { + iconSource: "image://images/caret-left" + text: qsTr("Back") + onClicked: { + nodeSettingsView.pop() + } + } + } + } + Component { + id: connection_page + SettingsConnection { + navLeftDetail: NavButton { + iconSource: "image://images/caret-left" + text: qsTr("Back") + onClicked: { + nodeSettingsView.pop() + } + } + } + } +}