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>

diff --git a/examples/quick/shared/Button.qml b/examples/quick/shared/Button.qml
index ca20d6d..9bbc01a 100644 (file)
--- a/examples/quick/shared/Button.qml
+++ b/examples/quick/shared/Button.qml
@@ -46,19 +46,46 @@ Item {
     property string text: "Button"
     property string subText: ""
     signal clicked
+    property alias containsMouse: mouseArea.containsMouse
+    property alias pressed: mouseArea.pressed
+    implicitHeight: col.height
+    height: implicitHeight
+    width: buttonLabel.width + 20
 
-    width: buttonLabel.width + 20; height: col.height + 12
-
-    MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: container.clicked()
+        hoverEnabled: true
+    }
 
     Column {
         spacing: 2
         id: col
+        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width
         Text {
-            id: buttonLabel; text: container.text; color: "black"; font.pixelSize: 24
+            id: buttonLabel
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            text: container.text
+            color: "black"
+            font.pixelSize: 22
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            styleColor: "white"
+            style: Text.Raised
+
         }
         Text {
-            id: buttonLabel2; text: container.subText; color: "black"; font.pixelSize: 12
+            id: buttonLabel2
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            text: container.subText
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            color: "#666"
+            font.pixelSize: 12
         }
     }
 }

diff --git a/examples/quick/shared/LauncherList.qml b/examples/quick/shared/LauncherList.qml
index 8946e9a..20f9c2b 100644 (file)
--- a/examples/quick/shared/LauncherList.qml
+++ b/examples/quick/shared/LauncherList.qml
@@ -39,9 +39,11 @@
 ****************************************************************************/
 import QtQuick 2.0
 
-Item {
+Rectangle {
     //model is a list of {"name":"somename", "url":"file:///some/url/mainfile.qml"}
     //function used to add to model A) to enforce scheme B) to allow Qt.resolveUrl in url assignments
+
+    color: "#eee"
     function addExample(name, desc, url)
     {
         myModel.append({"name":name, "description":desc, "url":url})
@@ -63,7 +65,7 @@ Item {
         visible: false
         clip: true
         property url exampleUrl
-        onExampleUrlChanged: visible = (exampleUrl == '' ? false : true);//Setting exampleUrl automatically shows example
+        onExampleUrlChanged: visible = (exampleUrl == '' ? false : true); //Setting exampleUrl automatically shows example
         anchors.fill: parent
         anchors.bottomMargin: 40
         Rectangle {
@@ -88,19 +90,63 @@ Item {
         anchors.bottom: parent.bottom
         width: parent.width
         height: 40
+
+        Rectangle {
+            height: 1
+            color: "#ccc"
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+        }
+
+        Rectangle {
+            height: 1
+            color: "#fff"
+            anchors.top: parent.top
+            anchors.topMargin: 1
+            anchors.left: parent.left
+            anchors.right: parent.right
+        }
+
+        gradient: Gradient {
+            GradientStop { position: 0 ; color: "#eee" }
+            GradientStop { position: 1 ; color: "#ccc" }
+        }
+
         MouseArea{
             anchors.fill: parent
             enabled: ei.visible
             //Eats mouse events
         }
+
         Image {
+            id: back
             source: "images/back.png"
             anchors.verticalCenter: parent.verticalCenter
-            x: 4
+            anchors.verticalCenterOffset: 2
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+
             MouseArea {
-                anchors.fill: parent
-                anchors.margins: -10
-                onClicked: ei.exampleUrl = "";
+                id: mouse
+                hoverEnabled: true
+                anchors.centerIn: parent
+                width: 38
+                height: 31
+                anchors.verticalCenterOffset: -1
+                onClicked: ei.exampleUrl = ""
+                Rectangle {
+                    anchors.fill: parent
+                    opacity: mouse.pressed ? 1 : 0
+                    Behavior on opacity { NumberAnimation{ duration: 100 }}
+                    gradient: Gradient {
+                        GradientStop { position: 0 ; color: "#22000000" }
+                        GradientStop { position: 0.2 ; color: "#11000000" }
+                    }
+                    border.color: "darkgray"
+                    antialiasing: true
+                    radius: 4
+                }
             }
         }
     }

diff --git a/examples/quick/shared/SimpleLauncherDelegate.qml b/examples/quick/shared/SimpleLauncherDelegate.qml
index ca05284..e891266 100644 (file)
--- 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
+    }
 }

diff --git a/examples/quick/shared/images/back.png b/examples/quick/shared/images/back.png
index 506ac42..5340209 100644 (file)
Binary files a/examples/quick/shared/images/back.png and b/examples/quick/shared/images/back.png differ

diff --git a/examples/quick/shared/images/next.png b/examples/quick/shared/images/next.png
new file mode 100644 (file)
index 0000000..cdef8db
Binary files /dev/null and b/examples/quick/shared/images/next.png differ