ImageDetails.qml Example File

geoflickr/flickrmobile/ImageDetails.qml
/**************************************************************************** ** ** Copyright (C) 2017 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:BSD$ ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see https://www.qt.io/terms-conditions. For further ** information use the contact form at https://www.qt.io/contact-us. ** ** BSD License Usage ** Alternatively, you may use this file under the terms of the BSD license ** as follows: ** ** "Redistribution and use in source and binary forms, with or without ** modification, are permitted provided that the following conditions are ** met: ** * Redistributions of source code must retain the above copyright ** notice, this list of conditions and the following disclaimer. ** * Redistributions in binary form must reproduce the above copyright ** notice, this list of conditions and the following disclaimer in ** the documentation and/or other materials provided with the ** distribution. ** * Neither the name of The Qt Company Ltd nor the names of its ** contributors may be used to endorse or promote products derived ** from this software without specific prior written permission. ** ** ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." ** ** $QT_END_LICENSE$ ** ****************************************************************************/
import QtQuick 2.0 import "../flickrcommon" as Common Flipable { id: container property variant frontContainer: containerFront property string photoTitle: "" property string photoDate property string photoUrl property variant 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>Published:</b> " + container.photoDate } } } 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 != Image.Ready } Flickable { id: flickable; anchors.fill: parent; clip: true contentWidth: imageContainer.width; contentHeight: 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 source: container.photoUrl scale: slider.value anchors.centerIn: parent; smooth: !flickable.movingVertically onStatusChanged : { // Default scale shows the entire image. if (status == Image.Ready && 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 == Image.Error anchors.centerIn: parent; color: "white"; font.bold: true } Common.Slider { id: slider; visible: { bigImage.status == Image.Ready && 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.contentX) * value / prevScale; flickable.contentX = xoff - flickable.width/2; } if (bigImage.height * value > flickable.height) { var yoff = (flickable.height/2 + flickable.contentY) * value / prevScale; flickable.contentY = 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.type: Easing.InOutQuad; properties: "angle"; duration: 500 } PropertyAction { target: bigImage; property: "smooth"; value: !flickable.movingVertically } } } }