utorch

Merge lp:~nik90/utorch/design-upgrade into lp:utorch

  1. design-upgrade
  2. 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
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 }

Subscribers

People subscribed via source and target branches