Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

4 files changed, 312 insertions, 4 deletions

diff --git a/demos/declarative/flickr/content/ImageDetails.qml b/demos/declarative/flickr/content/ImageDetails.qml
index d721983..955f85d 100644
--- a/demos/declarative/flickr/content/ImageDetails.qml
+++ b/demos/declarative/flickr/content/ImageDetails.qml
@@ -3,7 +3,6 @@ Flipable {
 
     property var frontContainer: ContainerFront
     property var flickableArea: Flickable
-    property var fullScreenArea: BigImage
     property string photoTitle: ""
     property string photoDescription: ""
     property string photoTags: ""
@@ -73,7 +72,8 @@ Flipable {
 
         Rect { anchors.fill: parent; color: "black"; opacity: 0.4; pen.color: "white"; pen.width: 2 }
 
-        Loading { anchors.centeredIn: parent; visible: BigImage.status }
+//        Loading { anchors.centeredIn: parent; visible: BigImage.status }
+        Progress { anchors.centeredIn: parent; width: 200; height: 18; progress: BigImage.progress; 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;
@@ -89,6 +89,11 @@ Flipable {
         MediaButton {
             id: BackButton2; x: 630; y: 370; text: "Back"; onClicked: { Container.state = '' }
         }
+        Text {
+            text: "Image Unavailable"
+            visible: BigImage.status == 'Error'
+            anchors.centeredIn: parent; color: "white"; font.bold: true
+        }
 
         Slider { id: Slider; x: 25; y: 374; imageWidth: Container.photoWidth; imageHeight: Container.photoHeight }
     }
diff --git a/demos/declarative/flickr/content/Progress.qml b/demos/declarative/flickr/content/Progress.qml
new file mode 100644
index 0000000..92a232e
--- /dev/null
+++ b/demos/declarative/flickr/content/Progress.qml
@@ -0,0 +1,25 @@
+Item {
+    id: Progress;
+
+    property var progress: 0
+
+    Rect {
+        id: Container; anchors.fill: parent; gradientColor: "#66000000";
+        pen.color: "white"; pen.width: 1;  color: "#66343434"; radius: height/2 - 2
+    }
+
+    Rect {
+        id: Fill
+        y: 2; height: parent.height-4;
+        x: 2; width: Math.max(parent.width * progress - 4, 0);
+        opacity: width < 1 ? 0 : 1
+        color: "lightsteelblue"; gradientColor: "steelblue"; radius: height/2 - 2
+    }
+
+    Text {
+        text: Math.round(progress * 100) + "%"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        color: "white"; font.bold: true
+    }
+}
diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr.qml
index 83fd845..85af8e3 100644
--- a/demos/declarative/flickr/flickr.qml
+++ b/demos/declarative/flickr/flickr.qml
@@ -37,14 +37,18 @@ Item {
 
             Connection {
                 sender: ImageDetails; signal: "closed()"
-                script: { if (Wrapper.state == 'Details') Wrapper.state = '' }
+                script: {
+                    if (Wrapper.state == 'Details') {
+                        Wrapper.state = '';
+                        ImageDetails.photoUrl = "";
+                    }
+                }
             }
 
             Script {
                function photoClicked() {
                    ImageDetails.photoTitle = title;
                    ImageDetails.flickableArea.yPosition = 0;
-                   ImageDetails.fullScreenArea.source = "";
                    ImageDetails.photoDescription = description;
                    ImageDetails.photoTags = tags;
                    ImageDetails.photoWidth = photoWidth;
diff --git a/demos/declarative/flickr/flickr2.qml b/demos/declarative/flickr/flickr2.qml
new file mode 100644
index 0000000..4875fa4
--- /dev/null
+++ b/demos/declarative/flickr/flickr2.qml
@@ -0,0 +1,274 @@
+import "content"
+
+Item {
+    id: MainWindow; width: 800; height: 450
+
+    property bool showPathView : false
+
+        VisualModel {
+            id: MyVisualModel
+            model:
+                XmlListModel {
+                    id: FeedModel
+                    property string tags : ""
+                    source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"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: "tags"; query: "media:category/string()" }
+                    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()" }
+                }
+
+            delegate: Package {
+                Item {
+                    id: Wrapper; width: 85; height: 85
+                    scale: Wrapper.PathView.scale; z: Wrapper.PathView.z
+
+                    transform: [
+                        Rotation3D { id: Rotation; 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.photoTags = tags;
+                            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"
+                            SetProperties { target: ImageDetails; z: 2 }
+                            ParentChange { target: Wrapper; parent: ImageDetails.frontContainer }
+                            SetProperties { target: Wrapper; x: 45; y: 35; scale: 1; z: 1000 }
+                            SetProperties { target: Rotation; angle: 0 }
+                            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: "Details"
+                            ParentChangeAction { }
+                            NumericAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
+                        },
+                        Transition {
+                            fromState: "Details"; toState: "*"
+                            SequentialAnimation {
+                                ParentChangeAction { }
+                                NumericAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
+                                SetPropertyAction { filter: Wrapper; properties: "z" }
+                            }
+                        }
+                    ]
+                }
+
+                Item {
+                    Package.name: "rightBox"
+                    id: RightBox; x: 200; width: 85; height: 85
+                }
+
+                Item {
+                    Package.name: "leftBox"
+                    id: LeftBox; width: 85; height: 85
+                }
+
+                Item {
+                id: MyItem
+                states: [
+                    State {
+                        name: "left"
+                        when: MainWindow.showPathView == true
+                        SetProperty {
+                            target: Wrapper
+                            property: "moveToParent"
+                            value: LeftBox
+                        }
+                    },
+                    State {
+                        name: "right"
+                        when: MainWindow.showPathView == false
+                            SetProperty {
+                            target: Wrapper
+                            property: "moveToParent"
+                            value: RightBox
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        fromState: "*"
+                        toState: "*"
+                        SequentialAnimation {
+                            SetPropertyAction {
+                                target: Wrapper
+                                property: "moveToParent"
+                                value: Bounce
+                            }
+                            ParallelAnimation {
+                                NumericAnimation {
+                                    target: Wrapper
+                                    properties: "x"
+                                    to: 0
+                                    duration: 250
+                                }
+                                NumericAnimation {
+                                    target: Wrapper
+                                    properties: "y"
+                                    to: 0
+                                    easing: "easeInQuad"
+                                    duration: 250
+                                }
+                            }
+                            SetPropertyAction {
+                                target: Wrapper
+                                property: "moveToParent"
+                            }
+                            ParallelAnimation {
+                                NumericAnimation {
+                                    target: Wrapper
+                                    properties: "x"
+                                    to: 0
+                                    duration: 250
+                                }
+                                NumericAnimation {
+                                    target: Wrapper
+                                    properties: "y"
+                                    to: 0
+                                    easing: "easeOutQuad"
+                                    duration: 250
+                                }
+                            }
+                        }
+                    }
+                ]
+                state: "right"
+            }
+
+            }
+        }
+
+
+    Item {
+        id: Background
+
+        Image { source: "content/pics/background.png"; opaque: true }
+
+        GridView {
+            id: PhotoGridView; model: MyVisualModel.parts.leftBox
+            cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1
+        }
+
+        PathView {
+            id: PhotoPathView; model: MyVisualModel.parts.rightBox
+            y: 80; width: 800; height: 330; z: 1
+            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.reload(); }
+        }
+
+        states: [
+            State {
+                name: "PathView"
+            }
+        ]
+
+        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 - " +
+            (FeedModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + FeedModel.tags)
+        font.size: 16; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+    }
+}