Improve QML Chat example UI

This makes the example more compliant with general UI color guidelines
and cuts out unnecessary code.

Change-Id: I1cf7df602e586a667ebd052ed45baef8eafb6955
Reviewed-by: Sami Makkonen <sami.makkonen@digia.com>
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>

10 files changed, 36 insertions, 51 deletions

diff --git a/examples/bluetooth/chat/Button.qml b/examples/bluetooth/chat/Button.qml
index be083193..6259c097 100644
--- a/examples/bluetooth/chat/Button.qml
+++ b/examples/bluetooth/chat/Button.qml
@@ -46,30 +46,22 @@ Rectangle {
 
     // Attaches to the Text element's text content
     property string label
-    property color textColor: buttonLabel.color
-
-    // The color highlight when the mouse hovers on the rectangle
-    //property color onHoverColor: "lightsteelblue"
-    property color onHoverColor: "black"
-    property color borderColor: "transparent"
-
-    // buttonColor is set to the button's main color
-    property color buttonColor: "lightblue"
 
     // Set appearance properties
-    radius: 6
+    radius: 3
     antialiasing: true
-    border.width: 2
-    border.color: borderColor
-    height: buttonLabel.height * 1.3
-    width: buttonLabel.width * 1.3
+    border.width: 1
+    border.color: "#35322f"
+    color: "#14aaff"
+    height: buttonLabel.height * 1.5
+    width: buttonLabel.width * 1.5
 
     Text {
         id: buttonLabel
         anchors.centerIn: parent
         text: label     // Bind the text to the parent's text
         color: "black"
-        font.pixelSize: 24
+        font.pointSize: 20
     }
 
     // buttonClick() is callable and a signal handler,
@@ -81,21 +73,8 @@ Rectangle {
         id: buttonMouseArea
         anchors.fill: parent    // Stretch the area to the parent's dimension
         onClicked: buttonClick()
-
-        // If true, then onEntered and onExited called if mouse hovers in the mouse area
-        // If false, a button must be clicked to detect the mouse hover
-        hoverEnabled: true
-
-        // Display a border if the mouse hovers on the button mouse area
-        onEntered: parent.border.color = onHoverColor
-        //Remove the border if the mouse exits the button mouse area
-        onExited:  parent.border.color = borderColor
     }
 
-    // Change the color of the button when pressed
-    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
-    // Animate the color whenever the color property changes
-    Behavior on color { ColorAnimation { duration: 55 } }
 
     // Scale the button when pressed
     scale: buttonMouseArea.pressed ? 1.1 : 1.0
diff --git a/examples/bluetooth/chat/InputBox.qml b/examples/bluetooth/chat/InputBox.qml
index 8e21f79d..5cd5a768 100644
--- a/examples/bluetooth/chat/InputBox.qml
+++ b/examples/bluetooth/chat/InputBox.qml
@@ -57,13 +57,6 @@ FocusScope {
         border { left: 4; top: 4; right: 4; bottom: 4 }
     }
 
-    BorderImage {
-        source: "images/lineedit-bg-focus.png"
-        width: parent.width; height: parent.height
-        border { left: 4; top: 4; right: 4; bottom: 4 }
-        visible: parent.activeFocus ? true : false
-    }
-
     Text {
         id: typeSomething
         anchors.fill: parent; anchors.leftMargin: 8
@@ -71,6 +64,7 @@ FocusScope {
         text: "Type something..."
         color: "gray"
         font.italic: true
+        font.pointSize: 14
     }
 
     MouseArea {
@@ -83,6 +77,7 @@ FocusScope {
         anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
         focus: true
         selectByMouse: true
+        font.pointSize: 14
     }
 
     Image {
@@ -92,13 +87,22 @@ FocusScope {
         opacity: 0
 
         MouseArea {
-            anchors.fill: parent
-            onClicked: { textInput.text = ''; focusScope.focus = true; }
+            // allow area to grow beyond image size
+            // easier to hit the area on high DPI devices
+            anchors.centerIn: parent
+            height:focusScope.height
+            width: focusScope.height
+            onClicked: {
+                //toogle focus to be able to jump out of input method composer
+                focusScope.focus = false;
+                textInput.text = '';
+                focusScope.focus = true;
+            }
         }
     }
 
     states: State {
-        name: "hasText"; when: textInput.text != ''
+        name: "hasText"; when: (textInput.text != '' || textInput.inputMethodComposing)
         PropertyChanges { target: typeSomething; opacity: 0 }
         PropertyChanges { target: clear; opacity: 1 }
     }
diff --git a/examples/bluetooth/chat/Search.qml b/examples/bluetooth/chat/Search.qml
index f43ca622..4557971b 100644
--- a/examples/bluetooth/chat/Search.qml
+++ b/examples/bluetooth/chat/Search.qml
@@ -49,7 +49,7 @@ Rectangle {
 
     width: searchText.width + 40;
     height: searchText.height + bluetoothImage.height + 40;
-    color: "white"
+    color: "#d7d6d5"
     border.color: "black"
     border.width: 1
     radius: 5
diff --git a/examples/bluetooth/chat/chat.qml b/examples/bluetooth/chat/chat.qml
index ce4c6d3c..6614d53c 100644
--- a/examples/bluetooth/chat/chat.qml
+++ b/examples/bluetooth/chat/chat.qml
@@ -45,6 +45,7 @@ Item {
     id: top
 
     Component.onCompleted: state = "begin"
+
     property string remoteDeviceName: ""
     property bool serviceFound: false
 
@@ -109,12 +110,11 @@ Item {
     }
 
 
-    Image {
+    Rectangle {
         id: background
         z: 0
         anchors.fill: parent
-        source: "images/background.jpg"
-        fillMode: Image.PreserveAspectCrop
+        color: "#5d5b59"
     }
 
     Search {
@@ -126,18 +126,20 @@ Item {
     Rectangle {
         id: chatBox
         opacity: 0
-
         anchors.centerIn: top
 
-        width: top.width - 25
-        height: 300
-        color: "white"
+        color: "#5d5b59"
         border.color: "black"
         border.width: 1
         radius: 5
+        anchors.fill: parent
 
         function sendMessage()
         {
+            // toogle focus to force end of input method composer
+            var hasFocus = input.focus;
+            input.focus = false;
+
             var data = input.text
             input.clear()
             chatContent.append({content: "Me: " + data})
@@ -145,6 +147,8 @@ Item {
             socket.stringData = data
             //! [BluetoothSocket-5]
             chatView.positionViewAtEnd()
+
+            input.focus = hasFocus;
         }
 
         Item {
@@ -170,7 +174,7 @@ Item {
             Rectangle {
                 height: parent.height - input.height - 15
                 width: parent.width;
-                color: "white"
+                color: "#d7d6d5"
                 anchors.bottom: parent.bottom
                 border.color: "black"
                 border.width: 1
@@ -185,7 +189,7 @@ Item {
                     clip: true
                     delegate: Component {
                         Text {
-                            font.pixelSize: 18
+                            font.pointSize: 14
                             text: modelData
                         }
                     }
diff --git a/examples/bluetooth/chat/chat.qrc b/examples/bluetooth/chat/chat.qrc
index 7e3e6c63..f2219f5b 100644
--- a/examples/bluetooth/chat/chat.qrc
+++ b/examples/bluetooth/chat/chat.qrc
@@ -1,9 +1,7 @@
 <RCC>
     <qresource prefix="/">
         <file>chat.qml</file>
-        <file>images/background.jpg</file>
         <file>images/clear.png</file>
-        <file>images/lineedit-bg-focus.png</file>
         <file>images/lineedit-bg.png</file>
         <file>InputBox.qml</file>
         <file>images/default.png</file>
diff --git a/examples/bluetooth/chat/doc/images/chat-view.png b/examples/bluetooth/chat/doc/images/chat-view.png
index 13eeede7..81785fa2 100644
--- a/examples/bluetooth/chat/doc/images/chat-view.png
+++ b/examples/bluetooth/chat/doc/images/chat-view.png
diff --git a/examples/bluetooth/chat/images/background.jpg b/examples/bluetooth/chat/images/background.jpg
deleted file mode 100644
index 903d395c..00000000
--- a/examples/bluetooth/chat/images/background.jpg
+++ /dev/null
diff --git a/examples/bluetooth/chat/images/lineedit-bg-focus.png b/examples/bluetooth/chat/images/lineedit-bg-focus.png
deleted file mode 100644
index bbfac38d..00000000
--- a/examples/bluetooth/chat/images/lineedit-bg-focus.png
+++ /dev/null
diff --git a/examples/bluetooth/chat/images/lineedit-bg.png b/examples/bluetooth/chat/images/lineedit-bg.png
index 9044226f..7dbcc795 100644
--- a/examples/bluetooth/chat/images/lineedit-bg.png
+++ b/examples/bluetooth/chat/images/lineedit-bg.png
diff --git a/examples/bluetooth/chat/qmlchat.cpp b/examples/bluetooth/chat/qmlchat.cpp
index 3cd2424c..aefc900a 100644
--- a/examples/bluetooth/chat/qmlchat.cpp
+++ b/examples/bluetooth/chat/qmlchat.cpp
@@ -55,7 +55,7 @@ int main(int argc, char *argv[])
     // Qt.quit() called in embedded .qml by default only emits
     // quit() signal, so do this (optionally use Qt.exit()).
     QObject::connect(view.engine(), SIGNAL(quit()), qApp, SLOT(quit()));
-    view.setGeometry(QRect(100, 100, 360, 640));
+    view.setGeometry(QRect(100, 100, 360, 480));
     view.show();
     return application.exec();
 }