Merge lp:~nik90/ubuntu-clock-app/stopwatch-animations into lp:ubuntu-clock-app/saucy

Proposed by Nekhelesh Ramananthan
Status: Merged
Approved by: Renato Araujo Oliveira Filho
Approved revision: 108
Merged at revision: 86
Proposed branch: lp:~nik90/ubuntu-clock-app/stopwatch-animations
Merge into: lp:ubuntu-clock-app/saucy
Diff against target: 476 lines (+246/-179)
3 files modified
common/AnimationContainer.qml (+104/-0)
stopwatch/StopwatchPage.qml (+142/-150)
stopwatch/StopwatchScript.js (+0/-29)
To merge this branch: bzr merge lp:~nik90/ubuntu-clock-app/stopwatch-animations
Reviewer Review Type Date Requested Status
Renato Araujo Oliveira Filho (community) Approve
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Review via email: mp+164800@code.launchpad.net

Commit message

Adds animations while switching between laplist view and the normal view by manipulating the y variable of AnalogStopwatch element.

Description of the change

This MP adds animations while switching between laplist view and the normal view. This is done by manipulating the y variable of AnalogStopwatch element.

To post a comment you must log in.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

FAILED: Continuous integration, rev:95
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~nik90/ubuntu-clock-app/stopwatch-animations/+merge/164800/+edit-commit-message

http://91.189.93.125:8080/job/ubuntu-clock-app-ci/46/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-clock-app-raring-amd64-ci/46

Click here to trigger a rebuild:
http://91.189.93.125:8080/job/ubuntu-clock-app-ci/46/rebuild

review: Needs Fixing (continuous-integration)
96. By Nekhelesh Ramananthan

fixed mouseArea z property

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

FAILED: Continuous integration, rev:96
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~nik90/ubuntu-clock-app/stopwatch-animations/+merge/164800/+edit-commit-message

http://91.189.93.125:8080/job/ubuntu-clock-app-ci/47/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-clock-app-raring-amd64-ci/47

Click here to trigger a rebuild:
http://91.189.93.125:8080/job/ubuntu-clock-app-ci/47/rebuild

review: Needs Fixing (continuous-integration)
97. By Nekhelesh Ramananthan

renamed variables and fixed small bug

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
Renato Araujo Oliveira Filho (renatofilho) wrote :

could you use relative value here:

162 + y: units.gu(5)

something like:
y: labelStopwatch.y + labelStopwatch.height

Revision history for this message
Renato Araujo Oliveira Filho (renatofilho) wrote :

the same here:

59 + PropertyChanges { target: analogStopwatch; y: units.gu(5) }

and here:

267 + PropertyChanges { target: analogStopwatch; y: -units.gu(37) }

in the last one since the hole listLap must be visible you can use:

y: -listLap.heigh

Revision history for this message
Renato Araujo Oliveira Filho (renatofilho) wrote :

please use anchors for width here:

328 + width: parent.width; height: units.gu(41)
329 + anchors { top: rowButtonStopwatch.bottom; topMargin: units.gu(5) }

and for height try:

height: childrenRect.height

98. By Nekhelesh Ramananthan

removed randoming positioning

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
99. By Nekhelesh Ramananthan

replace width use with anchors in listlap column element

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
Renato Araujo Oliveira Filho (renatofilho) wrote :

this is not necessary.
331 + z: laps.count > 4 ? swipeArea.z + 1 : swipeArea.z - 1;

Revision history for this message
Renato Araujo Oliveira Filho (renatofilho) wrote :

this is not necessay:
177 + z: swipeArea.z + 1

100. By Nekhelesh Ramananthan

small fixes

101. By Nekhelesh Ramananthan

removed unnecessary z property assigns

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
102. By Nekhelesh Ramananthan

First implementation of drag support

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
Renato Araujo Oliveira Filho (renatofilho) wrote :
103. By Nekhelesh Ramananthan

Made the swipe animation more smoother.

Revision history for this message
Nekhelesh Ramananthan (nik90) wrote :

> this is not necessary.
> 331 + z: laps.count > 4 ? swipeArea.z + 1 : swipeArea.z - 1;

We might need something similar for the listViewlap. At the moment, you will notice that if you drag in the area below the listview header "Recorded laps" it is not possible to switch view because the mouse focus is grabbed by the listView. While we want this to be true when laps.count < 4 (max visible on a page), other times it should be possible to drag this area to reveal the stopwatch page.

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
Renato Araujo Oliveira Filho (renatofilho) wrote :

The SDK guys told me to use:

UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }

instead of:

186 + NumberAnimation { easing.type: Easing.InQuad; duration: 250}

104. By Nekhelesh Ramananthan

Changed numberAnimation to UbuntuNumberAnimation to maintain consistency with other apps

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
105. By Nekhelesh Ramananthan

moved stopwatch animation into a separate component

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
106. By Nekhelesh Ramananthan

moved more code to the new component

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :
review: Approve (continuous-integration)
107. By Nekhelesh Ramananthan

used default property as suggested by renato

108. By Nekhelesh Ramananthan

removed unnecessary line of code

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
Renato Araujo Oliveira Filho (renatofilho) wrote :

Looks great, thanks.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added file 'common/AnimationContainer.qml'
2--- common/AnimationContainer.qml 1970-01-01 00:00:00 +0000
3+++ common/AnimationContainer.qml 2013-05-21 23:05:33 +0000
4@@ -0,0 +1,104 @@
5+/*
6+ * Copyright (C) 2013 Canonical Ltd
7+ *
8+ * This program is free software: you can redistribute it and/or modify
9+ * it under the terms of the GNU General Public License version 3 as
10+ * published by the Free Software Foundation.
11+ *
12+ * This program is distributed in the hope that it will be useful,
13+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
14+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15+ * GNU General Public License for more details.
16+ *
17+ * You should have received a copy of the GNU General Public License
18+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
19+ *
20+ * Authored by: Nekhelesh Ramananthan <krnekhelesh@gmail.com>
21+ * Renato Araujo Oliveira Filho <renato.filho@canonical.com>
22+ */
23+
24+import QtQuick 2.0
25+import Ubuntu.Components 0.1
26+
27+Item {
28+ id: animationContainer
29+
30+ default property alias contents: container.children
31+
32+ // Properties to set/get the state and yPosition of elements
33+ readonly property int swipeTolerance: 50;
34+ property real initYPos;
35+ property real finalYPos;
36+
37+ clip: true;
38+
39+ function swipeView() {
40+ container.state = (container.state == "DEFAULT") ? "SCROLLED" : "DEFAULT"
41+ }
42+
43+ function changeView(initMousePos, finalMousePos) {
44+ if (finalMousePos > initMousePos + swipeTolerance && container.state == "SCROLLED") {
45+ container.state = "DEFAULT"
46+ }
47+ else if (finalMousePos < initMousePos - swipeTolerance && container.state == "DEFAULT"){
48+ container.state = "SCROLLED"
49+ }
50+ else {
51+ container.y = container.state == "DEFAULT" ? initYPos : finalYPos
52+ }
53+ }
54+
55+ Item {
56+ id: container
57+
58+ anchors { left: parent.left; right: parent.right; }
59+ height: childrenRect.height
60+ y: animationContainer.initYPos
61+ state: "DEFAULT"
62+
63+ Behavior on y {
64+ id: containerYBehavior
65+ UbuntuNumberAnimation { duration: UbuntuAnimation.SlowDuration }
66+ }
67+
68+ states:[
69+ State {
70+ name: "DEFAULT"
71+ PropertyChanges { target: container; y: initYPos }
72+ },
73+ State {
74+ name: "SCROLLED"
75+ PropertyChanges { target: container; y: finalYPos }
76+ }
77+ ]
78+ }
79+
80+ MouseArea {
81+ id: swipeArea
82+
83+ property int clickedMousePosition
84+
85+ z: -1
86+ anchors.fill: parent
87+
88+ onPressed: {
89+ containerYBehavior.enabled = false;
90+ clickedMousePosition = mouseY;
91+ }
92+
93+ onReleased: {
94+ containerYBehavior.enabled = true;
95+ changeView(clickedMousePosition, mouseY)
96+ }
97+
98+ onPositionChanged: {
99+ if (mouseY > clickedMousePosition && container.state == "SCROLLED") {
100+ container.y = (mouseY - clickedMousePosition) + finalYPos
101+ }
102+ else if (mouseY < clickedMousePosition && container.state == "DEFAULT") {
103+ container.y = initYPos - (clickedMousePosition - mouseY)
104+ }
105+ }
106+ }
107+}
108+
109
110=== modified file 'stopwatch/StopwatchPage.qml'
111--- stopwatch/StopwatchPage.qml 2013-05-18 10:31:12 +0000
112+++ stopwatch/StopwatchPage.qml 2013-05-21 23:05:33 +0000
113@@ -14,22 +14,24 @@
114 * along with this program. If not, see <http://www.gnu.org/licenses/>.
115 *
116 * Authored by: Alessandro Pozzi <signor.hyde@gmail.com>
117+ * Nekhelesh Ramananthan <krnekhelesh@gmail.com>
118+ * Renato Araujo Oliveira Filho <renato.filho@canonical.com>
119 */
120
121 import QtQuick 2.0
122 import Ubuntu.Components 0.1
123 import Ubuntu.Components.ListItems 0.1 as ListItem
124-import "StopwatchScript.js" as SWScript
125 import "../common/Constants.js" as Constants
126 import "../common/ClockUtils.js" as Utils
127+import "../common"
128
129 Page {
130 id: stopwatchPage
131
132- property alias lapStart: laps.lapStart
133+ property alias lapStart: laps.lapStart
134
135 Component.onCompleted: {
136- SWScript.log("StopwatchPage loaded");
137+ Utils.log("StopwatchPage loaded");
138 }
139
140 anchors.margins: units.gu(2)
141@@ -44,164 +46,154 @@
142 "label": Utils.intervalToString(analogStopwatch.decimalsTotal - lapStart)})
143 lapStart = analogStopwatch.decimalsTotal
144 }
145- }
146+ }
147
148- // Label displaying the current stopwatch time.
149 Label {
150 id: labelStopwatch
151
152- anchors { left: parent.left; top: parent.top; topMargin: units.gu(3); right: parent.right }
153+ anchors { left: parent.left; top: parent.top; topMargin: units.gu(5); right: parent.right }
154 height: units.gu(6)
155 horizontalAlignment: Text.AlignHCenter
156 verticalAlignment: Text.AlignVCenter
157+
158 fontSize: "x-large"
159-
160 text: Utils.intervalToString(analogStopwatch.decimalsTotal)
161 }
162
163- // Component which draws the analog stopwatch face, controls the timer and calculates the time.
164- AnalogStopwatch {
165- id: analogStopwatch
166-
167- anchors { top: labelStopwatch.bottom; topMargin: units.gu(6); horizontalCenter: parent.horizontalCenter }
168- }
169-
170- // Bottom row to display Start, Reset buttons and lap information.
171- Row {
172- id: rowButtonStopwatch
173-
174- spacing: units.gu(2)
175- anchors { top: analogStopwatch.bottom; topMargin: units.gu(6); horizontalCenter: parent.horizontalCenter }
176- height: childrenRect.height
177-
178- Button {
179- id: buttonStopwatch
180-
181- width: units.gu(12); height: units.gu(5)
182- color: Constants.green
183- text: i18n.tr("Start")
184-
185- onClicked: {
186- if(analogStopwatch.timerStatus == false) {
187- analogStopwatch.start()
188- text = i18n.tr("Stop");
189- color = Constants.ubuntuOrange;
190- buttonReset.state = "LAP";
191- } else {
192- analogStopwatch.stop()
193- text = i18n.tr("Start");
194- color = Constants.green;
195- buttonReset.state = "RESET";
196- }
197- }
198- }
199-
200- AnimatedLabel {
201- id: lapCount
202-
203- anchors.verticalCenter: buttonStopwatch.verticalCenter
204- color: Constants.brightWhite
205- textColor: Constants.ubuntuOrange
206- text: Utils.numberToLocaleString(laps.count)
207-
208- onClicked: {
209- if (rowButtonStopwatch.state == "LAPSLIST") {
210- rowButtonStopwatch.state = "STOPWATCH"
211- SWScript.showLapsListPage(false);
212- SWScript.showStopwatchPage(true);
213- } else {
214- rowButtonStopwatch.state = "LAPSLIST"
215- SWScript.showStopwatchPage(false);
216- SWScript.showLapsListPage(true);
217- }
218- }
219- }
220-
221- Button {
222- id: buttonReset
223-
224- width: units.gu(12); height: units.gu(5)
225- color: Constants.normalGrey
226- text: i18n.tr("Reset")
227-
228- onClicked: {
229- if(buttonReset.state == "RESET") {
230- analogStopwatch.reset()
231- lapStart = 0;
232- laps.clear();
233- } else if (buttonReset.state == "LAP") {
234- laps.push();
235- analogStopwatch.blipLocation = analogStopwatch.seconds
236- analogStopwatch.blipVisible = true
237- }
238- }
239-
240- states: [
241- State {
242- name: "RESET"
243- PropertyChanges { target: buttonReset; text: i18n.tr("Reset") }
244- PropertyChanges { target: buttonReset; color: Constants.normalGrey }
245- },
246-
247- State {
248- name: "LAP"
249- PropertyChanges { target: buttonReset; text: i18n.tr("Lap") }
250- PropertyChanges { target: buttonReset; color: Constants.brightWhite }
251- }
252- ]
253- }
254- states:[
255- State {
256- name: "STOPWATCH"
257- AnchorChanges { target: rowButtonStopwatch; anchors.bottom: stopwatchPage.bottom; anchors.top: undefined }
258- },
259-
260- State {
261- name: "LAPSLIST"
262- AnchorChanges { target: rowButtonStopwatch; anchors.top: labelStopwatch.bottom; anchors.bottom: undefined }
263- }
264- ]
265- }
266-
267- // ListView to display the current lap and recorded lap information.
268- Column {
269- id: listLap
270-
271- visible: false
272- anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.bottom; topMargin: units.gu(26); bottomMargin: units.gu(3) }
273-
274- ListItem.Divider { }
275-
276- ListItem.Header {
277- id: lapHeader
278-
279- text: i18n.tr("Laps")
280- }
281-
282- ListItem.SingleValue {
283- id: currentLapItem
284-
285- text: i18n.tr("Current")
286- value: Utils.intervalToString(analogStopwatch.decimalsTotal - laps.lapStart)
287- }
288-
289- ListItem.Header {
290- id: currentLapHeader
291-
292- text: i18n.tr("Recorded laps")
293- }
294-
295- ListView {
296- id: listViewLap
297-
298- clip: true
299- anchors { left: parent.left; right: parent.right; }
300- height: parent.height - units.gu(12)
301- model: laps
302-
303- delegate: ListItem.SingleValue {
304- text: Utils.numberToLocaleString(laps.count - index)
305- value: model.label
306+ // Items within this container will move up/down depending on the state.
307+ AnimationContainer {
308+ id: stopwatchAnimationContainer
309+
310+ // FIXME: The y is given a arbitary value which needs to be fixed by ensuring that the outerglow is not drawn outside the clock face area.
311+ initYPos: units.gu(5);
312+ finalYPos: -listLap.height;
313+
314+ anchors { left: parent.left; top: labelStopwatch.bottom; right: parent.right; bottom: parent.bottom }
315+
316+ // Component which draws the analog stopwatch face, controls the timer and calculates the time.
317+ AnalogStopwatch {
318+ id: analogStopwatch
319+
320+ anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
321+ }
322+
323+ // Bottom row to display Start, Reset buttons and lap information.
324+ Row {
325+ id: rowButtonStopwatch
326+
327+ spacing: units.gu(2)
328+ anchors { top: analogStopwatch.bottom; topMargin: units.gu(6); horizontalCenter: parent.horizontalCenter }
329+ height: childrenRect.height
330+
331+ Button {
332+ id: buttonStopwatch
333+
334+ width: units.gu(12); height: units.gu(5)
335+
336+ color: Constants.green
337+ text: i18n.tr("Start")
338+
339+ onClicked: {
340+ if(analogStopwatch.timerStatus == false) {
341+ analogStopwatch.start()
342+ text = i18n.tr("Stop");
343+ color = Constants.ubuntuOrange;
344+ buttonReset.state = "LAP";
345+ } else {
346+ analogStopwatch.stop()
347+ text = i18n.tr("Start");
348+ color = Constants.green;
349+ buttonReset.state = "RESET";
350+ }
351+ }
352+ }
353+
354+ AnimatedLabel {
355+ id: lapCount
356+
357+ anchors.verticalCenter: buttonStopwatch.verticalCenter
358+ color: Constants.brightWhite
359+ textColor: Constants.ubuntuOrange
360+ text: Utils.numberToLocaleString(laps.count)
361+
362+ onClicked: stopwatchAnimationContainer.swipeView()
363+ }
364+
365+ Button {
366+ id: buttonReset
367+
368+ width: units.gu(12); height: units.gu(5)
369+ color: Constants.normalGrey
370+ text: i18n.tr("Reset")
371+
372+ onClicked: {
373+ if(buttonReset.state == "RESET") {
374+ analogStopwatch.reset()
375+ lapStart = 0;
376+ laps.clear();
377+ } else if (buttonReset.state == "LAP") {
378+ laps.push();
379+ analogStopwatch.blipLocation = analogStopwatch.seconds
380+ analogStopwatch.blipVisible = true
381+ }
382+ }
383+
384+ states: [
385+ State {
386+ name: "RESET"
387+ PropertyChanges { target: buttonReset; text: i18n.tr("Reset") }
388+ PropertyChanges { target: buttonReset; color: Constants.normalGrey }
389+ },
390+
391+ State {
392+ name: "LAP"
393+ PropertyChanges { target: buttonReset; text: i18n.tr("Lap") }
394+ PropertyChanges { target: buttonReset; color: Constants.brightWhite }
395+ }
396+ ]
397+ }
398+ }
399+
400+ // ListView to display the current lap and recorded lap information.
401+ Column {
402+ id: listLap
403+
404+ height: childrenRect.height
405+ anchors { left: parent.left; right: parent.right; top: rowButtonStopwatch.bottom; topMargin: units.gu(5) }
406+
407+ ListItem.Divider { }
408+
409+ ListItem.Header {
410+ id: lapHeader
411+
412+ text: i18n.tr("Laps")
413+ }
414+
415+ ListItem.SingleValue {
416+ id: currentLapItem
417+
418+ text: i18n.tr("Current")
419+ value: Utils.intervalToString(analogStopwatch.decimalsTotal - laps.lapStart)
420+ }
421+
422+ ListItem.Header {
423+ id: currentLapHeader
424+
425+ text: i18n.tr("Recorded laps")
426+ }
427+
428+ ListView {
429+ id: listViewLap
430+
431+ clip: true
432+ anchors { left: parent.left; right: parent.right; }
433+ height: units.gu(23)
434+ model: laps
435+
436+ delegate: ListItem.SingleValue {
437+ text: Utils.numberToLocaleString(laps.count - index)
438+ value: model.label
439+ }
440 }
441 }
442 }
443
444=== removed file 'stopwatch/StopwatchScript.js'
445--- stopwatch/StopwatchScript.js 2013-05-08 20:12:25 +0000
446+++ stopwatch/StopwatchScript.js 1970-01-01 00:00:00 +0000
447@@ -1,29 +0,0 @@
448-/*
449- * Copyright (C) 2013 Canonical Ltd
450- *
451- * This program is free software: you can redistribute it and/or modify
452- * it under the terms of the GNU General Public License version 3 as
453- * published by the Free Software Foundation.
454- *
455- * This program is distributed in the hope that it will be useful,
456- * but WITHOUT ANY WARRANTY; without even the implied warranty of
457- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
458- * GNU General Public License for more details.
459- *
460- * You should have received a copy of the GNU General Public License
461- * along with this program. If not, see <http://www.gnu.org/licenses/>.
462- *
463- * Authored by: Alessandro Pozzi <signor.hyde@gmail.com>
464- */
465-
466-Qt.include("../common/ClockUtils.js")
467-
468-// Show/Hide Stopwatch Page
469-function showStopwatchPage(mode) {
470- analogStopwatch.visible = mode;
471-}
472-
473-// Show/Hide Laps List Page
474-function showLapsListPage(mode) {
475- listLap.visible = mode;
476-}

Subscribers

People subscribed via source and target branches