Wizard redesign

10 files changed, 304 insertions, 53 deletions

diff --git a/components/InlineButton.qml b/components/InlineButton.qml
index 7bd1f7d2..e894e14d 100644
--- a/components/InlineButton.qml
+++ b/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
diff --git a/components/InputMulti.qml b/components/InputMulti.qml
index 8712a69c..e497e18b 100644
--- a/components/InputMulti.qml
+++ b/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 }`
diff --git a/components/LanguageSidebar.qml b/components/LanguageSidebar.qml
new file mode 100644
index 00000000..7d45d68b
--- /dev/null
+++ b/components/LanguageSidebar.qml
@@ -0,0 +1,170 @@
+// 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 - (persistentSettings.customDecorations ? 50 : 0)
+    y: titleBar.height
+
+    background: Rectangle {
+        color: "#0d0d0d"
+        width: parent.width
+    }
+
+    Rectangle {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        color: "red"
+
+        ListView {
+            clip: true
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            boundsBehavior: Flickable.StopAtBounds
+            width: sideBar.width
+            height: sideBar.height
+
+            model: langModel
+
+            delegate: Rectangle {
+                id: item
+                color: "transparent"
+                width: sideBar.width
+                height: 32 * scaleRatio
+
+                Text {
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16 * scaleRatio
+                    font.bold: true
+                    font.pixelSize: 14 * scaleRatio
+                    color: MoneroComponents.Style.defaultFontColor
+                    text: display_name
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                Rectangle {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    color: MoneroComponents.Style.dividerColor
+                    opacity: MoneroComponents.Style.dividerOpacity
+                    height: 1
+                }
+
+                // button gradient while checked
+                Image {
+                    anchors.fill: parent
+                    source: "../images/menuButtonGradient.png"
+                    opacity: 0.65
+                    visible: true
+
+                    MouseArea {
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            var locale_spl = locale.split("_");
+
+                            // reload active translations
+                            console.log(locale_spl[0]);
+                            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()
+                        }
+                        hoverEnabled: true
+                        onEntered: {
+                            // item.color = "#26FFFFFF"
+                            parent.opacity = 1
+                        }
+                        onExited: {
+                            // item.color = "transparent"
+                            parent.opacity = 0.65
+                        }
+                    }
+                }
+            }
+
+            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 available: ",count);
+            }
+        }
+    }
+}
diff --git a/components/LineEdit.qml b/components/LineEdit.qml
index b9e137bb..883066bf 100644
--- a/components/LineEdit.qml
+++ b/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
         }
     }
 }
diff --git a/components/LineEditMulti.qml b/components/LineEditMulti.qml
index 73033c7e..e27e3008 100644
--- a/components/LineEditMulti.qml
+++ b/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
         }
diff --git a/components/NetworkStatusItem.qml b/components/NetworkStatusItem.qml
index 965948bd..a1994398 100644
--- a/components/NetworkStatusItem.qml
+++ b/components/NetworkStatusItem.qml
@@ -47,8 +47,13 @@ Rectangle {
         }
         if (status == Wallet.ConnectionStatus_WrongVersion)
             return qsTr("Wrong version")
-        if (status == Wallet.ConnectionStatus_Disconnected)
+        if (status == Wallet.ConnectionStatus_Disconnected){
+            if(appWindow.walletMode <= 1){
+                return qsTr("Searching node") + translationManager.emptyString;
+            }
             return qsTr("Disconnected")
+        }
+
         return qsTr("Invalid connection status")
     }
 
diff --git a/components/RemoteNodeEdit.qml b/components/RemoteNodeEdit.qml
index 52b3b46e..46e9fe3c 100644
--- a/components/RemoteNodeEdit.qml
+++ b/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 {
diff --git a/components/Style.qml b/components/Style.qml
index b5926dab..52b49287 100644
--- a/components/Style.qml
+++ b/components/Style.qml
@@ -16,6 +16,7 @@ QtObject {
 
     property string defaultFontColor: "white"
     property string dimmedFontColor: "#BBBBBB"
+    property string lightGreyFontColor: "#DFDFDF"
     property string errorColor: "#FA6800"
     property string inputBoxBackground: "black"
     property string inputBoxBackgroundError: "#FFDDDD"
diff --git a/components/TitleBar.qml b/components/TitleBar.qml
index 6c9bfb1e..65398d71 100644
--- a/components/TitleBar.qml
+++ b/components/TitleBar.qml
@@ -126,37 +126,88 @@ Rectangle {
         z: parent.z + 1
     }
 
-    // collapse left panel
-    Rectangle {
-        id: goToBasicVersionButton
-        property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
-        property bool checked: false
-        anchors.top: parent.top
+    RowLayout {
         anchors.left: parent.left
-        color:  "transparent"
-        height: titleBar.height
-        width: height
-        visible: !titleBar.orange && titleBar.basicButtonVisible
+        anchors.top: parent.top
+        width: 40
+        height: parent.height
+        spacing: 0
         z: parent.z + 2
 
-        Image {
-            width: 14
-            height: 14
-            anchors.centerIn: parent
-            source: "../images/expand.png"
+        Rectangle {
+            Layout.preferredHeight: parent.height
+            Layout.preferredWidth: Layout.preferredHeight
+
+            id: goToBasicVersionButton
+            property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
+            property bool checked: false
+            color:  "transparent"
+            height: titleBar.height
+            width: height
+            visible: !titleBar.orange && titleBar.basicButtonVisible
+
+            Image {
+                width: 14
+                height: 14
+                anchors.centerIn: parent
+                source: "../images/expand.png"
+            }
+
+            MouseArea {
+                id: basicMouseArea
+                hoverEnabled: true
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor }
+                onExited: goToBasicVersionButton.color = "transparent";
+                onClicked: {
+                    releaseFocus()
+                    parent.checked = !parent.checked
+                    titleBar.goToBasicVersion(leftPanel.visible)
+                }
+            }
         }
 
-        MouseArea {
-            id: basicMouseArea
-            hoverEnabled: true
-            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
-            onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor }
-            onExited: goToBasicVersionButton.color = "transparent";
-            onClicked: {
-                releaseFocus()
-                parent.checked = !parent.checked
-                titleBar.goToBasicVersion(leftPanel.visible)
+        // language selection
+        Rectangle {
+            Layout.preferredHeight: parent.height
+            Layout.preferredWidth: Layout.preferredHeight
+            visible: !titleBar.orange && persistentSettings.customDecorations
+
+            id: languageSelection
+            property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
+            property bool checked: false
+            color:  "transparent"
+            height: titleBar.height
+            width: height
+            z: parent.z + 2
+
+            Image {
+                width: 14
+                height: 14
+                anchors.centerIn: parent
+                source: "../images/langFlagGrey.png"
+            }
+
+            MouseArea {
+                hoverEnabled: true
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onEntered: parent.color = "#262626";
+                onExited: parent.color = "transparent";
+                onClicked: {
+                    releaseFocus();
+
+                    // Show welcome screen if on home
+                    if(wizard.wizardState === "wizardHome" || wizard.wizardState === "wizardModeSelection"){
+                        wizard.skipModeSelection = true;
+                        wizard.wizardState = 'wizardLanguage';
+                        return;
+                    }
+
+                    languageSidebar.isOpened ? languageSidebar.close() : languageSidebar.open();
+                    console.log('change language');
+                }
             }
         }
     }
diff --git a/components/WarningBox.qml b/components/WarningBox.qml
index db0673da..bc85975c 100644
--- a/components/WarningBox.qml
+++ b/components/WarningBox.qml
@@ -28,12 +28,12 @@ Rectangle {
 
         Image {
             Layout.alignment: Qt.AlignVCenter
-            Layout.preferredHeight: 33
-            Layout.preferredWidth: 33
-            Layout.rightMargin: 14
-            Layout.leftMargin: 14
-            Layout.topMargin: 12
-            Layout.bottomMargin: 12
+            Layout.preferredHeight: 33 * scaleRatio
+            Layout.preferredWidth: 33 * scaleRatio
+            Layout.rightMargin: 12 * scaleRatio
+            Layout.leftMargin: 18 * scaleRatio
+            Layout.topMargin: 12 * scaleRatio
+            Layout.bottomMargin: 12 * scaleRatio
             source: "../images/warning.png"
         }
 
@@ -44,22 +44,19 @@ Rectangle {
             font.family: MoneroComponents.Style.fontRegular.name
             font.pixelSize: root.fontSize
             horizontalAlignment: TextInput.AlignLeft
-            selectionColor: MoneroComponents.Style.dimmedFontColor
             selectByMouse: true
             textFormat: Text.RichText
             wrapMode: Text.WordWrap
             textMargin: 0
-            leftPadding: 0
-            topPadding: 6
+            leftPadding: 4 * scaleRatio
+            rightPadding: 18 * scaleRatio
+            topPadding: 10 * scaleRatio
+            bottomPadding: 10 * scaleRatio
             readOnly: true
             onLinkActivated: root.linkActivated();
 
-            // @TODO: Legacy. Remove after Qt 5.8.
-            // https://stackoverflow.com/questions/41990013
-            MouseArea {
-                anchors.fill: parent
-                enabled: false
-            }
+            selectionColor: MoneroComponents.Style.dimmedFontColor
+            selectedTextColor: MoneroComponents.Style.defaultFontColor
         }
     }
 }