From 09aa7015c790db19a1a1b242bada7a1a9df3cf5f Mon Sep 17 00:00:00 2001 From: jarolrod Date: Mon, 13 Feb 2023 19:02:57 -0700 Subject: [PATCH 1/2] qml: introduce Separator component Represents the 1px gray line that separates settings from one another --- src/Makefile.qt.include | 1 + src/qml/bitcoin_qml.qrc | 1 + src/qml/components/Separator.qml | 12 ++++++++++++ 3 files changed, 14 insertions(+) create mode 100644 src/qml/components/Separator.qml diff --git a/src/Makefile.qt.include b/src/Makefile.qt.include index 33f089047b..a77ea38fcd 100644 --- a/src/Makefile.qt.include +++ b/src/Makefile.qt.include @@ -336,6 +336,7 @@ QML_RES_QML = \ qml/components/DeveloperOptions.qml \ qml/components/PeersIndicator.qml \ qml/components/NetworkIndicator.qml \ + qml/components/Separator.qml \ qml/components/StorageLocations.qml \ qml/components/StorageOptions.qml \ qml/components/StorageSettings.qml \ diff --git a/src/qml/bitcoin_qml.qrc b/src/qml/bitcoin_qml.qrc index 7ba8644c76..63e91de1a9 100644 --- a/src/qml/bitcoin_qml.qrc +++ b/src/qml/bitcoin_qml.qrc @@ -10,6 +10,7 @@ components/DeveloperOptions.qml components/NetworkIndicator.qml components/StorageLocations.qml + components/Separator.qml components/StorageOptions.qml components/StorageSettings.qml controls/ContinueButton.qml diff --git a/src/qml/components/Separator.qml b/src/qml/components/Separator.qml new file mode 100644 index 0000000000..c5ca656aec --- /dev/null +++ b/src/qml/components/Separator.qml @@ -0,0 +1,12 @@ +// Copyright (c) 2023 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 "../controls" + +Rectangle { + height: 1 + color: Theme.color.neutral5 +} From 5cbf67f1c479f08cfe3954c56c9962029e6bd5aa Mon Sep 17 00:00:00 2001 From: jarolrod Date: Mon, 13 Feb 2023 19:18:03 -0700 Subject: [PATCH 2/2] qml: use Separator component to separate settings Extracts out the Separator from the Setting control. Adjusts relevant pages ColumnLayout spacing values. Additionally, adds proper margin values to header since we no longer have spacing provided by a ColumnLayout inside of the Setting control. --- src/qml/components/AboutOptions.qml | 6 +++- src/qml/components/ConnectionSettings.qml | 6 +++- src/qml/components/DeveloperOptions.qml | 5 ++- src/qml/components/StorageSettings.qml | 3 +- src/qml/controls/Setting.qml | 42 ++++++++--------------- src/qml/pages/node/NodeSettings.qml | 5 ++- 6 files changed, 35 insertions(+), 32 deletions(-) diff --git a/src/qml/components/AboutOptions.qml b/src/qml/components/AboutOptions.qml index 45deeb7e0a..cf82bf101a 100644 --- a/src/qml/components/AboutOptions.qml +++ b/src/qml/components/AboutOptions.qml @@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15 import "../controls" ColumnLayout { - spacing: 20 + spacing: 4 Setting { id: websiteLink Layout.fillWidth: true @@ -20,6 +20,7 @@ ColumnLayout { } onClicked: loadedItem.clicked() } + Separator { Layout.fillWidth: true } Setting { id: sourceLink Layout.fillWidth: true @@ -31,6 +32,7 @@ ColumnLayout { } onClicked: loadedItem.clicked() } + Separator { Layout.fillWidth: true } Setting { id: licenseLink Layout.fillWidth: true @@ -42,6 +44,7 @@ ColumnLayout { } onClicked: loadedItem.clicked() } + Separator { Layout.fillWidth: true } Setting { id: versionLink Layout.fillWidth: true @@ -56,6 +59,7 @@ ColumnLayout { } onClicked: loadedItem.clicked() } + Separator { Layout.fillWidth: true } Setting { id: gotoDeveloper Layout.fillWidth: true diff --git a/src/qml/components/ConnectionSettings.qml b/src/qml/components/ConnectionSettings.qml index 5a49cc933c..b8a0149280 100644 --- a/src/qml/components/ConnectionSettings.qml +++ b/src/qml/components/ConnectionSettings.qml @@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15 import "../controls" ColumnLayout { - spacing: 20 + spacing: 4 Setting { Layout.fillWidth: true header: qsTr("Enable listening") @@ -22,6 +22,7 @@ ColumnLayout { loadedItem.toggled() } } + Separator { Layout.fillWidth: true } Setting { Layout.fillWidth: true header: qsTr("Map port using UPnP") @@ -34,6 +35,7 @@ ColumnLayout { loadedItem.toggled() } } + Separator { Layout.fillWidth: true } Setting { Layout.fillWidth: true header: qsTr("Map port using NAT-PMP") @@ -46,6 +48,7 @@ ColumnLayout { loadedItem.toggled() } } + Separator { Layout.fillWidth: true } Setting { Layout.fillWidth: true header: qsTr("Enable RPC server") @@ -58,6 +61,7 @@ ColumnLayout { loadedItem.toggled() } } + Separator { Layout.fillWidth: true } Setting { id: gotoProxy last: true diff --git a/src/qml/components/DeveloperOptions.qml b/src/qml/components/DeveloperOptions.qml index 170167c17d..8559e6790e 100644 --- a/src/qml/components/DeveloperOptions.qml +++ b/src/qml/components/DeveloperOptions.qml @@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15 import "../controls" ColumnLayout { - spacing: 20 + spacing: 4 Setting { id: devDocsLink Layout.fillWidth: true @@ -22,6 +22,7 @@ ColumnLayout { } onClicked: loadedItem.clicked() } + Separator { Layout.fillWidth: true } Setting { id: dbcacheSetting Layout.fillWidth: true @@ -33,6 +34,7 @@ ColumnLayout { } onClicked: loadedItem.forceActiveFocus() } + Separator { Layout.fillWidth: true } Setting { id: parSetting Layout.fillWidth: true @@ -44,6 +46,7 @@ ColumnLayout { } onClicked: loadedItem.forceActiveFocus() } + Separator { Layout.fillWidth: true } Setting { Layout.fillWidth: true header: qsTr("Dark Mode") diff --git a/src/qml/components/StorageSettings.qml b/src/qml/components/StorageSettings.qml index 328295d7f0..ab3717f849 100644 --- a/src/qml/components/StorageSettings.qml +++ b/src/qml/components/StorageSettings.qml @@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15 import "../controls" ColumnLayout { - spacing: 20 + spacing: 4 Setting { Layout.fillWidth: true header: qsTr("Store recent blocks only") @@ -21,6 +21,7 @@ ColumnLayout { loadedItem.toggled() } } + Separator { Layout.fillWidth: true } Setting { id: pruneTargetSetting Layout.fillWidth: true diff --git a/src/qml/controls/Setting.qml b/src/qml/controls/Setting.qml index ce3689f7bc..e85883415d 100644 --- a/src/qml/controls/Setting.qml +++ b/src/qml/controls/Setting.qml @@ -50,36 +50,24 @@ AbstractButton { } } - contentItem: ColumnLayout { - spacing: 20 - width: parent.width - RowLayout { - Header { - Layout.fillWidth: true - center: false - header: root.header - headerSize: 18 - headerColor: root.stateColor - description: root.description - descriptionSize: 15 - descriptionMargin: 0 - } - Loader { - id: action_loader - active: true - visible: active - sourceComponent: root.actionItem - } + contentItem: RowLayout { + Header { + Layout.topMargin: 14 + Layout.bottomMargin: 14 + Layout.fillWidth: true + center: false + header: root.header + headerSize: 18 + headerColor: root.stateColor + description: root.description + descriptionSize: 15 + descriptionMargin: 0 } Loader { - Layout.fillWidth: true - Layout.columnSpan: 2 - active: !last + id: action_loader + active: true visible: active - sourceComponent: Rectangle { - height: 1 - color: Theme.color.neutral5 - } + sourceComponent: root.actionItem } } } diff --git a/src/qml/pages/node/NodeSettings.qml b/src/qml/pages/node/NodeSettings.qml index 621fade517..462888b1d9 100644 --- a/src/qml/pages/node/NodeSettings.qml +++ b/src/qml/pages/node/NodeSettings.qml @@ -34,7 +34,7 @@ Item { id: navbar } ColumnLayout { - spacing: 20 + spacing: 4 width: Math.min(parent.width, 450) anchors.horizontalCenter: parent.horizontalCenter Setting { @@ -46,6 +46,7 @@ Item { } onClicked: loadedItem.toggled() } + Separator { Layout.fillWidth: true } Setting { id: gotoAbout Layout.fillWidth: true @@ -58,6 +59,7 @@ Item { } onClicked: loadedItem.clicked() } + Separator { Layout.fillWidth: true } Setting { id: gotoStorage Layout.fillWidth: true @@ -70,6 +72,7 @@ Item { } onClicked: loadedItem.clicked() } + Separator { Layout.fillWidth: true } Setting { id: gotoConnection Layout.fillWidth: true