Initial commit
[qml-presentation-made-with-qml:qml-presentation-made-with-qml.git] / flickr / flickr-desktop.qml
1 import Qt 4.6
2
3 import "common"
4
5 Item {
6     id: mainWindow; width: 800; height: 450
7
8     property bool showPathView : false
9
10     resources: [
11         Component {
12         id: photoDelegate
13         Item {
14             id: wrapper; width: 85; height: 85
15             scale: wrapper.PathView.scale; z: wrapper.PathView.z
16
17             transform: Rotation {
18                 id: itemRotation; origin.x: wrapper.width/2; origin.y: wrapper.height/2
19                 axis.y: 1; axis.z: 0; angle: wrapper.PathView.angle
20             }
21
22             Connection {
23                 sender: imageDetails; signal: "closed()"
24                 script: {
25                     if (wrapper.state == 'Details') {
26                         wrapper.state = '';
27                         imageDetails.photoUrl = "";
28                     }
29                 }
30             }
31
32             Script {
33                function photoClicked() {
34                    imageDetails.photoTitle = title;
35                    imageDetails.photoDescription = description;
36                    imageDetails.photoTags = tags;
37                    imageDetails.photoWidth = photoWidth;
38                    imageDetails.photoHeight = photoHeight;
39                    imageDetails.photoType = photoType;
40                    imageDetails.photoAuthor = photoAuthor;
41                    imageDetails.photoDate = photoDate;
42                    imageDetails.photoUrl = url;
43                    imageDetails.rating = 0;
44                    wrapper.state = "Details";
45                }
46             }
47
48             Rectangle {
49                 id: whiteRect; anchors.fill: parent; color: "white"; radius: 5
50
51                 Loading { x: 26; y: 26; visible: thumb.status!=1 }
52                 Image { id: thumb; source: imagePath; x: 5; y: 5 }
53
54                 Item {
55                     id: shadows
56                     Image { source: "common/pics/shadow-right.png"; x: whiteRect.width; height: whiteRect.height }
57                     Image { source: "common/pics/shadow-bottom.png"; y: whiteRect.height; width: whiteRect.width }
58                     Image { id: Corner; source: "common/pics/shadow-corner.png"; x: whiteRect.width; y: whiteRect.height }
59                 }
60             }
61
62             MouseRegion { anchors.fill: wrapper; onClicked: { photoClicked() } }
63
64             states: [
65                 State {
66                     name: "Details"
67                     PropertyChanges { target: imageDetails; z: 2 }
68                     ParentChange { target: wrapper; parent: imageDetails.frontContainer }
69                     PropertyChanges { target: wrapper; x: 45; y: 35; scale: 1; z: 1000 }
70                     PropertyChanges { target: itemRotation; angle: 0 }
71                     PropertyChanges { target: shadows; opacity: 0 }
72                     PropertyChanges { target: imageDetails; y: 20 }
73                     PropertyChanges { target: photoGridView; y: -480 }
74                     PropertyChanges { target: photoPathView; y: -480 }
75                     PropertyChanges { target: viewModeButton; opacity: 0 }
76                     PropertyChanges { target: tagsEdit; opacity: 0 }
77                     PropertyChanges { target: fetchButton; opacity: 0 }
78                     PropertyChanges { target: categoryText; y: "-50" }
79                 }
80             ]
81
82             transitions: [
83                 Transition {
84                     from: "*"; to: "Details"
85                     SequentialAnimation {
86                         ParentAction { }
87                         NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
88                     }
89                 },
90                 Transition {
91                     from: "Details"; to: "*"
92                     SequentialAnimation {
93                         ParentAction { }
94                         NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
95                         PropertyAction { target: wrapper; properties: "z" }
96                     }
97                 }
98             ]
99
100         }
101         }
102     ]
103
104     Item {
105         id: background
106
107         anchors.fill: parent
108
109         Image { source: "common/pics/background.png"; anchors.fill: parent }
110         RssModel { id: rssModel; tags : tagsEdit.text }
111         Loading { anchors.centerIn: parent; visible: rssModel.status == 2 }
112
113         GridView {
114             id: photoGridView; model: rssModel; delegate: photoDelegate; cacheBuffer: 100
115             cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1
116         }
117
118         PathView {
119             id: photoPathView; model: rssModel; delegate: photoDelegate
120             y: -380; width: 800; height: 330; pathItemCount: 10; z: 1
121             path: Path {
122                 startX: -50; startY: 40;
123
124                 PathAttribute { name: "scale"; value: 1 }
125                 PathAttribute { name: "angle"; value: -45 }
126
127                 PathCubic {
128                     x: 400; y: 220
129                     control1X: 140; control1Y: 40
130                     control2X: 210; control2Y: 220
131                 }
132
133                 PathAttribute { name: "scale"; value: 1.2  }
134                 PathAttribute { name: "z"; value: 1 }
135                 PathAttribute { name: "angle"; value: 0 }
136
137                 PathCubic {
138                     x: 850; y: 40
139                     control2X: 660; control2Y: 40
140                     control1X: 590; control1Y: 220
141                 }
142
143                 PathAttribute { name: "scale"; value: 1 }
144                 PathAttribute { name: "angle"; value: 45 }
145             }
146
147         }
148
149         ImageDetails { id: imageDetails; width: 750; x: 25; y: 500; height: 410 }
150
151         MediaButton {
152             id: viewModeButton; x: 680; y: 410; text: "View Mode"
153             onClicked: { if (mainWindow.showPathView == true) mainWindow.showPathView = false; else mainWindow.showPathView = true }
154         }
155
156         MediaButton {
157             id: fetchButton
158             text: "Update"
159             anchors.right: viewModeButton.left; anchors.rightMargin: 5
160             anchors.top: viewModeButton.top
161             onClicked: { rssModel.reload(); }
162         }
163
164         MediaLineEdit {
165             id: tagsEdit;
166             label: "Tags"
167             anchors.right: fetchButton.left; anchors.rightMargin: 5
168             anchors.top: viewModeButton.top
169         }
170
171         states: State {
172             name: "PathView"
173             when: mainWindow.showPathView == true
174             PropertyChanges { target: photoPathView; y: 80 }
175             PropertyChanges { target: photoGridView; y: -380 }
176         }
177
178         transitions: [
179             Transition {
180                 from: "*"; to: "*"
181                 NumberAnimation { properties: "y"; duration: 1000; easing: "easeOutBounce(amplitude:0.5)" }
182             }
183         ]
184     }
185
186     Text {
187         id: categoryText;  anchors.horizontalCenter: parent.horizontalCenter; y: 15;
188         text: "Flickr - " +
189             (rssModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + rssModel.tags)
190         font.pointSize: 20; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
191     }
192 }