« back to all changes in this revision
Viewing changes to Dash/Apps/AppsPreview.qml
- browse files at revision 682
- compare with another revision
- download diff
- download tarball
- view history from revision 682
- Committer: Diego Sarmentero
- Date: 2013-05-23 18:50:40 UTC
- Revision ID: diego.sarmentero@gmail.com-20130523185040-7p520ns8o34ieoe0
Purcharse preview complete
added
removed
Dash/Apps/AppsPreview.qml
1
1
import QtQuick 2.0
2
import Ubuntu.Components 0.1
3
2
import ".."
4
3
import "../../Applications"
5
4
import "../../Components"
12
11
property int index
13
12
14
13
signal download(int index)
14
signal purchase()
15
15
16
16
title: application.name
17
17
27
27
28
28
property string icon: "../../graphics/applicationIcons/" + application.icon + ".png" // FIXME: this is temporary
29
29
30
body: Column{
31
spacing: units.gu(1)
32
anchors.left: parent.left
33
anchors.leftMargin: units.gu(2)
34
35
AppScreenshotCarousel {model: [
36
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
37
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
38
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
39
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
40
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
41
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
42
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
43
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon,
44
icon.indexOf("/") == -1 ? "image://gicon/" + icon : icon
45
]}
46
47
Row {
48
id: rowInstall
49
width: root.width
50
spacing: units.gu(6)
51
property int buttonWidth: Math.min(units.gu(22), (width - spacing) / 2)
52
53
Column {
54
Label{
55
text: "Rate"
56
color: "white"
57
fontSize: "medium"
58
width: parent.width
59
// horizontalAlignment: Text.AlignHCenter
60
}
61
62
RatingStars {
63
maximumRating: 10 // FIXME: this should happen on the backend side
64
rating: 8
65
}
66
}
67
68
Button {
69
id: btnInstall
70
width: parent.buttonWidth
71
color: "#dd4814"
72
text: root.price ? "Buy" : "Install"
73
visible: text != ""
74
iconSource: "graphics/icon_button_u1.png"
75
iconPosition: "right"
76
77
onClicked: {
78
btnInstall.visible = false;
79
progressBar.opacity = 1;
80
progressBar.timer.start();
81
download(index);
82
}
83
}
84
85
ProgressBar {
86
id: progressBar
87
opacity: 0
88
value: 0
89
maximumValue: 100
90
width: parent.buttonWidth
91
height: btnInstall.height
92
93
property alias timer: timerEvent
94
95
Behavior on opacity { PropertyAnimation { duration: 400; } }
96
97
Timer {
98
id: timerEvent
99
interval: 1000
100
running: false
101
onTriggered: {
102
if(progressBar.value < 100){
103
progressBar.value += 10;
104
timerEvent.restart();
105
}else{
106
progressBar.opacity = 0;
30
body: Rectangle {
31
id: container
32
color: "transparent"
33
width: root.width
34
height: purchaseLoader.onScreen ? preview.height : details.height
35
36
OpenEffect {
37
id: effectPurchase
38
anchors {
39
fill: parent
40
bottomMargin: -bottomOverflow
41
}
42
sourceItem: details
43
44
enabled: gap > 0.0
45
46
topGapPx: (1 - gap) * positionPx
47
topOpacity: Math.max(0, (1 - gap * 1.2))
48
bottomGapPx: positionPx + gap * (targetBottomGapPx - positionPx)
49
bottomOverflow: units.gu(6)
50
bottomOpacity: 1 - (gap * 0.8)
51
52
property int targetBottomGapPx: height - units.gu(8) - bottomOverflow
53
property real gap: purchaseLoader.open ? 1.0 : 0.0
54
55
Behavior on gap {
56
NumberAnimation {
57
duration: 300
58
easing.type: Easing.InOutQuad
59
onRunningChanged: {
60
if (!purchaseLoader.open && !running) {
61
purchaseLoader.onScreen = false;
107
62
}
108
63
}
109
64
}
110
65
}
111
66
}
112
67
113
Label { text: " " }
114
Label {
115
text: "Description:"
116
fontSize: "large"
117
color: "white"
118
opacity: .9
119
width: parent.width
120
wrapMode: Text.WordWrap
121
style: Text.Raised
122
styleColor: "black"
123
}
124
Label {
125
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut purus sed enim tempus eleifend. Aliquam aliquet lobortis sapien, eget rutrum nisl vulputate sed. Vivamus pretium imperdiet lacus, a venenatis ipsum interdum nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
126
fontSize: "medium"
127
color: "#f3f3e7"
128
opacity: .6
129
width: parent.width - units.gu(4)
130
wrapMode: Text.WordWrap
131
style: Text.Raised
132
styleColor: "black"
133
}
134
Label { text: " " }
135
Label {
136
text: "Comments:"
137
fontSize: "large"
138
color: "white"
139
opacity: .9
140
width: parent.width
141
wrapMode: Text.WordWrap
142
style: Text.Raised
143
styleColor: "black"
144
}
145
Column {
146
Label {
147
text: "Artistically Pleasing"
148
fontSize: "medium"
149
color: "white"
150
opacity: .8
151
width: parent.width - units.gu(4)
152
wrapMode: Text.WordWrap
153
style: Text.Raised
154
styleColor: "black"
155
}
156
Row {
157
spacing: units.gu(1)
158
RatingStars {
159
maximumRating: 10 // FIXME: this should happen on the backend side
160
rating: 8
161
}
162
Label {
163
text: "Diego Sarmentero"
164
fontSize: "medium"
165
color: "white"
166
opacity: .8
167
style: Text.Raised
168
styleColor: "black"
169
}
170
Label {
171
text: "21/02/2013"
172
fontSize: "medium"
173
color: "#f3f3e7"
174
opacity: .6
175
style: Text.Raised
176
styleColor: "black"
177
}
178
}
179
Label {
180
text: "Very cool concept. While I'd rather not keep it as my main application due to (apparent) performance issues, this is certainly something i'll show to friends with more powerful devices."
181
fontSize: "medium"
182
color: "#f3f3e7"
183
opacity: .6
184
width: parent.width - units.gu(4)
185
wrapMode: Text.WordWrap
186
style: Text.Raised
187
styleColor: "black"
188
}
189
}
190
Column {
191
Label {
192
text: "Good concept..."
193
fontSize: "medium"
194
color: "white"
195
opacity: .8
196
width: parent.width - units.gu(4)
197
wrapMode: Text.WordWrap
198
style: Text.Raised
199
styleColor: "black"
200
}
201
Row {
202
spacing: units.gu(1)
203
RatingStars {
204
maximumRating: 10 // FIXME: this should happen on the backend side
205
rating: 6
206
}
207
Label {
208
text: "Roberto Alsina"
209
fontSize: "medium"
210
color: "white"
211
opacity: .8
212
style: Text.Raised
213
styleColor: "black"
214
}
215
Label {
216
text: "19/02/2013"
217
fontSize: "medium"
218
color: "#f3f3e7"
219
opacity: .6
220
style: Text.Raised
221
styleColor: "black"
222
}
223
}
224
Label {
225
text: "Now needs options to customize..."
226
fontSize: "medium"
227
color: "#f3f3e7"
228
opacity: .6
229
width: parent.width - units.gu(4)
230
wrapMode: Text.WordWrap
231
style: Text.Raised
232
styleColor: "black"
233
}
234
}
235
Column {
236
Label {
237
text: "So Laggggy!"
238
fontSize: "medium"
239
color: "white"
240
opacity: .8
241
width: parent.width - units.gu(4)
242
wrapMode: Text.WordWrap
243
style: Text.Raised
244
styleColor: "black"
245
}
246
Row {
247
spacing: units.gu(1)
248
RatingStars {
249
maximumRating: 10 // FIXME: this should happen on the backend side
250
rating: 2
251
}
252
Label {
253
text: "Mandel"
254
fontSize: "medium"
255
color: "white"
256
opacity: .8
257
style: Text.Raised
258
styleColor: "black"
259
}
260
Label {
261
text: "08/05/2012"
262
fontSize: "medium"
263
color: "#f3f3e7"
264
opacity: .6
265
style: Text.Raised
266
styleColor: "black"
267
}
268
}
269
Label {
270
text: "Pity i thought its gonna be great due to the pictures."
271
fontSize: "medium"
272
color: "#f3f3e7"
273
opacity: .6
274
width: parent.width - units.gu(4)
275
wrapMode: Text.WordWrap
276
style: Text.Raised
277
styleColor: "black"
68
AppDetails {
69
id: details
70
icon: root.icon
71
onDownload: root.download(index);
72
onPurchase: {
73
purchaseLoader.open = true;
74
purchaseLoader.opacity = 1;
75
effectPurchase.positionPx = mapToItem(details, 0, 0).y - 100;
76
}
77
}
78
79
Loader {
80
id: purchaseLoader
81
height: effectPurchase.bottomGapPx - effectPurchase.topGapPx
82
anchors {
83
top: parent.top
84
topMargin: effectPurchase.topGapPx
85
left: parent.left
86
right: parent.right
87
}
88
sourceComponent: onScreen ? purchaseComponent : undefined
89
opacity: 0
90
91
Behavior on opacity { PropertyAnimation { duration: 400 } }
92
93
property bool open: false
94
property bool onScreen: false
95
96
onLoaded: {
97
item.price = root.price;
98
}
99
100
onOpenChanged: {
101
if (open) {
102
onScreen = true;
103
}
104
}
105
}
106
107
Component {
108
id: purchaseComponent
109
110
AppPurchase {
111
id: preview
112
anchors.fill: parent
113
image: icon
114
price: price
115
title: root.title
116
onClose: {
117
purchaseLoader.opacity = 0;
118
open = false;
119
}
120
121
onDownload: {
122
close();
123
details.start_download();
124
}
278
125
}
279
126
}
280
127
}
Loggerhead is a web-based interface for Breezy
Version: 2.0.1