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
1=== modified file 'clock/ClockPage.qml'
2--- clock/ClockPage.qml 2013-09-09 17:06:20 +0000
3+++ clock/ClockPage.qml 2013-09-21 10:37:18 +0000
4@@ -28,8 +28,6 @@
5 Page {
6 id: clockPage;
7
8- flickable: null
9-
10 // Property to hold the formatted time string to show on the screen
11 property string currentTimeFormatted
12 property real currentTimeStamp
13@@ -72,9 +70,14 @@
14 currentTimeStamp = now.getTime();
15 }
16
17- AnimationContainer {
18+ Flickable {
19 id: clockAnimationContainer
20
21+ clip: true;
22+ anchors.fill: parent
23+ contentWidth: parent.width
24+ contentHeight: clockFace.height + clockFace.anchors.topMargin + savedWorldClock.height + savedWorldClock.anchors.topMargin + units.gu(3)
25+
26 // Label to show the current time
27 Rectangle {
28 id: labelContainer;
29@@ -101,7 +104,7 @@
30 AnalogClockFace {
31 id: clockFace
32
33- anchors { top: parent.top; topMargin: units.gu(9); horizontalCenter: parent.horizontalCenter }
34+ anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
35
36 onClicked: {
37 if (easterEggCircle.isReady == XmlListModel.Ready) {
38@@ -138,12 +141,15 @@
39 Column {
40 id: savedWorldClock
41
42+ property int dynamicTopSpacing: clockPage.height - clockPage.header.height - clockFace.height - locationHeader.height - clockFace.anchors.topMargin - divider.height;
43+
44 height: childrenRect.height;
45- anchors { left:parent.left; right:parent.right; top: clockFace.bottom; topMargin: units.gu(13)}
46+ anchors { left:parent.left; right:parent.right; top: clockFace.bottom; topMargin: savedWorldClock.dynamicTopSpacing }
47
48- ListItem.ThinDivider {}
49+ ListItem.ThinDivider { id: divider }
50
51 ListItem.Header {
52+ id: locationHeader
53 Label {
54 text: i18n.tr("Current Location")
55 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
56@@ -182,8 +188,8 @@
57 id: listWorldClocks
58
59 clip: true
60- anchors { left: parent.left; right: parent.right }
61- height: units.gu(21)
62+ anchors { left: parent.left; right: parent.right }
63+ height: 3 * units.gu(6) + units.gu(1) // height is defined to show 3 items by default with a small margin
64 model: worldModel
65 currentIndex: -1
66
67
68=== removed file 'common/AnimationContainer.qml'
69--- common/AnimationContainer.qml 2013-07-25 15:02:06 +0000
70+++ common/AnimationContainer.qml 1970-01-01 00:00:00 +0000
71@@ -1,50 +0,0 @@
72-/*
73- * Copyright (C) 2013 Canonical Ltd
74- *
75- * This program is free software: you can redistribute it and/or modify
76- * it under the terms of the GNU General Public License version 3 as
77- * published by the Free Software Foundation.
78- *
79- * This program is distributed in the hope that it will be useful,
80- * but WITHOUT ANY WARRANTY; without even the implied warranty of
81- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
82- * GNU General Public License for more details.
83- *
84- * You should have received a copy of the GNU General Public License
85- * along with this program. If not, see <http://www.gnu.org/licenses/>.
86- *
87- * Authored by: Nekhelesh Ramananthan <krnekhelesh@gmail.com>
88- * Renato Araujo Oliveira Filho <renato.filho@canonical.com>
89- */
90-
91-import QtQuick 2.0
92-import Ubuntu.Components 0.1
93-
94-Flickable {
95-
96- //oldContentY: stores the value of contentY when flick movement started
97- property int oldContentY: 0
98- //direction: stores the direction (+ or -) and the difference
99- //between the old and new values of contentY
100- property int direction: contentY - oldContentY
101- //Holds the number of pixels that has to move to trigger view change
102- property int swipeTolerance: 10
103-
104- clip: true
105- anchors.fill: parent
106- contentWidth: parent.width
107- contentHeight: units.gu(87)
108-
109- onMovementStarted: oldContentY = contentY
110-
111- onMovementEnded: {
112- if(direction > swipeTolerance)
113- contentY = contentHeight - parent.height
114- else if(direction < -swipeTolerance)
115- contentY = 0;
116- }
117-
118- Behavior on contentY {
119- UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
120- }
121-}
122
123=== modified file 'stopwatch/StopwatchPage.qml'
124--- stopwatch/StopwatchPage.qml 2013-09-03 20:06:28 +0000
125+++ stopwatch/StopwatchPage.qml 2013-09-21 10:37:18 +0000
126@@ -28,8 +28,6 @@
127 Page {
128 id: stopwatchPage
129
130- flickable: null
131-
132 property alias lapStart: laps.lapStart
133
134 Component.onCompleted: {
135@@ -59,9 +57,14 @@
136 }
137
138 // Items within this container will move up/down depending on the state.
139- AnimationContainer {
140+ Flickable {
141 id: stopwatchAnimationContainer
142
143+ clip: true
144+ anchors.fill: parent
145+ contentWidth: parent.width
146+ contentHeight: analogStopwatch.height + analogStopwatch.anchors.topMargin + listLap.height + listLap.anchors.topMargin + units.gu(3)
147+
148 // Label to show the current time
149 Item {
150 id: labelContainer;
151@@ -89,7 +92,7 @@
152 id: analogStopwatch
153 objectName: "buttonStopwatch"
154
155- anchors { top: parent.top; topMargin: units.gu(9); horizontalCenter: parent.horizontalCenter }
156+ anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
157
158 MouseArea {
159 anchors.fill: analogStopwatch.innerCircle;
160@@ -153,12 +156,15 @@
161 Column {
162 id: listLap
163
164+ property int dynamicTopSpacing: stopwatchPage.height - stopwatchPage.header.height - analogStopwatch.height - locationHeader.height - analogStopwatch.anchors.topMargin - divider.height;
165+
166 height: childrenRect.height
167- anchors { left: parent.left; right: parent.right; top: analogStopwatch.bottom; topMargin: units.gu(13) }
168+ anchors { left: parent.left; right: parent.right; top: analogStopwatch.bottom; topMargin: listLap.dynamicTopSpacing }
169
170- ListItem.ThinDivider {}
171+ ListItem.ThinDivider { id: divider}
172
173 ListItem.Header {
174+ id: locationHeader
175 Label {
176 text: i18n.tr("Laps")
177 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
178@@ -197,7 +203,7 @@
179
180 clip: true
181 anchors { left: parent.left; right: parent.right; }
182- height: units.gu(21)
183+ height: 3 * units.gu(6) + units.gu(1)
184 model: laps
185
186 delegate: ListItem.Standard {
187
188=== modified file 'tests/autopilot/ubuntu_clock_app/tests/test_timer.py'
189--- tests/autopilot/ubuntu_clock_app/tests/test_timer.py 2013-09-12 17:48:47 +0000
190+++ tests/autopilot/ubuntu_clock_app/tests/test_timer.py 2013-09-21 10:37:18 +0000
191@@ -50,7 +50,7 @@
192
193 self.pointing_device.drag(tx, ty, tx, ty - h / 3)
194 self.assertThat(
195- timer_page.select_single("AnimationContainer").moving,
196+ timer_page.select_single("QQuickFlickable", objectName="AnimationContainer").moving,
197 Eventually(Equals(False)))
198
199 def drag_page_down_to_previous_state(self):
200@@ -65,7 +65,7 @@
201
202 self.pointing_device.drag(tx, ty, tx, ty + h / 3)
203 self.assertThat(
204- timer_page.select_single("AnimationContainer").moving,
205+ timer_page.select_single("QQuickFlickable", objectName="AnimationContainer").moving,
206 Eventually(Equals(False)))
207
208 def select_name_preset_label(self):
209
210=== modified file 'timer/TimerPage.qml'
211--- timer/TimerPage.qml 2013-09-14 10:24:04 +0000
212+++ timer/TimerPage.qml 2013-09-21 10:37:18 +0000
213@@ -27,27 +27,25 @@
214 Page {
215 id: timerPage
216
217- flickable: null
218-
219 property alias minutes: analogTimer.minutes;
220 property alias seconds: analogTimer.seconds;
221 property alias totalTime: analogTimer.totalTime;
222 property alias timerOn: analogTimer.timerOn;
223 property string tempNamePreset
224- property int pagePostion
225+ property real tempPosition
226
227 actions:
228 Action {
229- id: addTimerAction
230- iconSource: Qt.resolvedUrl("../images/add_icon.png")
231- text: i18n.tr("Add Timer")
232- description: i18n.tr("Add a new timer")
233- keywords: i18n.tr("Add;Timer;Eggtimer;Preset;Ticker")
234- onTriggered: {
235- reset()
236- state = "addPreset"
237- }
238+ id: addTimerAction
239+ iconSource: Qt.resolvedUrl("../images/add_icon.png")
240+ text: i18n.tr("Add Timer")
241+ description: i18n.tr("Add a new timer")
242+ keywords: i18n.tr("Add;Timer;Eggtimer;Preset;Ticker")
243+ onTriggered: {
244+ reset()
245+ state = "addPreset"
246 }
247+ }
248
249 states: [
250 State {
251@@ -67,7 +65,6 @@
252 PropertyChanges { target: cancelPresetToolbarButton; visible: true }
253 PropertyChanges { target: toolbarTimer; locked: true }
254 PropertyChanges { target: toolbarTimer; opened: true }
255- PropertyChanges { target: timerAnimationContainer; contentY: 0 }
256 }
257 ]
258
259@@ -94,18 +91,38 @@
260
261 seconds = time % 60
262 time = Math.floor(time / 60)
263- minutes = time % 60
264+ minutes = time % 60
265
266 return Utils.zeroleft(minutes, 2) + ":" + Utils.zeroleft(seconds, 2);
267 }
268
269- Component.onCompleted: Utils.log("TimerPage loaded");
270+ Component.onCompleted: {
271+ Utils.log("TimerPage loaded");
272+ tempPosition = timerAnimationContainer.contentY
273+ }
274
275- AnimationContainer {
276+ Flickable {
277 id: timerAnimationContainer
278-
279- //contentY: presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;
280- contentY: pagePostion;
281+ objectName: "AnimationContainer"
282+
283+ clip: true;
284+ anchors.fill: parent
285+ interactive: { // Flickable interaction disabled if there are no presets and not in add timer page.
286+ if (presetModel.count == 0) {
287+ if (timerPage.state == "addPreset")
288+ return true
289+ else
290+ return false
291+ }
292+ else
293+ return true
294+ }
295+ contentWidth: parent.width
296+ contentHeight: analogTimer.height + analogTimer.anchors.topMargin + listPreset.height + listPreset.anchors.topMargin + units.gu(2)
297+
298+ Behavior on contentY {
299+ UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
300+ }
301
302 // Label to show the current time
303 Item {
304@@ -149,7 +166,7 @@
305 fillRectangle: parent
306 }
307
308- anchors { top: parent.top; topMargin: presetModel.count != 0 ? units.gu(9) : units.gu(12); horizontalCenter: parent.horizontalCenter }
309+ anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
310 inProgressFlag: (timerOn == true || analogTimer.state == "DONE") ? true : false;
311 onSecondsChanged: if (timerOn == true) seconds_timer.restart()
312 else labelTimer.text = intervalToString(minutes, seconds);
313@@ -258,7 +275,8 @@
314 onClicked: {
315 reset();
316 if (timerPage.state != "addPreset")
317- timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;
318+ timerAnimationContainer.contentY = tempPosition
319+
320 }
321 }
322
323@@ -266,13 +284,16 @@
324 Column {
325 id: listPreset
326
327+ property int dynamicTopSpacing: timerPage.height - timerPage.header.height - analogTimer.height - locationHeader.height - analogTimer.anchors.topMargin - divider.height;
328+
329 height: childrenRect.height
330 visible: presetModel.count != 0 ? true : false
331- anchors { left: parent.left; right: parent.right; top: analogTimer.bottom; topMargin: units.gu(13) }
332+ anchors { left: parent.left; right: parent.right; top: analogTimer.bottom; topMargin: listPreset.dynamicTopSpacing }
333
334- ListItem.ThinDivider { }
335+ ListItem.ThinDivider { id: divider }
336
337 ListItem.Header {
338+ id: locationHeader
339 Label {
340 text: i18n.tr("Presets")
341 anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
342@@ -286,7 +307,7 @@
343
344 clip: true
345 anchors { left: parent.left; right: parent.right }
346- height: units.gu(21)
347+ height: 5 * units.gu(6) + units.gu(1)
348 model: presetModel
349 currentIndex: -1
350
351@@ -321,14 +342,15 @@
352 // TODO: Implement different based actions based on the swipe direction.
353 onItemRemoved: {
354 presetModel.removePreset(index);
355- timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;
356+ if (presetModel.count == 0)
357+ timerAnimationContainer.contentY = tempPosition
358 }
359
360 onClicked: {
361 if (!timerOn) {
362 analogTimer.ssToTime(seconds);
363 listTimerPreset.currentIndex = index
364- timerAnimationContainer.contentY = 0
365+ timerAnimationContainer.contentY = tempPosition
366 namePreset.text = label;
367 tempNamePreset = label;
368 }
369@@ -357,7 +379,7 @@
370 if (listTimerPreset.currentIndex == -1) {
371 reset()
372 timerPage.state = "";
373- timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;
374+ timerAnimationContainer.contentY = tempPosition
375 }
376 toolbarTimer.opened = false;
377 }
378@@ -379,7 +401,7 @@
379 reset()
380 timerPage.state = "";
381 toolbarTimer.opened = false;
382- timerAnimationContainer.contentY = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;
383+ timerAnimationContainer.contentY = tempPosition
384 }
385 }
386 }
387
388=== modified file 'ubuntu-clock-app.qml'
389--- ubuntu-clock-app.qml 2013-09-07 19:09:03 +0000
390+++ ubuntu-clock-app.qml 2013-09-21 10:37:18 +0000
391@@ -92,12 +92,6 @@
392 Tabs {
393 id: rootTabs
394 objectName: "rootTabs"
395-
396- onSelectedTabIndexChanged: {
397- if (rootTabs.selectedTabIndex == 2)
398- timerPage.pagePostion = presetModel.count != 0 ? units.gu(87) - timerPage.height : 0;
399- }
400-
401 anchors.fill: parent
402
403 Tab {

Subscribers

People subscribed via source and target branches