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

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
=== modified file 'UI/AboutPage.qml'
--- UI/AboutPage.qml 2015-06-16 08:43:11 +0000
+++ UI/AboutPage.qml 2015-06-16 14:24:48 +0000
@@ -1,5 +1,5 @@
1/*1/*
2 * Copyright (C) 2013 Szymon Waliczek.2 * Copyright (C) 2013-2015 Szymon Waliczek.
3 *3 *
4 * Authors:4 * Authors:
5 * Szymon Waliczek <majsterrr@gmail.com>5 * Szymon Waliczek <majsterrr@gmail.com>
@@ -23,116 +23,162 @@
23import "../components"23import "../components"
2424
25Page {25Page {
26 id: aboutPage
27
26 title: i18n.tr("About")28 title: i18n.tr("About")
2729 head.sections.model: [qsTr("About"), qsTr("Credits")]
28 Flickable {30
29// spacing: units.gu(2)31 ListModel {
30// anchors.horizontalCenter: parent.horizontalCenter32 id: contributorsModel
31// anchors.top: parent.top33 ListElement { name: "Szymon Waliczek"; email: "<a href=\"mailto://majsterrr@gmail.com\">majsterrr@gmail.com</a>"; role: "Author" }
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" }
33 width: mainView.width35 ListElement { name: "Niklas Wenzel"; email: "<a href=\"mailto://nikwen.developer@gmail.com\">nikwen.developer@gmail.com</a>"; role: "Developer" }
34 height: mainView.height36 ListElement { name: "Nekhelesh Ramananthan"; email: "<a href=\"mailto://nik90@ubuntu.com\">nik90@ubuntu.com</a>"; role: "Developer" }
35 contentWidth: width37 ListElement { name: "Sam Hewitt"; email: "<a href=\"mailto://snwh@ubuntu.com\">snwh@ubuntu.com</a>"; role: "Designer" }
36 contentHeight: repeter1.height + label2.height + label3.height + label4.height + label5.height + label6.height + label7.height + icon1.height + units.gu(35)38 }
37 clip: true39
3840 VisualItemModel {
39 Column {41 id: tabs
40 id: column_holder42
41 spacing: units.gu(2)43 Item {
42 anchors.horizontalCenter: parent.horizontalCenter44 width: tabView.width
43 anchors.top: parent.top45 height: tabView.height
44 anchors.topMargin: units.gu(5)46
45 width: mainView.width47 Column {
4648 spacing: units.gu(4)
4749 anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: units.gu(2) }
48 Repeater {50
49 id: repeter151 UbuntuShape {
50 width: parent.width52 anchors.horizontalCenter: parent.horizontalCenter
51 anchors.horizontalCenter: parent.horizontalCenter53 width: units.gu(20)
52 model: manifestJSONmodel.model54 height: units.gu(20)
53 delegate: Label {55 image: Image {
54 width: parent.width56 source: Qt.resolvedUrl("../uTorch.png")
55 text: "<b>uTorch</b> " + version57 }
56 fontSize: "large"58 }
57 horizontalAlignment: Text.AlignHCenter59
58 }60 Column {
59 }61 width: parent.width
6062
61 Label {63 Repeater {
62 id: label264 id: repeter1
63 width: parent.width65 width: parent.width
64 text: i18n.tr("Torch application for Ubuntu Touch")66 anchors.horizontalCenter: parent.horizontalCenter
65 horizontalAlignment: Text.AlignHCenter67 model: manifestJSONmodel.model
66 wrapMode: Text.WordWrap68 delegate: Label {
67 }69 width: parent.width
6870 text: "<b>uTorch</b> " + version
69 UbuntuShape {71 fontSize: "large"
70 id: icon172 horizontalAlignment: Text.AlignHCenter
71 anchors.horizontalCenter: parent.horizontalCenter73 }
72 width: units.gu(12)74 }
73 height: units.gu(12)75
74 image: Image {76 Label {
75 source: Qt.resolvedUrl("../uTorch.png")77 width: parent.width
76 }78 text: i18n.tr("Torch application for Ubuntu Touch")
7779 horizontalAlignment: Text.AlignHCenter
78 }80 wrapMode: Text.WordWrap
7981 }
80 Label {82 }
81 id: label383
82 width: parent.width84 Column {
83 font.pointSize: units.gu(1.2)85 width: parent.width
84 text: i18n.tr("<b>Author:</b><br>Szymon Waliczek<br>86
85 <a href=\"mailto://majsterrr@gmail.com\">majsterrr@gmail.com</a>")87 Label {
86 horizontalAlignment: Text.AlignHCenter88 text: "(C) 2015 Szymon Waliczek <a href=\"mailto://majsterrr@gmail.com\">majsterrr@gmail.com</a>"
87 wrapMode: Text.WordWrap89 width: parent.width
88 }90 wrapMode: Text.WordWrap
8991 horizontalAlignment: Text.AlignHCenter
90 Label {92 linkColor: "#00C2FF"
91 id: label493 fontSize: "small"
92 width: parent.width94 }
93 font.pointSize: units.gu(1.2)95
94 text: i18n.tr("<b>Contributors:</b>96 Label {
95 <br>Michael Zanetti (code)<br>97 text: "Released under the terms of GNU GPL v3 or higher"
96 <a href=\"mailto://michael_zanetti@gmx.net\">michael_zanetti@gmx.net</a>98 width: parent.width
97 <br>Niklas Wenzel (code)<br>99 wrapMode: Text.WordWrap
98 <a href=\"mailto://nikwen.developer@gmail.com\">nikwen.developer@gmail.com</a>100 horizontalAlignment: Text.AlignHCenter
99 <br>Sam Hewitt (icon)<br>101 fontSize: "small"
100 <a href=\"mailto://snwh@ubuntu.com\">snwh@ubuntu.com</a>102 }
101 <br>Nekhelesh Ramananthan (code)<br>103 }
102 <a href=\"mailto://krnekhelesh@gmail.com\">krnekhelesh@gmail.com</a>104
103 ")105 Label {
104 horizontalAlignment: Text.AlignHCenter106 text: ("Source code available on %1").arg("<a href=\"https://launchpad.net/utorch\">Launchpad</a>")
105 wrapMode: Text.WordWrap107 width: parent.width
106 }108 wrapMode: Text.WordWrap
107109 horizontalAlignment: Text.AlignHCenter
108 Label {110 linkColor: "#00C2FF"
109 id: label5111 fontSize: "small"
110 width: parent.width112 }
111 font.pointSize: units.gu(1.2)113
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 {
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>")
114 horizontalAlignment: Text.AlignHCenter116 width: parent.width
115 wrapMode: Text.WordWrap117 wrapMode: Text.WordWrap
116 }118 horizontalAlignment: Text.AlignHCenter
117119 linkColor: "#00C2FF"
118 Label {120 fontSize: "small"
119 id: label6121 }
120 width: parent.width122 }
121 font.pointSize: units.gu(1.2)123 }
122 text: i18n.tr("<b>Licence: </b> GPL v3")124
123 horizontalAlignment: Text.AlignHCenter125 Item {
124 wrapMode: Text.WordWrap126 width: tabView.width
125 }127 height: tabView.height
126128
127 Label {129 ListView {
128 id: label7130 id: contributorsList
129 width: parent.width131
130 font.pointSize: units.gu(1.2)132 anchors.fill: parent
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
132 onLinkActivated: Qt.openUrlExternally(link)134 section.property: "role"
133 horizontalAlignment: Text.AlignHCenter135 section.labelPositioning: ViewSection.InlineLabels
134 wrapMode: Text.WordWrap136
135 }137 section.delegate: ListItem {
136 }138 height: headerText.implicitHeight + units.gu(2)
139 divider.visible: true
140 Label {
141 id: headerText
142 text: section
143 color: "White"
144 font.bold: true
145 anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: units.gu(2) }
146 }
147 }
148
149 delegate: ListItem {
150 divider.visible: false
151 Column {
152 anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: units.gu(2) }
153
154 Label {
155 text: name
156 width: parent.width
157 elide: Text.ElideRight
158 }
159
160 Label {
161 text: email
162 linkColor: "#00C2FF"
163 fontSize: "small"
164 width: parent.width
165 elide: Text.ElideRight
166 }
167 }
168 }
169 }
170 }
171 }
172
173 ListView {
174 id: tabView
175
176 model: tabs
177 interactive: false
178 anchors.fill: parent
179 orientation: Qt.Horizontal
180 snapMode: ListView.SnapOneItem
181 currentIndex: aboutPage.head.sections.selectedIndex
182 highlightMoveDuration: UbuntuAnimation.SlowDuration
137 }183 }
138}184}
139185
=== modified file 'UI/MainPage.qml'
--- UI/MainPage.qml 2015-06-16 01:39:17 +0000
+++ UI/MainPage.qml 2015-06-16 14:24:48 +0000
@@ -1,5 +1,5 @@
1/*1/*
2 * Copyright (C) 2013 Szymon Waliczek.2 * Copyright (C) 2013-2015 Szymon Waliczek.
3 *3 *
4 * Authors:4 * Authors:
5 * Szymon Waliczek <majsterrr@gmail.com>5 * Szymon Waliczek <majsterrr@gmail.com>
@@ -23,12 +23,64 @@
23import "../components"23import "../components"
2424
25Page {25Page {
26 title: i18n.tr("uTorch")26 property alias torchOn: torchSwitch.torchOn
2727
28 property alias torchOn: torchswtich1.torchOn28 Label {
29 id: headerText
30 anchors { top: parent.top; left: parent.left; leftMargin: units.gu(2) }
31 text: i18n.tr("uTorch")
32 font.pixelSize: units.dp(27)
33 color: "White"
34 verticalAlignment: Text.AlignVCenter
35 height: units.gu(7)
36 }
37
38 AbstractButton {
39 id: aboutButton
40 anchors { top:parent.top; right: parent.right }
41
42 width: units.gu(7)
43 height: units.gu(7)
44
45 Rectangle {
46 anchors.fill: parent
47 color: aboutButton.pressed ? UbuntuColors.lightGrey : "Transparent"
48 }
49
50 Icon {
51 name: "info"
52 width: units.gu(3)
53 height: width
54 color: "White"
55 anchors.centerIn: parent
56 }
57
58 onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
59 }
2960
30 TorchSwitch {61 TorchSwitch {
31 id: torchswtich162 id: torchSwitch
32 anchors.centerIn: parent63 anchors.centerIn: parent
64 }
65
66 Rectangle {
67 anchors.centerIn: parent
68 width: torchOn ? 2*parent.width : 0
69 height: torchOn ? 2*parent.height : 0
70 radius: width/2
71 color: "#00C2FF"
72 z: torchSwitch.z - 1
73
74 Behavior on width {
75 UbuntuNumberAnimation {
76 duration: torchOn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.SlowDuration
77 }
78 }
79
80 Behavior on height {
81 UbuntuNumberAnimation {
82 duration: torchOn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.SlowDuration
83 }
84 }
33 }85 }
34}86}
3587
=== modified file 'main.qml'
--- main.qml 2015-06-16 01:47:08 +0000
+++ main.qml 2015-06-16 14:24:48 +0000
@@ -32,10 +32,7 @@
32 // Note! applicationName needs to match the "name" field of the click manifest32 // Note! applicationName needs to match the "name" field of the click manifest
33 applicationName: "com.ubuntu.developer.majster-pl.utorch"33 applicationName: "com.ubuntu.developer.majster-pl.utorch"
3434
35 // Application colors35 backgroundColor: UbuntuColors.coolGrey
36 headerColor: "#5c5c5c"
37 backgroundColor: "#292929"
38 footerColor: "#000000"
3936
40 width: units.gu(50)37 width: units.gu(50)
41 height: units.gu(75)38 height: units.gu(75)
@@ -52,44 +49,14 @@
52 Component.onCompleted: {49 Component.onCompleted: {
53 push(mainPage)50 push(mainPage)
54 }51 }
55 }52
5653 MainPage {
57 MainPage {54 id: mainPage
58 id: mainPage55 }
59 objectName: "uTorch"
60 visible: false
61
62 head.actions: [
63 Action {
64 text: i18n.tr("About")
65 iconName: "info"
66
67 onTriggered: {
68 pageStack.push(Qt.resolvedUrl("UI/AboutPage.qml"))
69 }
70 }
71 ]
72 }56 }
7357
74 Camera {58 Camera {
75 id: camera59 id: camera
76 flash.mode: mainPage.torchOn ? Camera.FlashVideoLight : Camera.FlashOff60 flash.mode: mainPage.torchOn ? Camera.FlashVideoLight : Camera.FlashOff
77 }61 }
78
79 states: [
80 State {
81 name: "on"; when: mainPage.torchOn
82 PropertyChanges { target: mainView; headerColor: "#fff690" }
83// PropertyChanges { target: tabStack; header.__styleInstance.textColor : "#000000" }
84 }
85 ]
86 transitions: [
87 Transition {
88 ColorAnimation { property: "headerColor"; duration: 250 }
89// ColorAnimation { property: "textColor"; duration: 250 }
90 }
91 ]
92
93
94
95}62}

Subscribers

People subscribed via source and target branches