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>

3 files changed, 105 insertions, 57 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 } }
     }
 }
diff --git a/examples/declarative/toys/clocks/content/Clock.qml b/examples/declarative/toys/clocks/content/Clock.qml
index 075c42990c..7f0e8cba83 100644
--- a/examples/declarative/toys/clocks/content/Clock.qml
+++ b/examples/declarative/toys/clocks/content/Clock.qml
@@ -41,21 +41,34 @@
 import QtQuick 2.0
 
 Item {
-    id: clock
-    width: 200; height: 230
+    id : clock
+    width: {
+        if (ListView.view && ListView.view.width >= 200)
+            return ListView.view.width / Math.floor(ListView.view.width / 200.0);
+        else
+            return 200;
+    }
+
+    height: {
+        if (ListView.view && ListView.view.height >= 240)
+            return ListView.view.height;
+        else
+            return 240;
+    }
 
     property alias city: cityLabel.text
     property int hours
     property int minutes
-    property int seconds 
+    property int seconds
     property real shift
     property bool night: false
+    property bool internationalTime: true //Unset for local time
 
     function timeChanged() {
         var date = new Date;
-        hours = shift ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
+        hours = internationalTime ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
         night = ( hours < 7 || hours > 19 )
-        minutes = shift ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
+        minutes = internationalTime ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
         seconds = date.getUTCSeconds();
     }
 
@@ -64,61 +77,67 @@ Item {
         onTriggered: clock.timeChanged()
     }
 
-    Image { id: background; source: "clock.png"; visible: clock.night == false }
-    Image { source: "clock-night.png"; visible: clock.night == true }
+    Item {
+        anchors.centerIn: parent
+        width: 200; height: 240
 
+        Image { id: background; source: "clock.png"; visible: clock.night == false }
+        Image { source: "clock-night.png"; visible: clock.night == true }
 
-    Image {
-        x: 92.5; y: 27
-        source: "hour.png"
-        smooth: true
-        transform: Rotation {
-            id: hourRotation
-            origin.x: 7.5; origin.y: 73;
-            angle: (clock.hours * 30) + (clock.minutes * 0.5)
-            Behavior on angle {
-                SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+
+        Image {
+            x: 92.5; y: 27
+            source: "hour.png"
+            smooth: true
+            transform: Rotation {
+                id: hourRotation
+                origin.x: 7.5; origin.y: 73;
+                angle: (clock.hours * 30) + (clock.minutes * 0.5)
+                Behavior on angle {
+                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+                }
             }
         }
-    }
 
-    Image {
-        x: 93.5; y: 17
-        source: "minute.png"
-        smooth: true
-        transform: Rotation {
-            id: minuteRotation
-            origin.x: 6.5; origin.y: 83;
-            angle: clock.minutes * 6
-            Behavior on angle {
-                SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+        Image {
+            x: 93.5; y: 17
+            source: "minute.png"
+            smooth: true
+            transform: Rotation {
+                id: minuteRotation
+                origin.x: 6.5; origin.y: 83;
+                angle: clock.minutes * 6
+                Behavior on angle {
+                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+                }
             }
         }
-    }
 
-    Image {
-        x: 97.5; y: 20
-        source: "second.png"
-        smooth: true
-        transform: Rotation {
-            id: secondRotation
-            origin.x: 2.5; origin.y: 80;
-            angle: clock.seconds * 6
-            Behavior on angle {
-                SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+        Image {
+            x: 97.5; y: 20
+            source: "second.png"
+            smooth: true
+            transform: Rotation {
+                id: secondRotation
+                origin.x: 2.5; origin.y: 80;
+                angle: clock.seconds * 6
+                Behavior on angle {
+                    SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
+                }
             }
         }
-    }
 
-    Image {
-        anchors.centerIn: background; source: "center.png"
-    }
+        Image {
+            anchors.centerIn: background; source: "center.png"
+        }
 
-    Text {
-        id: cityLabel
-        y: 200; anchors.horizontalCenter: parent.horizontalCenter
-        color: "white"
-        font.bold: true; font.pixelSize: 14
-        style: Text.Raised; styleColor: "black"
+        Text {
+            id: cityLabel
+            y: 210; anchors.horizontalCenter: parent.horizontalCenter
+            color: "white"
+            font.family: "Helvetica"
+            font.bold: true; font.pixelSize: 16
+            style: Text.Raised; styleColor: "black"
+        }
     }
 }
diff --git a/examples/declarative/toys/clocks/content/arrow.png b/examples/declarative/toys/clocks/content/arrow.png
new file mode 100644
index 0000000000..e437312217
--- /dev/null
+++ b/examples/declarative/toys/clocks/content/arrow.png