Alter Clocks demo

For further component reuse, it's now a delegate in a view that can load
many more clocks. Also looks better both in landscape and portrait mode.

Change-Id: Ib5f172ee165554dfbe1ab84b96fe0eec7c22b1d1
Reviewed-by: Yann Bodson <yann.bodson@nokia.com>

1 files changed, 37 insertions, 8 deletions

diff --git a/examples/declarative/toys/clocks/clocks.qml b/examples/declarative/toys/clocks/clocks.qml
index 98969df845..288e50c9eb 100644
--- a/examples/declarative/toys/clocks/clocks.qml
+++ b/examples/declarative/toys/clocks/clocks.qml
@@ -42,18 +42,47 @@ import QtQuick 2.0
 import "content"
 
 Rectangle {
-    width: 640; height: 240
+    id: root
+    width: 640; height: 320
     color: "#646464"
 
-    Row {
-        anchors.centerIn: parent
-        Clock { city: "New York"; shift: -4 }
-        Clock { city: "Mumbai"; shift: 5.5 }
-        Clock { city: "Tokyo"; shift: 9 }
+    ListView {
+        id: clockview
+        anchors.fill: parent
+        orientation: ListView.Horizontal
+        cacheBuffer: 2000
+        snapMode: ListView.SnapOneItem
+        highlightRangeMode: ListView.ApplyRange
+
+        delegate: Clock { city: cityName; shift: timeShift }
+        model: ListModel {
+            ListElement { cityName: "New York"; timeShift: -4 }
+            ListElement { cityName: "London"; timeShift: 0 }
+            ListElement { cityName: "Oslo"; timeShift: 1 }
+            ListElement { cityName: "Mumbai"; timeShift: 5.5 }
+            ListElement { cityName: "Tokyo"; timeShift: 9 }
+            ListElement { cityName: "Brisbane"; timeShift: 10 }
+            ListElement { cityName: "Los Angeles"; timeShift: -8 }
+        }
     }
-    QuitButton {
+
+    Image {
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        anchors.margins: 10
+        source: "content/arrow.png"
+        rotation: -90
+        opacity: clockview.atXBeginning ? 0 : 0.5
+        Behavior on opacity { NumberAnimation { duration: 500 } }
+    }
+
+    Image {
         anchors.right: parent.right
-        anchors.top: parent.top
+        anchors.bottom: parent.bottom
         anchors.margins: 10
+        source: "content/arrow.png"
+        rotation: 90
+        opacity: clockview.atXEnd ? 0 : 0.5
+        Behavior on opacity { NumberAnimation { duration: 500 } }
     }
 }