From 7f41d39c293e1bd013acc0e79af2aa66e1f9e4d0 Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Tue, 25 Aug 2009 11:20:08 +1000 Subject: Mobile version of Flickr demo in flickr-mobile.qml. --- demos/declarative/flickr/common/ImageDetails.qml | 160 +++++++++++++ demos/declarative/flickr/common/LikeOMeter.qml | 35 +++ demos/declarative/flickr/common/Loading.qml | 8 + demos/declarative/flickr/common/MediaButton.qml | 41 ++++ demos/declarative/flickr/common/MediaLineEdit.qml | 109 +++++++++ demos/declarative/flickr/common/Progress.qml | 35 +++ demos/declarative/flickr/common/ScrollBar.qml | 40 ++++ demos/declarative/flickr/common/Slider.qml | 36 +++ demos/declarative/flickr/common/Star.qml | 46 ++++ .../declarative/flickr/common/pics/background.png | Bin 0 -> 60504 bytes .../flickr/common/pics/button-pressed.png | Bin 0 -> 571 bytes .../flickr/common/pics/button-pressed.sci | 5 + demos/declarative/flickr/common/pics/button.png | Bin 0 -> 564 bytes demos/declarative/flickr/common/pics/button.sci | 5 + demos/declarative/flickr/common/pics/ghns_star.png | Bin 0 -> 891 bytes demos/declarative/flickr/common/pics/loading.png | Bin 0 -> 813 bytes .../declarative/flickr/common/pics/reflection.png | Bin 0 -> 4839 bytes .../flickr/common/pics/shadow-bottom.png | Bin 0 -> 656 bytes .../flickr/common/pics/shadow-corner.png | Bin 0 -> 405 bytes .../flickr/common/pics/shadow-right-screen.png | Bin 0 -> 227 bytes .../flickr/common/pics/shadow-right.png | Bin 0 -> 635 bytes demos/declarative/flickr/content/ImageDetails.qml | 160 ------------- demos/declarative/flickr/content/LikeOMeter.qml | 35 --- demos/declarative/flickr/content/Loading.qml | 8 - demos/declarative/flickr/content/MediaButton.qml | 41 ---- demos/declarative/flickr/content/MediaLineEdit.qml | 109 --------- demos/declarative/flickr/content/Progress.qml | 35 --- demos/declarative/flickr/content/ScrollBar.qml | 40 ---- demos/declarative/flickr/content/Slider.qml | 36 --- demos/declarative/flickr/content/Star.qml | 46 ---- .../declarative/flickr/content/pics/background.png | Bin 60504 -> 0 bytes .../flickr/content/pics/button-pressed.png | Bin 571 -> 0 bytes .../flickr/content/pics/button-pressed.sci | 5 - demos/declarative/flickr/content/pics/button.png | Bin 564 -> 0 bytes demos/declarative/flickr/content/pics/button.sci | 5 - .../declarative/flickr/content/pics/ghns_star.png | Bin 891 -> 0 bytes demos/declarative/flickr/content/pics/loading.png | Bin 813 -> 0 bytes .../declarative/flickr/content/pics/reflection.png | Bin 4839 -> 0 bytes .../flickr/content/pics/shadow-bottom.png | Bin 656 -> 0 bytes .../flickr/content/pics/shadow-corner.png | Bin 405 -> 0 bytes .../flickr/content/pics/shadow-right-screen.png | Bin 227 -> 0 bytes .../flickr/content/pics/shadow-right.png | Bin 635 -> 0 bytes demos/declarative/flickr/flickr-desktop.qml | 192 +++++++++++++++ demos/declarative/flickr/flickr-mobile.qml | 51 ++++ demos/declarative/flickr/flickr.qml | 211 ----------------- demos/declarative/flickr/flickr2.qml | 261 --------------------- demos/declarative/flickr/mobile/Button.qml | 41 ++++ demos/declarative/flickr/mobile/GridDelegate.qml | 74 ++++++ demos/declarative/flickr/mobile/ListDelegate.qml | 24 ++ demos/declarative/flickr/mobile/TitleBar.qml | 74 ++++++ demos/declarative/flickr/mobile/ToolBar.qml | 23 ++ demos/declarative/flickr/mobile/images/gloss.png | Bin 0 -> 1236 bytes .../declarative/flickr/mobile/images/lineedit.png | Bin 0 -> 1415 bytes .../declarative/flickr/mobile/images/lineedit.sci | 5 + demos/declarative/flickr/mobile/images/stripes.png | Bin 0 -> 257 bytes .../declarative/flickr/mobile/images/titlebar2.png | Bin 0 -> 1436 bytes .../declarative/flickr/mobile/images/titlebar2.sci | 5 + .../flickr/mobile/images/toolbutton2.png | Bin 0 -> 2619 bytes .../flickr/mobile/images/toolbutton2.sci | 5 + 59 files changed, 1014 insertions(+), 992 deletions(-) create mode 100644 demos/declarative/flickr/common/ImageDetails.qml create mode 100644 demos/declarative/flickr/common/LikeOMeter.qml create mode 100644 demos/declarative/flickr/common/Loading.qml create mode 100644 demos/declarative/flickr/common/MediaButton.qml create mode 100644 demos/declarative/flickr/common/MediaLineEdit.qml create mode 100644 demos/declarative/flickr/common/Progress.qml create mode 100644 demos/declarative/flickr/common/ScrollBar.qml create mode 100644 demos/declarative/flickr/common/Slider.qml create mode 100644 demos/declarative/flickr/common/Star.qml create mode 100644 demos/declarative/flickr/common/pics/background.png create mode 100644 demos/declarative/flickr/common/pics/button-pressed.png create mode 100644 demos/declarative/flickr/common/pics/button-pressed.sci create mode 100644 demos/declarative/flickr/common/pics/button.png create mode 100644 demos/declarative/flickr/common/pics/button.sci create mode 100644 demos/declarative/flickr/common/pics/ghns_star.png create mode 100644 demos/declarative/flickr/common/pics/loading.png create mode 100644 demos/declarative/flickr/common/pics/reflection.png create mode 100644 demos/declarative/flickr/common/pics/shadow-bottom.png create mode 100644 demos/declarative/flickr/common/pics/shadow-corner.png create mode 100644 demos/declarative/flickr/common/pics/shadow-right-screen.png create mode 100644 demos/declarative/flickr/common/pics/shadow-right.png delete mode 100644 demos/declarative/flickr/content/ImageDetails.qml delete mode 100644 demos/declarative/flickr/content/LikeOMeter.qml delete mode 100644 demos/declarative/flickr/content/Loading.qml delete mode 100644 demos/declarative/flickr/content/MediaButton.qml delete mode 100644 demos/declarative/flickr/content/MediaLineEdit.qml delete mode 100644 demos/declarative/flickr/content/Progress.qml delete mode 100644 demos/declarative/flickr/content/ScrollBar.qml delete mode 100644 demos/declarative/flickr/content/Slider.qml delete mode 100644 demos/declarative/flickr/content/Star.qml delete mode 100644 demos/declarative/flickr/content/pics/background.png delete mode 100644 demos/declarative/flickr/content/pics/button-pressed.png delete mode 100644 demos/declarative/flickr/content/pics/button-pressed.sci delete mode 100644 demos/declarative/flickr/content/pics/button.png delete mode 100644 demos/declarative/flickr/content/pics/button.sci delete mode 100644 demos/declarative/flickr/content/pics/ghns_star.png delete mode 100644 demos/declarative/flickr/content/pics/loading.png delete mode 100644 demos/declarative/flickr/content/pics/reflection.png delete mode 100644 demos/declarative/flickr/content/pics/shadow-bottom.png delete mode 100644 demos/declarative/flickr/content/pics/shadow-corner.png delete mode 100644 demos/declarative/flickr/content/pics/shadow-right-screen.png delete mode 100644 demos/declarative/flickr/content/pics/shadow-right.png create mode 100644 demos/declarative/flickr/flickr-desktop.qml create mode 100644 demos/declarative/flickr/flickr-mobile.qml delete mode 100644 demos/declarative/flickr/flickr.qml delete mode 100644 demos/declarative/flickr/flickr2.qml create mode 100644 demos/declarative/flickr/mobile/Button.qml create mode 100644 demos/declarative/flickr/mobile/GridDelegate.qml create mode 100644 demos/declarative/flickr/mobile/ListDelegate.qml create mode 100644 demos/declarative/flickr/mobile/TitleBar.qml create mode 100644 demos/declarative/flickr/mobile/ToolBar.qml create mode 100644 demos/declarative/flickr/mobile/images/gloss.png create mode 100644 demos/declarative/flickr/mobile/images/lineedit.png create mode 100644 demos/declarative/flickr/mobile/images/lineedit.sci create mode 100644 demos/declarative/flickr/mobile/images/stripes.png create mode 100644 demos/declarative/flickr/mobile/images/titlebar2.png create mode 100644 demos/declarative/flickr/mobile/images/titlebar2.sci create mode 100644 demos/declarative/flickr/mobile/images/toolbutton2.png create mode 100644 demos/declarative/flickr/mobile/images/toolbutton2.sci diff --git a/demos/declarative/flickr/common/ImageDetails.qml b/demos/declarative/flickr/common/ImageDetails.qml new file mode 100644 index 0000000..8098273 --- /dev/null +++ b/demos/declarative/flickr/common/ImageDetails.qml @@ -0,0 +1,160 @@ +import Qt 4.6 + +Flipable { + id: Container + + property var frontContainer: ContainerFront + property string photoTitle: "" + property string photoDescription: "" + 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: Rotation + 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 + border.color: "white"; border.width: 2 + } + + MediaButton { + id: BackButton; x: 630; y: 370; text: "Back" + onClicked: { Container.closed() } + } + + 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.pointSize: 22 } + + LikeOMeter { x: 40; y: 250; rating: Container.rating } + + Flickable { id: Flickable; x: 220; width: 480; height: 210; y: 130; clip: true + viewportWidth: 480; viewportHeight: DescriptionText.height + + WebView { id: DescriptionText; width: parent.width + html: "" + Container.photoDescription } + } + + Text { id: Size; color: "white"; width: 300; x: 40; y: 300 + text: "Size: " + Container.photoWidth + 'x' + Container.photoHeight } + Text { id: Type; color: "white"; width: 300; x: 40; anchors.top: Size.bottom + text: "Type: " + Container.photoType } + + Text { id: Author; color: "white"; width: 300; x: 220; y: 80 + text: "Author: " + Container.photoAuthor } + Text { id: Date; color: "white"; width: 300; x: 220; anchors.top: Author.bottom + text: "Published: " + Container.photoDate } + Text { id: TagsLabel; color: "white"; x: 220; anchors.top: Date.bottom; + text: Container.photoTags == "" ? "" : "Tags: " } + Text { id: Tags; color: "white"; width: parent.width-x-20; + anchors.left: TagsLabel.right; anchors.top: Date.bottom; + elide: "ElideRight"; text: Container.photoTags } + + ScrollBar { id: ScrollBar; x: 720; y: Flickable.y; width: 7; height: Flickable.height; opacity: 0; + flickableArea: Flickable; clip: true } + } + + back: Item { + anchors.fill: Container + + Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4; border.color: "white"; border.width: 2 } + + Progress { anchors.centerIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status!=1 } + Flickable { + id: Flick; width: Container.width - 10; height: Container.height - 10 + x: 5; y: 5; clip: true; + viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height + + Item { + id: ImageContainer + width: Math.max(BigImage.width * BigImage.scale, Flick.width); + height: Math.max(BigImage.height * BigImage.scale, Flick.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: !Flick.moving + onStatusChanged : { + // Default scale shows the entire image. + if (status == 1 && width != 0) { + Slider.minimum = Math.min(Flick.width / width, Flick.height / height); + prevScale = Math.min(Slider.minimum, 1); + Slider.value = prevScale; + } + } + } + } + } + + MediaButton { + id: BackButton2; x: 630; y: 370; text: "Back"; onClicked: { Container.state = '' } + } + Text { + text: "Image Unavailable" + visible: BigImage.status == 'Error' + anchors.centerIn: parent; color: "white"; font.bold: true + } + + Slider { + id: Slider; x: 25; y: 374; visible: { BigImage.status == 1 && maximum > minimum } + onValueChanged: { + if (BigImage.width * value > Flick.width) { + var xoff = (Flick.width/2 + Flick.xPosition) * value / prevScale; + Flick.xPosition = xoff - Flick.width/2; + } + if (BigImage.height * value > Flick.height) { + var yoff = (Flick.height/2 + Flick.yPosition) * value / prevScale; + Flick.yPosition = yoff - Flick.height/2; + } + prevScale = value; + } + } + } + + states: [ + State { + name: "Back" + PropertyChanges { target: Rotation; angle: 180 } + } + ] + + transitions: [ + Transition { + SequentialAnimation { + PropertyAction { + target: BigImage + property: "smooth" + value: false + } + NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 } + PropertyAction { + target: BigImage + property: "smooth" + value: !Flick.moving + } + } + } + ] +} diff --git a/demos/declarative/flickr/common/LikeOMeter.qml b/demos/declarative/flickr/common/LikeOMeter.qml new file mode 100644 index 0000000..754dbb1 --- /dev/null +++ b/demos/declarative/flickr/common/LikeOMeter.qml @@ -0,0 +1,35 @@ +import Qt 4.6 + +Item { + id: Container + + property int rating: 2 + + Row { + 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/common/Loading.qml b/demos/declarative/flickr/common/Loading.qml new file mode 100644 index 0000000..ff2c829 --- /dev/null +++ b/demos/declarative/flickr/common/Loading.qml @@ -0,0 +1,8 @@ +import Qt 4.6 + +Image { + id: Loading; source: "pics/loading.png"; transformOrigin: "Center" + rotation: NumberAnimation { + id: "RotationAnimation"; from: 0; to: 360; running: Loading.visible == true; repeat: true; duration: 900 + } +} diff --git a/demos/declarative/flickr/common/MediaButton.qml b/demos/declarative/flickr/common/MediaButton.qml new file mode 100644 index 0000000..0ffd596 --- /dev/null +++ b/demos/declarative/flickr/common/MediaButton.qml @@ -0,0 +1,41 @@ +import Qt 4.6 + +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(); } + } + Text { + font.bold: true + color: "white" + anchors.centerIn: Image + text: Container.text + } + width: Image.width + states: [ + State { + name: "Pressed" + when: MouseRegion.pressed == true + PropertyChanges { + target: Pressed + opacity: 1 + } + } + ] +} diff --git a/demos/declarative/flickr/common/MediaLineEdit.qml b/demos/declarative/flickr/common/MediaLineEdit.qml new file mode 100644 index 0000000..500a402 --- /dev/null +++ b/demos/declarative/flickr/common/MediaLineEdit.qml @@ -0,0 +1,109 @@ +import Qt 4.6 + +Item { + id: Container + + property string label + property string text + + width: Math.max(94,Label.width + Editor.width + 20) + height: Image.height + + states: [ + State { + name: "Edit" + PropertyChanges { + target: Label + text: Container.label + ": " + } + PropertyChanges { + target: Label + x: 10 + } + PropertyChanges { + target: Editor + cursorVisible: true + width: 100 + } + PropertyChanges { + target: Proxy + focus: true + } + StateChangeScript { + script:"Editor.selectAll()" + } + }, + State { + // When returning to default state, typed text is propagated + StateChangeScript { + script: "Container.text = Editor.text" + } + } + ] + transitions: [ + Transition { + NumberAnimation { properties: "x,width"; duration: 500; easing: "easeInOutQuad" } + } + ] + + + BorderImage { + id: Image + source: "pics/button.sci" + anchors.left: Container.left + anchors.right: Container.right + } + + BorderImage { + id: Pressed + source: "pics/button-pressed.sci" + opacity: 0 + anchors.left: Container.left + anchors.right: Container.right + } + + MouseRegion { + id: MouseRegion + anchors.fill: Image + onClicked: { Container.state = Container.state=="Edit" ? "" : "Edit" } + states: [ + State { + when: MouseRegion.pressed == true + PropertyChanges { + target: Pressed + opacity: 1 + } + } + ] + } + + Text { + id: Label + font.bold: true + color: "white" + anchors.verticalCenter: Container.verticalCenter + x: (Container.width - width)/2 + text: Container.label + "..." + } + + TextInput { + id: Editor + font.bold: true + color: "white" + highlightColor: "green" + width: 0 + clip: true + anchors.left: Label.right + anchors.verticalCenter: Container.verticalCenter + } + KeyProxy { + id: Proxy + anchors.left: Container.left + anchors.fill: Container + targets: [(ReturnKey), (Editor)] + } + Item { + id: ReturnKey + Keys.onReturnPressed: "Container.state = ''" + } +} diff --git a/demos/declarative/flickr/common/Progress.qml b/demos/declarative/flickr/common/Progress.qml new file mode 100644 index 0000000..00ef901 --- /dev/null +++ b/demos/declarative/flickr/common/Progress.qml @@ -0,0 +1,35 @@ +import Qt 4.6 + +Item { + id: Progress; + + property var progress: 0 + + Rectangle { + id: Container; anchors.fill: parent; smooth: true + border.color: "white"; border.width: 0; radius: height/2 - 2 + gradient: Gradient { + GradientStop { position: 0; color: "#66343434" } + GradientStop { position: 1.0; color: "#66000000" } + } + } + + Rectangle { + id: Fill + y: 2; height: parent.height-4; + x: 2; width: Math.max(parent.width * progress - 4, 0); + opacity: width < 1 ? 0 : 1; smooth: true + gradient: Gradient { + GradientStop { position: 0; color: "lightsteelblue" } + GradientStop { position: 1.0; color: "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/common/ScrollBar.qml b/demos/declarative/flickr/common/ScrollBar.qml new file mode 100644 index 0000000..89d51e2 --- /dev/null +++ b/demos/declarative/flickr/common/ScrollBar.qml @@ -0,0 +1,40 @@ +import Qt 4.6 + +Item { + id: Container + + property var flickableArea + + Rectangle { + radius: 5 + color: "black" + opacity: 0.3 + border.color: "white" + border.width: 2 + x: 0 + y: flickableArea.pageYPosition * Container.height + width: parent.width + height: flickableArea.pageHeight * Container.height + } + states: [ + State { + name: "show" + when: flickableArea.moving + PropertyChanges { + target: Container + opacity: 1 + } + } + ] + transitions: [ + Transition { + from: "*" + to: "*" + NumberAnimation { + target: Container + properties: "opacity" + duration: 400 + } + } + ] +} diff --git a/demos/declarative/flickr/common/Slider.qml b/demos/declarative/flickr/common/Slider.qml new file mode 100644 index 0000000..b88636d --- /dev/null +++ b/demos/declarative/flickr/common/Slider.qml @@ -0,0 +1,36 @@ +import Qt 4.6 + +Item { + id: Slider; width: 400; height: 16 + + // value is read/write. + property real value + onValueChanged: { Handle.x = 2 + (value - minimum) * Slider.xMax / (maximum - minimum); } + property real maximum: 1 + property real minimum: 1 + property int xMax: Slider.width - Handle.width - 4 + + Rectangle { + id: Container; anchors.fill: parent + border.color: "white"; border.width: 0; radius: 8 + gradient: Gradient { + GradientStop { position: 0.0; color: "#66343434" } + GradientStop { position: 1.0; color: "#66000000" } + } + } + + Rectangle { + id: Handle; smooth: true + x: Slider.width / 2 - Handle.width / 2; y: 2; width: 30; height: Slider.height-4; radius: 6 + gradient: Gradient { + GradientStop { position: 0.0; color: "lightgray" } + GradientStop { position: 1.0; color: "gray" } + } + + MouseRegion { + anchors.fill: parent; drag.target: parent + drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: Slider.xMax+2 + onPositionChanged: { value = (maximum - minimum) * (Handle.x-2) / Slider.xMax + minimum; } + } + } +} diff --git a/demos/declarative/flickr/common/Star.qml b/demos/declarative/flickr/common/Star.qml new file mode 100644 index 0000000..006e86ad --- /dev/null +++ b/demos/declarative/flickr/common/Star.qml @@ -0,0 +1,46 @@ +import Qt 4.6 + +Item { + id: Container + width: 24 + height: 24 + + property int rating + property bool 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() } + } + states: [ + State { + name: "on" + when: Container.on == true + PropertyChanges { + target: Image + opacity: 1 + scale: 1 + x: 1 + y: 0 + } + } + ] + transitions: [ + Transition { + NumberAnimation { + properties: "opacity,scale,x,y" + easing: "easeOutBounce" + } + } + ] +} diff --git a/demos/declarative/flickr/common/pics/background.png b/demos/declarative/flickr/common/pics/background.png new file mode 100644 index 0000000..5b37072 Binary files /dev/null and b/demos/declarative/flickr/common/pics/background.png differ diff --git a/demos/declarative/flickr/common/pics/button-pressed.png b/demos/declarative/flickr/common/pics/button-pressed.png new file mode 100644 index 0000000..e434d32 Binary files /dev/null and b/demos/declarative/flickr/common/pics/button-pressed.png differ diff --git a/demos/declarative/flickr/common/pics/button-pressed.sci b/demos/declarative/flickr/common/pics/button-pressed.sci new file mode 100644 index 0000000..d3b16e2 --- /dev/null +++ b/demos/declarative/flickr/common/pics/button-pressed.sci @@ -0,0 +1,5 @@ +gridLeft: 8 +gridTop: 4 +gridBottom: 4 +gridRight: 8 +imageFile: button.png diff --git a/demos/declarative/flickr/common/pics/button.png b/demos/declarative/flickr/common/pics/button.png new file mode 100644 index 0000000..56a63ce Binary files /dev/null and b/demos/declarative/flickr/common/pics/button.png differ diff --git a/demos/declarative/flickr/common/pics/button.sci b/demos/declarative/flickr/common/pics/button.sci new file mode 100644 index 0000000..d3b16e2 --- /dev/null +++ b/demos/declarative/flickr/common/pics/button.sci @@ -0,0 +1,5 @@ +gridLeft: 8 +gridTop: 4 +gridBottom: 4 +gridRight: 8 +imageFile: button.png diff --git a/demos/declarative/flickr/common/pics/ghns_star.png b/demos/declarative/flickr/common/pics/ghns_star.png new file mode 100644 index 0000000..4ad43cc Binary files /dev/null and b/demos/declarative/flickr/common/pics/ghns_star.png differ diff --git a/demos/declarative/flickr/common/pics/loading.png b/demos/declarative/flickr/common/pics/loading.png new file mode 100644 index 0000000..47a1589 Binary files /dev/null and b/demos/declarative/flickr/common/pics/loading.png differ diff --git a/demos/declarative/flickr/common/pics/reflection.png b/demos/declarative/flickr/common/pics/reflection.png new file mode 100644 index 0000000..c143a48 Binary files /dev/null and b/demos/declarative/flickr/common/pics/reflection.png differ diff --git a/demos/declarative/flickr/common/pics/shadow-bottom.png b/demos/declarative/flickr/common/pics/shadow-bottom.png new file mode 100644 index 0000000..523f6e7 Binary files /dev/null and b/demos/declarative/flickr/common/pics/shadow-bottom.png differ diff --git a/demos/declarative/flickr/common/pics/shadow-corner.png b/demos/declarative/flickr/common/pics/shadow-corner.png new file mode 100644 index 0000000..ef8c856 Binary files /dev/null and b/demos/declarative/flickr/common/pics/shadow-corner.png differ diff --git a/demos/declarative/flickr/common/pics/shadow-right-screen.png b/demos/declarative/flickr/common/pics/shadow-right-screen.png new file mode 100644 index 0000000..9856c4f Binary files /dev/null and b/demos/declarative/flickr/common/pics/shadow-right-screen.png differ diff --git a/demos/declarative/flickr/common/pics/shadow-right.png b/demos/declarative/flickr/common/pics/shadow-right.png new file mode 100644 index 0000000..f534a35 Binary files /dev/null and b/demos/declarative/flickr/common/pics/shadow-right.png differ diff --git a/demos/declarative/flickr/content/ImageDetails.qml b/demos/declarative/flickr/content/ImageDetails.qml deleted file mode 100644 index 8098273..0000000 --- a/demos/declarative/flickr/content/ImageDetails.qml +++ /dev/null @@ -1,160 +0,0 @@ -import Qt 4.6 - -Flipable { - id: Container - - property var frontContainer: ContainerFront - property string photoTitle: "" - property string photoDescription: "" - 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: Rotation - 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 - border.color: "white"; border.width: 2 - } - - MediaButton { - id: BackButton; x: 630; y: 370; text: "Back" - onClicked: { Container.closed() } - } - - 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.pointSize: 22 } - - LikeOMeter { x: 40; y: 250; rating: Container.rating } - - Flickable { id: Flickable; x: 220; width: 480; height: 210; y: 130; clip: true - viewportWidth: 480; viewportHeight: DescriptionText.height - - WebView { id: DescriptionText; width: parent.width - html: "" + Container.photoDescription } - } - - Text { id: Size; color: "white"; width: 300; x: 40; y: 300 - text: "Size: " + Container.photoWidth + 'x' + Container.photoHeight } - Text { id: Type; color: "white"; width: 300; x: 40; anchors.top: Size.bottom - text: "Type: " + Container.photoType } - - Text { id: Author; color: "white"; width: 300; x: 220; y: 80 - text: "Author: " + Container.photoAuthor } - Text { id: Date; color: "white"; width: 300; x: 220; anchors.top: Author.bottom - text: "Published: " + Container.photoDate } - Text { id: TagsLabel; color: "white"; x: 220; anchors.top: Date.bottom; - text: Container.photoTags == "" ? "" : "Tags: " } - Text { id: Tags; color: "white"; width: parent.width-x-20; - anchors.left: TagsLabel.right; anchors.top: Date.bottom; - elide: "ElideRight"; text: Container.photoTags } - - ScrollBar { id: ScrollBar; x: 720; y: Flickable.y; width: 7; height: Flickable.height; opacity: 0; - flickableArea: Flickable; clip: true } - } - - back: Item { - anchors.fill: Container - - Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4; border.color: "white"; border.width: 2 } - - Progress { anchors.centerIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status!=1 } - Flickable { - id: Flick; width: Container.width - 10; height: Container.height - 10 - x: 5; y: 5; clip: true; - viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height - - Item { - id: ImageContainer - width: Math.max(BigImage.width * BigImage.scale, Flick.width); - height: Math.max(BigImage.height * BigImage.scale, Flick.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: !Flick.moving - onStatusChanged : { - // Default scale shows the entire image. - if (status == 1 && width != 0) { - Slider.minimum = Math.min(Flick.width / width, Flick.height / height); - prevScale = Math.min(Slider.minimum, 1); - Slider.value = prevScale; - } - } - } - } - } - - MediaButton { - id: BackButton2; x: 630; y: 370; text: "Back"; onClicked: { Container.state = '' } - } - Text { - text: "Image Unavailable" - visible: BigImage.status == 'Error' - anchors.centerIn: parent; color: "white"; font.bold: true - } - - Slider { - id: Slider; x: 25; y: 374; visible: { BigImage.status == 1 && maximum > minimum } - onValueChanged: { - if (BigImage.width * value > Flick.width) { - var xoff = (Flick.width/2 + Flick.xPosition) * value / prevScale; - Flick.xPosition = xoff - Flick.width/2; - } - if (BigImage.height * value > Flick.height) { - var yoff = (Flick.height/2 + Flick.yPosition) * value / prevScale; - Flick.yPosition = yoff - Flick.height/2; - } - prevScale = value; - } - } - } - - states: [ - State { - name: "Back" - PropertyChanges { target: Rotation; angle: 180 } - } - ] - - transitions: [ - Transition { - SequentialAnimation { - PropertyAction { - target: BigImage - property: "smooth" - value: false - } - NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 } - PropertyAction { - target: BigImage - property: "smooth" - value: !Flick.moving - } - } - } - ] -} diff --git a/demos/declarative/flickr/content/LikeOMeter.qml b/demos/declarative/flickr/content/LikeOMeter.qml deleted file mode 100644 index 754dbb1..0000000 --- a/demos/declarative/flickr/content/LikeOMeter.qml +++ /dev/null @@ -1,35 +0,0 @@ -import Qt 4.6 - -Item { - id: Container - - property int rating: 2 - - Row { - 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 deleted file mode 100644 index ff2c829..0000000 --- a/demos/declarative/flickr/content/Loading.qml +++ /dev/null @@ -1,8 +0,0 @@ -import Qt 4.6 - -Image { - id: Loading; source: "pics/loading.png"; transformOrigin: "Center" - rotation: NumberAnimation { - id: "RotationAnimation"; from: 0; to: 360; running: Loading.visible == true; repeat: true; duration: 900 - } -} diff --git a/demos/declarative/flickr/content/MediaButton.qml b/demos/declarative/flickr/content/MediaButton.qml deleted file mode 100644 index 0ffd596..0000000 --- a/demos/declarative/flickr/content/MediaButton.qml +++ /dev/null @@ -1,41 +0,0 @@ -import Qt 4.6 - -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(); } - } - Text { - font.bold: true - color: "white" - anchors.centerIn: Image - text: Container.text - } - width: Image.width - states: [ - State { - name: "Pressed" - when: MouseRegion.pressed == true - PropertyChanges { - target: Pressed - opacity: 1 - } - } - ] -} diff --git a/demos/declarative/flickr/content/MediaLineEdit.qml b/demos/declarative/flickr/content/MediaLineEdit.qml deleted file mode 100644 index 500a402..0000000 --- a/demos/declarative/flickr/content/MediaLineEdit.qml +++ /dev/null @@ -1,109 +0,0 @@ -import Qt 4.6 - -Item { - id: Container - - property string label - property string text - - width: Math.max(94,Label.width + Editor.width + 20) - height: Image.height - - states: [ - State { - name: "Edit" - PropertyChanges { - target: Label - text: Container.label + ": " - } - PropertyChanges { - target: Label - x: 10 - } - PropertyChanges { - target: Editor - cursorVisible: true - width: 100 - } - PropertyChanges { - target: Proxy - focus: true - } - StateChangeScript { - script:"Editor.selectAll()" - } - }, - State { - // When returning to default state, typed text is propagated - StateChangeScript { - script: "Container.text = Editor.text" - } - } - ] - transitions: [ - Transition { - NumberAnimation { properties: "x,width"; duration: 500; easing: "easeInOutQuad" } - } - ] - - - BorderImage { - id: Image - source: "pics/button.sci" - anchors.left: Container.left - anchors.right: Container.right - } - - BorderImage { - id: Pressed - source: "pics/button-pressed.sci" - opacity: 0 - anchors.left: Container.left - anchors.right: Container.right - } - - MouseRegion { - id: MouseRegion - anchors.fill: Image - onClicked: { Container.state = Container.state=="Edit" ? "" : "Edit" } - states: [ - State { - when: MouseRegion.pressed == true - PropertyChanges { - target: Pressed - opacity: 1 - } - } - ] - } - - Text { - id: Label - font.bold: true - color: "white" - anchors.verticalCenter: Container.verticalCenter - x: (Container.width - width)/2 - text: Container.label + "..." - } - - TextInput { - id: Editor - font.bold: true - color: "white" - highlightColor: "green" - width: 0 - clip: true - anchors.left: Label.right - anchors.verticalCenter: Container.verticalCenter - } - KeyProxy { - id: Proxy - anchors.left: Container.left - anchors.fill: Container - targets: [(ReturnKey), (Editor)] - } - Item { - id: ReturnKey - Keys.onReturnPressed: "Container.state = ''" - } -} diff --git a/demos/declarative/flickr/content/Progress.qml b/demos/declarative/flickr/content/Progress.qml deleted file mode 100644 index 00ef901..0000000 --- a/demos/declarative/flickr/content/Progress.qml +++ /dev/null @@ -1,35 +0,0 @@ -import Qt 4.6 - -Item { - id: Progress; - - property var progress: 0 - - Rectangle { - id: Container; anchors.fill: parent; smooth: true - border.color: "white"; border.width: 0; radius: height/2 - 2 - gradient: Gradient { - GradientStop { position: 0; color: "#66343434" } - GradientStop { position: 1.0; color: "#66000000" } - } - } - - Rectangle { - id: Fill - y: 2; height: parent.height-4; - x: 2; width: Math.max(parent.width * progress - 4, 0); - opacity: width < 1 ? 0 : 1; smooth: true - gradient: Gradient { - GradientStop { position: 0; color: "lightsteelblue" } - GradientStop { position: 1.0; color: "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/content/ScrollBar.qml b/demos/declarative/flickr/content/ScrollBar.qml deleted file mode 100644 index 89d51e2..0000000 --- a/demos/declarative/flickr/content/ScrollBar.qml +++ /dev/null @@ -1,40 +0,0 @@ -import Qt 4.6 - -Item { - id: Container - - property var flickableArea - - Rectangle { - radius: 5 - color: "black" - opacity: 0.3 - border.color: "white" - border.width: 2 - x: 0 - y: flickableArea.pageYPosition * Container.height - width: parent.width - height: flickableArea.pageHeight * Container.height - } - states: [ - State { - name: "show" - when: flickableArea.moving - PropertyChanges { - target: Container - opacity: 1 - } - } - ] - transitions: [ - Transition { - from: "*" - to: "*" - NumberAnimation { - target: Container - properties: "opacity" - duration: 400 - } - } - ] -} diff --git a/demos/declarative/flickr/content/Slider.qml b/demos/declarative/flickr/content/Slider.qml deleted file mode 100644 index b88636d..0000000 --- a/demos/declarative/flickr/content/Slider.qml +++ /dev/null @@ -1,36 +0,0 @@ -import Qt 4.6 - -Item { - id: Slider; width: 400; height: 16 - - // value is read/write. - property real value - onValueChanged: { Handle.x = 2 + (value - minimum) * Slider.xMax / (maximum - minimum); } - property real maximum: 1 - property real minimum: 1 - property int xMax: Slider.width - Handle.width - 4 - - Rectangle { - id: Container; anchors.fill: parent - border.color: "white"; border.width: 0; radius: 8 - gradient: Gradient { - GradientStop { position: 0.0; color: "#66343434" } - GradientStop { position: 1.0; color: "#66000000" } - } - } - - Rectangle { - id: Handle; smooth: true - x: Slider.width / 2 - Handle.width / 2; y: 2; width: 30; height: Slider.height-4; radius: 6 - gradient: Gradient { - GradientStop { position: 0.0; color: "lightgray" } - GradientStop { position: 1.0; color: "gray" } - } - - MouseRegion { - anchors.fill: parent; drag.target: parent - drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: Slider.xMax+2 - onPositionChanged: { value = (maximum - minimum) * (Handle.x-2) / Slider.xMax + minimum; } - } - } -} diff --git a/demos/declarative/flickr/content/Star.qml b/demos/declarative/flickr/content/Star.qml deleted file mode 100644 index 006e86ad..0000000 --- a/demos/declarative/flickr/content/Star.qml +++ /dev/null @@ -1,46 +0,0 @@ -import Qt 4.6 - -Item { - id: Container - width: 24 - height: 24 - - property int rating - property bool 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() } - } - states: [ - State { - name: "on" - when: Container.on == true - PropertyChanges { - target: Image - opacity: 1 - scale: 1 - x: 1 - y: 0 - } - } - ] - transitions: [ - Transition { - NumberAnimation { - 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 deleted file mode 100644 index 5b37072..0000000 Binary files a/demos/declarative/flickr/content/pics/background.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/button-pressed.png b/demos/declarative/flickr/content/pics/button-pressed.png deleted file mode 100644 index e434d32..0000000 Binary files a/demos/declarative/flickr/content/pics/button-pressed.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/button-pressed.sci b/demos/declarative/flickr/content/pics/button-pressed.sci deleted file mode 100644 index d3b16e2..0000000 --- a/demos/declarative/flickr/content/pics/button-pressed.sci +++ /dev/null @@ -1,5 +0,0 @@ -gridLeft: 8 -gridTop: 4 -gridBottom: 4 -gridRight: 8 -imageFile: button.png diff --git a/demos/declarative/flickr/content/pics/button.png b/demos/declarative/flickr/content/pics/button.png deleted file mode 100644 index 56a63ce..0000000 Binary files a/demos/declarative/flickr/content/pics/button.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/button.sci b/demos/declarative/flickr/content/pics/button.sci deleted file mode 100644 index d3b16e2..0000000 --- a/demos/declarative/flickr/content/pics/button.sci +++ /dev/null @@ -1,5 +0,0 @@ -gridLeft: 8 -gridTop: 4 -gridBottom: 4 -gridRight: 8 -imageFile: button.png diff --git a/demos/declarative/flickr/content/pics/ghns_star.png b/demos/declarative/flickr/content/pics/ghns_star.png deleted file mode 100644 index 4ad43cc..0000000 Binary files a/demos/declarative/flickr/content/pics/ghns_star.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/loading.png b/demos/declarative/flickr/content/pics/loading.png deleted file mode 100644 index 47a1589..0000000 Binary files a/demos/declarative/flickr/content/pics/loading.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/reflection.png b/demos/declarative/flickr/content/pics/reflection.png deleted file mode 100644 index c143a48..0000000 Binary files a/demos/declarative/flickr/content/pics/reflection.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/shadow-bottom.png b/demos/declarative/flickr/content/pics/shadow-bottom.png deleted file mode 100644 index 523f6e7..0000000 Binary files a/demos/declarative/flickr/content/pics/shadow-bottom.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/shadow-corner.png b/demos/declarative/flickr/content/pics/shadow-corner.png deleted file mode 100644 index ef8c856..0000000 Binary files a/demos/declarative/flickr/content/pics/shadow-corner.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/shadow-right-screen.png b/demos/declarative/flickr/content/pics/shadow-right-screen.png deleted file mode 100644 index 9856c4f..0000000 Binary files a/demos/declarative/flickr/content/pics/shadow-right-screen.png and /dev/null differ diff --git a/demos/declarative/flickr/content/pics/shadow-right.png b/demos/declarative/flickr/content/pics/shadow-right.png deleted file mode 100644 index f534a35..0000000 Binary files a/demos/declarative/flickr/content/pics/shadow-right.png and /dev/null differ diff --git a/demos/declarative/flickr/flickr-desktop.qml b/demos/declarative/flickr/flickr-desktop.qml new file mode 100644 index 0000000..5effc42 --- /dev/null +++ b/demos/declarative/flickr/flickr-desktop.qml @@ -0,0 +1,192 @@ +import Qt 4.6 + +import "common" + +Item { + id: MainWindow; width: 800; height: 450 + + property bool showPathView : false + + resources: [ + Component { + id: PhotoDelegate + Item { + id: Wrapper; width: 85; height: 85 + scale: Wrapper.PathView.scale; z: Wrapper.PathView.z + + transform: Rotation { + id: Rotation; origin.x: Wrapper.width/2; origin.y: Wrapper.height/2 + axis.y: 1; axis.z: 0; angle: Wrapper.PathView.angle + } + + Connection { + sender: ImageDetails; signal: "closed()" + script: { + if (Wrapper.state == 'Details') { + Wrapper.state = ''; + ImageDetails.photoUrl = ""; + } + } + } + + 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; + Wrapper.state = "Details"; + } + } + + Rectangle { + id: WhiteRect; anchors.fill: parent; color: "white"; radius: 5 + + Loading { x: 26; y: 26; visible: Thumb.status!=1 } + Image { id: Thumb; source: imagePath; x: 5; y: 5 } + + Item { + id: Shadows + Image { source: "common/pics/shadow-right.png"; x: WhiteRect.width; height: WhiteRect.height } + Image { source: "common/pics/shadow-bottom.png"; y: WhiteRect.height; width: WhiteRect.width } + Image { id: Corner; source: "common/pics/shadow-corner.png"; x: WhiteRect.width; y: WhiteRect.height } + } + } + + MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } } + + states: [ + State { + name: "Details" + PropertyChanges { target: ImageDetails; z: 2 } + ParentChange { target: Wrapper; parent: ImageDetails.frontContainer } + PropertyChanges { target: Wrapper; x: 45; y: 35; scale: 1; z: 1000 } + PropertyChanges { target: Rotation; angle: 0 } + PropertyChanges { target: Shadows; opacity: 0 } + PropertyChanges { target: ImageDetails; y: 20 } + PropertyChanges { target: PhotoGridView; y: "-480" } + PropertyChanges { target: PhotoPathView; y: "-480" } + PropertyChanges { target: ViewModeButton; opacity: 0 } + PropertyChanges { target: TagsEdit; opacity: 0 } + PropertyChanges { target: FetchButton; opacity: 0 } + PropertyChanges { target: CategoryText; y: "-50" } + } + ] + + transitions: [ + Transition { + from: "*"; to: "Details" + ParentAction { } + NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" } + }, + Transition { + from: "Details"; to: "*" + SequentialAnimation { + ParentAction { } + NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" } + PropertyAction { target: Wrapper; properties: "z" } + } + } + ] + + } + } + ] + + Item { + id: Background + + anchors.fill: parent + + Image { source: "common/pics/background.png"; anchors.fill: parent } + RssModel { id: RssModel; tags : TagsEdit.text } + Loading { anchors.centerIn: parent; visible: RssModel.status } + + GridView { + id: PhotoGridView; model: RssModel; delegate: PhotoDelegate; cacheBuffer: 100 + cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1 + } + + PathView { + id: PhotoPathView; model: RssModel; delegate: PhotoDelegate + y: -380; width: 800; height: 330; pathItemCount: 10; 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: ViewModeButton; 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: ViewModeButton.left; anchors.rightMargin: 5 + anchors.top: ViewModeButton.top + onClicked: { RssModel.reload(); } + } + + MediaLineEdit { + id: TagsEdit; + label: "Tags" + anchors.right: FetchButton.left; anchors.rightMargin: 5 + anchors.top: ViewModeButton.top + } + + states: [ + State { + name: "PathView" + when: MainWindow.showPathView == true + PropertyChanges { target: PhotoPathView; y: 80 } + PropertyChanges { target: PhotoGridView; y: -380 } + } + ] + + transitions: [ + Transition { + from: "*"; to: "*" + NumberAnimation { properties: "y"; duration: 1000; easing: "easeOutBounce(amplitude:0.5)" } + } + ] + } + + Text { + id: CategoryText; anchors.horizontalCenter: parent.horizontalCenter; y: 15; + text: "Flickr - " + + (RssModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + RssModel.tags) + font.pointSize: 20; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" + } +} diff --git a/demos/declarative/flickr/flickr-mobile.qml b/demos/declarative/flickr/flickr-mobile.qml new file mode 100644 index 0000000..a4692a3 --- /dev/null +++ b/demos/declarative/flickr/flickr-mobile.qml @@ -0,0 +1,51 @@ +import Qt 4.6 +import "common" as Common +import "mobile" as Mobile + +Item { + id: Screen; width: 320; height: 480 + property bool inListView : false + + Rectangle { + id: Background + anchors.fill: parent; color: "#343434"; + + Image { source: "mobile/images/stripes.png"; fillMode: "Tile"; anchors.fill: parent; opacity: 0.3 } + + Common.RssModel { id: RssModel } + Common.Loading { anchors.centerIn: parent; visible: RssModel.status } + + Item { + id: Views + x: 2; width: parent.width - 4 + anchors.top: TitleBar.bottom; anchors.bottom: ToolBar.top + + Mobile.GridDelegate { id: GridDelegate } + GridView { + id: PhotoGridView; model: RssModel; delegate: GridDelegate; cacheBuffer: 100 + cellWidth: 79; cellHeight: 79; width: parent.width; height: parent.height - 1 + } + + Mobile.ListDelegate { id: ListDelegate } + ListView { + id: PhotoListView; model: RssModel; delegate: ListDelegate + width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100; + } + } + + Common.ImageDetails { id: ImageDetails; width: parent.width; x: parent.width; height: parent.height } + Mobile.TitleBar { id: TitleBar; width: parent.width; height: 40; opacity: 0.9 } + Mobile.ToolBar { id: ToolBar; height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9 } + + states: [ + State { + name: "ListView"; when: Screen.inListView == true + PropertyChanges { target: PhotoListView; x: 0 } + PropertyChanges { target: PhotoGridView; x: -(parent.width * 1.5) } + } + ] + transitions: [ + Transition { NumberAnimation { properties: "x"; duration: 500; easing: "easeInOutQuad" } } + ] + } +} diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr.qml deleted file mode 100644 index d8a27d5..0000000 --- a/demos/declarative/flickr/flickr.qml +++ /dev/null @@ -1,211 +0,0 @@ -import Qt 4.6 - -import "content" - -Item { - id: MainWindow; width: 800; height: 450 - - property bool showPathView : false - - resources: [ - XmlListModel { - id: FeedModel - property string tags : TagsEdit.text - source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2" - query: "/rss/channel/item" - namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" - - XmlRole { name: "title"; query: "title/string()" } - XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" } - XmlRole { name: "url"; query: "media:content/@url/string()" } - XmlRole { name: "description"; query: "description/string()" } - XmlRole { name: "tags"; query: "media:category/string()" } - XmlRole { name: "photoWidth"; query: "media:content/@width/string()" } - XmlRole { name: "photoHeight"; query: "media:content/@height/string()" } - XmlRole { name: "photoType"; query: "media:content/@type/string()" } - XmlRole { name: "photoAuthor"; query: "author/string()" } - XmlRole { name: "photoDate"; query: "pubDate/string()" } - }, - - Component { - id: PhotoDelegate - Item { - id: Wrapper; width: 85; height: 85 - scale: Wrapper.PathView.scale; z: Wrapper.PathView.z - - transform: Rotation { - id: Rotation; origin.x: Wrapper.width/2; origin.y: Wrapper.height/2 - axis.y: 1; axis.z: 0; angle: Wrapper.PathView.angle - } - - Connection { - sender: ImageDetails; signal: "closed()" - script: { - if (Wrapper.state == 'Details') { - Wrapper.state = ''; - ImageDetails.photoUrl = ""; - } - } - } - - 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; - Wrapper.state = "Details"; - } - } - - Rectangle { - id: WhiteRect; anchors.fill: parent; color: "white"; radius: 5 - - Loading { x: 26; y: 26; visible: Thumb.status!=1 } - 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" - PropertyChanges { target: ImageDetails; z: 2 } - ParentChange { target: Wrapper; parent: ImageDetails.frontContainer } - PropertyChanges { target: Wrapper; x: 45; y: 35; scale: 1; z: 1000 } - PropertyChanges { target: Rotation; angle: 0 } - PropertyChanges { target: Shadows; opacity: 0 } - PropertyChanges { target: ImageDetails; y: 20 } - PropertyChanges { target: PhotoGridView; y: "-480" } - PropertyChanges { target: PhotoPathView; y: "-480" } - PropertyChanges { target: ViewModeButton; opacity: 0 } - PropertyChanges { target: TagsEdit; opacity: 0 } - PropertyChanges { target: FetchButton; opacity: 0 } - PropertyChanges { target: CategoryText; y: "-50" } - } - ] - - transitions: [ - Transition { - from: "*"; to: "Details" - ParentAction { } - NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" } - }, - Transition { - from: "Details"; to: "*" - SequentialAnimation { - ParentAction { } - NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" } - PropertyAction { target: Wrapper; properties: "z" } - } - } - ] - - } - } - ] - - Item { - id: Background - - anchors.fill: parent - - Image { source: "content/pics/background.png"; anchors.fill: parent } - - Loading { anchors.centerIn: parent; visible: FeedModel.status } - - GridView { - id: PhotoGridView; model: FeedModel; delegate: PhotoDelegate; cacheBuffer: 100 - cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1 - } - - PathView { - id: PhotoPathView; model: FeedModel; delegate: PhotoDelegate - y: -380; width: 800; height: 330; pathItemCount: 10; 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: ViewModeButton; 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: ViewModeButton.left; anchors.rightMargin: 5 - anchors.top: ViewModeButton.top - onClicked: { FeedModel.reload(); } - } - - MediaLineEdit { - id: TagsEdit; - label: "Tags" - anchors.right: FetchButton.left; anchors.rightMargin: 5 - anchors.top: ViewModeButton.top - } - - states: [ - State { - name: "PathView" - when: MainWindow.showPathView == true - PropertyChanges { target: PhotoPathView; y: 80 } - PropertyChanges { target: PhotoGridView; y: -380 } - } - ] - - transitions: [ - Transition { - from: "*"; to: "*" - NumberAnimation { properties: "y"; duration: 1000; easing: "easeOutBounce(amplitude:0.5)" } - } - ] - } - - Text { - id: CategoryText; anchors.horizontalCenter: parent.horizontalCenter; y: 15; - text: "Flickr - " + - (FeedModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + FeedModel.tags) - font.pointSize: 20; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" - } -} diff --git a/demos/declarative/flickr/flickr2.qml b/demos/declarative/flickr/flickr2.qml deleted file mode 100644 index d9b1f60..0000000 --- a/demos/declarative/flickr/flickr2.qml +++ /dev/null @@ -1,261 +0,0 @@ -import Qt 4.6 - -import "content" - -Item { - id: MainWindow; width: 800; height: 450 - - property bool showPathView : false - - VisualModel { - id: MyVisualModel - model: - XmlListModel { - id: FeedModel - property string tags : TagsEdit.text - source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2" - query: "/rss/channel/item" - namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" - - XmlRole { name: "title"; query: "title/string()" } - XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" } - XmlRole { name: "url"; query: "media:content/@url/string()" } - XmlRole { name: "description"; query: "description/string()" } - XmlRole { name: "tags"; query: "media:category/string()" } - XmlRole { name: "photoWidth"; query: "media:content/@width/string()" } - XmlRole { name: "photoHeight"; query: "media:content/@height/string()" } - XmlRole { name: "photoType"; query: "media:content/@type/string()" } - XmlRole { name: "photoAuthor"; query: "author/string()" } - XmlRole { name: "photoDate"; query: "pubDate/string()" } - } - - delegate: Package { - Item { - id: Wrapper; width: 85; height: 85; scale: {1.0} - z: PathViewPackage.PathView.z - property real angle: 0 * 0 - - transform: [ - Rotation { - id: Rotation; origin.x: 30; axis.x: 30; axis.y: 60; axis.z: 0 - angle: Wrapper.angle - } - ] - - Connection { - sender: Background.imageDetails; signal: "closed()" - script: { if (Wrapper.state == 'Details') Wrapper.state = '' } - } - - Script { - function photoClicked() { - Background.imageDetails.photoTitle = title; - Background.imageDetails.photoDescription = description; - Background.imageDetails.photoTags = tags; - Background.imageDetails.photoWidth = photoWidth; - Background.imageDetails.photoHeight = photoHeight; - Background.imageDetails.photoType = photoType; - Background.imageDetails.photoAuthor = photoAuthor; - Background.imageDetails.photoDate = photoDate; - Background.imageDetails.photoUrl = url; - Background.imageDetails.rating = 0; - Wrapper.state = "Details"; - } - } - - Rectangle { - id: WhiteRect; anchors.fill: parent; color: "white"; radius: 5 - - Loading { x: 26; y: 26; visible: Thumb.status!=1 } - 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" - PropertyChanges { target: Background.imageDetails; z: 2 } - ParentChange { target: Wrapper; parent: Background.imageDetails.frontContainer } - PropertyChanges { target: Wrapper; x: 45; y: 35; scale: 1; z: 1000 } - PropertyChanges { target: Rotation; angle: 0 } - PropertyChanges { target: Shadows; opacity: 0 } - PropertyChanges { target: Background.imageDetails; y: 20 } - PropertyChanges { target: PhotoGridView; y: "-480" } - PropertyChanges { target: PhotoPathView; y: "-480" } - PropertyChanges { target: ViewModeButton; opacity: 0 } - PropertyChanges { target: TagsEdit; opacity: 0 } - PropertyChanges { target: FetchButton; opacity: 0 } - PropertyChanges { target: CategoryText; y: "-50" } - } - ] - - transitions: [ - Transition { - from: "*"; to: "Details" - ParentAction { } - NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" } - }, - Transition { - from: "Details"; to: "*" - SequentialAnimation { - ParentAction { } - NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" } - PropertyAction { target: Wrapper; properties: "z" } - } - } - ] - } - - Item { - Package.name: "pathView" - id: PathViewPackage; width: 85; height: 85 - } - - Item { - Package.name: "gridView" - id: GridViewPackage; width: 85; height: 85 - } - - Item { - id: MyItem - state: MainWindow.showPathView ? "pathView" : "gridView" - states: [ - State { - name: "gridView" - PropertyChanges { target: Wrapper; explicit: true; property: "moveToParent"; value: GridViewPackage } - }, - State { - name: "pathView" - PropertyChanges { target: Wrapper; scale: PathViewPackage.PathView.scale; angle: PathViewPackage.PathView.angle; } - PropertyChanges { target: Wrapper; explicit: true; moveToParent: PathViewPackage } - } - ] - transitions: [ - Transition { - to: "pathView" - SequentialAnimation { - PropertyAction { target: Wrapper; property: "moveToParent" } - ParallelAnimation { - NumberAnimation { - target: Wrapper - properties: "x,y" - to: 0 - easing: "easeOutQuad" - duration: 350 - } - NumberAnimation { target: Wrapper; properties: "scale,angle"; duration: 350 } - } - } - }, - Transition { - to: "gridView" - SequentialAnimation { - PauseAnimation { duration: Math.floor(index/7)*100 } - PropertyAction { target: Wrapper; property: "moveToParent" } - ParallelAnimation { - NumberAnimation { - target: Wrapper - properties: "x,y" - to: 0 - easing: "easeOutQuad" - duration: 250 - } - NumberAnimation { target: Wrapper; properties: "scale,angle"; duration: 250 } - } - } - } - ] - } - } - } - - - Item { - id: Background - property var imageDetails: ImageDetails - - Image { source: "content/pics/background.png" } - - GridView { - id: PhotoGridView; model: MyVisualModel.parts.gridView - cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1 - cacheBuffer: 100 - } - - PathView { - id: PhotoPathView; model: MyVisualModel.parts.pathView - y: 80; width: 800; height: 330; z: 1 - pathItemCount: 10; snapPosition: 0.001 - path: Path { - startX: -150; startY: 40; - - PathAttribute { name: "scale"; value: 0.9 } - PathAttribute { name: "angle"; value: -45 } - PathPercent { value: 0 } - PathLine { x: -50; y: 40 } - - PathPercent { value: 0.001 } - - 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 - } - - PathPercent { value: 0.999 } - PathLine { x: 950; y: 40 } - PathPercent { value: 1.0 } - PathAttribute { name: "scale"; value: 0.9 } - PathAttribute { name: "angle"; value: 45 } - } - } - - ImageDetails { id: ImageDetails; width: 750; x: 25; y: 500; height: 410 } - - MediaButton { - id: ViewModeButton; 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: ViewModeButton.left; anchors.rightMargin: 5 - anchors.top: ViewModeButton.top - onClicked: { FeedModel.reload(); } - } - - MediaLineEdit { - id: TagsEdit; - label: "Tags" - anchors.right: FetchButton.left; anchors.rightMargin: 5 - anchors.top: ViewModeButton.top - } - - } - - Text { - id: CategoryText; anchors.horizontalCenter: parent.horizontalCenter; y: 15; - text: "Flickr - " + - (FeedModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + FeedModel.tags) - font.pointSize: 16; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" - } -} 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 Binary files /dev/null and b/demos/declarative/flickr/mobile/images/gloss.png 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 Binary files /dev/null and b/demos/declarative/flickr/mobile/images/lineedit.png 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..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 Binary files /dev/null and b/demos/declarative/flickr/mobile/images/stripes.png differ 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 Binary files /dev/null and b/demos/declarative/flickr/mobile/images/titlebar2.png differ 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 Binary files /dev/null and b/demos/declarative/flickr/mobile/images/toolbutton2.png differ 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 -- cgit v0.12