Initial commit
[qml-presentation-made-with-qml:qml-presentation-made-with-qml.git] / flickr / common / ImageDetails.qml
1 import Qt 4.6
2
3 Flipable {
4     id: container
5
6     property var frontContainer: containerFront
7     property string photoTitle: ""
8     property string photoDescription: ""
9     property string photoTags: ""
10     property int photoWidth
11     property int photoHeight
12     property string photoType
13     property string photoAuthor
14     property string photoDate
15     property string photoUrl
16     property int rating: 2
17     property var prevScale: 1.0
18
19     signal closed
20
21     transform: Rotation {
22         id: detailsRotation
23         origin.x: container.width / 2;
24         axis.y: 1; axis.z: 0
25     }
26
27     front: Item {
28         id: containerFront; anchors.fill: container
29
30         Rectangle {
31             anchors.fill: parent
32             color: "black"; opacity: 0.4
33             border.color: "white"; border.width: 2
34         }
35
36         MediaButton {
37             id: backButton; x: 630; y: 370; text: "Back"
38             onClicked: { container.closed() }
39         }
40
41         MediaButton {
42             id: moreButton; x: 530; y: 370; text: "View..."
43             onClicked: { container.state='Back' }
44         }
45
46         Text { id: titleText; style: "Raised"; styleColor: "black"; color: "white"; elide: "ElideRight"
47                x: 220; y: 30; width: parent.width - 240; text: container.photoTitle; font.pointSize: 22 }
48
49         LikeOMeter { x: 40; y: 250; rating: container.rating }
50
51         Flickable { id: flickable; x: 220; width: 480; height: 210; y: 130; clip: true
52                     viewportWidth: 480; viewportHeight: descriptionText.height
53
54             WebView { id: descriptionText; width: parent.width
55                       html: "<style TYPE=\"text/css\">body {color: white;} a:link {color: cyan; text-decoration: underline; }</style>" + container.photoDescription }
56         }
57
58         Text { id: size; color: "white"; width: 300; x: 40; y: 300
59                text: "<b>Size:</b> " + container.photoWidth + 'x' + container.photoHeight }
60         Text { id: type; color: "white"; width: 300; x: 40; anchors.top: size.bottom
61                text: "<b>Type:</b> " + container.photoType }
62
63         Text { id: author; color: "white"; width: 300; x: 220; y: 80
64                text: "<b>Author:</b> " + container.photoAuthor }
65         Text { id: date; color: "white"; width: 300; x: 220; anchors.top: author.bottom
66                text: "<b>Published:</b> " + container.photoDate }
67         Text { id: tagsLabel; color: "white"; x: 220; anchors.top: date.bottom;
68                text: container.photoTags == "" ? "" : "<b>Tags:</b> " }
69         Text { id: tags; color: "white"; width: parent.width-x-20;
70                 anchors.left: tagsLabel.right; anchors.top: date.bottom;
71                 elide: "ElideRight"; text: container.photoTags }
72
73         ScrollBar { id: scrollBar; x: 720; y: flickable.y; width: 7; height: flickable.height; opacity: 0;
74                     flickableArea: flickable; clip: true }
75     }
76
77     back: Item {
78         anchors.fill: container
79
80         Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4; border.color: "white"; border.width: 2 }
81
82         Progress { anchors.centerIn: parent; width: 200; height: 18; progress: bigImage.progress; visible: bigImage.status!=1 }
83         Flickable {
84             id: flick; width: container.width - 10; height: container.height - 10
85             x: 5; y: 5; clip: true;
86             viewportWidth: imageContainer.width; viewportHeight: imageContainer.height
87
88             Item {
89                 id: imageContainer
90                 width: Math.max(bigImage.width * bigImage.scale, flick.width);
91                 height: Math.max(bigImage.height * bigImage.scale, flick.height);
92
93                 Image {
94                     id: bigImage; source: container.photoUrl; scale: slider.value
95                     // Center image if it is smaller than the flickable area.
96                     x: imageContainer.width > width*scale ? (imageContainer.width - width*scale) / 2 : 0
97                     y: imageContainer.height > height*scale ? (imageContainer.height - height*scale) / 2 : 0
98                     smooth: !flick.moving
99                     onStatusChanged : {
100                         // Default scale shows the entire image.
101                         if (status == 1 && width != 0) {
102                             slider.minimum = Math.min(flick.width / width, flick.height / height);
103                             prevScale = Math.min(slider.minimum, 1);
104                             slider.value = prevScale;
105                         }
106                     }
107                 }
108             }
109         }
110
111         MediaButton {
112             id: backButton2; x: 630; y: 370; text: "Back"; onClicked: { container.state = '' }
113         }
114         Text {
115             text: "Image Unavailable"
116             visible: bigImage.status == 'Error'
117             anchors.centerIn: parent; color: "white"; font.bold: true
118         }
119
120         Slider {
121             id: slider; x: 25; y: 374; visible: { bigImage.status == 1 && maximum > minimum }
122             onValueChanged: {
123                 if (bigImage.width * value > flick.width) {
124                     var xoff = (flick.width/2 + flick.viewportX) * value / prevScale;
125                     flick.viewportX = xoff - flick.width/2;
126                 }
127                 if (bigImage.height * value > flick.height) {
128                     var yoff = (flick.height/2 + flick.viewportY) * value / prevScale;
129                     flick.viewportY = yoff - flick.height/2;
130                 }
131                 prevScale = value;
132             }
133         }
134     }
135
136     states: [
137         State {
138             name: "Back"
139             PropertyChanges { target: detailsRotation; angle: 180 }
140         }
141     ]
142
143     transitions: [
144         Transition {
145             SequentialAnimation {
146                 PropertyAction {
147                     target: bigImage
148                     property: "smooth"
149                     value: false
150                 }
151                 NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 }
152                 PropertyAction {
153                     target: bigImage
154                     property: "smooth"
155                     value: !flick.moving
156                 }
157             }
158         }
159     ]
160 }