From 942a605a52dbbd6dfa824e3b76e37576c7d79f6e Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Thu, 8 Apr 2010 15:56:30 +1000 Subject: Improve velocity example --- examples/declarative/velocity/Day.qml | 125 ++++++++++++++++------------- examples/declarative/velocity/cork.jpg | Bin 88766 -> 149337 bytes examples/declarative/velocity/sticky.png | Bin 15319 -> 0 bytes examples/declarative/velocity/velocity.qml | 94 ++++------------------ 4 files changed, 84 insertions(+), 135 deletions(-) delete mode 100644 examples/declarative/velocity/sticky.png 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 Binary files a/examples/declarative/velocity/cork.jpg and b/examples/declarative/velocity/cork.jpg differ diff --git a/examples/declarative/velocity/sticky.png b/examples/declarative/velocity/sticky.png deleted file mode 100644 index 73df3cd..0000000 Binary files a/examples/declarative/velocity/sticky.png and /dev/null differ 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 } } -- cgit v0.12