Merge lp:~nik90/utorch/design-upgrade into lp:utorch
- design-upgrade
- Merge into trunk
Proposed by
Nekhelesh Ramananthan
Status: | Merged |
---|---|
Merged at revision: | 25 |
Proposed branch: | lp:~nik90/utorch/design-upgrade |
Merge into: | lp:utorch |
Diff against target: |
429 lines (+220/-155) 3 files modified
UI/AboutPage.qml (+157/-111) UI/MainPage.qml (+58/-6) main.qml (+5/-38) |
To merge this branch: | bzr merge lp:~nik90/utorch/design-upgrade |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Szymon Waliczek | Approve | ||
Review via email: mp+262092@code.launchpad.net |
Commit message
Improved design of MainPage and AboutPage to be more in line with the new SDK design pattern.
Description of the change
Improved design of MainPage and AboutPage to be more in line with the new SDK design pattern.
To post a comment you must log in.
Revision history for this message
Szymon Waliczek (majster-pl) : | # |
review:
Approve
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file 'UI/AboutPage.qml' |
2 | --- UI/AboutPage.qml 2015-06-16 08:43:11 +0000 |
3 | +++ UI/AboutPage.qml 2015-06-16 14:24:48 +0000 |
4 | @@ -1,5 +1,5 @@ |
5 | /* |
6 | - * Copyright (C) 2013 Szymon Waliczek. |
7 | + * Copyright (C) 2013-2015 Szymon Waliczek. |
8 | * |
9 | * Authors: |
10 | * Szymon Waliczek <majsterrr@gmail.com> |
11 | @@ -23,116 +23,162 @@ |
12 | import "../components" |
13 | |
14 | Page { |
15 | + id: aboutPage |
16 | + |
17 | title: i18n.tr("About") |
18 | - |
19 | - Flickable { |
20 | -// spacing: units.gu(2) |
21 | -// anchors.horizontalCenter: parent.horizontalCenter |
22 | -// anchors.top: parent.top |
23 | -// anchors.topMargin: units.gu(5) |
24 | - width: mainView.width |
25 | - height: mainView.height |
26 | - contentWidth: width |
27 | - contentHeight: repeter1.height + label2.height + label3.height + label4.height + label5.height + label6.height + label7.height + icon1.height + units.gu(35) |
28 | - clip: true |
29 | - |
30 | - Column { |
31 | - id: column_holder |
32 | - spacing: units.gu(2) |
33 | - anchors.horizontalCenter: parent.horizontalCenter |
34 | - anchors.top: parent.top |
35 | - anchors.topMargin: units.gu(5) |
36 | - width: mainView.width |
37 | - |
38 | - |
39 | - Repeater { |
40 | - id: repeter1 |
41 | - width: parent.width |
42 | - anchors.horizontalCenter: parent.horizontalCenter |
43 | - model: manifestJSONmodel.model |
44 | - delegate: Label { |
45 | - width: parent.width |
46 | - text: "<b>uTorch</b> " + version |
47 | - fontSize: "large" |
48 | - horizontalAlignment: Text.AlignHCenter |
49 | - } |
50 | - } |
51 | - |
52 | - Label { |
53 | - id: label2 |
54 | - width: parent.width |
55 | - text: i18n.tr("Torch application for Ubuntu Touch") |
56 | - horizontalAlignment: Text.AlignHCenter |
57 | - wrapMode: Text.WordWrap |
58 | - } |
59 | - |
60 | - UbuntuShape { |
61 | - id: icon1 |
62 | - anchors.horizontalCenter: parent.horizontalCenter |
63 | - width: units.gu(12) |
64 | - height: units.gu(12) |
65 | - image: Image { |
66 | - source: Qt.resolvedUrl("../uTorch.png") |
67 | - } |
68 | - |
69 | - } |
70 | - |
71 | - Label { |
72 | - id: label3 |
73 | - width: parent.width |
74 | - font.pointSize: units.gu(1.2) |
75 | - text: i18n.tr("<b>Author:</b><br>Szymon Waliczek<br> |
76 | - <a href=\"mailto://majsterrr@gmail.com\">majsterrr@gmail.com</a>") |
77 | - horizontalAlignment: Text.AlignHCenter |
78 | - wrapMode: Text.WordWrap |
79 | - } |
80 | - |
81 | - Label { |
82 | - id: label4 |
83 | - width: parent.width |
84 | - font.pointSize: units.gu(1.2) |
85 | - text: i18n.tr("<b>Contributors:</b> |
86 | - <br>Michael Zanetti (code)<br> |
87 | - <a href=\"mailto://michael_zanetti@gmx.net\">michael_zanetti@gmx.net</a> |
88 | - <br>Niklas Wenzel (code)<br> |
89 | - <a href=\"mailto://nikwen.developer@gmail.com\">nikwen.developer@gmail.com</a> |
90 | - <br>Sam Hewitt (icon)<br> |
91 | - <a href=\"mailto://snwh@ubuntu.com\">snwh@ubuntu.com</a> |
92 | - <br>Nekhelesh Ramananthan (code)<br> |
93 | - <a href=\"mailto://krnekhelesh@gmail.com\">krnekhelesh@gmail.com</a> |
94 | - ") |
95 | - horizontalAlignment: Text.AlignHCenter |
96 | - wrapMode: Text.WordWrap |
97 | - } |
98 | - |
99 | - Label { |
100 | - id: label5 |
101 | - width: parent.width |
102 | - font.pointSize: units.gu(1.2) |
103 | - text: i18n.tr('<html><style type="text/css"></style><b>Home Page:</b> <a href="https://plus.google.com/u/0/b/109835078534997175309/">plus.google.com/uTorch</a></html>') |
104 | - onLinkActivated: Qt.openUrlExternally(link) |
105 | - horizontalAlignment: Text.AlignHCenter |
106 | - wrapMode: Text.WordWrap |
107 | - } |
108 | - |
109 | - Label { |
110 | - id: label6 |
111 | - width: parent.width |
112 | - font.pointSize: units.gu(1.2) |
113 | - text: i18n.tr("<b>Licence: </b> GPL v3") |
114 | - horizontalAlignment: Text.AlignHCenter |
115 | - wrapMode: Text.WordWrap |
116 | - } |
117 | - |
118 | - Label { |
119 | - id: label7 |
120 | - width: parent.width |
121 | - font.pointSize: units.gu(1.2) |
122 | - text: i18n.tr('<html><style type="text/css"></style><b>Source:</b> <a href="https://launchpad.net/utorch">Launchpad</a></html>') |
123 | - onLinkActivated: Qt.openUrlExternally(link) |
124 | - horizontalAlignment: Text.AlignHCenter |
125 | - wrapMode: Text.WordWrap |
126 | - } |
127 | - } |
128 | + head.sections.model: [qsTr("About"), qsTr("Credits")] |
129 | + |
130 | + ListModel { |
131 | + id: contributorsModel |
132 | + ListElement { name: "Szymon Waliczek"; email: "<a href=\"mailto://majsterrr@gmail.com\">majsterrr@gmail.com</a>"; role: "Author" } |
133 | + ListElement { name: "Michael Zanetti"; email: "<a href=\"mailto://michael_zanetti@gmx.net\">michael_zanetti@gmx.net</a>"; role: "Developer" } |
134 | + ListElement { name: "Niklas Wenzel"; email: "<a href=\"mailto://nikwen.developer@gmail.com\">nikwen.developer@gmail.com</a>"; role: "Developer" } |
135 | + ListElement { name: "Nekhelesh Ramananthan"; email: "<a href=\"mailto://nik90@ubuntu.com\">nik90@ubuntu.com</a>"; role: "Developer" } |
136 | + ListElement { name: "Sam Hewitt"; email: "<a href=\"mailto://snwh@ubuntu.com\">snwh@ubuntu.com</a>"; role: "Designer" } |
137 | + } |
138 | + |
139 | + VisualItemModel { |
140 | + id: tabs |
141 | + |
142 | + Item { |
143 | + width: tabView.width |
144 | + height: tabView.height |
145 | + |
146 | + Column { |
147 | + spacing: units.gu(4) |
148 | + anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: units.gu(2) } |
149 | + |
150 | + UbuntuShape { |
151 | + anchors.horizontalCenter: parent.horizontalCenter |
152 | + width: units.gu(20) |
153 | + height: units.gu(20) |
154 | + image: Image { |
155 | + source: Qt.resolvedUrl("../uTorch.png") |
156 | + } |
157 | + } |
158 | + |
159 | + Column { |
160 | + width: parent.width |
161 | + |
162 | + Repeater { |
163 | + id: repeter1 |
164 | + width: parent.width |
165 | + anchors.horizontalCenter: parent.horizontalCenter |
166 | + model: manifestJSONmodel.model |
167 | + delegate: Label { |
168 | + width: parent.width |
169 | + text: "<b>uTorch</b> " + version |
170 | + fontSize: "large" |
171 | + horizontalAlignment: Text.AlignHCenter |
172 | + } |
173 | + } |
174 | + |
175 | + Label { |
176 | + width: parent.width |
177 | + text: i18n.tr("Torch application for Ubuntu Touch") |
178 | + horizontalAlignment: Text.AlignHCenter |
179 | + wrapMode: Text.WordWrap |
180 | + } |
181 | + } |
182 | + |
183 | + Column { |
184 | + width: parent.width |
185 | + |
186 | + Label { |
187 | + text: "(C) 2015 Szymon Waliczek <a href=\"mailto://majsterrr@gmail.com\">majsterrr@gmail.com</a>" |
188 | + width: parent.width |
189 | + wrapMode: Text.WordWrap |
190 | + horizontalAlignment: Text.AlignHCenter |
191 | + linkColor: "#00C2FF" |
192 | + fontSize: "small" |
193 | + } |
194 | + |
195 | + Label { |
196 | + text: "Released under the terms of GNU GPL v3 or higher" |
197 | + width: parent.width |
198 | + wrapMode: Text.WordWrap |
199 | + horizontalAlignment: Text.AlignHCenter |
200 | + fontSize: "small" |
201 | + } |
202 | + } |
203 | + |
204 | + Label { |
205 | + text: ("Source code available on %1").arg("<a href=\"https://launchpad.net/utorch\">Launchpad</a>") |
206 | + width: parent.width |
207 | + wrapMode: Text.WordWrap |
208 | + horizontalAlignment: Text.AlignHCenter |
209 | + linkColor: "#00C2FF" |
210 | + fontSize: "small" |
211 | + } |
212 | + |
213 | + Label { |
214 | + text: ("Homepage: %1").arg("<a href=\"https://plus.google.com/u/0/b/109835078534997175309/\">plus.google.com/uTorch</a>") |
215 | + width: parent.width |
216 | + wrapMode: Text.WordWrap |
217 | + horizontalAlignment: Text.AlignHCenter |
218 | + linkColor: "#00C2FF" |
219 | + fontSize: "small" |
220 | + } |
221 | + } |
222 | + } |
223 | + |
224 | + Item { |
225 | + width: tabView.width |
226 | + height: tabView.height |
227 | + |
228 | + ListView { |
229 | + id: contributorsList |
230 | + |
231 | + anchors.fill: parent |
232 | + model: contributorsModel |
233 | + section.property: "role" |
234 | + section.labelPositioning: ViewSection.InlineLabels |
235 | + |
236 | + section.delegate: ListItem { |
237 | + height: headerText.implicitHeight + units.gu(2) |
238 | + divider.visible: true |
239 | + Label { |
240 | + id: headerText |
241 | + text: section |
242 | + color: "White" |
243 | + font.bold: true |
244 | + anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: units.gu(2) } |
245 | + } |
246 | + } |
247 | + |
248 | + delegate: ListItem { |
249 | + divider.visible: false |
250 | + Column { |
251 | + anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: units.gu(2) } |
252 | + |
253 | + Label { |
254 | + text: name |
255 | + width: parent.width |
256 | + elide: Text.ElideRight |
257 | + } |
258 | + |
259 | + Label { |
260 | + text: email |
261 | + linkColor: "#00C2FF" |
262 | + fontSize: "small" |
263 | + width: parent.width |
264 | + elide: Text.ElideRight |
265 | + } |
266 | + } |
267 | + } |
268 | + } |
269 | + } |
270 | + } |
271 | + |
272 | + ListView { |
273 | + id: tabView |
274 | + |
275 | + model: tabs |
276 | + interactive: false |
277 | + anchors.fill: parent |
278 | + orientation: Qt.Horizontal |
279 | + snapMode: ListView.SnapOneItem |
280 | + currentIndex: aboutPage.head.sections.selectedIndex |
281 | + highlightMoveDuration: UbuntuAnimation.SlowDuration |
282 | } |
283 | } |
284 | |
285 | === modified file 'UI/MainPage.qml' |
286 | --- UI/MainPage.qml 2015-06-16 01:39:17 +0000 |
287 | +++ UI/MainPage.qml 2015-06-16 14:24:48 +0000 |
288 | @@ -1,5 +1,5 @@ |
289 | /* |
290 | - * Copyright (C) 2013 Szymon Waliczek. |
291 | + * Copyright (C) 2013-2015 Szymon Waliczek. |
292 | * |
293 | * Authors: |
294 | * Szymon Waliczek <majsterrr@gmail.com> |
295 | @@ -23,12 +23,64 @@ |
296 | import "../components" |
297 | |
298 | Page { |
299 | - title: i18n.tr("uTorch") |
300 | - |
301 | - property alias torchOn: torchswtich1.torchOn |
302 | + property alias torchOn: torchSwitch.torchOn |
303 | + |
304 | + Label { |
305 | + id: headerText |
306 | + anchors { top: parent.top; left: parent.left; leftMargin: units.gu(2) } |
307 | + text: i18n.tr("uTorch") |
308 | + font.pixelSize: units.dp(27) |
309 | + color: "White" |
310 | + verticalAlignment: Text.AlignVCenter |
311 | + height: units.gu(7) |
312 | + } |
313 | + |
314 | + AbstractButton { |
315 | + id: aboutButton |
316 | + anchors { top:parent.top; right: parent.right } |
317 | + |
318 | + width: units.gu(7) |
319 | + height: units.gu(7) |
320 | + |
321 | + Rectangle { |
322 | + anchors.fill: parent |
323 | + color: aboutButton.pressed ? UbuntuColors.lightGrey : "Transparent" |
324 | + } |
325 | + |
326 | + Icon { |
327 | + name: "info" |
328 | + width: units.gu(3) |
329 | + height: width |
330 | + color: "White" |
331 | + anchors.centerIn: parent |
332 | + } |
333 | + |
334 | + onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml")) |
335 | + } |
336 | |
337 | TorchSwitch { |
338 | - id: torchswtich1 |
339 | - anchors.centerIn: parent |
340 | + id: torchSwitch |
341 | + anchors.centerIn: parent |
342 | + } |
343 | + |
344 | + Rectangle { |
345 | + anchors.centerIn: parent |
346 | + width: torchOn ? 2*parent.width : 0 |
347 | + height: torchOn ? 2*parent.height : 0 |
348 | + radius: width/2 |
349 | + color: "#00C2FF" |
350 | + z: torchSwitch.z - 1 |
351 | + |
352 | + Behavior on width { |
353 | + UbuntuNumberAnimation { |
354 | + duration: torchOn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.SlowDuration |
355 | + } |
356 | + } |
357 | + |
358 | + Behavior on height { |
359 | + UbuntuNumberAnimation { |
360 | + duration: torchOn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.SlowDuration |
361 | + } |
362 | + } |
363 | } |
364 | } |
365 | |
366 | === modified file 'main.qml' |
367 | --- main.qml 2015-06-16 01:47:08 +0000 |
368 | +++ main.qml 2015-06-16 14:24:48 +0000 |
369 | @@ -32,10 +32,7 @@ |
370 | // Note! applicationName needs to match the "name" field of the click manifest |
371 | applicationName: "com.ubuntu.developer.majster-pl.utorch" |
372 | |
373 | - // Application colors |
374 | - headerColor: "#5c5c5c" |
375 | - backgroundColor: "#292929" |
376 | - footerColor: "#000000" |
377 | + backgroundColor: UbuntuColors.coolGrey |
378 | |
379 | width: units.gu(50) |
380 | height: units.gu(75) |
381 | @@ -52,44 +49,14 @@ |
382 | Component.onCompleted: { |
383 | push(mainPage) |
384 | } |
385 | - } |
386 | - |
387 | - MainPage { |
388 | - id: mainPage |
389 | - objectName: "uTorch" |
390 | - visible: false |
391 | - |
392 | - head.actions: [ |
393 | - Action { |
394 | - text: i18n.tr("About") |
395 | - iconName: "info" |
396 | - |
397 | - onTriggered: { |
398 | - pageStack.push(Qt.resolvedUrl("UI/AboutPage.qml")) |
399 | - } |
400 | - } |
401 | - ] |
402 | + |
403 | + MainPage { |
404 | + id: mainPage |
405 | + } |
406 | } |
407 | |
408 | Camera { |
409 | id: camera |
410 | flash.mode: mainPage.torchOn ? Camera.FlashVideoLight : Camera.FlashOff |
411 | } |
412 | - |
413 | - states: [ |
414 | - State { |
415 | - name: "on"; when: mainPage.torchOn |
416 | - PropertyChanges { target: mainView; headerColor: "#fff690" } |
417 | -// PropertyChanges { target: tabStack; header.__styleInstance.textColor : "#000000" } |
418 | - } |
419 | - ] |
420 | - transitions: [ |
421 | - Transition { |
422 | - ColorAnimation { property: "headerColor"; duration: 250 } |
423 | -// ColorAnimation { property: "textColor"; duration: 250 } |
424 | - } |
425 | - ] |
426 | - |
427 | - |
428 | - |
429 | } |