From 7c9a7efac837e5f34d9bdb46b10422920bf99103 Mon Sep 17 00:00:00 2001 From: Gatis Paeglis Date: Fri, 14 Feb 2014 14:16:56 +0100 Subject: [launcher settings] improve visual appearance and fix the UI shrinking issue when vkb is visible. Change-Id: I8609dbc4a852b04e3ed9f3fbd3eb1175f3576f5e Reviewed-by: Andy Nichols --- basicsuite/launchersettings/NetworkList.qml | 82 ++++-------- basicsuite/launchersettings/WifiGroupBox.qml | 4 + .../launchersettings/images/button_default.png | Bin 0 -> 1406 bytes .../launchersettings/images/button_pressed.png | Bin 0 -> 1694 bytes basicsuite/launchersettings/images/groupbox.png | Bin 0 -> 485 bytes basicsuite/launchersettings/launchersettings.pro | 3 +- basicsuite/launchersettings/main.qml | 145 +++++++++++++++------ basicsuite/launchersettings/preview_l.jpg | Bin 12642 -> 18458 bytes 8 files changed, 137 insertions(+), 97 deletions(-) create mode 100644 basicsuite/launchersettings/images/button_default.png create mode 100644 basicsuite/launchersettings/images/button_pressed.png create mode 100644 basicsuite/launchersettings/images/groupbox.png (limited to 'basicsuite') 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 Binary files /dev/null and b/basicsuite/launchersettings/images/button_default.png differ diff --git a/basicsuite/launchersettings/images/button_pressed.png b/basicsuite/launchersettings/images/button_pressed.png new file mode 100644 index 0000000..ab78b6e Binary files /dev/null and b/basicsuite/launchersettings/images/button_pressed.png differ diff --git a/basicsuite/launchersettings/images/groupbox.png b/basicsuite/launchersettings/images/groupbox.png new file mode 100644 index 0000000..98585ee Binary files /dev/null and b/basicsuite/launchersettings/images/groupbox.png differ 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 Binary files a/basicsuite/launchersettings/preview_l.jpg and b/basicsuite/launchersettings/preview_l.jpg differ -- cgit v1.2.3