Finishing up on the settings page for now and modified some QML components

MiddlePanel.qml

@@ -139,7 +139,7 @@ Rectangle {
             }, State {
                 name: "Settings"
                PropertyChanges { target: root; currentView: settingsView }
-               PropertyChanges { target: mainFlickable; contentHeight: 1200 * scaleRatio }
+               PropertyChanges { target: mainFlickable; contentHeight: 1400 * scaleRatio }
             }, State {
                 name: "Mining"
                 PropertyChanges { target: root; currentView: miningView }

components/Label.qml

@@ -42,8 +42,10 @@ Item {
     property alias wrapMode: label.wrapMode
     property alias horizontalAlignment: label.horizontalAlignment
     signal linkActivated()
-    width: icon.x + icon.width * scaleRatio
+//    width: icon.x + icon.width * scaleRatio
-    height: icon.height * scaleRatio
+//    height: icon.height * scaleRatio
+    height: label.height * scaleRatio
+    width: label.width * scaleRatio
     Layout.topMargin: 10 * scaleRatio
 
     Text {
@@ -58,14 +60,15 @@ Item {
         onLinkActivated: item.linkActivated()
     }
 
-    Image {
+// @TODO: figure out significance of whatIsIcon.png, remove for now
-        id: icon
+//    Image {
-        anchors.verticalCenter: parent.verticalCenter
+//        id: icon
-        anchors.left: label.right
+//        anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: 5 * scaleRatio
+//        anchors.left: label.right
-        source: "../images/whatIsIcon.png"
+//        anchors.leftMargin: 5 * scaleRatio
-        visible: appWindow.whatIsEnable
+//        source: "../images/whatIsIcon.png"
-    }
+//        visible: appWindow.whatIsEnable
+//    }
 
 //    MouseArea {
 //        anchors.fill: icon

components/LabelSubheader.qml

@@ -0,0 +1,45 @@
+// Copyright (c) 2014-2015, The Monero Project
+//
+// All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without modification, are
+// permitted provided that the following conditions are met:
+//
+// 1. Redistributions of source code must retain the above copyright notice, this list of
+//    conditions and the following disclaimer.
+//
+// 2. Redistributions in binary form must reproduce the above copyright notice, this list
+//    of conditions and the following disclaimer in the documentation and/or other
+//    materials provided with the distribution.
+//
+// 3. Neither the name of the copyright holder nor the names of its contributors may be
+//    used to endorse or promote products derived from this software without specific
+//    prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
+// THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+// THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+import QtQuick 2.0
+import "." 1.0
+
+Label {
+    id: item
+    fontSize: 17 * scaleRatio
+
+    Rectangle {
+        anchors.top: item.bottom
+        anchors.topMargin: 4
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: 2
+        color: Style.dividerColor
+        opacity: Style.dividerOpacity
+    }
+}

components/LineEdit.qml

@@ -53,12 +53,13 @@ Item {
     property bool labelFontBold: false
     property alias labelWrapMode: inputLabel.wrapMode
     property alias labelHorizontalAlignment: inputLabel.horizontalAlignment
+    property bool showingHeader: inputLabel.text !== "" || copyButton
     signal labelLinkActivated(); // input label, rich text <a> signal
     signal editingFinished();
     signal accepted();
     signal textUpdated();
 
-    height: (inputLabel.height + inputItem.height + 2) * scaleRatio
+    height: showingHeader ? (inputLabel.height + inputItem.height + 2) * scaleRatio : 42 * scaleRatio
 
     onTextUpdated: {
         // check to remove placeholder text when there is content
@@ -109,14 +110,14 @@ Item {
                 appWindow.showStatusMessage(qsTr("Copied to clipboard"),3)
             }
         }
-        visible: input.text && copyButton ? true : false
+        visible: copyButton && input.text !== ""
     }
 
     Item{
         id: inputItem
         height: 40 * scaleRatio
-        anchors.top: inputLabel.bottom
+        anchors.top: showingHeader ? inputLabel.bottom : parent.top
-        anchors.topMargin: 6 * scaleRatio
+        anchors.topMargin: showingHeader ? 6 * scaleRatio : 2
         width: parent.width
 
         Text {

components/LineEditMulti.qml

@@ -71,7 +71,7 @@ ColumnLayout {
 
         LabelButton {
             id: copyButtonId
-            visible: copyButton
+            visible: copyButton && multiLine.text !== ""
             text: qsTr("Copy")
             anchors.right: labelButton.visible ? inputLabel.right : parent.right
             anchors.rightMargin: labelButton.visible? 4 : 0

components/StandardButton.qml

@@ -32,15 +32,20 @@ import "." 1.0
 
 Item {
     id: button
-    height: 37 * scaleRatio
     property string icon: ""
     property string textColor: button.enabled? Style.buttonTextColor: Style.buttonTextColorDisabled
-    property int fontSize: 16 * scaleRatio
+    property bool small: false
     property alias text: label.text
+    property int fontSize: {
+        if(small) return 14 * scaleRatio;
+        else return 16 * scaleRatio;
+    }
     signal clicked()
 
-    // Dynamic label width
+    // Dynamic height/width
     Layout.minimumWidth: (label.contentWidth > 50)? label.contentWidth + 22 : 60
+    height: small ?  30 * scaleRatio : 36 * scaleRatio
+
 
     function doClick() {
         // Android workaround

pages/Settings.qml

@@ -91,6 +91,7 @@ Rectangle {
             columns: (isMobile)? 1 : 4
             StandardButton {
                 id: closeWalletButton
+                small: true
                 text: qsTr("Close wallet") + translationManager.emptyString
                 visible: true
                 onClicked: {
@@ -100,8 +101,9 @@ Rectangle {
             }
 
             StandardButton {
-                enabled: !viewOnly
                 id: createViewOnlyWalletButton
+                enabled: !viewOnly
+                small: true
                 text: qsTr("Create view only wallet") + translationManager.emptyString
                 visible: true
                 onClicked: {
@@ -146,6 +148,7 @@ Rectangle {
 */
             StandardButton {
                 id: rescanSpentButton
+                small: true
                 enabled: !persistentSettings.useRemoteNode
                 text: qsTr("Rescan wallet balance") + translationManager.emptyString
                 onClicked: {
@@ -194,9 +197,17 @@ Rectangle {
         }
 
         RowLayout {
+            Layout.fillWidth: true
 
+            LabelSubheader {
+                text: qsTr("Wallet mode") + translationManager.emptyString
+            }
+        }
+
+        RowLayout {
             StandardButton {
                 id: remoteDisconnect
+                small: true
                 enabled: persistentSettings.useRemoteNode
                 Layout.fillWidth: false
                 text: qsTr("Local Node") + translationManager.emptyString
@@ -207,6 +218,7 @@ Rectangle {
 
             StandardButton {
                 id: remoteConnect
+                small: true
                 enabled: !persistentSettings.useRemoteNode
                 Layout.fillWidth: false
                 text: qsTr("Remote Node") + translationManager.emptyString
@@ -216,10 +228,52 @@ Rectangle {
             }
         }
 
+        RowLayout {
+            visible: persistentSettings.useRemoteNode
+            ColumnLayout {
+                Layout.fillWidth: true
+
+                RemoteNodeEdit {
+                    id: remoteNodeEdit
+                    Layout.minimumWidth: 100 * scaleRatio
+                    daemonAddrLabelText: qsTr("Address")
+                    daemonPortLabelText: qsTr("Port")
+                    daemonAddrText: persistentSettings.remoteNodeAddress.split(":")[0].trim()
+                    daemonPortText: (persistentSettings.remoteNodeAddress.split(":")[1].trim() == "") ? "18081" : persistentSettings.remoteNodeAddress.split(":")[1]
+                    onEditingFinished: {
+                        persistentSettings.remoteNodeAddress = remoteNodeEdit.getAddress();
+                        console.log("setting remote node to " + persistentSettings.remoteNodeAddress)
+                    }
+                }
+            }
+        }
+
+        RowLayout{
+            visible: persistentSettings.useRemoteNode
+            Layout.fillWidth: true
+
+            StandardButton {
+                id: remoteNodeSave
+                small: true
+                text: qsTr("Connect") + translationManager.emptyString
+                onClicked: {
+                    // Update daemon login
+                    persistentSettings.remoteNodeAddress = remoteNodeEdit.getAddress();
+                    persistentSettings.daemonUsername = daemonUsername.text;
+                    persistentSettings.daemonPassword = daemonPassword.text;
+                    persistentSettings.useRemoteNode = true
+
+                    currentWallet.setDaemonLogin(persistentSettings.daemonUsername, persistentSettings.daemonPassword);
+
+                    appWindow.connectRemoteNode()
+                }
+            }
+        }
+
         //! Manage daemon
         RowLayout {
             visible: !isMobile
-            Layout.topMargin: 20
+
             Label {
                 id: manageDaemonLabel
                 fontSize: 22 * scaleRatio
@@ -243,8 +297,9 @@ Rectangle {
             id: daemonStatusRow
             columns: (isMobile) ?  2 : 4
             StandardButton {
-                visible: !appWindow.daemonRunning
                 id: startDaemonButton
+                small: true
+                visible: !appWindow.daemonRunning
                 text: qsTr("Start Local Node") + translationManager.emptyString
                 onClicked: {
                     // Update bootstrap daemon address
@@ -257,8 +312,9 @@ Rectangle {
             }
 
             StandardButton {
-                visible: appWindow.daemonRunning
                 id: stopDaemonButton
+                small: true
+                visible: appWindow.daemonRunning
                 text: qsTr("Stop Local Node") + translationManager.emptyString
                 onClicked: {
                     appWindow.stopDaemon()
@@ -266,8 +322,9 @@ Rectangle {
             }
 
             StandardButton {
-                visible: true
                 id: daemonStatusButton
+                small: true
+                visible: true
                 text: qsTr("Show status") + translationManager.emptyString
                 onClicked: {
                     daemonManager.sendCommand("status",currentWallet.nettype);
@@ -279,29 +336,55 @@ Rectangle {
         ColumnLayout {
             id: blockchainFolderRow
             visible: !isMobile && !persistentSettings.useRemoteNode
-            Label {
-                id: blockchainFolderLabel
-                text: qsTr("Blockchain location") + translationManager.emptyString
-            }
-            LineEdit {
-                id: blockchainFolder
-                Layout.preferredWidth:  200
-                Layout.fillWidth: true
-                labelText: qsTr("Blockchain location") + translationManager.emptyString
-                text: persistentSettings.blockchainDataDir
-                placeholderText: qsTr("(optional)") + translationManager.emptyString
 
-                MouseArea {
+            RowLayout {
-                    anchors.fill: parent
+                Layout.fillWidth: true
+                Layout.bottomMargin: 14 * scaleRatio
+
+                LabelSubheader {
+                    text: qsTr("Blockchain location") + translationManager.emptyString
+                }
+            }
+
+            RowLayout {
+                visible: persistentSettings.blockchainDataDir.length > 0
+
+                LineEdit {
+                    id: blockchainFolder
+                    Layout.preferredWidth: 200
+
+                    Layout.fillWidth: true
+                    text: persistentSettings.blockchainDataDir;
+                    placeholderText: qsTr("(optional)") + translationManager.emptyString
+                }
+            }
+
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+                StandardButton {
+                    id: blockchainFolderButton
+                    small: true
+                    visible: true
+                    text: qsTr("Change location") + translationManager.emptyString
                     onClicked: {
-                        mouse.accepted = false
+                        //mouse.accepted = false
                         if(persistentSettings.blockchainDataDir != "")
                             blockchainFileDialog.folder = "file://" + persistentSettings.blockchainDataDir
                         blockchainFileDialog.open()
                         blockchainFolder.focus = true
                     }
                 }
+            }
+        }
 
+        RowLayout {
+            visible: daemonAdvanced.checked && !isMobile
+            Layout.fillWidth: true
+            Layout.bottomMargin: 0 * scaleRatio
+
+            LabelSubheader {
+                text: qsTr("Advanced daemon options") + translationManager.emptyString
             }
         }
 
@@ -315,131 +398,38 @@ Rectangle {
         RowLayout {
             visible: daemonAdvanced.checked && !isMobile && !persistentSettings.useRemoteNode
             id: daemonFlagsRow
-            Label {
+
-                id: daemonFlagsLabel
-                fontSize: 16 * scaleRatio
-                text: qsTr("Local daemon startup flags") + translationManager.emptyString
-            }
             LineEdit {
                 id: daemonFlags
                 Layout.preferredWidth:  200
                 Layout.fillWidth: true
+                labelText: qsTr("Local daemon startup flags") + translationManager.emptyString
                 text: appWindow.persistentSettings.daemonFlags;
                 placeholderText: qsTr("(optional)") + translationManager.emptyString
             }
         }
 
-        RowLayout {
-            Layout.fillWidth: true
-            visible: (daemonAdvanced.checked || isMobile) && persistentSettings.useRemoteNode
-            Label {
-                id: daemonLoginLabel
-                fontSize: 16 * scaleRatio
-                Layout.fillWidth: true
-                text: qsTr("Node login (optional)") + translationManager.emptyString
-            }
-        }
-
         ColumnLayout {
             visible: (daemonAdvanced.checked || isMobile) && persistentSettings.useRemoteNode
-            LineEdit {
+            GridLayout {
-                id: daemonUsername
+                columns: (isMobile) ? 1 : 2
-                Layout.preferredWidth:  100 * scaleRatio
+                columnSpacing: 32
-                Layout.fillWidth: true
-                text: persistentSettings.daemonUsername
-                placeholderText: qsTr("Username") + translationManager.emptyString
-            }
 
-            LineEdit {
+                LineEdit {
-                id: daemonPassword
+                    id: daemonUsername
-                Layout.preferredWidth: 100 * scaleRatio
-                Layout.fillWidth: true
-                text: persistentSettings.daemonPassword
-                placeholderText: qsTr("Password") + translationManager.emptyString
-                echoMode: TextInput.Password
-            }
-        }
-
-        RowLayout {
-            visible: !isMobile && !persistentSettings.useRemoteNode
-            ColumnLayout {
-                Label {
-                    color: "#4A4949"
-                    text: qsTr("Bootstrap node (leave blank if not wanted)") + translationManager.emptyString
-                }
-                RemoteNodeEdit {
-                    id: bootstrapNodeEdit
-                    Layout.minimumWidth: 100 * scaleRatio
-                    daemonAddrText: persistentSettings.bootstrapNodeAddress.split(":")[0].trim()
-                    daemonPortText: (persistentSettings.bootstrapNodeAddress.split(":")[1].trim() == "") ? "18081" : persistentSettings.bootstrapNodeAddress.split(":")[1]
-                    onEditingFinished: {
-                        persistentSettings.bootstrapNodeAddress = daemonAddrText ? bootstrapNodeEdit.getAddress() : "";
-                        console.log("setting bootstrap node to " + persistentSettings.bootstrapNodeAddress)
-                    }
-                }
-            }
-        }
-
-        RowLayout {
-            visible: persistentSettings.useRemoteNode
-            ColumnLayout {
-                Label {
-                    id: remoteNodeLabel
-                    fontSize: 22 * scaleRatio
-                    text: qsTr("Remote node") + translationManager.emptyString
-                }
-
-                Rectangle {
-                    anchors.top: remoteNodeLabel.bottom
-                    anchors.topMargin: 4
-                    anchors.left: parent.left
-                    anchors.right: parent.right
                     Layout.fillWidth: true
-                    height: 2
+                    labelText: "Daemon username"
-                    color: Style.dividerColor
+                    text: persistentSettings.daemonUsername
-                    opacity: Style.dividerOpacity
+                    placeholderText: qsTr("Username") + translationManager.emptyString
                 }
-            }
-        }
 
-        RowLayout {
+                LineEdit {
-            visible: persistentSettings.useRemoteNode
+                    id: daemonPassword
-            ColumnLayout {
+                    Layout.fillWidth: true
-                Layout.fillWidth: true
+                    labelText: "Daemon password"
-
+                    text: persistentSettings.daemonPassword
-                RemoteNodeEdit {
+                    placeholderText: qsTr("Password") + translationManager.emptyString
-                    id: remoteNodeEdit
+                    echoMode: TextInput.Password
-                    Layout.minimumWidth: 100 * scaleRatio
-                    property var rna: persistentSettings.remoteNodeAddress
-                    daemonAddrText: rna.search(":") != -1 ? rna.split(":")[0].trim() : ""
-                    daemonPortText: rna.search(":") != -1 ? (rna.split(":")[1].trim() == "") ? "18081" : rna.split(":")[1] : ""
-                    daemonAddrLabelText: qsTr("Address")
-                    daemonPortLabelText: qsTr("Port")
-                    onEditingFinished: {
-                        persistentSettings.remoteNodeAddress = remoteNodeEdit.getAddress();
-                        console.log("setting remote node to " + persistentSettings.remoteNodeAddress)
-                    }
-                }
-            }
-        }
-
-        RowLayout{
-            visible: persistentSettings.useRemoteNode
-            Layout.fillWidth: true
-
-            StandardButton {
-                id: remoteNodeSave
-                text: qsTr("Connect") + translationManager.emptyString
-                onClicked: {
-                    // Update daemon login
-                    persistentSettings.remoteNodeAddress = remoteNodeEdit.getAddress();
-                    persistentSettings.daemonUsername = daemonUsername.text;
-                    persistentSettings.daemonPassword = daemonPassword.text;
-                    persistentSettings.useRemoteNode = true
-
-                    currentWallet.setDaemonLogin(persistentSettings.daemonUsername, persistentSettings.daemonPassword);
-
-                    appWindow.connectRemoteNode()
                 }
             }
         }
@@ -450,8 +440,6 @@ Rectangle {
                 id: layoutSettingsLabel
                 fontSize: 22 * scaleRatio
                 text: qsTr("Layout settings") + translationManager.emptyString
-                anchors.topMargin: 30 * scaleRatio
-                Layout.topMargin: 30 * scaleRatio
             }
 
             Rectangle {
@@ -483,8 +471,6 @@ Rectangle {
                 id: logLevelLabel
                 fontSize: 22 * scaleRatio
                 text: qsTr("Log level") + translationManager.emptyString
-                anchors.topMargin: 30 * scaleRatio
-                Layout.topMargin: 30 * scaleRatio
             }
 
             Rectangle {
@@ -555,12 +541,11 @@ Rectangle {
         ColumnLayout {
             LineEdit {
                 id: logCategories
-                Layout.topMargin: 16 * scaleRatio
                 Layout.fillWidth: true
                 text: appWindow.persistentSettings.logCategories
                 labelText: "Log Categories"
                 placeholderText: qsTr("(e.g. *:WARNING,net.p2p:DEBUG)") + translationManager.emptyString
-                enabled: logLevel.currentIndex == 5
+                enabled: logLevelDropdown.currentIndex === 5
                 onEditingFinished: {
                     if(enabled) {
                         console.log("log categories changed: ", text);
@@ -632,6 +617,7 @@ Rectangle {
 
             StandardButton {
                 id: restoreHeightSave
+                small: true
                 Layout.fillWidth: false
                 Layout.leftMargin: 30
                 text: qsTr("Save") + translationManager.emptyString
@@ -703,7 +689,8 @@ Rectangle {
         folder: "file://" + persistentSettings.blockchainDataDir
 
         onAccepted: {
-            var dataDir = walletManager.urlToLocalPath(blockchainFileDialog.fileUrl)
+            var dataDir = walletManager.urlToLocalPath(blockchainFileDialog.fileUrl);
+            console.log(dataDir);
             var validator = daemonManager.validateDataDir(dataDir);
             if(!validator.valid) {
 

qml.qrc

@@ -194,5 +194,6 @@
         <file>images/checkedIcon-black.png</file>
         <file>components/LineEditMulti.qml</file>
         <file>components/LabelButton.qml</file>
+        <file>components/LabelSubheader.qml</file>
     </qresource>
 </RCC>