diff options
Diffstat (limited to 'demos/declarative/flickr/mobile/ImageDetails.qml')
| -rw-r--r-- | demos/declarative/flickr/mobile/ImageDetails.qml | 74 |
1 files changed, 37 insertions, 37 deletions
diff --git a/demos/declarative/flickr/mobile/ImageDetails.qml b/demos/declarative/flickr/mobile/ImageDetails.qml index c55ab50..26052b9 100644 --- a/demos/declarative/flickr/mobile/ImageDetails.qml +++ b/demos/declarative/flickr/mobile/ImageDetails.qml @@ -2,9 +2,9 @@ import Qt 4.6 import "../common" as Common Flipable { - id: Container + id: container - property var frontContainer: ContainerFront + property var frontContainer: containerFront property string photoTitle: "" property string photoTags: "" property int photoWidth @@ -19,13 +19,13 @@ Flipable { signal closed transform: Rotation { - id: ItemRotation - origin.x: Container.width / 2; + id: itemRotation + origin.x: container.width / 2; axis.y: 1; axis.z: 0 } front: Item { - id: ContainerFront; anchors.fill: Container + id: containerFront; anchors.fill: container Rectangle { anchors.fill: parent @@ -39,43 +39,43 @@ Flipable { right: parent.right; rightMargin: 20 top: parent.top; topMargin: 180 } - Text { id: TitleText; font.bold: true; color: "white"; elide: "ElideRight"; text: Container.photoTitle } - Text { id: Size; color: "white"; elide: "ElideRight"; text: "<b>Size:</b> " + Container.photoWidth + 'x' + Container.photoHeight } - Text { id: Type; color: "white"; elide: "ElideRight"; text: "<b>Type:</b> " + Container.photoType } - Text { id: Author; color: "white"; elide: "ElideRight"; text: "<b>Author:</b> " + Container.photoAuthor } - Text { id: Date; color: "white"; elide: "ElideRight"; text: "<b>Published:</b> " + Container.photoDate } - Text { id: TagsLabel; color: "white"; elide: "ElideRight"; text: Container.photoTags == "" ? "" : "<b>Tags:</b> " } - Text { id: Tags; color: "white"; elide: "ElideRight"; elide: "ElideRight"; text: Container.photoTags } + Text { font.bold: true; color: "white"; elide: "ElideRight"; text: container.photoTitle } + Text { color: "white"; elide: "ElideRight"; text: "<b>Size:</b> " + container.photoWidth + 'x' + container.photoHeight } + Text { color: "white"; elide: "ElideRight"; text: "<b>Type:</b> " + container.photoType } + Text { color: "white"; elide: "ElideRight"; text: "<b>Author:</b> " + container.photoAuthor } + Text { color: "white"; elide: "ElideRight"; text: "<b>Published:</b> " + container.photoDate } + Text { color: "white"; elide: "ElideRight"; text: container.photoTags == "" ? "" : "<b>Tags:</b> " } + Text { color: "white"; elide: "ElideRight"; elide: "ElideRight"; text: container.photoTags } } } back: Item { - anchors.fill: Container + 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 } + Common.Progress { anchors.centerIn: parent; width: 200; height: 18; progress: bigImage.progress; visible: bigImage.status!=1 } Flickable { - id: Flick; anchors.fill: parent; clip: true - viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height + id: flickable; anchors.fill: parent; 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); + 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 + 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 + 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(Flick.width / width, Flick.height / height); - prevScale = Math.min(Slider.minimum, 1); - Slider.value = prevScale; + slider.minimum = Math.min(flickable.width / width, flickable.height / height); + prevScale = Math.min(slider.minimum, 1); + slider.value = prevScale; } } } @@ -84,25 +84,25 @@ Flipable { Text { text: "Image Unavailable" - visible: BigImage.status == 'Error' + visible: bigImage.status == 'Error' anchors.centerIn: parent; color: "white"; font.bold: true } Common.Slider { - id: Slider; visible: { BigImage.status == 1 && maximum > minimum } + 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 > Flick.width) { - var xoff = (Flick.width/2 + Flick.viewportX) * value / prevScale; - Flick.viewportX = xoff - Flick.width/2; + 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 > Flick.height) { - var yoff = (Flick.height/2 + Flick.viewportY) * value / prevScale; - Flick.viewportY = yoff - Flick.height/2; + if (bigImage.height * value > flickable.height) { + var yoff = (flickable.height/2 + flickable.viewportY) * value / prevScale; + flickable.viewportY = yoff - flickable.height/2; } prevScale = value; } @@ -111,14 +111,14 @@ Flipable { states: State { name: "Back" - PropertyChanges { target: ItemRotation; angle: 180 } + PropertyChanges { target: itemRotation; angle: 180 } } transitions: Transition { SequentialAnimation { - PropertyAction { target: BigImage; property: "smooth"; value: false } + PropertyAction { target: bigImage; property: "smooth"; value: false } NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 } - PropertyAction { target: BigImage; property: "smooth"; value: !Flick.moving } + PropertyAction { target: bigImage; property: "smooth"; value: !flickable.moving } } } } |