Merge lp:~nik90/ubuntu-clock-app/dynamic-positioning-part1 into lp:ubuntu-clock-app/saucy

Proposed by Nekhelesh Ramananthan
Status: Merged
Approved by: Nekhelesh Ramananthan
Approved revision: 209
Merged at revision: 200
Proposed branch: lp:~nik90/ubuntu-clock-app/dynamic-positioning-part1
Merge into: lp:ubuntu-clock-app/saucy
Diff against target: 403 lines (+79/-101)
6 files modified
clock/ClockPage.qml (+14/-8)
common/AnimationContainer.qml (+0/-50)
stopwatch/StopwatchPage.qml (+13/-7)
tests/autopilot/ubuntu_clock_app/tests/test_timer.py (+2/-2)
timer/TimerPage.qml (+50/-28)
ubuntu-clock-app.qml (+0/-6)
To merge this branch: bzr merge lp:~nik90/ubuntu-clock-app/dynamic-positioning-part1
Reviewer Review Type Date Requested Status
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Paolo Rotolo (community) Approve
Review via email: mp+186564@code.launchpad.net

Commit message

Replaces static positioning of components with Dynamic positioning to allow for different screen size variation.

Description of the change

This MP removes some of the hardcoded positioning of certain components. Static positioning of components results in components hidden or not appearing as expecting. It replaces AnimationContainer with just ordinary flickables which are supported well by the SDK.

To post a comment you must log in.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
Revision history for this message
Paolo Rotolo (paolorotolo) wrote :

Good work!

review: Approve
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) :
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'clock/ClockPage.qml'
--- clock/ClockPage.qml 2013-09-09 17:06:20 +0000
+++ clock/ClockPage.qml 2013-09-21 10:37:18 +0000
@@ -28,8 +28,6 @@
28Page {28Page {
29 id: clockPage;29 id: clockPage;
3030
31 flickable: null
32
33 // Property to hold the formatted time string to show on the screen31 // Property to hold the formatted time string to show on the screen
34 property string currentTimeFormatted32 property string currentTimeFormatted
35 property real currentTimeStamp33 property real currentTimeStamp
@@ -72,9 +70,14 @@
72 currentTimeStamp = now.getTime();70 currentTimeStamp = now.getTime();
73 } 71 }
7472
75 AnimationContainer {73 Flickable {
76 id: clockAnimationContainer74 id: clockAnimationContainer
7775
76 clip: true;
77 anchors.fill: parent
78 contentWidth: parent.width
79 contentHeight: clockFace.height + clockFace.anchors.topMargin + savedWorldClock.height + savedWorldClock.anchors.topMargin + units.gu(3)
80
78 // Label to show the current time81 // Label to show the current time
79 Rectangle {82 Rectangle {
80 id: labelContainer;83 id: labelContainer;
@@ -101,7 +104,7 @@
101 AnalogClockFace {104 AnalogClockFace {
102 id: clockFace105 id: clockFace
103106
104 anchors { top: parent.top; topMargin: units.gu(9); horizontalCenter: parent.horizontalCenter }107 anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
105108
106 onClicked: {109 onClicked: {
107 if (easterEggCircle.isReady == XmlListModel.Ready) {110 if (easterEggCircle.isReady == XmlListModel.Ready) {
@@ -138,12 +141,15 @@
138 Column {141 Column {
139 id: savedWorldClock142 id: savedWorldClock
140143
144 property int dynamicTopSpacing: clockPage.height - clockPage.header.height - clockFace.height - locationHeader.height - clockFace.anchors.topMargin - divider.height;
145
141 height: childrenRect.height;146 height: childrenRect.height;
142 anchors { left:parent.left; right:parent.right; top: clockFace.bottom; topMargin: units.gu(13)}147 anchors { left:parent.left; right:parent.right; top: clockFace.bottom; topMargin: savedWorldClock.dynamicTopSpacing }
143148
144 ListItem.ThinDivider {}149 ListItem.ThinDivider { id: divider }
145150
146 ListItem.Header {151 ListItem.Header {
152 id: locationHeader
147 Label {153 Label {
148 text: i18n.tr("Current Location")154 text: i18n.tr("Current Location")
149 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }155 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
@@ -182,8 +188,8 @@
182 id: listWorldClocks188 id: listWorldClocks
183189
184 clip: true190 clip: true
185 anchors { left: parent.left; right: parent.right }191 anchors { left: parent.left; right: parent.right }
186 height: units.gu(21)192 height: 3 * units.gu(6) + units.gu(1) // height is defined to show 3 items by default with a small margin
187 model: worldModel193 model: worldModel
188 currentIndex: -1194 currentIndex: -1
189195
190196
=== removed file 'common/AnimationContainer.qml'
--- common/AnimationContainer.qml 2013-07-25 15:02:06 +0000
+++ common/AnimationContainer.qml 1970-01-01 00:00:00 +0000
@@ -1,50 +0,0 @@
1/*
2 * Copyright (C) 2013 Canonical Ltd
3 *
4 * This program is free software: you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License version 3 as
6 * published by the Free Software Foundation.
7 *
8 * This program is distributed in the hope that it will be useful,
9 * but WITHOUT ANY WARRANTY; without even the implied warranty of
10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11 * GNU General Public License for more details.
12 *
13 * You should have received a copy of the GNU General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 *
16 * Authored by: Nekhelesh Ramananthan <krnekhelesh@gmail.com>
17 * Renato Araujo Oliveira Filho <renato.filho@canonical.com>
18 */
19
20import QtQuick 2.0
21import Ubuntu.Components 0.1
22
23Flickable {
24
25 //oldContentY: stores the value of contentY when flick movement started
26 property int oldContentY: 0
27 //direction: stores the direction (+ or -) and the difference
28 //between the old and new values of contentY
29 property int direction: contentY - oldContentY
30 //Holds the number of pixels that has to move to trigger view change
31 property int swipeTolerance: 10
32
33 clip: true
34 anchors.fill: parent
35 contentWidth: parent.width
36 contentHeight: units.gu(87)
37
38 onMovementStarted: oldContentY = contentY
39
40 onMovementEnded: {
41 if(direction > swipeTolerance)
42 contentY = contentHeight - parent.height
43 else if(direction < -swipeTolerance)
44 contentY = 0;
45 }
46
47 Behavior on contentY {
48 UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
49 }
50}
510
=== modified file 'stopwatch/StopwatchPage.qml'
--- stopwatch/StopwatchPage.qml 2013-09-03 20:06:28 +0000
+++ stopwatch/StopwatchPage.qml 2013-09-21 10:37:18 +0000
@@ -28,8 +28,6 @@
28Page {28Page {
29 id: stopwatchPage29 id: stopwatchPage
3030
31 flickable: null
32
33 property alias lapStart: laps.lapStart31 property alias lapStart: laps.lapStart
3432
35 Component.onCompleted: {33 Component.onCompleted: {
@@ -59,9 +57,14 @@
59 }57 }
6058
61 // Items within this container will move up/down depending on the state.59 // Items within this container will move up/down depending on the state.
62 AnimationContainer {60 Flickable {
63 id: stopwatchAnimationContainer61 id: stopwatchAnimationContainer
6462
63 clip: true
64 anchors.fill: parent
65 contentWidth: parent.width
66 contentHeight: analogStopwatch.height + analogStopwatch.anchors.topMargin + listLap.height + listLap.anchors.topMargin + units.gu(3)
67
65 // Label to show the current time68 // Label to show the current time
66 Item {69 Item {
67 id: labelContainer;70 id: labelContainer;
@@ -89,7 +92,7 @@
89 id: analogStopwatch92 id: analogStopwatch
90 objectName: "buttonStopwatch"93 objectName: "buttonStopwatch"
9194
92 anchors { top: parent.top; topMargin: units.gu(9); horizontalCenter: parent.horizontalCenter }95 anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
9396
94 MouseArea {97 MouseArea {
95 anchors.fill: analogStopwatch.innerCircle;98 anchors.fill: analogStopwatch.innerCircle;
@@ -153,12 +156,15 @@
153 Column {156 Column {
154 id: listLap157 id: listLap
155158
159 property int dynamicTopSpacing: stopwatchPage.height - stopwatchPage.header.height - analogStopwatch.height - locationHeader.height - analogStopwatch.anchors.topMargin - divider.height;
160
156 height: childrenRect.height161 height: childrenRect.height
157 anchors { left: parent.left; right: parent.right; top: analogStopwatch.bottom; topMargin: units.gu(13) }162 anchors { left: parent.left; right: parent.right; top: analogStopwatch.bottom; topMargin: listLap.dynamicTopSpacing }
158163
159 ListItem.ThinDivider {}164 ListItem.ThinDivider { id: divider}
160165
161 ListItem.Header {166 ListItem.Header {
167 id: locationHeader
162 Label {168 Label {
163 text: i18n.tr("Laps")169 text: i18n.tr("Laps")
164 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }170 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
@@ -197,7 +203,7 @@
197203
198 clip: true204 clip: true
199 anchors { left: parent.left; right: parent.right; }205 anchors { left: parent.left; right: parent.right; }
200 height: units.gu(21)206 height: 3 * units.gu(6) + units.gu(1)
201 model: laps207 model: laps
202208
203 delegate: ListItem.Standard {209 delegate: ListItem.Standard {
204210
=== modified file 'tests/autopilot/ubuntu_clock_app/tests/test_timer.py'
--- tests/autopilot/ubuntu_clock_app/tests/test_timer.py 2013-09-12 17:48:47 +0000
+++ tests/autopilot/ubuntu_clock_app/tests/test_timer.py 2013-09-21 10:37:18 +0000
@@ -50,7 +50,7 @@
5050
51 self.pointing_device.drag(tx, ty, tx, ty - h / 3)51 self.pointing_device.drag(tx, ty, tx, ty - h / 3)
52 self.assertThat(52 self.assertThat(
53 timer_page.select_single("AnimationContainer").moving,53 timer_page.select_single("QQuickFlickable", objectName="AnimationContainer").moving,
54 Eventually(Equals(False)))54 Eventually(Equals(False)))
5555
56 def drag_page_down_to_previous_state(self):56 def drag_page_down_to_previous_state(self):
@@ -65,7 +65,7 @@
6565
66 self.pointing_device.drag(tx, ty, tx, ty + h / 3)66 self.pointing_device.drag(tx, ty, tx, ty + h / 3)
67 self.assertThat(67 self.assertThat(
68 timer_page.select_single("AnimationContainer").moving,68 timer_page.select_single("QQuickFlickable", objectName="AnimationContainer").moving,
69 Eventually(Equals(False)))69 Eventually(Equals(False)))
7070
71 def select_name_preset_label(self):71 def select_name_preset_label(self):
7272
=== modified file 'timer/TimerPage.qml'
--- timer/TimerPage.qml 2013-09-14 10:24:04 +0000
+++ timer/TimerPage.qml 2013-09-21 10:37:18 +0000
@@ -27,27 +27,25 @@
27Page {27Page {
28 id: timerPage28 id: timerPage
2929
30 flickable: null
31
32 property alias minutes: analogTimer.minutes;30 property alias minutes: analogTimer.minutes;
33 property alias seconds: analogTimer.seconds;31 property alias seconds: analogTimer.seconds;
34 property alias totalTime: analogTimer.totalTime;32 property alias totalTime: analogTimer.totalTime;
35 property alias timerOn: analogTimer.timerOn;33 property alias timerOn: analogTimer.timerOn;
36 property string tempNamePreset34 property string tempNamePreset
37 property int pagePostion35 property real tempPosition
3836
39 actions:37 actions:
40 Action {38 Action {
41 id: addTimerAction39 id: addTimerAction
42 iconSource: Qt.resolvedUrl("../images/add_icon.png")40 iconSource: Qt.resolvedUrl("../images/add_icon.png")
43 text: i18n.tr("Add Timer")41 text: i18n.tr("Add Timer")
44 description: i18n.tr("Add a new timer")42 description: i18n.tr("Add a new timer")
45 keywords: i18n.tr("Add;Timer;Eggtimer;Preset;Ticker")43 keywords: i18n.tr("Add;Timer;Eggtimer;Preset;Ticker")
46 onTriggered: {44 onTriggered: {
47 reset()45 reset()
48 state = "addPreset"46 state = "addPreset"
49 }
50 }47 }
48 }
5149
52 states: [50 states: [
53 State {51 State {
@@ -67,7 +65,6 @@
67 PropertyChanges { target: cancelPresetToolbarButton; visible: true }65 PropertyChanges { target: cancelPresetToolbarButton; visible: true }
68 PropertyChanges { target: toolbarTimer; locked: true }66 PropertyChanges { target: toolbarTimer; locked: true }
69 PropertyChanges { target: toolbarTimer; opened: true }67 PropertyChanges { target: toolbarTimer; opened: true }
70 PropertyChanges { target: timerAnimationContainer; contentY: 0 }
71 }68 }
72 ]69 ]
7370
@@ -94,18 +91,38 @@
9491
95 seconds = time % 6092 seconds = time % 60
96 time = Math.floor(time / 60)93 time = Math.floor(time / 60)
97 minutes = time % 60 94 minutes = time % 60
9895
99 return Utils.zeroleft(minutes, 2) + ":" + Utils.zeroleft(seconds, 2);96 return Utils.zeroleft(minutes, 2) + ":" + Utils.zeroleft(seconds, 2);
100 }97 }
10198
102 Component.onCompleted: Utils.log("TimerPage loaded");99 Component.onCompleted: {
100 Utils.log("TimerPage loaded");
101 tempPosition = timerAnimationContainer.contentY
102 }
103103
104 AnimationContainer {104 Flickable {
105 id: timerAnimationContainer105 id: timerAnimationContainer
106106 objectName: "AnimationContainer"
107 //contentY: presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;107
108 contentY: pagePostion;108 clip: true;
109 anchors.fill: parent
110 interactive: { // Flickable interaction disabled if there are no presets and not in add timer page.
111 if (presetModel.count == 0) {
112 if (timerPage.state == "addPreset")
113 return true
114 else
115 return false
116 }
117 else
118 return true
119 }
120 contentWidth: parent.width
121 contentHeight: analogTimer.height + analogTimer.anchors.topMargin + listPreset.height + listPreset.anchors.topMargin + units.gu(2)
122
123 Behavior on contentY {
124 UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
125 }
109126
110 // Label to show the current time127 // Label to show the current time
111 Item {128 Item {
@@ -149,7 +166,7 @@
149 fillRectangle: parent166 fillRectangle: parent
150 }167 }
151168
152 anchors { top: parent.top; topMargin: presetModel.count != 0 ? units.gu(9) : units.gu(12); horizontalCenter: parent.horizontalCenter }169 anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
153 inProgressFlag: (timerOn == true || analogTimer.state == "DONE") ? true : false;170 inProgressFlag: (timerOn == true || analogTimer.state == "DONE") ? true : false;
154 onSecondsChanged: if (timerOn == true) seconds_timer.restart()171 onSecondsChanged: if (timerOn == true) seconds_timer.restart()
155 else labelTimer.text = intervalToString(minutes, seconds);172 else labelTimer.text = intervalToString(minutes, seconds);
@@ -258,7 +275,8 @@
258 onClicked: {275 onClicked: {
259 reset();276 reset();
260 if (timerPage.state != "addPreset")277 if (timerPage.state != "addPreset")
261 timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;278 timerAnimationContainer.contentY = tempPosition
279
262 }280 }
263 }281 }
264282
@@ -266,13 +284,16 @@
266 Column {284 Column {
267 id: listPreset285 id: listPreset
268286
287 property int dynamicTopSpacing: timerPage.height - timerPage.header.height - analogTimer.height - locationHeader.height - analogTimer.anchors.topMargin - divider.height;
288
269 height: childrenRect.height289 height: childrenRect.height
270 visible: presetModel.count != 0 ? true : false290 visible: presetModel.count != 0 ? true : false
271 anchors { left: parent.left; right: parent.right; top: analogTimer.bottom; topMargin: units.gu(13) }291 anchors { left: parent.left; right: parent.right; top: analogTimer.bottom; topMargin: listPreset.dynamicTopSpacing }
272292
273 ListItem.ThinDivider { }293 ListItem.ThinDivider { id: divider }
274294
275 ListItem.Header {295 ListItem.Header {
296 id: locationHeader
276 Label {297 Label {
277 text: i18n.tr("Presets")298 text: i18n.tr("Presets")
278 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }299 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
@@ -286,7 +307,7 @@
286307
287 clip: true308 clip: true
288 anchors { left: parent.left; right: parent.right }309 anchors { left: parent.left; right: parent.right }
289 height: units.gu(21)310 height: 5 * units.gu(6) + units.gu(1)
290 model: presetModel311 model: presetModel
291 currentIndex: -1312 currentIndex: -1
292313
@@ -321,14 +342,15 @@
321 // TODO: Implement different based actions based on the swipe direction.342 // TODO: Implement different based actions based on the swipe direction.
322 onItemRemoved: {343 onItemRemoved: {
323 presetModel.removePreset(index);344 presetModel.removePreset(index);
324 timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;345 if (presetModel.count == 0)
346 timerAnimationContainer.contentY = tempPosition
325 }347 }
326348
327 onClicked: {349 onClicked: {
328 if (!timerOn) {350 if (!timerOn) {
329 analogTimer.ssToTime(seconds);351 analogTimer.ssToTime(seconds);
330 listTimerPreset.currentIndex = index352 listTimerPreset.currentIndex = index
331 timerAnimationContainer.contentY = 0353 timerAnimationContainer.contentY = tempPosition
332 namePreset.text = label;354 namePreset.text = label;
333 tempNamePreset = label;355 tempNamePreset = label;
334 }356 }
@@ -357,7 +379,7 @@
357 if (listTimerPreset.currentIndex == -1) {379 if (listTimerPreset.currentIndex == -1) {
358 reset()380 reset()
359 timerPage.state = "";381 timerPage.state = "";
360 timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;382 timerAnimationContainer.contentY = tempPosition
361 }383 }
362 toolbarTimer.opened = false;384 toolbarTimer.opened = false;
363 }385 }
@@ -379,7 +401,7 @@
379 reset()401 reset()
380 timerPage.state = "";402 timerPage.state = "";
381 toolbarTimer.opened = false;403 toolbarTimer.opened = false;
382 timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;404 timerAnimationContainer.contentY = tempPosition
383 }405 }
384 }406 }
385 }407 }
386408
=== modified file 'ubuntu-clock-app.qml'
--- ubuntu-clock-app.qml 2013-09-07 19:09:03 +0000
+++ ubuntu-clock-app.qml 2013-09-21 10:37:18 +0000
@@ -92,12 +92,6 @@
92 Tabs {92 Tabs {
93 id: rootTabs93 id: rootTabs
94 objectName: "rootTabs"94 objectName: "rootTabs"
95
96 onSelectedTabIndexChanged: {
97 if (rootTabs.selectedTabIndex == 2)
98 timerPage.pagePostion = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;
99 }
100
101 anchors.fill: parent95 anchors.fill: parent
10296
103 Tab {97 Tab {

Subscribers

People subscribed via source and target branches