Skip to content

Introducing the node settings views #203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/Makefile.qt.include
Original file line number Diff line number Diff line change
Expand Up @@ -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 \
Expand Down
2 changes: 2 additions & 0 deletions src/qml/bitcoin_qml.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
<file>controls/ValueInput.qml</file>
<file>pages/initerrormessage.qml</file>
<file>pages/main.qml</file>
<file>pages/node/NodeRunner.qml</file>
<file>pages/node/NodeSettings.qml</file>
<file>pages/onboarding/OnboardingBlockclock.qml</file>
<file>pages/onboarding/OnboardingConnection.qml</file>
<file>pages/onboarding/OnboardingCover.qml</file>
Expand Down
2 changes: 1 addition & 1 deletion src/qml/components/AboutOptions.qml
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ ColumnLayout {
icon.width: 18
background: null
onClicked: {
introductions.incrementCurrentIndex()
aboutSwipe.incrementCurrentIndex()
}
}
}
Expand Down
40 changes: 20 additions & 20 deletions src/qml/pages/main.qml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15
import "../components"
import "../controls"
import "./onboarding"
import "./node"

ApplicationWindow {
id: appWindow
Expand Down Expand Up @@ -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()
}
}
}
}
}
}
43 changes: 43 additions & 0 deletions src/qml/pages/node/NodeRunner.qml
Original file line number Diff line number Diff line change
@@ -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 {
Copy link
Collaborator

@johnny9 johnny9 Dec 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's another double ColumnLayout. I think we should reduce the layers here or use a different top level Item since using another Layout component isn't necessary.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we can leave it to a follow-up pr to address the nested columnlayouts throughout the code?

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
}
}
}
}
120 changes: 120 additions & 0 deletions src/qml/pages/node/NodeSettings.qml
Original file line number Diff line number Diff line change
@@ -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 {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like one of these ColumnLayouts can be removed

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this allows for the table to expand but be a max width of 450, we use the same nested approach in the InformationPage control; open to better ways of accomplishing this

Copy link
Collaborator

@johnny9 johnny9 Dec 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can use width: Math.min(parent.width, 450)

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()
}
}
}
}
}
9 changes: 0 additions & 9 deletions src/qml/pages/onboarding/OnboardingCover.qml
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,5 @@ Page {
}
}
}
SettingsDeveloper {
navLeftDetail: NavButton {
iconSource: "image://images/caret-left"
text: qsTr("Back")
onClicked: {
introductions.decrementCurrentIndex()
}
}
}
}
}
47 changes: 34 additions & 13 deletions src/qml/pages/settings/SettingsAbout.qml
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
}
}
}
}