Wizard redesign

components/InlineButton.qml

@@ -33,14 +33,20 @@ import "../components" as MoneroComponents
 
 Item {
     id: inlineButton
-    height: rect.height * scaleRatio
+    height: parent.height
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+
+    property bool small: false
     property string shadowPressedColor: "#B32D00"
     property string shadowReleasedColor: "#FF4304"
     property string pressedColor: "#FF4304"
     property string releasedColor: "#FF6C3C"
     property string icon: ""
     property string textColor: "#FFFFFF"
-    property int fontSize: 12 * scaleRatio
+    property int fontSize: small ? 14 * scaleRatio : 16 * scaleRatio
+    property int rectHeight: small ? 24 * scaleRatio : 28 * scaleRatio
+    property int rectHMargin: small ? 16 * scaleRatio : 22 * scaleRatio
     property alias text: inlineText.text
     property alias buttonColor: rect.color
     signal clicked()
@@ -59,14 +65,14 @@ Item {
         width: inlineText.text ? (inlineText.width + 22) * scaleRatio : inlineButton.icon ? (inlineImage.width + 16) * scaleRatio : rect.height
         radius: 4
 
-        anchors.top: parent.top
+        anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
 
         Text {
             id: inlineText
             font.family: MoneroComponents.Style.fontBold.name
             font.bold: true
-            font.pixelSize: 16 * scaleRatio
+            font.pixelSize: inlineButton.fontSize
             color: "black"
             anchors.verticalCenter: parent.verticalCenter
             anchors.horizontalCenter: parent.horizontalCenter

components/InputMulti.qml

@@ -51,6 +51,9 @@ TextArea {
     selectionColor: MoneroComponents.Style.dimmedFontColor
     selectedTextColor: MoneroComponents.Style.defaultFontColor
 
+    property int minimumHeight: 100 * scaleRatio
+    height: contentHeight > minimumHeight ? contentHeight : minimumHeight
+
     onTextChanged: {
         if(addressValidation){
             // js replacement for `RegExpValidator { regExp: /[0-9A-Fa-f]{95}/g }`

components/LanguageSidebar.qml

@@ -0,0 +1,159 @@
+// Copyright (c) 2014-2019, 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 "../components" as MoneroComponents
+
+import QtQuick 2.7
+import QtQuick.XmlListModel 2.0
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.0
+
+
+Drawer {
+    id: sideBar
+
+    // @TODO: Qt 5.10 introduces `opened` built-in for Drawer
+    property bool isOpened: false
+
+    onClosed: {
+        isOpened = false;
+    }
+
+    onOpened: {
+        isOpened = true;
+    }
+
+    width: 240 * scaleRatio
+    height: parent.height - 50
+    y: titleBar.height
+
+    background: Rectangle {
+        color: "#0d0d0d"
+        width: parent.width
+    }
+
+    ColumnLayout {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        spacing: 0
+
+        ListView {
+            clip: true
+            boundsBehavior: Flickable.StopAtBounds
+            anchors.top: parent.top
+            width: sideBar.width
+            height: sideBar.height
+
+            model: langModel
+
+            delegate: ColumnLayout {
+                width: sideBar.width
+                spacing: 0
+
+                Text {
+                    Layout.topMargin: 8 * scaleRatio
+                    Layout.bottomMargin: 8 * scaleRatio
+                    Layout.leftMargin: 20 * scaleRatio
+                    font.bold: true
+                    font.pixelSize: 14 * scaleRatio
+                    color: MoneroComponents.Style.defaultFontColor
+                    text: display_name
+                }
+
+                Rectangle {
+                    color: MoneroComponents.Style.dividerColor
+                    opacity: MoneroComponents.Style.dividerOpacity
+                    Layout.preferredHeight: 1
+                    Layout.fillWidth: true
+                }
+
+                // button gradient while checked
+                Image {
+                    anchors.fill: parent
+                    source: "../images/menuButtonGradient.png"
+                    opacity: 0.75
+                    visible: true
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            var locale_spl = locale.split("_");
+
+                            // reload active translations
+                            translationManager.setLanguage(locale_spl[0]);
+
+                            // set wizard language settings
+                            wizard.language_locale = locale;
+                            wizard.language_wallet = wallet_language;
+                            wizard.language_language = display_name + " (" + locale_spl[1] + ") ";
+                            sideBar.close()
+                        }
+                    }
+                }
+            }
+
+            ScrollIndicator.vertical: ScrollIndicator {
+                // @TODO: QT 5.9 introduces `policy: ScrollBar.AlwaysOn`
+                active: true
+                contentItem.opacity: 0.7
+                onActiveChanged: {
+                    if (!active) {
+                        active = true;
+                    }
+                }
+            }
+        }
+    }
+
+    // Flags model
+    XmlListModel {
+        id: langModel
+        source: "/lang/languages.xml"
+        query: "/languages/language"
+
+        XmlRole { name: "display_name"; query: "@display_name/string()" }
+        XmlRole { name: "locale"; query: "@locale/string()" }
+        XmlRole { name: "wallet_language"; query: "@wallet_language/string()" }
+        XmlRole { name: "flag"; query: "@flag/string()" }
+        // TODO: XmlListModel is read only, we should store current language somewhere else
+        // and set current language accordingly
+        XmlRole { name: "isCurrent"; query: "@enabled/string()" }
+
+        onStatusChanged: {
+            if(status === XmlListModel.Ready){
+                console.log("languages availible: ",count);
+                if(count === 1){
+                    console.log("Skipping language page until more languages are availible")
+                    wizard.switchPage(true);
+                }
+            }
+        }
+    }
+}

components/LineEdit.qml

@@ -54,7 +54,9 @@ Item {
 
     property bool borderDisabled: false
     property string borderColor: {
-        if(input.activeFocus){
+        if(error && input.text !== ""){
+            return MoneroComponents.Style.inputBorderColorInvalid;
+        } else if(input.activeFocus){
             return MoneroComponents.Style.inputBorderColorActive;
         } else {
             return MoneroComponents.Style.inputBorderColorInActive;
@@ -211,8 +213,6 @@ Item {
             visible: item.inlineButtonText ? true : false
             anchors.right: parent.right
             anchors.rightMargin: 8 * scaleRatio
-            anchors.top: parent.top
-            anchors.topMargin: 6 * scaleRatio
         }
     }
 }

components/LineEditMulti.qml

@@ -42,6 +42,12 @@ ColumnLayout {
     property alias labelButtonText: labelButton.text
     property alias placeholderText: placeholderLabel.text
 
+    property int inputPaddingLeft: 10 * scaleRatio
+    property int inputPaddingRight: 10 * scaleRatio
+    property int inputPaddingTop: 10 * scaleRatio
+    property int inputPaddingBottom: 10 * scaleRatio
+    property int inputRadius: 4
+
     property bool placeholderCenter: false
     property string placeholderFontFamily: MoneroComponents.Style.fontRegular.name
     property bool placeholderFontBold: false
@@ -153,8 +159,12 @@ ColumnLayout {
         readOnly: false
         addressValidation: false
         Layout.fillWidth: true
-        topPadding: 10 * scaleRatio
-        bottomPadding: 10 * scaleRatio
+
+        leftPadding: item.inputPaddingLeft
+        rightPadding: item.inputPaddingRight
+        topPadding: item.inputPaddingTop
+        bottomPadding: item.inputPaddingBottom
+
         wrapMode: item.wrapMode
         fontSize: item.fontSize
         fontBold: item.fontBold
@@ -182,7 +192,7 @@ ColumnLayout {
             color: "transparent"
             border.width: 1
             border.color: item.borderColor
-            radius: 4
+            radius: item.inputRadius
             anchors.fill: parent
             visible: !item.borderDisabled
         }

components/RemoteNodeEdit.qml

@@ -31,6 +31,7 @@ import QtQuick.Controls.Styles 1.2
 import QtQuick 2.2
 import QtQuick.Layouts 1.1
 
+import "../js/Utils.js" as Utils
 import "../components" as MoneroComponents
 
 GridLayout {
@@ -65,7 +66,14 @@ GridLayout {
     }
 
     function getAddress() {
-        return daemonAddr.text.trim() + ":" + daemonPort.text.trim()
+        var addr = daemonAddr.text.trim();
+        var port = daemonPort.text.trim();
+
+        // validation
+        if(addr === "" || addr.length < 2) return "";
+        if(!Utils.isNumeric(port)) return "";
+
+        return addr + ":" + port;
     }
 
     LineEdit {