Mobile version of Flickr demo in flickr-mobile.qml.

13 files changed, 251 insertions, 0 deletions

diff --git a/demos/declarative/flickr/mobile/Button.qml b/demos/declarative/flickr/mobile/Button.qml
new file mode 100644
index 0000000..275408c
--- /dev/null
+++ b/demos/declarative/flickr/mobile/Button.qml
@@ -0,0 +1,41 @@
+import Qt 4.6
+
+Item {
+    id: Container
+
+    signal clicked
+
+    property string text
+
+    BorderImage {
+        id: Image
+        source: "images/toolbutton2.sci"
+        width: Container.width; height: Container.height
+    }
+    BorderImage {
+        id: Pressed
+        opacity: 0
+        source: "images/toolbutton2.sci"
+        width: Container.width; height: Container.height
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked(); }
+    }
+    Text {
+        color: "white"
+        anchors.centerIn: Image; font.bold: true
+        text: Container.text; style: "Raised"; styleColor: "black"
+    }
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            PropertyChanges {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml
new file mode 100644
index 0000000..8090cd4
--- /dev/null
+++ b/demos/declarative/flickr/mobile/GridDelegate.qml
@@ -0,0 +1,74 @@
+ import Qt 4.6
+
+ Component {
+     id: PhotoDelegate
+     Item {
+         id: Wrapper; width: 79; height: 79
+
+         Script {
+             function photoClicked() {
+                 ImageDetails.photoTitle = title;
+                 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;
+                 ScaleMe.state = "Details";
+             }
+         }
+
+         Item {
+             anchors.centerIn: parent
+             scale: 0.0
+             scale: Behavior { NumberAnimation { easing: "easeInOutQuad"} }
+             id: ScaleMe
+
+             Rectangle { height: 79; width: 79; id: BlackRect;  anchors.centerIn: parent; color: "black"; smooth: true }
+             Rectangle {
+                 id: WhiteRect; width: 77; height: 77; anchors.centerIn: parent; color: "#dddddd"; smooth: true
+                 Image { id: Thumb; source: imagePath; x: 1; y: 1; smooth: true}
+                 Image { source: "mobile/images/gloss.png"; smooth: true}
+             }
+
+             Connection {
+                 sender: ToolBar.button2; signal: "clicked()"
+                 script: if (ScaleMe.state == 'Details' ) ScaleMe.state = 'Show';
+             }
+
+             states: [
+                 State {
+                     name: "Show"; when: Thumb.status == 1
+                     PropertyChanges { target: ScaleMe; scale: 1 }
+                 },
+                 State {
+                     name: "Details"; extend: "Show"
+                     ParentChange { target: Wrapper; parent: ImageDetails.frontContainer }
+                     PropertyChanges { target: Wrapper; x: 20; y: 60 }
+                     PropertyChanges { target: ImageDetails; x: 0 }
+                     PropertyChanges { target: Views; x: -parent.width }
+                     PropertyChanges { target: ToolBar.button2; text: "Back" }
+                 }
+             ]
+             transitions: [
+                 Transition {
+                     from: "Show"; to: "Details"
+                     ParentAction { }
+                     NumberAnimation { properties: "x,y,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
+                 },
+                 Transition {
+                     from: "Details"; to: "Show"
+                     SequentialAnimation {
+                         ParentAction { }
+                         NumberAnimation { properties: "x,y,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
+                         PropertyAction { target: Wrapper; properties: "z" }
+                     }
+                 }
+             ]
+         }
+         MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } }
+     }
+ }
diff --git a/demos/declarative/flickr/mobile/ListDelegate.qml b/demos/declarative/flickr/mobile/ListDelegate.qml
new file mode 100644
index 0000000..b9ec7f2
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ListDelegate.qml
@@ -0,0 +1,24 @@
+import Qt 4.6
+
+Component {
+    id: ListDelegate
+    Item {
+        id: Wrapper; width: Wrapper.ListView.view.width; height: 86
+        Item {
+            id: MoveMe
+            Rectangle { color: "black"; opacity: Wrapper.ListView.index % 2 ? 0.2 : 0.3; height: 84; width: Wrapper.width; y: 1 }
+            Rectangle {
+                id: WhiteRect; x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true
+
+                Image { id: Thumb; source: imagePath; x: 1; y: 1 }
+                Image { source: "images/gloss.png" }
+            }
+            Column {
+                x: 92; width: Wrapper.ListView.view.width - 95; y: 15; spacing: 2
+                Text { text: title; color: "white"; width: parent.width; font.bold: true; elide: "ElideRight"; style: "Raised"; styleColor: "black" }
+                Text { text: photoAuthor; color: "white"; width: parent.width; elide: "ElideLeft"; color: "#cccccc"; style: "Raised"; styleColor: "black" }
+                Text { text: photoDate; color: "white"; width: parent.width; elide: "ElideRight"; color: "#cccccc"; style: "Raised"; styleColor: "black" }
+            }
+        }
+    }
+}
diff --git a/demos/declarative/flickr/mobile/TitleBar.qml b/demos/declarative/flickr/mobile/TitleBar.qml
new file mode 100644
index 0000000..59b8365
--- /dev/null
+++ b/demos/declarative/flickr/mobile/TitleBar.qml
@@ -0,0 +1,74 @@
+import Qt 4.6
+
+Item {
+    id: TitleBar
+
+    BorderImage { source: "images/titlebar2.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Item {
+        id: Container
+        width: (parent.width * 2) - 55 ; height: parent.height
+
+        Script {
+            function accept() {
+                RssModel.tags = Editor.text
+                TitleBar.state = ""
+            }
+        }
+
+        Text {
+            id: CategoryText
+            anchors.left: parent.left; anchors.right: TagButton.left
+            anchors.leftMargin: 10; anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            elide: "ElideLeft"
+            text: (RssModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + RssModel.tags)
+            font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+        }
+
+        Button {
+            id: TagButton; x: TitleBar.width - 50; y: 3; width: 45; height: 32; text: "..."
+            onClicked: if (TitleBar.state == "Tags") accept(); else TitleBar.state = "Tags"
+        }
+
+        Item {
+            id: LineEdit
+            anchors.left: TagButton.right; anchors.leftMargin: 5; y: 4
+            anchors.right: parent.right; anchors.rightMargin: 5; height: parent.height - 9
+            BorderImage { source: "images/lineedit.sci"; anchors.fill: parent }
+
+            TextInput {
+                id: Editor
+                anchors.left: parent.left; anchors.right: parent.right
+                anchors.leftMargin: 10; anchors.rightMargin: 10
+                anchors.verticalCenter: parent.verticalCenter
+                cursorVisible: true; font.bold: true
+                color: "#151515"; highlightColor: "green"
+            }
+            KeyProxy {
+                id: Proxy
+                anchors.fill: parent
+                targets: [(ReturnKey), (Editor)]
+            }
+            Item {
+                id: ReturnKey
+                Keys.onReturnPressed: accept()
+                Keys.onEscapePressed: TitleBar.state = ""
+            }
+        }
+    }
+    states: [
+        State {
+            name: "Tags"
+            PropertyChanges { target: Container; x: -TagButton.x + 5 }
+            PropertyChanges { target: TagButton; text: "OK" }
+            PropertyChanges { target: Proxy; focus: true }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "*"; to: "*"
+            NumberAnimation { properties: "x"; easing: "easeInOutQuad" }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/mobile/ToolBar.qml b/demos/declarative/flickr/mobile/ToolBar.qml
new file mode 100644
index 0000000..aa78c52
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ToolBar.qml
@@ -0,0 +1,23 @@
+import Qt 4.6
+
+Item {
+    id: Toolbar
+    property var button2: Button2
+
+    BorderImage { source: "images/titlebar2.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Button { anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32; text: "Update"; onClicked: RssModel.reload() }
+
+    Button {
+        id: Button2
+        anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32; text: "View mode"
+        onClicked: {
+            if (Button2.text == "View mode") {
+                if (Screen.inListView == true)
+                Screen.inListView = false;
+                else
+                Screen.inListView = true
+            }
+        }
+    }
+}
diff --git a/demos/declarative/flickr/mobile/images/gloss.png b/demos/declarative/flickr/mobile/images/gloss.png
new file mode 100644
index 0000000..5d370cd
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/gloss.png
diff --git a/demos/declarative/flickr/mobile/images/lineedit.png b/demos/declarative/flickr/mobile/images/lineedit.png
new file mode 100644
index 0000000..2cc38dc
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/lineedit.png
diff --git a/demos/declarative/flickr/mobile/images/lineedit.sci b/demos/declarative/flickr/mobile/images/lineedit.sci
new file mode 100644
index 0000000..7c5ec6c
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/lineedit.sci
@@ -0,0 +1,5 @@
+gridLeft: 10
+gridTop: 10
+gridBottom: 10
+gridRight: 10
+imageFile: lineedit.png
diff --git a/demos/declarative/flickr/mobile/images/stripes.png b/demos/declarative/flickr/mobile/images/stripes.png
new file mode 100644
index 0000000..9f36727
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/stripes.png
diff --git a/demos/declarative/flickr/mobile/images/titlebar2.png b/demos/declarative/flickr/mobile/images/titlebar2.png
new file mode 100644
index 0000000..51c9008
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/titlebar2.png
diff --git a/demos/declarative/flickr/mobile/images/titlebar2.sci b/demos/declarative/flickr/mobile/images/titlebar2.sci
new file mode 100644
index 0000000..e8fc2d1
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/titlebar2.sci
@@ -0,0 +1,5 @@
+gridLeft: 22
+gridTop: 10
+gridBottom: 10
+gridRight: 22
+imageFile: titlebar2.png
diff --git a/demos/declarative/flickr/mobile/images/toolbutton2.png b/demos/declarative/flickr/mobile/images/toolbutton2.png
new file mode 100644
index 0000000..8862898
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/toolbutton2.png
diff --git a/demos/declarative/flickr/mobile/images/toolbutton2.sci b/demos/declarative/flickr/mobile/images/toolbutton2.sci
new file mode 100644
index 0000000..e3118b0
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/toolbutton2.sci
@@ -0,0 +1,5 @@
+gridLeft: 15
+gridTop: 4
+gridBottom: 4
+gridRight: 15
+imageFile: toolbutton2.png