Merge pull request #2435

0e3f3c1 SettingsWallet: refactor list items into separate component (xiphon)

3 files changed, 134 insertions, 283 deletions

diff --git a/components/SettingsListItem.qml b/components/SettingsListItem.qml
new file mode 100644
index 00000000..8442e9c3
--- /dev/null
+++ b/components/SettingsListItem.qml
@@ -0,0 +1,65 @@
+import QtQuick 2.9
+import QtQuick.Layouts 1.1
+
+import "../components" as MoneroComponents
+
+ColumnLayout {
+    property alias buttonText: button.text
+    property alias description: description.text
+    property alias title: title.text
+    signal clicked()
+
+    id: settingsListItem
+    Layout.fillWidth: true
+    spacing: 0
+
+    Rectangle {
+        // divider
+        Layout.preferredHeight: 1
+        Layout.fillWidth: true
+        Layout.bottomMargin: 8
+        color: MoneroComponents.Style.dividerColor
+        opacity: MoneroComponents.Style.dividerOpacity
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+        spacing: 0
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+
+            MoneroComponents.TextPlain {
+                id: title
+                Layout.fillWidth: true
+                Layout.preferredHeight: 20
+                Layout.topMargin: 8
+                color: MoneroComponents.Style.defaultFontColor
+                opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
+                font.bold: true
+                font.family: MoneroComponents.Style.fontRegular.name
+                font.pixelSize: 16
+            }
+
+            MoneroComponents.TextPlainArea {
+                id: description
+                color: MoneroComponents.Style.dimmedFontColor
+                colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
+                colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
+                Layout.fillWidth: true
+                horizontalAlignment: TextInput.AlignLeft
+            }
+        }
+
+        MoneroComponents.StandardButton {
+            id: button
+            small: true
+            onClicked: {
+                settingsListItem.clicked()
+            }
+            width: 135
+        }
+    }
+}
diff --git a/pages/settings/SettingsWallet.qml b/pages/settings/SettingsWallet.qml
index 92e2299a..92630818 100644
--- a/pages/settings/SettingsWallet.qml
+++ b/pages/settings/SettingsWallet.qml
@@ -47,312 +47,97 @@ Rectangle {
         anchors.right: parent.right
         anchors.margins: 20
         anchors.topMargin: 0
-        spacing: 0
+        spacing: 8
 
-        Rectangle {
-            // divider
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
-
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Close this wallet") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Logs out of this wallet.") + translationManager.emptyString
-                }
-            }
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Close wallet") + translationManager.emptyString
+            description: qsTr("Logs out of this wallet.") + translationManager.emptyString
+            title: qsTr("Close this wallet") + translationManager.emptyString
 
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Close wallet") + translationManager.emptyString
-                onClicked: {
-                    middlePanel.addressBookView.clearFields();
-                    middlePanel.transferView.clearFields();
-                    middlePanel.receiveView.clearFields();
-                    appWindow.showWizard();
-                }
-                width: 135
+            onClicked: {
+                middlePanel.addressBookView.clearFields();
+                middlePanel.transferView.clearFields();
+                middlePanel.receiveView.clearFields();
+                appWindow.showWizard();
             }
         }
 
-        Rectangle {
-            // divider
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
-        }
-
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Create wallet") + translationManager.emptyString
+            description: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString
+            title: qsTr("Create a view-only wallet") + translationManager.emptyString
             visible: !appWindow.viewOnly
 
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Create a view-only wallet") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Creates a new wallet that can only view and initiate transactions, but requires a spendable wallet to sign transactions before sending.") + translationManager.emptyString
+            onClicked: {
+                var newPath = currentWallet.path + "_viewonly";
+                if (currentWallet.createViewOnly(newPath, appWindow.walletPassword)) {
+                    console.log("view only wallet created in " + newPath);
+                    informationPopup.title  = qsTr("Success") + translationManager.emptyString;
+                    informationPopup.text = qsTr('The view only wallet has been created with the same password as the current wallet. You can open it by closing this current wallet, clicking the "Open wallet from file" option, and selecting the view wallet in: \n%1\nYou can change the password in the wallet settings.').arg(newPath);
+                    informationPopup.open()
+                    informationPopup.onCloseCallback = null
+                } else {
+                    informationPopup.title  = qsTr("Error") + translationManager.emptyString;
+                    informationPopup.text = currentWallet.errorString;
+                    informationPopup.open()
                 }
             }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Create wallet") + translationManager.emptyString
-                onClicked: {
-                    var newPath = currentWallet.path + "_viewonly";
-                    if (currentWallet.createViewOnly(newPath, appWindow.walletPassword)) {
-                        console.log("view only wallet created in " + newPath);
-                        informationPopup.title  = qsTr("Success") + translationManager.emptyString;
-                        informationPopup.text = qsTr('The view only wallet has been created with the same password as the current wallet. You can open it by closing this current wallet, clicking the "Open wallet from file" option, and selecting the view wallet in: \n%1\nYou can change the password in the wallet settings.').arg(newPath);
-                        informationPopup.open()
-                        informationPopup.onCloseCallback = null
-                    } else {
-                        informationPopup.title  = qsTr("Error") + translationManager.emptyString;
-                        informationPopup.text = currentWallet.errorString;
-                        informationPopup.open()
-                    }
-                }
-                width: 135
-            }
-        }
-
-        Rectangle {
-            // divider
-            visible: !appWindow.viewOnly
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
         }
 
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Show seed & keys") + translationManager.emptyString
-                }
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Show seed") + translationManager.emptyString
+            description: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString
+            title: qsTr("Show seed & keys") + translationManager.emptyString
 
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Store this information safely to recover your wallet in the future.") + translationManager.emptyString
-                }
+            onClicked: {
+                Utils.showSeedPage();
             }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Show seed") + translationManager.emptyString
-                onClicked: {
-                    Utils.showSeedPage();
-                }
-                width: 135
-            }
-        }
-
-        Rectangle {
-            // divider
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
         }
 
-        GridLayout {
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Rescan") + translationManager.emptyString
+            description: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString
+            title: qsTr("Rescan wallet balance") + translationManager.emptyString
             visible: appWindow.walletMode >= 2
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
 
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
-
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Rescan wallet balance") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Use this feature if you think the shown balance is not accurate.") + translationManager.emptyString
+            onClicked: {
+                if (!currentWallet.rescanSpent()) {
+                    console.error("Error: ", currentWallet.errorString);
+                    informationPopup.title = qsTr("Error") + translationManager.emptyString;
+                    informationPopup.text  = qsTr("Error: ") + currentWallet.errorString
+                    informationPopup.icon  = StandardIcon.Critical
+                    informationPopup.onCloseCallback = null
+                    informationPopup.open();
+                } else {
+                    informationPopup.title = qsTr("Information") + translationManager.emptyString
+                    informationPopup.text  = qsTr("Successfully rescanned spent outputs.") + translationManager.emptyString
+                    informationPopup.icon  = StandardIcon.Information
+                    informationPopup.onCloseCallback = null
+                    informationPopup.open();
                 }
             }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Rescan") + translationManager.emptyString
-                onClicked: {
-                    if (!currentWallet.rescanSpent()) {
-                        console.error("Error: ", currentWallet.errorString);
-                        informationPopup.title = qsTr("Error") + translationManager.emptyString;
-                        informationPopup.text  = qsTr("Error: ") + currentWallet.errorString
-                        informationPopup.icon  = StandardIcon.Critical
-                        informationPopup.onCloseCallback = null
-                        informationPopup.open();
-                    } else {
-                        informationPopup.title = qsTr("Information") + translationManager.emptyString
-                        informationPopup.text  = qsTr("Successfully rescanned spent outputs.") + translationManager.emptyString
-                        informationPopup.icon  = StandardIcon.Information
-                        informationPopup.onCloseCallback = null
-                        informationPopup.open();
-                    }
-                }
-                width: 135
-            }
-        }
-        Rectangle {
-            // divider
-            visible: appWindow.walletMode >= 2
-            Layout.preferredHeight: 1
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-            Layout.bottomMargin: 8
-            color: MoneroComponents.Style.dividerColor
-            opacity: MoneroComponents.Style.dividerOpacity
         }
 
-        GridLayout {
-            Layout.fillWidth: true
-            Layout.preferredHeight: childrenRect.height
-            columnSpacing: 0
-
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-                spacing: 0
+        MoneroComponents.SettingsListItem {
+            buttonText: qsTr("Change password") + translationManager.emptyString
+            description: qsTr("Change the password of your wallet.") + translationManager.emptyString
+            title: qsTr("Change wallet password") + translationManager.emptyString
 
-                MoneroComponents.TextPlain {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 20
-                    Layout.topMargin: 8
-                    color: MoneroComponents.Style.defaultFontColor
-                    opacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.8
-                    font.bold: true
-                    font.family: MoneroComponents.Style.fontRegular.name
-                    font.pixelSize: 16
-                    text: qsTr("Change wallet password") + translationManager.emptyString
-                }
-
-                MoneroComponents.TextPlainArea {
-                    color: MoneroComponents.Style.dimmedFontColor
-                    colorBlackTheme: MoneroComponents.Style._b_dimmedFontColor
-                    colorWhiteTheme: MoneroComponents.Style._w_dimmedFontColor
-                    width: parent.width
-                    Layout.fillWidth: true
-                    horizontalAlignment: TextInput.AlignLeft
-                    text: qsTr("Change the password of your wallet.") + translationManager.emptyString
-                }
-            }
-
-            MoneroComponents.StandardButton {
-                small: true
-                text: qsTr("Change password") + translationManager.emptyString
-                onClicked: {
-                    passwordDialog.onAcceptedCallback = function() {
-	                    if(appWindow.walletPassword === passwordDialog.password){
-	                        passwordDialog.openNewPasswordDialog()
-	                    } else {
-	                        informationPopup.title  = qsTr("Error") + translationManager.emptyString;
-                            informationPopup.text = qsTr("Wrong password") + translationManager.emptyString;
-	                        informationPopup.open()
-	                        informationPopup.onCloseCallback = function() {
-	                            passwordDialog.open()
-	                        }
-	                    }
-	                }
-                    passwordDialog.onRejectedCallback = null;
-                    passwordDialog.open()
+            onClicked: {
+                passwordDialog.onAcceptedCallback = function() {
+                    if(appWindow.walletPassword === passwordDialog.password){
+                        passwordDialog.openNewPasswordDialog()
+                    } else {
+                        informationPopup.title  = qsTr("Error") + translationManager.emptyString;
+                        informationPopup.text = qsTr("Wrong password") + translationManager.emptyString;
+                        informationPopup.open()
+                        informationPopup.onCloseCallback = function() {
+                            passwordDialog.open()
+                        }
+                    }
                 }
-                width: 135
+                passwordDialog.onRejectedCallback = null;
+                passwordDialog.open()
             }
         }
     }
diff --git a/qml.qrc b/qml.qrc
index d5605b83..590eccb6 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -12,6 +12,7 @@
         <file>images/plus-white.png</file>
         <file>images/plus-white@2x.png</file>
         <file>components/Label.qml</file>
+        <file>components/SettingsListItem.qml</file>
         <file>images/whatIsIcon.png</file>
         <file>images/whatIsIcon@2x.png</file>
         <file>images/lockIcon.png</file>