Improve the look and feel of our demo launcher

The existing demo launcher looks rather ugly. This does some
visual tweaks to make it look better, including adding support
for proper text wrapping.

It was approved by our design lead Diana.

Change-Id: I660764575a411f598c53c9c42e290a807e20c0cf
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>

1 files changed, 39 insertions, 3 deletions

diff --git a/examples/quick/shared/SimpleLauncherDelegate.qml b/examples/quick/shared/SimpleLauncherDelegate.qml
index ca05284f5a..e89126690f 100644
--- a/examples/quick/shared/SimpleLauncherDelegate.qml
+++ b/examples/quick/shared/SimpleLauncherDelegate.qml
@@ -39,15 +39,51 @@
 ****************************************************************************/
 import QtQuick 2.0
 
-Item {
+Rectangle {
     id: container
     property Item exampleItem
     width: ListView.view.width
-    height: 64
+    height: button.implicitHeight + 22
+
+    gradient: Gradient {
+        GradientStop {
+            position: 0
+            Behavior on color {ColorAnimation { duration: 100 }}
+            color: button.pressed ? "#e0e0e0" : "#fff"
+        }
+        GradientStop {
+            position: 1
+            Behavior on color {ColorAnimation { duration: 100 }}
+            color: button.pressed ? "#e0e0e0" : button.containsMouse ? "#f5f5f5" : "#eee"
+        }
+    }
+
+    Image {
+        id: image
+        opacity: 0.7
+        Behavior on opacity {NumberAnimation {duration: 100}}
+        source: "images/next.png"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+    }
+
     Button {
-        anchors.fill: parent
+        id: button
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.right:image.left
         text: name
         subText: description
         onClicked: exampleItem.exampleUrl = url;
     }
+
+    Rectangle {
+        height: 1
+        color: "#ccc"
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+    }
 }