Merge pull request #2435

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

1 files changed, 68 insertions, 283 deletions

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()
             }
         }
     }