use fancyheader also for the connect page

nymea-app/resources.qrc

@@ -136,7 +136,6 @@
         <file>ui/devicepages/StateLogPage.qml</file>
         <file>ui/customviews/GenericTypeLogView.qml</file>
         <file>qtquickcontrols2.conf</file>
-        <file>ui/BluetoothDiscoveryPage.qml</file>
         <file>ui/images/bluetooth.svg</file>
         <file>ui/images/refresh.svg</file>
         <file>ui/WirelessControlerPage.qml</file>
@@ -213,5 +212,7 @@
         <file>ui/components/EmptyViewPlaceholder.qml</file>
         <file>ui/components/RemoveDeviceMethodDialog.qml</file>
         <file>ui/components/FancyHeader.qml</file>
+        <file>ui/connection/ManualConnectPage.qml</file>
+        <file>ui/connection/BluetoothDiscoveryPage.qml</file>
     </qresource>
 </RCC>

nymea-app/ui/ConnectPage.qml

@@ -76,11 +76,26 @@ Page {
 
         Page {
             objectName: "discoveryPage"
-            header: GuhHeader {
+            header: FancyHeader {
-                text: qsTr("Connect %1").arg(app.systemName)
+                title: qsTr("Connect %1").arg(app.systemName)
-                backButtonVisible: false
+                model: ListModel {
-                menuButtonVisible: true
+                    ListElement { iconSource: "../images/network-vpn.svg"; text: qsTr("Manual connection"); page: "connection/ManualConnectPage.qml" }
-                onMenuPressed: connectionMenu.open()
+                    ListElement { iconSource: "../images/bluetooth.svg"; text: qsTr("Wireless setup"); page: "connection/BluetoothDiscoveryPage.qml" }
+                    ListElement { iconSource: "../images/private-browsing.svg"; text: qsTr("Demo mode"); page: "" }
+                    ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "AppSettingsPage.qml" }
+                }
+                onClicked: {
+                    switch (index) {
+                    case 0:
+                    case 1:
+                    case 3:
+                        pageStack.push(model.get(index).page);
+                        break;
+                    case 2:
+                        Engine.connection.connect("nymea://nymea.nymea.io:2222")
+                        break;
+                    }
+                }
             }
 
             Timer {
@@ -90,41 +105,6 @@ Page {
                 running: true
             }
 
-            Menu {
-                id: connectionMenu
-                objectName: "connectionMenu"
-                width: implicitWidth + app.margins
-
-                IconMenuItem {
-                    objectName: "manualConnectMenuItem"
-                    iconSource: "../images/network-vpn.svg"
-                    text: qsTr("Manual connection")
-                    onTriggered: pageStack.push(manualConnectPage)
-                }
-
-                IconMenuItem {
-                    iconSource: "../images/bluetooth.svg"
-                    text: qsTr("Wireless setup")
-                    onTriggered: pageStack.push(Qt.resolvedUrl("BluetoothDiscoveryPage.qml"))
-                }
-
-                IconMenuItem {
-                    iconSource: "../images/private-browsing.svg"
-                    text: qsTr("Demo mode")
-                    onTriggered: {
-                        pageStack.push(connectingPage)
-                        Engine.connection.connect("nymea://nymea.nymea.io:2222")
-                    }
-                }
-
-                MenuSeparator { }
-
-                IconMenuItem {
-                    iconSource: "../images/stock_application.svg"
-                    text: qsTr("App settings")
-                    onTriggered: pageStack.push(Qt.resolvedUrl("AppSettingsPage.qml"))
-                }
-            }
 
             ColumnLayout {
                 anchors.fill: parent
@@ -304,107 +284,6 @@ Page {
         }
     }
 
-
-    Component {
-        id: manualConnectPage
-
-        Page {
-            objectName: "manualConnectPage"
-            header: GuhHeader {
-                text: qsTr("Manual connection")
-                onBackPressed: pageStack.pop()
-            }
-
-            ColumnLayout {
-                anchors { left: parent.left; top: parent.top; right: parent.right }
-                anchors.margins: app.margins
-                spacing: app.margins
-
-                GridLayout {
-                    columns: 2
-
-                    Label {
-                        text: qsTr("Protocol")
-                    }
-
-                    ComboBox {
-                        id: connectionTypeComboBox
-                        Layout.fillWidth: true
-                        model: [ qsTr("TCP"), qsTr("Websocket") ]
-                    }
-
-                    Label { text: qsTr("Address:") }
-                    TextField {
-                        id: addressTextInput
-                        objectName: "addressTextInput"
-                        Layout.fillWidth: true
-                        placeholderText: "127.0.0.1"
-                    }
-
-                    Label { text: qsTr("Port:") }
-                    TextField {
-                        id: portTextInput
-                        Layout.fillWidth: true
-                        placeholderText: connectionTypeComboBox.currentIndex === 0 ? "2222" : "4444"
-                        validator: IntValidator{bottom: 1; top: 65535;}
-                    }
-
-                    Label {
-                        Layout.fillWidth: true
-                        text: qsTr("Encrypted connection:")
-                    }
-                    CheckBox {
-                        id: secureCheckBox
-                        checked: true
-                    }
-                }
-
-
-                Button {
-                    text: qsTr("Connect")
-                    objectName: "connectButton"
-                    Layout.fillWidth: true
-                    onClicked: {
-                        var rpcUrl
-                        var hostAddress
-                        var port
-
-                        // Set default to placeholder
-                        if (addressTextInput.text === "") {
-                            hostAddress = addressTextInput.placeholderText
-                        } else {
-                            hostAddress = addressTextInput.text
-                        }
-
-                        if (portTextInput.text === "") {
-                            port = portTextInput.placeholderText
-                        } else {
-                            port = portTextInput.text
-                        }
-
-                        if (connectionTypeComboBox.currentIndex == 0) {
-                            if (secureCheckBox.checked) {
-                                rpcUrl = "nymeas://" + hostAddress + ":" + port
-                            } else {
-                                rpcUrl = "nymea://" + hostAddress + ":" + port
-                            }
-                        } else if (connectionTypeComboBox.currentIndex == 1) {
-                            if (secureCheckBox.checked) {
-                                rpcUrl = "wss://" + hostAddress + ":" + port
-                            } else {
-                                rpcUrl = "ws://" + hostAddress + ":" + port
-                            }
-                        }
-
-                        print("Try to connect ", rpcUrl)
-                        Engine.connection.connect(rpcUrl)
-                        pageStack.push(connectingPage)
-                    }
-                }
-            }
-        }
-    }
-
     Component {
         id: connectingPage
         Page {

nymea-app/ui/MainPage.qml

@@ -14,10 +14,14 @@ Page {
         title: swipeView.currentItem.title
 
         model: ListModel {
-            ListElement { iconSource: "../images/share.svg"; text: qsTr("Configure things"); page: "../EditDevicesPage.qml" }
+            ListElement { iconSource: "../images/share.svg"; text: qsTr("Configure things"); page: "EditDevicesPage.qml" }
-            ListElement { iconSource: "../images/magic.svg"; text: qsTr("Magic"); page: "../MagicPage.qml" }
+            ListElement { iconSource: "../images/magic.svg"; text: qsTr("Magic"); page: "MagicPage.qml" }
-            ListElement { iconSource: "../images/settings.svg"; text: qsTr("System settings"); page: "../SettingsPage.qml" }
+            ListElement { iconSource: "../images/settings.svg"; text: qsTr("System settings"); page: "SettingsPage.qml" }
-            ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "../AppSettingsPage.qml" }
+            ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "AppSettingsPage.qml" }
+        }
+
+        onClicked: {
+            pageStack.push(model.get(index).page)
         }
     }
 

nymea-app/ui/components/FancyHeader.qml

@@ -10,6 +10,8 @@ ToolBar {
     property string title
     property alias model: menuRepeater.model
 
+    signal clicked(int index);
+
     QtObject {
         id: d
         property bool menuOpen: false
@@ -87,7 +89,7 @@ ToolBar {
 
                     onClicked: {
                         d.menuOpen = false
-                        pageStack.push(model.page)
+                        root.clicked(index)
                     }
 
                     Rectangle {

nymea-app/ui/connection/BluetoothDiscoveryPage.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.4
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.2
-import "components"
+import "../components"
 import Nymea 1.0
 
 
@@ -12,7 +12,7 @@ Page {
         onBackPressed: pageStack.pop()
 
         HeaderButton {
-            imageSource: Qt.resolvedUrl("images/refresh.svg")
+            imageSource: Qt.resolvedUrl("../images/refresh.svg")
             onClicked: Engine.bluetoothDiscovery.start()
         }
     }
@@ -68,7 +68,7 @@ Page {
 
             delegate: MeaListItemDelegate {
                 width: parent.width
-                iconName: Qt.resolvedUrl("images/bluetooth.svg")
+                iconName: Qt.resolvedUrl("../images/bluetooth.svg")
                 text: model.name
                 subText: model.address
 
@@ -138,7 +138,7 @@ Page {
                         sourceSize.height: 540
                         fillMode: Image.PreserveAspectFit
                         Layout.alignment: Qt.AlignHCenter
-                        source: "images/rpi-setup.svg"
+                        source: "../images/rpi-setup.svg"
                     }
                     ThinDivider {}
                     Label {
@@ -164,7 +164,7 @@ Page {
                         sourceSize.height: width
                         fillMode: Image.PreserveAspectFit
                         Layout.alignment: Qt.AlignHCenter
-                        source: "images/nymea-box-setup.svg"
+                        source: "../images/nymea-box-setup.svg"
                     }
                 }
             }

nymea-app/ui/connection/ManualConnectPage.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import Nymea 1.0
+import "../components"
+
+Page {
+    objectName: "manualConnectPage"
+    header: GuhHeader {
+        text: qsTr("Manual connection")
+        onBackPressed: pageStack.pop()
+    }
+
+    ColumnLayout {
+        anchors { left: parent.left; top: parent.top; right: parent.right }
+        anchors.margins: app.margins
+        spacing: app.margins
+
+        GridLayout {
+            columns: 2
+
+            Label {
+                text: qsTr("Protocol")
+            }
+
+            ComboBox {
+                id: connectionTypeComboBox
+                Layout.fillWidth: true
+                model: [ qsTr("TCP"), qsTr("Websocket") ]
+            }
+
+            Label { text: qsTr("Address:") }
+            TextField {
+                id: addressTextInput
+                objectName: "addressTextInput"
+                Layout.fillWidth: true
+                placeholderText: "127.0.0.1"
+            }
+
+            Label { text: qsTr("Port:") }
+            TextField {
+                id: portTextInput
+                Layout.fillWidth: true
+                placeholderText: connectionTypeComboBox.currentIndex === 0 ? "2222" : "4444"
+                validator: IntValidator{bottom: 1; top: 65535;}
+            }
+
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("Encrypted connection:")
+            }
+            CheckBox {
+                id: secureCheckBox
+                checked: true
+            }
+        }
+
+
+        Button {
+            text: qsTr("Connect")
+            objectName: "connectButton"
+            Layout.fillWidth: true
+            onClicked: {
+                var rpcUrl
+                var hostAddress
+                var port
+
+                // Set default to placeholder
+                if (addressTextInput.text === "") {
+                    hostAddress = addressTextInput.placeholderText
+                } else {
+                    hostAddress = addressTextInput.text
+                }
+
+                if (portTextInput.text === "") {
+                    port = portTextInput.placeholderText
+                } else {
+                    port = portTextInput.text
+                }
+
+                if (connectionTypeComboBox.currentIndex == 0) {
+                    if (secureCheckBox.checked) {
+                        rpcUrl = "nymeas://" + hostAddress + ":" + port
+                    } else {
+                        rpcUrl = "nymea://" + hostAddress + ":" + port
+                    }
+                } else if (connectionTypeComboBox.currentIndex == 1) {
+                    if (secureCheckBox.checked) {
+                        rpcUrl = "wss://" + hostAddress + ":" + port
+                    } else {
+                        rpcUrl = "ws://" + hostAddress + ":" + port
+                    }
+                }
+
+                print("Try to connect ", rpcUrl)
+                Engine.connection.connect(rpcUrl)
+                pageStack.push(connectingPage)
+            }
+        }
+    }
+}