Add a new Flickr demo.

18 files changed, 464 insertions, 0 deletions

diff --git a/demos/declarative/flickr/content/ImageDetails.qml b/demos/declarative/flickr/content/ImageDetails.qml
new file mode 100644
index 0000000..7b16831
--- /dev/null
+++ b/demos/declarative/flickr/content/ImageDetails.qml
@@ -0,0 +1,103 @@
+Flipable {
+    id: Container
+
+    property var frontContainer: ContainerFront
+    property var flickableArea: Flickable
+    property var fullScreenArea: BigImage
+    property string photoTitle: ""
+    property string photoDescription: ""
+    property int photoWidth
+    property int photoHeight
+    property string photoType
+    property string photoAuthor
+    property string photoDate
+    property string photoUrl
+    property int rating: 2
+
+    signal closed
+
+    axis: Axis { startX: Container.width / 2; endX: Container.width / 2; endY: 1 }
+
+    front: Item {
+        id: ContainerFront; anchors.fill: Container
+
+        Rect {
+            anchors.fill: parent
+            color: "black"; opacity: 0.4
+            pen.color: "white"; pen.width: 2
+        }
+
+        MediaButton {
+            id: BackButton; x: 630; y: 370; text: "Back"
+            onClicked: { Container.closed.emit() }
+        }
+
+        MediaButton {
+            id: MoreButton; x: 530; y: 370; text: "View..."
+            onClicked: { Container.state='Back' }
+        }
+
+        Text { id: TitleText; style: "Raised"; styleColor: "black"; color: "white"; elide: "ElideRight"
+               x: 220; y: 30; width: parent.width - 240; text: Container.photoTitle; font.size: 22 }
+
+        LikeOMeter { x: 40; y: 250; rating: Container.rating }
+
+        Flickable { id: Flickable; x: 220; width: 480; height: 230; y: 120; clip: true
+                    viewportWidth: 480; viewportHeight: DescriptionText.height
+
+            WebView { id: DescriptionText; width: parent.width
+                      html: "<style TYPE=\"text/css\">body {color: white;} a:link {color: cyan; text-decoration: underline; }</style>" + Container.photoDescription }
+        }
+
+        Text { id: Size; color: "white"; width: 300; x: 40; y: 300
+               text: "<b>Size:</b> " + Container.photoWidth + 'x' + Container.photoHeight }
+        Text { id: Type; color: "white"; width: 300; x: 40; anchors.top: Size.bottom
+               text: "<b>Type:</b> " + Container.photoType }
+
+        Text { id: Author; color: "white"; width: 300; x: 220; y: 80
+               text: "<b>Author:</b> " + Container.photoAuthor }
+        Text { id: Date; color: "white"; width: 300; x: 220; anchors.top: Author.bottom
+               text: "<b>Published:</b> " + Container.photoDate }
+
+        ScrollBar { id: ScrollBar; x: 720; y: Flickable.y; width: 7; height: Flickable.height; opacity: 0;
+                    flickableArea: Flickable; clip: true }
+    }
+
+    back: Item {
+        anchors.fill: Container
+
+        Rect { anchors.fill: parent; color: "black"; opacity: 0.4; pen.color: "white"; pen.width: 2 }
+
+        Loading { anchors.centeredIn: parent; visible: BigImage.status }
+        Flickable {
+            id: Flick; width: Container.width - 10; height: Container.height - 10
+            x: 5; y: 5; clip: true; viewportWidth: (BigImage.width * BigImage.scale) + BigImage.x;
+            viewportHeight: BigImage.height * BigImage.scale
+
+            Image {
+                id: BigImage; source: Container.photoUrl; scale: Slider.value
+                x:Math.max(0, ((Flick.width/2)-(width * scale / 2)));
+                y:Math.max(0, (Flick.height/2)-(height * scale / 2));
+            }
+        }
+
+        MediaButton {
+            id: BackButton2; x: 630; y: 370; text: "Back"; onClicked: { Container.state = '' }
+        }
+
+        Slider { id: Slider; x: 25; y: 374; imageWidth: Container.photoWidth; imageHeight: Container.photoHeight }
+    }
+
+    states: [
+        State {
+            name: "Back"
+            SetProperty { target: Container; property: "rotation"; value: 180 }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            NumericAnimation { easing: "easeInOutQuad"; properties: "rotation"; duration: 500 }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/content/LikeOMeter.qml b/demos/declarative/flickr/content/LikeOMeter.qml
new file mode 100644
index 0000000..61317ae
--- /dev/null
+++ b/demos/declarative/flickr/content/LikeOMeter.qml
@@ -0,0 +1,33 @@
+Item {
+    id: Container
+
+    property int rating: 2
+
+    HorizontalLayout {
+        Star {
+            rating: 0
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 0
+        }
+        Star {
+            rating: 1
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 1
+        }
+        Star {
+            rating: 2
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 2
+        }
+        Star {
+            rating: 3
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 3
+        }
+        Star {
+            rating: 4
+            onClicked: { Container.rating = rating }
+            on: Container.rating >= 4
+        }
+    }
+}
diff --git a/demos/declarative/flickr/content/Loading.qml b/demos/declarative/flickr/content/Loading.qml
new file mode 100644
index 0000000..cf27e38
--- /dev/null
+++ b/demos/declarative/flickr/content/Loading.qml
@@ -0,0 +1,6 @@
+Image {
+    id: Loading; source: "pics/loading.png"; transformOrigin: "Center"
+    rotation: NumericAnimation {
+        id: "RotationAnimation"; from: 0; to: 360; running:true; repeat: true; duration: 900
+    }
+}
diff --git a/demos/declarative/flickr/content/MediaButton.qml b/demos/declarative/flickr/content/MediaButton.qml
new file mode 100644
index 0000000..6392a13
--- /dev/null
+++ b/demos/declarative/flickr/content/MediaButton.qml
@@ -0,0 +1,39 @@
+Item {
+    id: Container
+
+    signal clicked
+
+    property string text
+
+    Image {
+        id: Image
+        source: "pics/button.png"
+    }
+    Image {
+        id: Pressed
+        source: "pics/button-pressed.png"
+        opacity: 0
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked.emit(); }
+    }
+    Text {
+        font.bold: true
+        color: "white"
+        anchors.centeredIn: Image
+        text: Container.text
+    }
+    width: Image.width
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            SetProperties {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/content/ScrollBar.qml b/demos/declarative/flickr/content/ScrollBar.qml
new file mode 100644
index 0000000..2c4ff54
--- /dev/null
+++ b/demos/declarative/flickr/content/ScrollBar.qml
@@ -0,0 +1,38 @@
+Item {
+    id: Container
+
+    property var flickableArea
+
+    Rect {
+        radius: 5
+        color: "black"
+        opacity: 0.3
+        pen.color: "white"
+        pen.width: 2
+        x: 0
+        y: flickableArea.pageYPosition * Container.height
+        width: parent.width
+        height: flickableArea.pageHeight * Container.height
+    }
+    states: [
+        State {
+            name: "show"
+            when: flickableArea.moving
+            SetProperties {
+                target: Container
+                opacity: 1
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            fromState: "*"
+            toState: "*"
+            NumericAnimation {
+                target: Container
+                properties: "opacity"
+                duration: 400
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/content/Slider.qml b/demos/declarative/flickr/content/Slider.qml
new file mode 100644
index 0000000..ba9d842
--- /dev/null
+++ b/demos/declarative/flickr/content/Slider.qml
@@ -0,0 +1,24 @@
+Item {
+    id: Slider; width: 400; height: 16
+
+    property var value: Handle.x / Slider.xMax
+    property int xMax: Slider.width - Handle.width - 2
+    property int imageWidth
+    property int imageHeight
+
+    Rect {
+        id: Container; anchors.fill: parent; gradientColor: "#66000000";
+        pen.color: "white"; pen.width: 1;  color: "#66343434"; radius: 8
+    }
+
+    Rect {
+        id: Handle
+        x: Slider.width / 2 - Handle.width / 2; y: 2; width: 30; height: 12
+        color: "lightgray"; gradientColor: "gray"; radius: 6
+
+        MouseRegion {
+            anchors.fill: parent; drag.target: parent
+            drag.axis: "x"; drag.xmin: 2; drag.xmax: Slider.xMax
+        }
+    }
+}
diff --git a/demos/declarative/flickr/content/Star.qml b/demos/declarative/flickr/content/Star.qml
new file mode 100644
index 0000000..22fc138
--- /dev/null
+++ b/demos/declarative/flickr/content/Star.qml
@@ -0,0 +1,44 @@
+Item {
+    id: Container
+    width: 24
+    height: 24
+
+    property string rating
+    property string on
+
+    signal clicked
+
+    Image {
+        id: Image
+        source: "pics/ghns_star.png"
+        x: 6
+        y: 7
+        opacity: 0.4
+        scale: 0.5
+    }
+    MouseRegion {
+        anchors.fill: Container
+        onClicked: { Container.clicked.emit() }
+    }
+    states: [
+        State {
+            name: "on"
+            when: Container.on == true
+            SetProperties {
+                target: Image
+                opacity: 1
+                scale: 1
+                x: 1
+                y: 0
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumericAnimation {
+                properties: "opacity,scale,x,y"
+                easing: "easeOutBounce"
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/content/pics/background.png b/demos/declarative/flickr/content/pics/background.png
new file mode 100644
index 0000000..5b37072
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/background.png
diff --git a/demos/declarative/flickr/content/pics/button-pressed.png b/demos/declarative/flickr/content/pics/button-pressed.png
new file mode 100644
index 0000000..e434d32
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/button-pressed.png
diff --git a/demos/declarative/flickr/content/pics/button.png b/demos/declarative/flickr/content/pics/button.png
new file mode 100644
index 0000000..56a63ce
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/button.png
diff --git a/demos/declarative/flickr/content/pics/ghns_star.png b/demos/declarative/flickr/content/pics/ghns_star.png
new file mode 100644
index 0000000..4ad43cc
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/ghns_star.png
diff --git a/demos/declarative/flickr/content/pics/loading.png b/demos/declarative/flickr/content/pics/loading.png
new file mode 100644
index 0000000..47a1589
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/loading.png
diff --git a/demos/declarative/flickr/content/pics/reflection.png b/demos/declarative/flickr/content/pics/reflection.png
new file mode 100644
index 0000000..c143a48
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/reflection.png
diff --git a/demos/declarative/flickr/content/pics/shadow-bottom.png b/demos/declarative/flickr/content/pics/shadow-bottom.png
new file mode 100644
index 0000000..523f6e7
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/shadow-bottom.png
diff --git a/demos/declarative/flickr/content/pics/shadow-corner.png b/demos/declarative/flickr/content/pics/shadow-corner.png
new file mode 100644
index 0000000..ef8c856
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/shadow-corner.png
diff --git a/demos/declarative/flickr/content/pics/shadow-right-screen.png b/demos/declarative/flickr/content/pics/shadow-right-screen.png
new file mode 100644
index 0000000..9856c4f
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/shadow-right-screen.png
diff --git a/demos/declarative/flickr/content/pics/shadow-right.png b/demos/declarative/flickr/content/pics/shadow-right.png
new file mode 100644
index 0000000..f534a35
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/shadow-right.png
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"
+    }
+}