Improve velocity example

4 files changed, 84 insertions, 135 deletions

diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index 8c33299..efaaf7a 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -1,78 +1,89 @@
 import Qt 4.7
 
-Rectangle {
-    property alias day: dayText.text
-    property var stickies
+Component {
+    Item {
+        property var stickies
 
-    id: page
-    width: 400; height: 500; radius: 7
-    border.color: "black"
+        id: page
+        width: 840; height: 480
 
-    Image { x: 10; y: 10; source: "cork.jpg" }
+        Image { source: "cork.jpg" }
 
-    Text {
-        id: dayText; x: 20; y: 20
-        height: 40; width: 370
-        font.pointSize: 14; font.bold: true
-        style: Text.Outline; styleColor: "#dedede"
-    }
-
-    Repeater {
-        model: page.stickies
+        Text {
+            text: name; x: 15; y: 8; height: 40; width: 370
+            font.pixelSize: 18; font.bold: true; color: "white"
+            style: Text.Outline; styleColor: "black"
+        }
 
-        Item {
-            id: stickyPage
-            x: Math.random() * 200 + 100
-            y: Math.random() * 300 + 50
-            SpringFollow on rotation {
-                source: -flickable.horizontalVelocity / 100
-                spring: 2.0; damping: 0.1
-            }
+        Repeater {
+            model: notes
 
             Item {
-                id: sticky
-                scale: 0.5
-                Image {
-                    id: stickyImage; source: "sticky.png"; transformOrigin: Item.TopLeft
-                    smooth: true; y: -20; x: 8 + -width * 0.6 / 2; scale: 0.6
-                }
+                property int randomX: Math.random() * 500 + 100
+                property int randomY: Math.random() * 200 + 50
+
+                id: stickyPage
+                x: randomX; y: randomY
 
-                TextEdit {
-                    id: myText; smooth: true; font.pointSize: 28
-                    readOnly: false; x: -104; y: 36; wrap: true
-                    rotation: -8; text: noteText; width: 195; height: 172
+                SpringFollow on rotation {
+                    source: -flickable.horizontalVelocity / 100
+                    spring: 2.0; damping: 0.15
                 }
 
                 Item {
-                    y: -20
-                    x: stickyImage.x
-                    width: stickyImage.width * stickyImage.scale
-                    height: stickyImage.height * stickyImage.scale
-                    MouseArea {
-                        id: mouse
-                        onClicked: { myText.focus = true }
-                        anchors.fill: parent
-                        drag.target: stickyPage; drag.axis: MouseArea.XandYAxis; drag.minimumY: 0; drag.maximumY: 500
-                        drag.minimumX: 0; drag.maximumX: 400
+                    id: sticky
+                    scale: 0.7
+                    Image {
+                        id: stickyImage
+                        source: "note-yellow.png"; transformOrigin: Item.TopLeft
+                        smooth: true; y: -20; x: 8 + -width * 0.6 / 2; scale: 0.6
+                    }
+
+                    TextEdit {
+                        id: myText; smooth: true; font.pixelSize: 24
+                        readOnly: false; x: -104; y: 36
+                        rotation: -8; text: noteText; width: 215; height: 200
+                    }
+
+                    Item {
+                        y: -20
+                        x: stickyImage.x
+                        width: stickyImage.width * stickyImage.scale
+                        height: stickyImage.height * stickyImage.scale
+                        MouseArea {
+                            id: mouse
+                            onClicked: { myText.focus = true }
+                            anchors.fill: parent
+                            drag.target: stickyPage; drag.axis: MouseArea.XandYAxis; drag.minimumY: 0; drag.maximumY: page.height - 80
+                            drag.minimumX: 100; drag.maximumX: page.width - 140
+                        }
                     }
                 }
-            }
 
-            Image {
-                source: "tack.png"; transformOrigin: Item.TopLeft
-                x: -width / 2; y: -height * 0.7 / 2; scale: 0.7
-            }
+                Image {
+                    source: "tack.png"; transformOrigin: Item.TopLeft
+                    x: -width / 2; y: -height * 0.5 / 2; scale: 0.7
+                }
 
-            states: State {
-                name: "pressed"
-                when: mouse.pressed
-                PropertyChanges { target: sticky; rotation: 8; scale: 1 }
-                PropertyChanges { target: page; z: 8 }
-            }
+                states: State {
+                    name: "pressed"
+                    when: mouse.pressed
+                    PropertyChanges { target: sticky; rotation: 8; scale: 1 }
+                    PropertyChanges { target: page; z: 8 }
+                }
 
-            transitions: Transition {
-                NumberAnimation { properties: "rotation,scale"; duration: 200 }
+                transitions: Transition {
+                    NumberAnimation { properties: "rotation,scale"; duration: 200 }
+                }
             }
         }
     }
 }
+
+
+
+
+
+
+
+
diff --git a/examples/declarative/velocity/cork.jpg b/examples/declarative/velocity/cork.jpg
index d4d706c..160bc00 100644
--- a/examples/declarative/velocity/cork.jpg
+++ b/examples/declarative/velocity/cork.jpg
diff --git a/examples/declarative/velocity/sticky.png b/examples/declarative/velocity/sticky.png
deleted file mode 100644
index 73df3cd..0000000
--- a/examples/declarative/velocity/sticky.png
+++ /dev/null
diff --git a/examples/declarative/velocity/velocity.qml b/examples/declarative/velocity/velocity.qml
index a091c4e..20821d6 100644
--- a/examples/declarative/velocity/velocity.qml
+++ b/examples/declarative/velocity/velocity.qml
@@ -1,108 +1,46 @@
 import Qt 4.7
 
 Rectangle {
-    color: "lightSteelBlue"
-    width: 800; height: 600
+    width: 800; height: 480; color: "#464646"
 
     ListModel {
         id: list
         ListElement {
             name: "Sunday"
-            dayColor: "#808080"
-            notes: [
-                ListElement {
-                    noteText: "Lunch"
-                    },
-                    ListElement {
-                        noteText: "Party"
-                    }
-            ]
+            notes: [ ListElement { noteText: "Lunch" }, ListElement { noteText: "Birthday Party" } ]
         }
         ListElement {
             name: "Monday"
-            dayColor: "blue"
-            notes: [
-                ListElement {
-                    noteText: "Pickup kids"
-                    },
-                    ListElement {
-                        noteText: "Checkout kinetic"
-                        },
-                        ListElement {
-                            noteText: "Read email"
-                        }
-            ]
+            notes: [ ListElement { noteText: "Pickup kids from\nschool\n4.30pm" },
+            ListElement { noteText: "Checkout Qt" }, ListElement { noteText: "Read email" } ]
         }
         ListElement {
             name: "Tuesday"
-            dayColor: "yellow"
-            notes: [
-                ListElement {
-                    noteText: "Walk dog"
-                    },
-                    ListElement {
-                        noteText: "Buy newspaper"
-                    }
-            ]
+            notes: [ ListElement { noteText: "Walk dog" }, ListElement { noteText: "Buy newspaper" } ]
         }
         ListElement {
-            name: "Wednesday"
-            dayColor: "purple"
-            notes: [
-                ListElement {
-                    noteText: "Cook dinner"
-                    },
-                    ListElement {
-                        noteText: "Eat dinner"
-                    }
-            ]
+            name: "Wednesday"; notes: [ ListElement { noteText: "Cook dinner" } ]
         }
         ListElement {
             name: "Thursday"
-            dayColor: "blue"
-            notes: [
-                ListElement {
-                    noteText: "5:30pm Meeting"
-                    },
-                    ListElement {
-                        noteText: "Weed garden"
-                    }
-            ]
+            notes: [ ListElement { noteText: "Meeting\n5.30pm" }, ListElement { noteText: "Weed garden" } ]
         }
         ListElement {
             name: "Friday"
-            dayColor: "green"
-            notes: [
-                ListElement {
-                    noteText: "Still work"
-                    },
-                    ListElement {
-                        noteText: "Drink"
-                    }
-            ]
+            notes: [ ListElement { noteText: "More work" }, ListElement { noteText: "Grocery shopping" } ]
         }
         ListElement {
             name: "Saturday"
-            dayColor: "orange"
-            notes: [
-                ListElement {
-                    noteText: "Drink"
-                    },
-                    ListElement {
-                        noteText: "Drink"
-                    }
-            ]
+            notes: [ ListElement { noteText: "Drink" }, ListElement { noteText: "Download Qt\nPlay with QML" } ]
         }
     }
-    Flickable {
+
+    ListView {
         id: flickable
-        anchors.fill: parent; contentWidth: lay.width
-        Row {
-            id: lay
-            Repeater {
-                model: list
-                Component { Day { day: name; color: dayColor; stickies: notes } }
-            }
-        }
+        anchors.fill: parent; focus: true
+        model: list; delegate: Day { }
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        orientation: ListView.Horizontal
+        snapMode: ListView.SnapOneItem
     }
 }