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