diff options
Diffstat (limited to 'demos/declarative/flickr/flickr.qml')
| -rw-r--r-- | demos/declarative/flickr/flickr.qml | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr.qml new file mode 100644 index 0000000..c7cb699 --- /dev/null +++ b/demos/declarative/flickr/flickr.qml @@ -0,0 +1,177 @@ +import "content" + +Item { + id: MainWindow; width: 800; height: 450 + + property bool showPathView : false + + resources: [ + XmlListModel { + id: FeedModel + source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2" + query: "doc($src)/rss/channel/item" + namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" + + Role { name: "title"; query: "title/string()" } + Role { name: "imagePath"; query: "media:thumbnail/@url/string()" } + Role { name: "url"; query: "media:content/@url/string()" } + Role { name: "description"; query: "description/string()"; isCData: true } + Role { name: "photoWidth"; query: "media:content/@width/string()" } + Role { name: "photoHeight"; query: "media:content/@height/string()" } + Role { name: "photoType"; query: "media:content/@type/string()" } + Role { name: "photoAuthor"; query: "author/string()" } + Role { name: "photoDate"; query: "pubDate/string()" } + }, + + Component { + id: PhotoDelegate + Item { + id: Wrapper; width: 85; height: 85 + scale: Wrapper.PathView.scale; z: Wrapper.PathView.z + + transform: [ + Rotation3D { axis.startX: 30; axis.endX: 30; axis.endY: 60; angle: Wrapper.PathView.angle } + ] + + Connection { + sender: ImageDetails; signal: "closed()" + script: { if (Wrapper.state == 'Details') Wrapper.state = '' } + } + + Script { + function photoClicked() { + ImageDetails.photoTitle = title; + ImageDetails.flickableArea.yPosition = 0; + ImageDetails.fullScreenArea.source = ""; + ImageDetails.photoDescription = description; + ImageDetails.photoWidth = photoWidth; + ImageDetails.photoHeight = photoHeight; + ImageDetails.photoType = photoType; + ImageDetails.photoAuthor = photoAuthor; + ImageDetails.photoDate = photoDate; + ImageDetails.photoUrl = url; + ImageDetails.rating = 0; + Wrapper.state = "Details"; + } + } + + Rect { + id: WhiteRect; anchors.fill: parent; color: "white"; radius: 5 + + Loading { x: 26; y: 26; visible: Thumb.status } + Image { id: Thumb; source: imagePath; x: 5; y: 5 } + + Item { + id: Shadows + Image { source: "content/pics/shadow-right.png"; x: WhiteRect.width; height: WhiteRect.height } + Image { source: "content/pics/shadow-bottom.png"; y: WhiteRect.height; width: WhiteRect.width } + Image { id: Corner; source: "content/pics/shadow-corner.png"; x: WhiteRect.width; y: WhiteRect.height } + } + } + + MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } } + + states: [ + State { + name: "Details" + ParentChange { target: Wrapper; parent: ImageDetails.frontContainer } + SetProperties { target: Wrapper; x: 45; y: 35; scale: 1 } + SetProperties { target: Shadows; opacity: 0 } + SetProperties { target: ImageDetails; y: 20 } + SetProperties { target: PhotoGridView; y: "-480" } + SetProperties { target: PhotoPathView; y: "-480" } + SetProperties { target: CloseButton; opacity: 0 } + SetProperties { target: FetchButton; opacity: 0 } + SetProperties { target: CategoryText; y: "-50" } + } + ] + + transitions: [ + Transition { + fromState: "*"; toState: "*" + ParentChangeAction { } + NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" } + } + ] + } + } + ] + + Item { + id: Background + + Image { source: "content/pics/background.png"; opaque: true } + + GridView { + id: PhotoGridView; model: FeedModel; delegate: PhotoDelegate + cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330 + } + + PathView { + id: PhotoPathView; model: FeedModel; delegate: PhotoDelegate + y: -380; width: 800; height: 330; pathItemCount: 10 + path: Path { + startX: -50; startY: 40; + + PathAttribute { name: "scale"; value: 1 } + PathAttribute { name: "angle"; value: -45 } + + PathCubic { + x: 400; y: 220 + control1X: 140; control1Y: 40 + control2X: 210; control2Y: 220 + } + + PathAttribute { name: "scale"; value: 1.2 } + PathAttribute { name: "z"; value: 1 } + PathAttribute { name: "angle"; value: 0 } + + PathCubic { + x: 850; y: 40 + control2X: 660; control2Y: 40 + control1X: 590; control1Y: 220 + } + + PathAttribute { name: "scale"; value: 1 } + PathAttribute { name: "angle"; value: 45 } + } + + } + + ImageDetails { id: ImageDetails; width: 750; x: 25; y: 500; height: 410 } + + MediaButton { + id: CloseButton; x: 680; y: 410; text: "View Mode" + onClicked: { if (MainWindow.showPathView == true) MainWindow.showPathView = false; else MainWindow.showPathView = true } + } + + MediaButton { + id: FetchButton + text: "Update" + anchors.right: CloseButton.left; anchors.rightMargin: 5 + anchors.top: CloseButton.top + onClicked: { FeedModel.fetch(); } + } + + states: [ + State { + name: "PathView" + when: MainWindow.showPathView == true + SetProperties { target: PhotoPathView; y: 80 } + SetProperties { target: PhotoGridView; y: -380 } + } + ] + + transitions: [ + Transition { + fromState: "*"; toState: "*" + NumericAnimation { properties: "y"; duration: 650; easing: "easeOutBounce(amplitude:0.1)" } + } + ] + } + + Text { + id: CategoryText; anchors.horizontalCenter: parent.horizontalCenter; y: 15; text: "Flickr - Uploads from everyone" + font.size: 16; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" + } +} |