summaryrefslogtreecommitdiffstats
path: root/demos/declarative/flickr/mobile/ImageDetails.qml
blob: 5f16a240c573c6353975d570c455db3ff3bf6d5e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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: 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
        }

        Connection {
            sender: ToolBar; signal: "button1Clicked()"
            script: if (Container.state=='') Container.state='Back'; else Container.state=''
        }

        Column {
            spacing: 10
            anchors {
                left: parent.left; leftMargin: 20
                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 }
        }
    }

    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: Flick; 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);

                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;
                        }
                    }
                }
            }
        }

        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 > Flick.width) {
                    var xoff = (Flick.width/2 + Flick.viewportX) * value / prevScale;
                    Flick.viewportX = xoff - Flick.width/2;
                }
                if (BigImage.height * value > Flick.height) {
                    var yoff = (Flick.height/2 + Flick.viewportY) * value / prevScale;
                    Flick.viewportY = 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 }
        }
    }
}