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, 7 insertions, 28 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