Update API and settings UI

Implemented new UI design for Settings and minor changes to API

Task-number: QTBUG-63091
Change-Id: Id72e20b53bc33ca0a3068d1e9b664fc5836a1cda
Reviewed-by: Kari Oikarinen <kari.oikarinen@qt.io>
Reviewed-by: Teemu Holappa <teemu.holappa@qt.io>

3 files changed, 324 insertions, 96 deletions

diff --git a/src/settingsui/network/NetworkListView.qml b/src/settingsui/network/NetworkListView.qml
new file mode 100644
index 0000000..c42d7e1
--- /dev/null
+++ b/src/settingsui/network/NetworkListView.qml
@@ -0,0 +1,155 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtQml 2.0
+import QtDeviceUtilities.NetworkSettings 1.0
+import QtDemoLauncher.QtButtonImageProvider 1.0
+import QtQuick.Controls 2.1
+
+ListView {
+    id: list
+    clip: true
+    property bool connecting: false
+
+    Component.onCompleted: NetworkSettingsManager.services.type = NetworkSettingsType.Unknown;
+    model: NetworkSettingsManager.services
+
+    delegate: Item {
+        id: networkDelegate
+        width: list.width
+        height: expanded ? list.height * 0.15 + list.height * 0.05 : list.height * 0.15
+        property bool expanded: false
+        MouseArea {
+            anchors.fill: parent
+            onClicked: networkDelegate.expanded = !networkDelegate.expanded
+        }
+        Rectangle {
+            id: img
+            height: parent.height * 0.6
+            width: height
+            anchors.left: parent.left
+            anchors.leftMargin: parent.width * 0.075
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        Column {
+            anchors.left: img.right
+            anchors.leftMargin: parent.width * 0.025
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width * 0.5
+            Text {
+                id: networkName
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: list.height * 0.06
+                color: connected ? "#41cd52" : "white"
+                text: name
+                font.family: appFont
+                font.styleName: connected ? "SemiBold" : "Regular"
+            }
+            Row {
+                id: ipRow
+                height: networkDelegate.height * 0.275 * opacity
+                opacity: networkDelegate.expanded ? 1 : 0.0
+                visible: opacity > 0
+                spacing: networkDelegate.width * 0.0075
+                Behavior on opacity { NumberAnimation { duration: 200} }
+                Text {
+                    id: ipAddressLabel
+                    height: parent.height
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: qsTr("IP Address:")
+                    color: connected ? "#41cd52" : "white"
+                    font.pixelSize: height * 0.8
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignLeft
+                    font.family: appFont
+                    font.styleName: connected ? "SemiBold" : "Regular"
+                }
+                Text {
+                    id: ipAddress
+                    width: root.width * 0.15
+                    height: parent.height
+                    anchors.verticalCenter: parent.verticalCenter
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignLeft
+                    color: connected ? "#41cd52" : "white"
+                    visible: ipRow.opacity > 0
+                    text: connected ? NetworkSettingsManager.services.itemFromRow(index).ipv4.address : qsTr("Not connected")
+                    font.family: appFont
+                    font.styleName: connected ? "SemiBold" : "Regular"
+                }
+            }
+        }
+        QtButton {
+            id: connectButton
+            height: list.height * 0.1
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            fillColor: connected ? "#9d9faa" : "#41cd52"
+            borderColor: "transparent"
+            text: connected ? qsTr("DISCONNECT") : qsTr("CONNECT")
+            opacity: expanded || connected ? 1.0 : 0.0
+            visible: opacity > 0.0
+            Behavior on opacity { NumberAnimation { duration: 200 } }
+            onClicked: {
+                if (connected) {
+                    NetworkSettingsManager.services.itemFromRow(index).disconnectService();
+                } else {
+                    var service = NetworkSettingsManager.services.itemFromRow(index)
+                    if (service) {
+                        list.connecting = true
+                        service.connectService();
+                    }
+                }
+            }
+        }
+        Rectangle {
+            id: delegateBottom
+            width: networkDelegate.width
+            color: "#9d9faa"
+            height: 2
+            anchors.bottom: networkDelegate.bottom
+            anchors.horizontalCenter: networkDelegate.horizontalCenter
+        }
+        Behavior on height { NumberAnimation { duration: 200} }
+
+        Connections {
+            target: NetworkSettingsManager.userAgent
+            onShowUserCredentialsInput : {
+                settingsLoader.source = "qrc:/network/PassphraseEnter.qml"
+                list.connecting = false
+            }
+            onError: {
+                list.connecting = false
+                console.log("ERROR OCCURRED")
+            }
+        }
+    }
+    focus: true
+}
diff --git a/src/settingsui/network/NetworkSettings.qml b/src/settingsui/network/NetworkSettings.qml
index 947aae5..56c62a8 100644
--- a/src/settingsui/network/NetworkSettings.qml
+++ b/src/settingsui/network/NetworkSettings.qml
@@ -28,108 +28,39 @@
 ****************************************************************************/
 import QtQuick 2.6
 import QtQuick.Layouts 1.3
-import QtQuick.Controls 2.0
+import QtQuick.Controls 2.2
 import QtDeviceUtilities.NetworkSettings 1.0
+import QtDemoLauncher.QtButtonImageProvider 1.0
 
 Item {
-    property string title: qsTr("Network Settings")
-
-    GroupBox {
-        id: networkSelect
-        anchors.rightMargin: parent.width * 0.618
-        anchors.left: parent.left
-        anchors.leftMargin: 20
+    Text {
+        id: networkText
         anchors.top: parent.top
-        anchors.topMargin: 20
-
-        title: qsTr("Select Connection")
-
-        function stateToStr(serviceState) {
-            switch (serviceState) {
-            case NetworkService.Idle:
-                return qsTr("Idle");
-            case NetworkService.Failure:
-                return qsTr("Failure");
-            case NetworkService.Association:
-                return qsTr("Association");
-            case NetworkService.Configuration:
-                return qsTr("Configuration");
-            case NetworkService.Ready:
-                return qsTr("Ready");
-            case NetworkService.Disconnect:
-                return qsTr("Disconnect");
-            case NetworkService.Online:
-                return qsTr("Online");
-            default:
-                return qsTr("Undefined");
-            }
-        }
-        ColumnLayout {
-            width: parent.width
-
-            Repeater {
-                model: NetworkSettingsManager.interfaces
-
-                RadioButton {
-                    id: btn
-                    enabled: (type != NetworkSettingsType.Wired) || NetworkSettingsManager.services.wiredNetworksAvailable
-                    Layout.fillWidth: true
-                    implicitHeight: 54
-
-                    contentItem: Rectangle {
-                        color: checked ? "#80c342" : "white"
-                        border.color: "#bdbebf"
-                        border.width: 1
-                        anchors.fill: parent
-
-                        Row {
-                            anchors.fill: parent
-                            spacing: 10
-
-                            Image {
-                                id: typeId
-                                height: parent.height
-                                width: height
-                            }
-                            Column {
-                                height: parent.height * .7
-                                spacing: 0
-                                anchors.verticalCenter: parent.verticalCenter
-                                Label {
-                                    text: name
-                                }
-                                Label {
-                                    text: ((type == NetworkSettingsType.Wired) && !NetworkSettingsManager.services.wiredNetworksAvailable) ?
-                                              qsTr("No networks") : networkSelect.stateToStr(modelData.state)
-                                    font.pixelSize: 12
-                                }
-                            }
-                        }
-                    }
+        anchors.left: parent.left
+        fontSizeMode: Text.Fit
+        minimumPixelSize: 1
+        font.pixelSize: parent.height * 0.05
+        color: "white"
+        text: qsTr("Network")
+        font.family: appFont
+        font.styleName: "Bold"
+    }
 
-                    onCheckedChanged: {
-                        if (checked) {
-                            networkDetails.selectedInterface = modelData
-                            networkDetails.selectedInterface.scanServices()
-                            if (type === NetworkSettingsType.Wired) {
-                                networkDetails.source = "WiredSettings.qml";
-                            }
-                            else if (type === NetworkSettingsType.Wifi) {
-                                networkDetails.source = "WifiSettings.qml";
-                            }
-                        }
-                    }
-                }
-            }
-        }
+    Rectangle {
+        id: btmLine
+        anchors.top: networkText.bottom
+        anchors.topMargin: parent.height * 0.025
+        anchors.left: networkText.left
+        width: parent.width * 0.275
+        height: parent.height * 0.005
     }
 
-    NetworkDetails {
-        id: networkDetails
-        anchors.leftMargin: networkSelect.width + 40
-        anchors.topMargin: 20
-        anchors.rightMargin: 20
-        anchors.bottomMargin: 20
-        anchors.fill: parent
+    NetworkListView {
+        id: networkList
+        anchors.top: btmLine.bottom
+        anchors.topMargin: parent.height * 0.025
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
     }
 }
diff --git a/src/settingsui/network/PassphraseEnter.qml b/src/settingsui/network/PassphraseEnter.qml
new file mode 100644
index 0000000..2936afa
--- /dev/null
+++ b/src/settingsui/network/PassphraseEnter.qml
@@ -0,0 +1,142 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 2.0
+import QtDemoLauncher.QtButtonImageProvider 1.0
+import QtDeviceUtilities.NetworkSettings 1.0
+
+Item {
+    id: root
+    Row {
+        id: backRow
+        anchors.top: parent.top
+        anchors.left: parent.left
+        width: parent.width * 0.2
+        height: parent.height * 0.035
+        Image {
+            id: passBackIcon
+            anchors.verticalCenter: parent.verticalCenter
+            height: parent.height
+            width: height
+            fillMode: Image.PreserveAspectFit
+            source: "../newIcons/back_icon.svg"
+
+            ColorOverlay {
+                source: passBackIcon
+                anchors.fill: passBackIcon
+                color: "#41cd52"
+                visible: true
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: settingsLoader.source = "qrc:/network/NetworkSettings.qml"
+            }
+        }
+        Text {
+            id: backText
+            anchors.top: parent.top
+            height: parent.height
+            anchors.verticalCenter: parent.verticalCenter
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.Fit
+            minimumPixelSize: 1
+            font.pixelSize: height
+            color: "#41cd52"
+            text: "Back"
+            MouseArea {
+                anchors.fill: parent
+                onClicked: settingsLoader.source = "qrc:/network/NetworkSettings.qml"
+            }
+        }
+    }
+
+    Text {
+        id: enterPassphraseText
+        anchors.top: backRow.bottom
+        anchors.topMargin: parent.height * 0.05
+        anchors.left: parent.left
+        fontSizeMode: Text.Fit
+        minimumPixelSize: 1
+        font.pixelSize: parent.height * 0.045
+        color: "white"
+        text: qsTr("Enter Passphrase")
+    }
+    Rectangle {
+        id: btmLine
+        anchors.top: enterPassphraseText.bottom
+        anchors.topMargin: parent.height * 0.025
+        anchors.left: enterPassphraseText.left
+        width: parent.width * 0.275
+        height: parent.height * 0.005
+    }
+
+    TextField {
+        id: passField
+        width: root.width * 0.4
+        height: parent.height * 0.075
+        anchors.top: btmLine.bottom
+        anchors.topMargin: parent.height * 0.05
+        color: "white"
+        echoMode: TextInput.Password
+        background: Rectangle {
+            color: "transparent"
+            border.color: passField.focus ? "#41cd52" : "#9d9faa"
+            border.width: passField.focus ? width * 0.01 : 2
+        }
+    }
+    Row {
+        height: passField.height
+        anchors.top: passField.bottom
+        anchors.topMargin: parent.height * 0.025
+        spacing: parent.width * 0.025
+        QtButton {
+            id: setButton
+            height: parent.height
+            text: qsTr("SET")
+            borderColor: "transparent"
+            fillColor: "#41cd52"
+            onClicked: {
+                passField.focus = false
+                NetworkSettingsManager.userAgent.setPassphrase(passField.text)
+            }
+        }
+        QtButton {
+            id: cancelButton
+            height: parent.height
+            text: qsTr("CANCEL")
+            borderColor: "transparent"
+            fillColor: "#9d9faa"
+            onClicked: {
+                passField.focus = false
+                passField.clear()
+            }
+        }
+    }
+}