[launcher settings] improve visual appearance

and fix the UI shrinking issue when vkb is visible.

Change-Id: I8609dbc4a852b04e3ed9f3fbd3eb1175f3576f5e
Reviewed-by: Andy Nichols <andy.nichols@digia.com>

8 files changed, 137 insertions, 97 deletions

diff --git a/basicsuite/launchersettings/NetworkList.qml b/basicsuite/launchersettings/NetworkList.qml
index 1f26537..b733eb6 100644
--- a/basicsuite/launchersettings/NetworkList.qml
+++ b/basicsuite/launchersettings/NetworkList.qml
@@ -39,8 +39,12 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
+import QtQuick.Controls 1.0
 import Qt.labs.wifi 0.1
 
+// ### TODO
+// - only 1 delagate open at the time
+
 Item {
     Component {
         id: listDelegate
@@ -50,18 +54,16 @@ Item {
             property bool connected: wifiManager.connectedSSID == network.ssid
             property variant networkModel: model
             property alias ssidText: ssidLabel.text
-            height: expanded ? 300 : 70
+            height: (expanded ? (connected ? 180: 260) : 70)
             clip: true // ### fixme
+            color: "#5C5C5C"
+            border.color: "black"
+            border.width: 1
 
             Behavior on height { NumberAnimation { duration: 500; easing.type: Easing.InOutCubic } }
 
             width: parent.width
 
-            gradient: Gradient {
-                GradientStop { position: 0; color: "white" }
-                GradientStop { position: 1; color: "lightgray" }
-            }
-
             Text {
                 id: ssidLabel
                 anchors.top: parent.top
@@ -69,6 +71,7 @@ Item {
                 anchors.margins: 10
                 font.pixelSize: 20
                 font.bold: true
+                color: "#E6E6E6"
                 text: network.ssid + (connected ? " (connected)" : "");
             }
 
@@ -79,7 +82,7 @@ Item {
                 anchors.margins: 5
                 anchors.leftMargin: 40
                 text: network.bssid
-                color: "gray"
+                color: "#E6E6E6"
                 font.pixelSize: ssidLabel.font.pixelSize * 0.5
             }
 
@@ -91,7 +94,7 @@ Item {
                       + (network.supportsWPA ? "WPA " : "")
                       + (network.supportsWEP ? "WEP " : "")
                       + (network.supportsWPS ? "WPS " : "");
-                color: "gray"
+                color: "#E6E6E6"
                 font.pixelSize: ssidLabel.font.pixelSize * 0.5
                 font.italic: true
             }
@@ -104,8 +107,8 @@ Item {
                 anchors.margins: 20
                 anchors.right: parent.right
                 anchors.top: parent.top
-                color: "lightblue"
-                border.color: "lightgray"
+                color: "#BF8888"
+                border.color: "#212126"
             }
 
             MouseArea {
@@ -115,61 +118,32 @@ Item {
                 }
             }
 
-            Rectangle {
-                id: passwordInputBackground
-                anchors.fill: passwordInput
-                anchors.margins: -5
-                color: "white"
-                radius: 5
-                border.color: "gray"
-            }
-
-            TextInput {
+            TextField {
                 id: passwordInput
                 y: 100
-                width: 300
                 height: 50
-                text: ""
+                width: 300
+                placeholderText: "Enter Password"
+                visible: !connected
                 anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: 18
             }
 
-            Rectangle {
-                id: connectButton
-                anchors.top: passwordInput.bottom
-                anchors.margins: 20
+            Button {
+                style: root.buttonStyle
+                y: passwordInput.visible ? passwordInput.y + passwordInput.height + 20 : passwordInput.y
                 anchors.horizontalCenter: parent.horizontalCenter
-                width: passwordInput.width
-                height: passwordInputBackground.height
-                enabled: wifiManager.networkState != WifiManager.ObtainingIPAddress
-
-                gradient: Gradient {
-                    GradientStop { position: 0; color: "white" }
-                    GradientStop { position: 1; color: buttonMouse.pressed ? "steelblue" : "lightsteelblue" }
-                }
-
-                border.color: "gray"
-
-                Text {
-                    anchors.centerIn: parent
-                    font.pixelSize: 24
-                    text: connected ? "Disconnect" : "Connect"
-                }
-                MouseArea {
-                    id: buttonMouse
-                    anchors.fill: parent
-                    onClicked: {
-                        networkView.currentIndex = index
-                        if (connected) {
-                            wifiManager.disconnect()
-                        } else {
-                            networkView.activeNetwork = networkView.currentItem
-                            wifiManager.connect(network, passwordInput.text);
-                        }
+                text: connected ? "Disconnect" : "Connect"
+                onClicked: {
+                    networkView.currentIndex = index
+                    if (connected) {
+                        wifiManager.disconnect()
+                    } else {
+                        networkView.activeNetwork = networkView.currentItem
+                        wifiManager.connect(network, passwordInput.text);
                     }
                 }
             }
-
         }
     }
 
diff --git a/basicsuite/launchersettings/WifiGroupBox.qml b/basicsuite/launchersettings/WifiGroupBox.qml
index f58c129..e88f5cb 100644
--- a/basicsuite/launchersettings/WifiGroupBox.qml
+++ b/basicsuite/launchersettings/WifiGroupBox.qml
@@ -60,6 +60,8 @@ ColumnLayout {
 
             Button {
                 id: wifiOnOffButton
+                Layout.fillWidth: true
+                style: root.buttonStyle
                 text: (wifiManager.backendReady) ? "Switch Off" : "Switch On"
                 onClicked: {
                     if (wifiManager.backendReady) {
@@ -74,6 +76,8 @@ ColumnLayout {
 
             Button {
                 id: listNetworksButton
+                Layout.fillWidth: true
+                style: root.buttonStyle
                 visible: wifiManager.backendReady
                 text: (networkList.visible) ? "Hide wifi networks"
                                             : "List available wifi networks"
diff --git a/basicsuite/launchersettings/images/button_default.png b/basicsuite/launchersettings/images/button_default.png
new file mode 100644
index 0000000..6d6cfd9
--- /dev/null
+++ b/basicsuite/launchersettings/images/button_default.png
diff --git a/basicsuite/launchersettings/images/button_pressed.png b/basicsuite/launchersettings/images/button_pressed.png
new file mode 100644
index 0000000..ab78b6e
--- /dev/null
+++ b/basicsuite/launchersettings/images/button_pressed.png
diff --git a/basicsuite/launchersettings/images/groupbox.png b/basicsuite/launchersettings/images/groupbox.png
new file mode 100644
index 0000000..98585ee
--- /dev/null
+++ b/basicsuite/launchersettings/images/groupbox.png
diff --git a/basicsuite/launchersettings/launchersettings.pro b/basicsuite/launchersettings/launchersettings.pro
index bb0f2de..e89b4d0 100644
--- a/basicsuite/launchersettings/launchersettings.pro
+++ b/basicsuite/launchersettings/launchersettings.pro
@@ -5,7 +5,8 @@ b2qtdemo_deploy_defaults()
 
 content.files = *.qml
 content.path = $$DESTPATH
+content.files += images
 
 OTHER_FILES += $${content.files}
 
-INSTALLS += target content
\ No newline at end of file
+INSTALLS += target content
diff --git a/basicsuite/launchersettings/main.qml b/basicsuite/launchersettings/main.qml
index 41054fd..0002076 100644
--- a/basicsuite/launchersettings/main.qml
+++ b/basicsuite/launchersettings/main.qml
@@ -1,4 +1,4 @@
-/****************************************************************************
+/****************************************************************************
 **
 ** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
 ** Contact: For any questions to Digia, please use the contact form at
@@ -42,65 +42,114 @@ import QtQuick 2.0
 
 import QtQuick.Controls 1.0
 import QtQuick.Layouts 1.0
+import QtQuick.Controls.Styles 1.0
+import QtQuick.Controls.Private 1.0
 
 Rectangle {
     id: root
-
-    gradient: Gradient {
-        GradientStop { position: 0; color: "white" }
-        GradientStop { position: 1; color: "lightgray" }
-    }
-
     width: 1280
     height: 800
-
+    color: "#212126"
     property int margin: 10
-
-    Loader {
-        id: rebootActionLoader
-        source: "RebootAction.qml"
-    }
-
-    Loader {
-        id: poweroffActionLoader
-        source: "PoweroffAction.qml"
-    }
-
-    Loader {
-        id: brightnessControllerLoader
-        source: "BrightnessController.qml"
+    property alias buttonStyle: buttonStyle
+
+    // ******************************* STYLES **********************************
+    Component {
+        id: buttonStyle
+        ButtonStyle {
+            panel: Item {
+                implicitHeight: 50
+                implicitWidth: 320
+                BorderImage {
+                    anchors.fill: parent
+                    antialiasing: true
+                    border.bottom: 8
+                    border.top: 8
+                    border.left: 8
+                    border.right: 8
+                    anchors.margins: control.pressed ? -4 : 0
+                    source: control.pressed ? "images/button_pressed.png" : "images/button_default.png"
+                    Text {
+                        text: control.text
+                        anchors.centerIn: parent
+                        color: "white"
+                        font.pixelSize: 23
+                        renderType: Text.NativeRendering
+                    }
+                }
+            }
+        }
     }
 
-    Loader {
-        id: networkControllerLoader
-        source: "NetworkController.qml"
-    }
+    // GroupBoxStyle currently is not available as a public API, so we write our own...
+    Component {
+        id: groupBoxStyle
+        Style {
+            // The margin from the content item to the groupbox
+            padding {
+                top: (control.title.length > 0 ? TextSingleton.implicitHeight : 0) + 30
+                left: 8
+                right: 8
+                bottom: 8
+            }
+            // The groupbox frame
+            property Component panel: Item {
+                anchors.fill: parent
+
+                Text {
+                    id: label
+                    anchors.bottom: borderImage.top
+                    anchors.margins: 2
+                    text: control.title
+                    font.pixelSize: 22
+                    color: "white"
+                    renderType: Text.NativeRendering
+                }
 
-    Loader {
-        id: wifiControllerLoader
-        source: "WifiController.qml"
+                BorderImage {
+                    id: borderImage
+                    anchors.fill: parent
+                    anchors.topMargin: padding.top - 7
+                    source: "images/groupbox.png"
+                    border.left: 4
+                    border.right: 4
+                    border.top: 4
+                    border.bottom: 4
+                }
+            }
+        }
     }
 
-    ScrollView {
+    // ******************************** UI ****************************************
+    Loader { id: rebootActionLoader; source: "RebootAction.qml" }
+    Loader { id: poweroffActionLoader; source: "PoweroffAction.qml" }
+    Loader { id: brightnessControllerLoader; source: "BrightnessController.qml" }
+    Loader { id: networkControllerLoader; source: "NetworkController.qml" }
+    Loader { id: wifiControllerLoader; source: "WifiController.qml" }
 
+    Flickable {
         anchors.top: parent.top
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.margins: margin
         anchors.topMargin: 50
         height: parent.height
-        width: mainLayout.width + 40
+        width: mainLayout.width
+        contentHeight: mainLayout.height + 100
+        contentWidth: mainLayout.width
+        flickableDirection: Flickable.VerticalFlick
 
         ColumnLayout {
             id: mainLayout
-
-            height: implicitHeight;
-            width: Math.min(root.width, root.height);
+            width: 800
+            height: implicitHeight
+            anchors.left: parent.left
+            anchors.right: parent.right
 
             GroupBox {
                 id: powerOptions
                 title: "Power"
-
                 Layout.fillWidth: true
+                style: groupBoxStyle
 
                 RowLayout {
                     id: powerButtonRow
@@ -108,13 +157,16 @@ Rectangle {
                     anchors.fill: parent
 
                     Button {
+                        style: buttonStyle
                         text: "Shut Down"
                         Layout.fillWidth: true
                         action: poweroffActionLoader.item;
                         enabled: action != undefined
+
                     }
 
                     Button {
+                        style: buttonStyle
                         text: "Reboot"
                         Layout.fillWidth: true
                         action: rebootActionLoader.item;
@@ -127,7 +179,7 @@ Rectangle {
             GroupBox {
                 id: displayOptions
                 title: "Display"
-
+                style: groupBoxStyle
                 Layout.fillWidth: true
 
                 GridLayout {
@@ -137,8 +189,8 @@ Rectangle {
                     flow: GridLayout.TopToBottom
                     anchors.fill: parent
 
-                    Label { text: "Brightness: "; }
-                    Label { text: "Display FPS: "; }
+                    Label { text: "Brightness: "; font.pixelSize: 18; color: "white" }
+                    Label { text: "Display FPS: "; font.pixelSize: 18; color: "white" }
 
                     Slider {
                         maximumValue: 255
@@ -160,7 +212,7 @@ Rectangle {
             GroupBox {
                 id: networkOptions
                 title: "Network"
-
+                style: groupBoxStyle
                 Layout.fillWidth: true
 
                 GridLayout {
@@ -171,18 +223,26 @@ Rectangle {
                     flow: GridLayout.TopToBottom
                     anchors.fill: parent
 
-                    Label { text: "Hostname: "; }
-                    Label { text: "IP address: "; }
+                    Label { text: "Hostname: "; font.pixelSize: 18; color: "white" }
+                    Label { text: "IP address: "; font.pixelSize: 18; color: "white"}
 
                     TextField {
                         id: hostname
+                        implicitHeight: hostnameButton.height - 8
                         text: if (networkControllerLoader.item != undefined) { networkControllerLoader.item.getHostname(); }
+                        font.pixelSize: 18
                         Layout.fillWidth: true
                     }
 
-                    Label { text: if (networkControllerLoader.item != undefined) { networkControllerLoader.item.getIPAddress(); } }
+                    Label {
+                        text: if (networkControllerLoader.item != undefined) { networkControllerLoader.item.getIPAddress(); }
+                        font.pixelSize: 18
+                        color: "white"
+                    }
 
                     Button {
+                        id: hostnameButton
+                        style: buttonStyle
                         text: "Change hostname"
                         onClicked: networkControllerLoader.item.setHostname(hostname.text);
                         enabled: networkControllerLoader.item != undefined
@@ -194,6 +254,7 @@ Rectangle {
             GroupBox {
                 id: wifiOptions
                 title: "Wifi"
+                style: groupBoxStyle
                 Layout.fillWidth: true
             }
 
diff --git a/basicsuite/launchersettings/preview_l.jpg b/basicsuite/launchersettings/preview_l.jpg
index 118edc4..b9b232b 100644
--- a/basicsuite/launchersettings/preview_l.jpg
+++ b/basicsuite/launchersettings/preview_l.jpg