summaryrefslogtreecommitdiffstats
path: root/demos/declarative/flickr/mobile
diff options
context:
space:
mode:
Diffstat (limited to 'demos/declarative/flickr/mobile')
-rw-r--r--demos/declarative/flickr/mobile/Button.qml38
-rw-r--r--demos/declarative/flickr/mobile/GridDelegate.qml72
-rw-r--r--demos/declarative/flickr/mobile/ImageDetails.qml124
-rw-r--r--demos/declarative/flickr/mobile/ListDelegate.qml23
-rw-r--r--demos/declarative/flickr/mobile/TitleBar.qml76
-rw-r--r--demos/declarative/flickr/mobile/ToolBar.qml24
-rw-r--r--demos/declarative/flickr/mobile/images/gloss.pngbin0 -> 1236 bytes
-rw-r--r--demos/declarative/flickr/mobile/images/lineedit.pngbin0 -> 1415 bytes
-rw-r--r--demos/declarative/flickr/mobile/images/lineedit.sci5
-rw-r--r--demos/declarative/flickr/mobile/images/stripes.pngbin0 -> 257 bytes
-rw-r--r--demos/declarative/flickr/mobile/images/titlebar.pngbin0 -> 1436 bytes
-rw-r--r--demos/declarative/flickr/mobile/images/titlebar.sci5
-rw-r--r--demos/declarative/flickr/mobile/images/toolbutton.pngbin0 -> 2550 bytes
-rw-r--r--demos/declarative/flickr/mobile/images/toolbutton.sci5
14 files changed, 372 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..770330c
--- /dev/null
+++ b/demos/declarative/flickr/mobile/Button.qml
@@ -0,0 +1,38 @@
+import Qt 4.6
+
+Item {
+ id: container
+
+ signal clicked
+
+ property string text
+
+ BorderImage {
+ id: buttonImage
+ source: "images/toolbutton.sci"
+ width: container.width; height: container.height
+ }
+ BorderImage {
+ id: pressed
+ opacity: 0
+ source: "images/toolbutton.sci"
+ width: container.width; height: container.height
+ }
+ MouseRegion {
+ id: mouseRegion
+ anchors.fill: buttonImage
+ onClicked: { container.clicked(); }
+ }
+ Text {
+ color: "white"
+ anchors.centerIn: buttonImage; font.bold: true
+ text: container.text; style: Text.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..3a42507
--- /dev/null
+++ b/demos/declarative/flickr/mobile/GridDelegate.qml
@@ -0,0 +1,72 @@
+ import Qt 4.6
+
+ Component {
+ id: photoDelegate
+ Item {
+ id: wrapper; width: 79; height: 79
+
+ Script {
+ function photoClicked() {
+ imageDetails.photoTitle = title;
+ 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: "images/gloss.png" }
+ }
+
+ Connection {
+ sender: toolBar; signal: "button2Clicked()"
+ script: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show';
+ }
+
+ states: [
+ State {
+ name: "Show"; when: thumb.status == 1
+ PropertyChanges { target: scaleMe; scale: 1 }
+ },
+ State {
+ name: "Details"
+ PropertyChanges { target: scaleMe; scale: 1 }
+ ParentChange { target: wrapper; parent: imageDetails.frontContainer }
+ PropertyChanges { target: wrapper; x: 20; y: 60; z: 1000 }
+ PropertyChanges { target: background; state: "DetailedView" }
+ }
+ ]
+ transitions: [
+ Transition {
+ from: "Show"; to: "Details"
+ ParentAction { }
+ NumberAnimation { matchProperties: "x,y"; duration: 500; easing: "easeInOutQuad" }
+ },
+ Transition {
+ from: "Details"; to: "Show"
+ SequentialAnimation {
+ ParentAction { }
+ NumberAnimation { matchProperties: "x,y"; duration: 500; easing: "easeInOutQuad" }
+ PropertyAction { matchTargets: wrapper; matchProperties: "z" }
+ }
+ }
+ ]
+ }
+ MouseRegion { anchors.fill: wrapper; onClicked: { photoClicked() } }
+ }
+ }
diff --git a/demos/declarative/flickr/mobile/ImageDetails.qml b/demos/declarative/flickr/mobile/ImageDetails.qml
new file mode 100644
index 0000000..9116428
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ImageDetails.qml
@@ -0,0 +1,124 @@
+import Qt 4.6
+import "../common" as Common
+
+Flipable {
+ id: container
+
+ property var frontContainer: containerFront
+ property string photoTitle: ""
+ property string photoTags: ""
+ property int photoWidth
+ property int photoHeight
+ property string photoType
+ property string photoAuthor
+ property string photoDate
+ property string photoUrl
+ property int rating: 2
+ property var prevScale: 1.0
+
+ signal closed
+
+ transform: Rotation {
+ id: itemRotation
+ origin.x: container.width / 2;
+ axis.y: 1; axis.z: 0
+ }
+
+ front: Item {
+ id: containerFront; anchors.fill: container
+
+ Rectangle {
+ anchors.fill: parent
+ color: "black"; opacity: 0.4
+ }
+
+ Column {
+ spacing: 10
+ anchors {
+ left: parent.left; leftMargin: 20
+ right: parent.right; rightMargin: 20
+ top: parent.top; topMargin: 180
+ }
+ Text { font.bold: true; color: "white"; elide: Text.ElideRight; text: container.photoTitle }
+ Text { color: "white"; elide: Text.ElideRight; text: "<b>Size:</b> " + container.photoWidth + 'x' + container.photoHeight }
+ Text { color: "white"; elide: Text.ElideRight; text: "<b>Type:</b> " + container.photoType }
+ Text { color: "white"; elide: Text.ElideRight; text: "<b>Author:</b> " + container.photoAuthor }
+ Text { color: "white"; elide: Text.ElideRight; text: "<b>Published:</b> " + container.photoDate }
+ Text { color: "white"; elide: Text.ElideRight; text: container.photoTags == "" ? "" : "<b>Tags:</b> " }
+ Text { color: "white"; elide: Text.ElideRight; elide: Text.ElideRight; text: container.photoTags }
+ }
+ }
+
+ back: Item {
+ anchors.fill: container
+
+ Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4 }
+
+ Common.Progress { anchors.centerIn: parent; width: 200; height: 18; progress: bigImage.progress; visible: bigImage.status!=1 }
+ Flickable {
+ id: flickable; anchors.fill: parent; clip: true
+ viewportWidth: imageContainer.width; viewportHeight: imageContainer.height
+
+ Item {
+ id: imageContainer
+ width: Math.max(bigImage.width * bigImage.scale, flickable.width);
+ height: Math.max(bigImage.height * bigImage.scale, flickable.height);
+
+ Image {
+ id: bigImage; source: container.photoUrl; scale: slider.value
+ // Center image if it is smaller than the flickable area.
+ x: imageContainer.width > width*scale ? (imageContainer.width - width*scale) / 2 : 0
+ y: imageContainer.height > height*scale ? (imageContainer.height - height*scale) / 2 : 0
+ smooth: !flickable.moving
+ onStatusChanged : {
+ // Default scale shows the entire image.
+ if (status == 1 && width != 0) {
+ slider.minimum = Math.min(flickable.width / width, flickable.height / height);
+ prevScale = Math.min(slider.minimum, 1);
+ slider.value = prevScale;
+ }
+ }
+ }
+ }
+ }
+
+ Text {
+ text: "Image Unavailable"
+ visible: bigImage.status == 'Error'
+ anchors.centerIn: parent; color: "white"; font.bold: true
+ }
+
+ Common.Slider {
+ id: slider; visible: { bigImage.status == 1 && maximum > minimum }
+ anchors {
+ bottom: parent.bottom; bottomMargin: 65
+ left: parent.left; leftMargin: 25
+ right: parent.right; rightMargin: 25
+ }
+ onValueChanged: {
+ if (bigImage.width * value > flickable.width) {
+ var xoff = (flickable.width/2 + flickable.viewportX) * value / prevScale;
+ flickable.viewportX = xoff - flickable.width/2;
+ }
+ if (bigImage.height * value > flickable.height) {
+ var yoff = (flickable.height/2 + flickable.viewportY) * value / prevScale;
+ flickable.viewportY = yoff - flickable.height/2;
+ }
+ prevScale = value;
+ }
+ }
+ }
+
+ states: State {
+ name: "Back"
+ PropertyChanges { target: itemRotation; angle: 180 }
+ }
+
+ transitions: Transition {
+ SequentialAnimation {
+ PropertyAction { target: bigImage; property: "smooth"; value: false }
+ NumberAnimation { easing: "easeInOutQuad"; matchProperties: "angle"; duration: 500 }
+ PropertyAction { target: bigImage; property: "smooth"; value: !flickable.moving }
+ }
+ }
+}
diff --git a/demos/declarative/flickr/mobile/ListDelegate.qml b/demos/declarative/flickr/mobile/ListDelegate.qml
new file mode 100644
index 0000000..75c4572
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ListDelegate.qml
@@ -0,0 +1,23 @@
+import Qt 4.6
+
+Component {
+ Item {
+ id: wrapper; width: wrapper.ListView.view.width; height: 86
+ Item {
+ id: moveMe
+ Rectangle { color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: wrapper.width; y: 1 }
+ Rectangle {
+ x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true
+
+ Image { 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: Text.ElideRight; style: Text.Raised; styleColor: "black" }
+ Text { text: photoAuthor; color: "white"; width: parent.width; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+ Text { text: photoDate; color: "white"; width: parent.width; elide: Text.ElideRight; color: "#cccccc"; style: Text.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..0341585
--- /dev/null
+++ b/demos/declarative/flickr/mobile/TitleBar.qml
@@ -0,0 +1,76 @@
+import Qt 4.6
+
+Item {
+ id: titleBar
+ property string untaggedString: "Uploads from everyone"
+ property string taggedString: "Recent uploads tagged "
+
+ BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+ Item {
+ id: container
+ width: (parent.width * 2) - 55 ; height: parent.height
+
+ Script {
+ function accept() {
+ titleBar.state = ""
+ background.state = ""
+ rssModel.tags = editor.text
+ }
+ }
+
+ Text {
+ id: categoryText
+ anchors {
+ left: parent.left; right: tagButton.left; leftMargin: 10; rightMargin: 10
+ verticalCenter: parent.verticalCenter
+ }
+ elide: Text.ElideLeft
+ text: (rssModel.tags=="" ? untaggedString : taggedString + rssModel.tags)
+ font.bold: true; color: "White"; style: Text.Raised; styleColor: "Black"
+ }
+
+ Button {
+ id: tagButton; x: titleBar.width - 50; width: 45; height: 32; text: "..."
+ onClicked: if (titleBar.state == "Tags") accept(); else titleBar.state = "Tags"
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
+ Item {
+ id: lineEdit
+ y: 4; height: parent.height - 9
+ anchors { left: tagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 }
+
+ BorderImage { source: "images/lineedit.sci"; anchors.fill: parent }
+
+ TextInput {
+ id: editor
+ anchors {
+ left: parent.left; right: parent.right; leftMargin: 10; rightMargin: 10
+ verticalCenter: parent.verticalCenter
+ }
+ cursorVisible: true; font.bold: true
+ color: "#151515"; selectionColor: "Green"
+ }
+
+ Keys.forwardTo: [ (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: lineEdit; focus: true }
+ }
+
+ transitions: Transition {
+ NumberAnimation { matchProperties: "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..f96c767
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ToolBar.qml
@@ -0,0 +1,24 @@
+import Qt 4.6
+
+Item {
+ id: toolbar
+
+ property alias button1Label: button1.text
+ property alias button2Label: button2.text
+ signal button1Clicked
+ signal button2Clicked
+
+ BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+ Button {
+ id: button1
+ anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32
+ onClicked: toolbar.button1Clicked()
+ }
+
+ Button {
+ id: button2
+ anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32
+ onClicked: toolbar.button2Clicked()
+ }
+}
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
Binary files differ
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
Binary files differ
diff --git a/demos/declarative/flickr/mobile/images/lineedit.sci b/demos/declarative/flickr/mobile/images/lineedit.sci
new file mode 100644
index 0000000..054bff7
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/lineedit.sci
@@ -0,0 +1,5 @@
+border.left: 10
+border.top: 10
+border.bottom: 10
+border.right: 10
+source: 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
Binary files differ
diff --git a/demos/declarative/flickr/mobile/images/titlebar.png b/demos/declarative/flickr/mobile/images/titlebar.png
new file mode 100644
index 0000000..51c9008
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/titlebar.png
Binary files differ
diff --git a/demos/declarative/flickr/mobile/images/titlebar.sci b/demos/declarative/flickr/mobile/images/titlebar.sci
new file mode 100644
index 0000000..0418d94
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/titlebar.sci
@@ -0,0 +1,5 @@
+border.left: 10
+border.top: 12
+border.bottom: 12
+border.right: 10
+source: titlebar.png
diff --git a/demos/declarative/flickr/mobile/images/toolbutton.png b/demos/declarative/flickr/mobile/images/toolbutton.png
new file mode 100644
index 0000000..1131001
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/toolbutton.png
Binary files differ
diff --git a/demos/declarative/flickr/mobile/images/toolbutton.sci b/demos/declarative/flickr/mobile/images/toolbutton.sci
new file mode 100644
index 0000000..9e4f965
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/toolbutton.sci
@@ -0,0 +1,5 @@
+border.left: 15
+border.top: 4
+border.bottom: 4
+border.right: 15
+source: toolbutton.png
generated by cgit v0.12 at 2025-01-10 05:11:05 (GMT)