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>

1 files changed, 14 insertions, 10 deletions

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 }
     }