Add a new Flickr demo.

17 files changed, 287 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