Merge lp:~nik90/ubuntu-clock-app/timer-code-refactor into lp:ubuntu-clock-app/saucy

[Nekhelesh Ramananthan]

This commits achieves the following,
- moving the Analog Timer face into a new component.
- Fixes a qml storage bug which was accessing the hours, minutes and seconds unnecessarily.
- Fixes the AnalogClockMarker repeater issue (a really small issue fixed by adding a (-) minus sign :)
- Refactors code in the Timer component.

This MP achieves the following,
- moving the Analog Timer face into a new component.
- Fixes a qml storage bug which was accessing the hours, minutes and seconds unnecessarily.
- Fixes the AnalogClockMarker repeater issue (a really small issue fixed by adding a (-) minus sign :)
- Refactors code in the Timer component.

[Nekhelesh Ramananthan (nik90)]

@Renato, Please ignore the whole noodle code mess (from line 137 to 315) in the AnalogTimer.qml file. A better logic for that code is required which will be addressed in a later MP.

This MP solely deals with,
- moving the Analog Timer face into a new component.
- Fixes a qml storage bug which was accessing the hours, minutes and seconds unnecessarily.
- Fixes the AnalogClockMarker repeater issue (a really small issue fixed by adding a (-) minus sign :)
- Refactors code in the Timer component.

[Nekhelesh Ramananthan (nik90)]

The AnalogTimer now takes the function of keeping track of time, controlling the timer and drawing the main analog timer face.

The TimerPage deals with timer presets, drawing ui for the buttons (start, stop, reset, done)

This is all very similar to the stopwatch code refactor we did.

[Renato Araujo Oliveira Filho (renatofilho)]

Why are you using a if here if you have the same code for both states?

- onItemRemoved: if (backgroundTimer.state == "SwipingRight") {
1009 + onItemRemoved: if (swipeDelete.state == "SwipingRight") {
1010 storageTimer.delTimerValue(text);
1011 TScript.populatePreset();
1012 } else {

[Renato Araujo Oliveira Filho (renatofilho)]

I would suggest to move this function to the timerpage, and rename it to something more easy to understand, like
setTime / updateTime / ...

1081 +function calculateTime ( sec ) {
1082 + var time = sec
1083 + timerPage.seconds = time % 60
1084 + time = Math.floor(time / 60)
1085 + timerPage.minutes = time % 60
1086 + timerPage.hours = Math.floor(time / 60)
1087 }

[Nekhelesh Ramananthan (nik90)]

At the moment, swiping right and left perform the same action which is to delete a saved timer preset.

However the intention was to make it such that swipe left to edit a preset and swipe right to delete a preset. However the code infrastructure to edit a preset has not been implemented.

You are right. I will remove the if loops but will include a TODO comment there to change the behaviour later.

[Renato Araujo Oliveira Filho (renatofilho)]

> I would suggest to move this function to the timerpage, and rename it to
> something more easy to understand, like
> setTime / updateTime / ...
>
> 1081 +function calculateTime ( sec ) {
> 1082 + var time = sec
> 1083 + timerPage.seconds = time % 60
> 1084 + time = Math.floor(time / 60)
> 1085 + timerPage.minutes = time % 60
> 1086 + timerPage.hours = Math.floor(time / 60)
> 1087 }

Maybe is better if you move to AnalogTimer element, since the properties on timerPage is just a alias.

[Renato Araujo Oliveira Filho (renatofilho)]

Do you think that is possible to create a separated element for the timer label?

  // Timer label hh:mm:ss
    Row {
        id: topTimerRow

Try move this to a new element and export properties that will be possible to control it from the TimerPage.

[Nekhelesh Ramananthan (nik90)]

>Maybe is better if you move to AnalogTimer element, since the properties on timerPage is just a alias.

Done. I moved it the AnalogTimer file.

> Why are you using a if here if you have the same code for both states?
> - onItemRemoved: if (backgroundTimer.state == "SwipingRight") {
> 1009 + onItemRemoved: if (swipeDelete.state == "SwipingRight") {
> 1010 storageTimer.delTimerValue(text);
> 1011 TScript.populatePreset();
> 1012 } else {

Code removed. Added a TODO to change the behavior based on the swipe direction.

> I would suggest to move this function to the timerpage, and rename it to something more easy to understand, > like setTime / updateTime / ...

Done.

> Do you think that is possible to create a separated element for the timer label?
> // Timer label hh:mm:ss
> Row {
> id: topTimerRow
> Try move this to a new element and export properties that will be possible to control it from the TimerPage.

I think this would be difficult. I tried doing it, however I noticed some issues while implementing it. For instance, the topTimerRow needs to modify the timerHand.rotation property of AnalogTimer. When I tried doing from the topTimerRow file, it did not update visually for some reason. I will give this a shot again tomorrow morning.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:85
http://91.189.93.125:8080/job/ubuntu-clock-app-ci/30/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-clock-app-quantal-amd64-ci/30
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-clock-app-raring-amd64-ci/30

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

review: Approve (continuous-integration)

[Nekhelesh Ramananthan (nik90)]

> Do you think that is possible to create a separated element for the timer label?
> // Timer label hh:mm:ss
> Row {
> id: topTimerRow
> Try move this to a new element and export properties that will be possible to control it from the TimerPage.

Done.

[Renato Araujo Oliveira Filho (renatofilho)]

this function totalTime:

1059 storageTimer.setTimerValue(namePreset.text, TScript.totalSeconds(hours, minutes, seconds));

Does not return the same value as:

does not return the same value as:

465 + property alias totalTime: analogTimer.totalTime;

[Nekhelesh Ramananthan (nik90)]

> this function totalTime:
>
> 1059 storageTimer.setTimerValue(namePreset.text,
> TScript.totalSeconds(hours, minutes, seconds));
>
> Does not return the same value as:
>
> does not return the same value as:
>
> 465 + property alias totalTime: analogTimer.totalTime;

The analogTimer.totalTime variable only hold the total time (in seconds) when the start button is pressed. So in other situations, it is necessary to calculate the total time as and when required. The reason for this is because, the timerHand manipulates the seconds, minutes and hours and not the total time. It would be a waste to calculate the total time every time the user moves the timerHand.

So storageTimer.setTimerValue(namePreset.text,TScript.totalSeconds(hours, minutes, seconds)); is a valid function call.

[Renato Araujo Oliveira Filho (renatofilho)]

great work.

review: Approve

=== modified file 'common/AnalogClockMarker.qml'
--- common/AnalogClockMarker.qml	2013-05-09 20:12:52 +0000
+++ common/AnalogClockMarker.qml	2013-05-12 14:25:31 +0000
@@ -49,7 +49,7 @@
 
     transform: Translate {
         x: parent.width * distance * Math.sin(radAngle)
-        y: parent.height * distance * Math.cos(radAngle)
+        y: -parent.height * distance * Math.cos(radAngle)
     }
 
 }

=== added file 'timer/AnalogTimer.qml'
--- timer/AnalogTimer.qml	1970-01-01 00:00:00 +0000
+++ timer/AnalogTimer.qml	2013-05-12 14:25:31 +0000
@@ -0,0 +1,326 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "../common"
+import "../common/Constants.js" as Constants
+
+// Component which draws the analog timer face.
+AnalogFaceBase {
+    id: clockOuterCircle
+
+    // Properties to store/set the time variables
+    property int seconds: 0;
+    property int minutes: 0;
+    property int hours: 0;
+    property int totalTime: 0;
+    property int timerValue: 0;
+
+    // Property to activate/deactivate the timer
+    property bool timerOn: false;
+
+    // Properties to get/set the timer hand properties
+    property alias timerHandColor: timerHand.colortop;
+    property alias timerHandRotation: timerHand.rotationAngle;
+
+    // Properties to set/determine the input focus
+    property bool secondsFlag
+    property bool minutesFlag
+    property bool hoursFlag
+    property bool inProgressFlag
+
+    onTotalTimeChanged: {
+        if (totalTime < 0) {
+            timerOn = false;
+        }
+        else {
+            setTime(totalTime);
+        }
+    }
+
+    // Timer function called by the main clock loop
+    function onTimerUpdate () {
+        if( timerOn ) {
+            totalTime--;
+            timerHand.rotationAngle = seconds * 6;
+        }
+    }
+
+    // Function to calculate the hours, minutes and seconds from the total time
+    function setTime ( sec ) {
+        var time = sec
+        seconds = time % 60
+        time = Math.floor(time / 60)
+        minutes = time % 60
+        hours = Math.floor(time / 60)
+    }
+
+    // Function to disable timer and reset time
+    function reset() {
+        timerOn = false;
+        hours = minutes = seconds = totalTime = timerValue = timerHand.rotationAngle = 0;
+    }
+
+    AnalogHand {
+        id: timerHand
+        
+        widthhand: units.gu(2); heighthand: units.gu(16); heighttop: units.gu(5)
+        rotationAngle: seconds * 6
+        colorhand: Constants.brightWhite
+        colortop: Constants.ubuntuOrange
+    }
+    
+    Rectangle {
+        id: secondsCircle
+        
+        width: units.gu(5); height: units.gu(5)
+        radius: width / 2
+        anchors.centerIn: parent
+        color: Constants.brightWhite
+        antialiasing: true
+        z: parent.z + 100
+    }
+
+    Repeater {
+        model: ["0", "15", "30", "45"]
+        delegate: AnalogClockMarker {
+            number: modelData
+            distance: 0.60
+            textDisplay: true
+        }
+    }
+    
+    Repeater {
+        model: 12
+        delegate: AnalogClockMarker {
+            number: index
+            size: 0.5
+            distance: 0.55
+            color: Constants.pitchBlack
+        }
+    }
+    
+    // Implements touch support
+    MouseArea {
+        id: timerbackmousearea
+        
+        property real truex: mouseX - clockOuterCircle.width/2
+        property real truey: clockOuterCircle.height/2 - mouseY
+        property real angle: Math.atan2(truex, truey)
+        property real strictangle: parseInt(angle * 180 / Math.PI)
+        property real modulo: strictangle % 6
+        property int seconds_up_flag: 0
+        property int seconds_down_flag: 0
+        property int minutes_up_flag: 0
+        property int minutes_down_flag: 0
+        property int temp_seconds: 0
+        property int temp_minutes: 0
+        
+        enabled: !inProgressFlag
+        anchors.fill: parent
+        preventStealing: true
+
+        onPositionChanged: if (timerbackmousearea.angle < 0) {
+                               timerHand.rotationAngle = strictangle - modulo + 360;
+                               timerValue = parseInt(timerHand.rotationAngle/6);
+
+                               if (secondsFlag) {
+                                   seconds = timerValue;
+
+                                   // FIXME: This whole code section below should be implemented in a more logical fashion.
+                                   if (seconds == 0) {
+                                       if (temp_seconds - seconds > 58) {
+                                           // increasing minutes
+                                           seconds_up_flag = 1
+                                           temp_seconds = 0
+                                       }
+                                       else if (temp_seconds - seconds > 0) {
+                                           // decreasing minutes
+                                           seconds_down_flag = 1
+                                           temp_seconds = 0
+                                       }
+                                       else {}
+
+                                       if (seconds_up_flag == 1) {
+                                           if (minutes == 59) {
+                                               hours += 1
+                                               minutes = 0
+                                           }
+                                           else {
+                                               minutes += 1
+                                           }
+                                           seconds_up_flag = 0;
+                                       }
+                                   }
+
+                                   if (seconds == 1) {
+                                       temp_seconds = seconds
+                                   }
+
+                                   if (seconds == 59) {
+                                       temp_seconds = seconds
+                                       if (seconds_down_flag == 1) {
+                                           if (minutes == 0) {
+                                               minutes = 59
+                                               hours -= 1
+                                           }
+                                           else {
+                                               minutes -= 1
+                                           }
+                                           seconds_down_flag = 0;
+                                       }
+                                   }
+
+
+                               }
+
+                               if (minutesFlag) {
+                                   minutes = timerValue;
+
+                                   if (minutes == 0) {
+                                       if (temp_minutes - minutes > 58) {
+                                           // increasing hours
+                                           minutes_up_flag = 1
+                                           temp_minutes = 0
+                                       }
+                                       else if (temp_minutes - minutes > 0) {
+                                           // decreasing hours
+                                           minutes_down_flag = 1
+                                           temp_minutes = 0
+                                       }
+                                       else {}
+
+                                       if (minutes_up_flag == 1 && hours != 59) {
+                                           hours += 1
+                                           minutes_up_flag = 0;
+                                       }
+                                   }
+
+                                   if (minutes == 1) {
+                                       temp_minutes = minutes
+                                   }
+
+                                   if (minutes == 59) {
+                                       temp_minutes = minutes
+                                       if (minutes_down_flag == 1 && hours != 0) {
+                                           hours -= 1
+                                           minutes_down_flag = 0;
+                                       }
+                                   }
+                               }
+
+                               if (hoursFlag) {
+                                   hours = timerValue;
+                               }
+                           }
+                           else {
+                               timerHand.rotationAngle = strictangle - modulo + 6;
+                               timerValue = parseInt(timerHand.rotationAngle/6);
+
+                               if (secondsFlag) {
+                                   seconds = timerValue;
+
+                                   if (seconds == 0) {
+                                       if (temp_seconds - seconds > 58) {
+                                           // increasing minutes
+                                           seconds_up_flag = 1
+                                           temp_seconds = 0
+                                       }
+                                       else if (temp_seconds - seconds > 0) {
+                                           // decreasing minutes
+                                           seconds_down_flag = 1
+                                           temp_seconds = 0
+                                       }
+                                       else {}
+
+                                       if (seconds_up_flag == 1) {
+                                           if (minutes == 59) {
+                                               hours += 1
+                                               minutes = 0
+                                           }
+                                           else {
+                                               minutes += 1
+                                           }
+                                           seconds_up_flag = 0;
+                                       }
+                                   }
+
+                                   if (seconds == 1) {
+                                       temp_seconds = seconds
+                                   }
+
+                                   if (seconds == 59) {
+                                       temp_seconds = seconds
+                                       if (seconds_down_flag == 1) {
+                                           if (minutes == 0) {
+                                               minutes = 59
+                                               hours -= 1
+                                           }
+                                           else {
+                                               minutes -= 1
+                                           }
+                                           seconds_down_flag = 0;
+                                       }
+                                   }
+
+
+                               }
+
+                               if (minutesFlag) {
+                                   minutes = timerValue;
+
+                                   if (minutes == 0) {
+                                       if (temp_minutes - minutes > 58) {
+                                           // increasing hours
+                                           minutes_up_flag = 1
+                                           temp_minutes = 0
+                                       }
+                                       else if (temp_minutes - minutes > 0) {
+                                           // decreasing hours
+                                           minutes_down_flag = 1
+                                           temp_minutes = 0
+                                       }
+                                       else {}
+
+                                       if (minutes_up_flag == 1 && hours != 59) {
+                                           hours += 1
+                                           minutes_up_flag = 0;
+                                       }
+                                   }
+
+                                   if (minutes == 1) {
+                                       temp_minutes = minutes
+                                   }
+
+                                   if (minutes == 59) {
+                                       temp_minutes = minutes
+                                       if (minutes_down_flag == 1 && hours != 0) {
+                                           hours -= 1
+                                           minutes_down_flag = 0;
+                                       }
+                                   }
+                               }
+
+                               if (hoursFlag) {
+                                   hours = timerValue;
+                               }
+                           }
+    }
+}
+

=== renamed file 'timer/BackgroundTimer.qml' => 'timer/SwipeDelete.qml'
=== added file 'timer/TimerLabelRow.qml'
--- timer/TimerLabelRow.qml	1970-01-01 00:00:00 +0000
+++ timer/TimerLabelRow.qml	2013-05-12 14:25:31 +0000
@@ -0,0 +1,94 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "../common"
+import "../common/Constants.js" as Constants
+
+Row {
+    id: topTimerRow
+
+    // Properties to set the timer labels and input focus (using flags)
+    property alias hoursLabel: hourslabelTimer.text;
+    property alias minutesLabel: minuteslabelTimer.text;
+    property alias secondsLabel: secondslabelTimer.text;
+    property alias hoursLabelFlag: hourslabelTimer.flag;
+    property alias minutesLabelFlag: minuteslabelTimer.flag;
+    property alias secondsLabelFlag: secondslabelTimer.flag;
+
+    // Properties to retrieve the status of the timer and the timer page
+    property bool timerOn;
+    property string viewState;
+    
+    spacing: units.gu(0.3)
+    anchors {
+        horizontalCenter: parent.horizontalCenter
+        top: parent.top
+        topMargin: units.gu(6)
+    }
+    
+    Label {
+        id: hourslabelTimer
+        
+        // flag boolean variable to determine if the timer hand adjusts the hours or not
+        property bool flag: false
+                
+        fontSize: "x-large"
+        color: flag && !timerOn ? Constants.ubuntuOrange : Constants.darkGrey
+        visible: hours > 0 ? true : false
+        
+        MouseArea {
+            anchors.fill: parent
+            enabled: !timerOn && viewState != "SAVEDPRESETS"
+            onClicked: topTimerRow.state = "FOCUS-HOR"
+        }
+    }
+    
+    Label {
+        id: colonTimer1
+        
+        color: Constants.darkGrey
+        visible: hourslabelTimer.visible ? true : false
+        fontSize: "x-large"
+        text: i18n.tr(":")
+    }
+    
+    Label {
+        id: minuteslabelTimer
+        
+        // flag boolean variable to determine if the timer hand adjusts the minutes or not
+        property bool flag: false
+                
+        fontSize: "x-large"
+        color: flag && !timerOn ? Constants.ubuntuOrange : Constants.darkGrey
+        
+        MouseArea {
+            anchors.fill: parent
+            enabled: !timerOn && viewState != "SAVEDPRESETS"
+            onClicked: topTimerRow.state = "FOCUS-MIN"
+        }
+    }
+    
+    Label {
+        id: colonTimer2
+        
+        color: Constants.darkGrey
+        fontSize: "x-large"
+        
+        text: i18n.tr(":")
+    }
+    
+    Label {
+        id: secondslabelTimer
+        
+        // flag boolean variable to determine if the timer hand adjusts the minutes or not
+        property bool flag: true
+                
+        fontSize: "x-large"
+        color: flag && !timerOn ? Constants.ubuntuOrange : Constants.darkGrey
+        
+        MouseArea {
+            anchors.fill: parent
+            enabled: !timerOn && viewState != "SAVEDPRESETS"
+            onClicked: topTimerRow.state = "FOCUS-SEC"
+        }
+    }
+}

=== modified file 'timer/TimerPage.qml'
--- timer/TimerPage.qml	2013-05-04 23:47:04 +0000
+++ timer/TimerPage.qml	2013-05-12 14:25:31 +0000
@@ -28,16 +28,29 @@
 Page {
     id: timerPage
 
-    property bool timerOn: false;
-    property int seconds: 0;
-    property int minutes: 0;
-    property int hours: 0;
-    property int totalTime: 0;
-    property int timerValue: 0;
     property int lastindex: -1;
     property string selectItemPreset: "";
     property string viewState: "TIMER"
 
+    property alias hours: analogTimer.hours;
+    property alias minutes: analogTimer.minutes;
+    property alias seconds: analogTimer.seconds;
+    property alias totalTime: analogTimer.totalTime;
+    property alias timerValue: analogTimer.timerValue;
+    property alias timerOn: analogTimer.timerOn;
+
+    function onTimerUpdate() {
+        analogTimer.onTimerUpdate();
+    }
+
+    function reset() {
+        analogTimer.reset();
+        topTimerRow.state = "FOCUS-SEC"
+        namePreset.text = "";
+    }
+
+    onViewStateChanged: topTimerRow.viewState = viewState;
+
     Component.onCompleted: {
         Utils.log("TimerPage loaded");
     }
@@ -46,519 +59,65 @@
         id: storageTimer
     }
 
-    // Timer function called by the main clock loop
-    function onTimerUpdate () {
-        if(timerOn == true) {
-            TScript.countDown()
-            timerHand.rotationAngle = seconds * 6;
-        }
-    }
-
     anchors.margins: units.gu(2)
 
-    Rectangle {
-        id: timerSwipeArea
-
-        // It may be necessary to fine tune this value to tweak the swipe experience
-        // until it works to our liking
-        property int swipeLength: 20;
-
-        width:timerPage.width; height:timerPage.height/4;
-        anchors.bottom: timerPage.bottom
-        color: "transparent"
-
-        MouseArea {
-            anchors.fill: timerSwipeArea
-            property int yStart: 0
-
-            onPressed: {
-                yStart = mouseY
-            }
-
-            onReleased: {
-                // Swipe up condition
-                if (yStart - mouseY > timerSwipeArea.swipeLength) {
-                    TScript.showTimerPage(false);
-                    TScript.showAddPresetPage(false);
-                    TScript.showViewPresetPage(true);
-                    TScript.populatePreset();
-
-                    addPreset.visible = true;
-                    editPreset.visible = false;
-                    deletePreset.visible = true;
-
-                    toolbarTimer.back.visible = true;
-                    toolbarTimer.locked = false;
-                    toolbarTimer.opened = false;
-                }
-
-                // Swipe down condition
-                if (yStart - mouseY < -timerSwipeArea.swipeLength) {
-                    TScript.showAddPresetPage(false);
-                    TScript.showViewPresetPage(false);
-
-                    if(!timerOn) {
-                        TScript.resetAll()
-                    }
-
-                    TScript.showTimerPage(true);
-                }
-            }
-        }
-    }
-
     // Timer label hh:mm:ss
-    Row {
+    TimerLabelRow {
         id: topTimerRow
 
-        spacing: units.gu(0.3)
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            top: parent.top
-            topMargin: units.gu(6)
-        }
-
-        Label {
-            id: hourslabelTimer
-
-            // flag boolean variable to determine if the timer hand adjusts the hours or not
-            property bool flag: false
-
-            color: Constants.darkGrey
-            fontSize: "x-large"
-            text: i18n.tr("00")
-            visible: {
-                if (hours > 0) {
-                    true
-                }
-                else {
-                    false
-                }
-            }
-
-            MouseArea {
-                anchors.fill: parent
-
-                onClicked: {
-                    if (!timerOn && viewState != "SAVEDPRESETS") {
-                        timerHand.rotationAngle = hours * 6;
-                        hourslabelTimer.color = Constants.ubuntuOrange;
-                        hourslabelTimer.flag = true;
-                        secondslabelTimer.color = Constants.darkGrey;
-                        secondslabelTimer.flag = false;
-                        minuteslabelTimer.color = Constants.darkGrey;
-                        minuteslabelTimer.flag = false;
-                    }
-                }
-            }
-        }
-
-        Label {
-            id: colonTimer1
-
-            color: Constants.darkGrey
-            visible: {
-                if (hourslabelTimer.visible) {
-                    true
-                }
-                else {
-                    false
-                }
-            }
-            fontSize: "x-large"
-
-            text: i18n.tr(":")
-        }
-
-        Label {
-            id: minuteslabelTimer
-
-            // flag boolean variable to determine if the timer hand adjusts the minutes or not
-            property bool flag: false
-
-            color: Constants.darkGrey
-            fontSize: "x-large"
-
-            text: i18n.tr("00")
-
-            MouseArea {
-                anchors.fill: parent
-
-                onClicked: {
-                    if (!timerOn && viewState != "SAVEDPRESETS") {
-                        timerHand.rotationAngle = minutes * 6;
-                        minuteslabelTimer.color = Constants.ubuntuOrange;
-                        minuteslabelTimer.flag = true;
-                        secondslabelTimer.color = Constants.darkGrey;
-                        secondslabelTimer.flag = false;
-                        hourslabelTimer.color = Constants.darkGrey;
-                        hourslabelTimer.flag = false;
-                    }
-                }
-            }
-        }
-
-        Label {
-            id: colonTimer2
-
-            color: Constants.darkGrey
-            fontSize: "x-large"
-
-            text: i18n.tr(":")
-        }
-
-        Label {
-            id: secondslabelTimer
-
-            // flag boolean variable to determine if the timer hand adjusts the minutes or not
-            property bool flag: true
-
-            color: Constants.ubuntuOrange;
-            fontSize: "x-large"
-
-            text: i18n.tr("00")
-
-            MouseArea {
-                anchors.fill: parent
-
-                onClicked: {
-                    if (!timerOn && viewState != "SAVEDPRESETS") {
-                        timerHand.rotationAngle = seconds * 6;
-                        secondslabelTimer.color = Constants.ubuntuOrange;
-                        secondslabelTimer.flag = true;
-                        minuteslabelTimer.color = Constants.darkGrey;
-                        minuteslabelTimer.flag = false;
-                        hourslabelTimer.color = Constants.darkGrey;
-                        hourslabelTimer.flag = false;
-                    }
-                }
-            }
-        }
+        timerOn: analogTimer.timerOn;
+        viewState: timerPage.viewState;
+        hoursLabel: Utils.zeroleft(hours, 2);
+        minutesLabel: Utils.zeroleft(minutes, 2);
+        secondsLabel: Utils.zeroleft(seconds, 2);
+
+        states:[
+            State {
+                name: "FOCUS-SEC"
+                PropertyChanges { target: topTimerRow; secondsLabelFlag: true }
+                PropertyChanges { target: topTimerRow; minutesLabelFlag: false }
+                PropertyChanges { target: topTimerRow; hoursLabelFlag: false }
+                PropertyChanges { target: analogTimer; timerHandRotation: seconds * 6 }
+            },
+
+            State {
+                name: "FOCUS-MIN"
+                PropertyChanges { target: topTimerRow; secondsLabelFlag: false }
+                PropertyChanges { target: topTimerRow; minutesLabelFlag: true }
+                PropertyChanges { target: topTimerRow; hoursLabelFlag: false }
+                PropertyChanges { target: analogTimer; timerHandRotation: minutes * 6 }
+            },
+
+            State {
+                name: "FOCUS-HOR"
+                PropertyChanges { target: topTimerRow; secondsLabelFlag: false }
+                PropertyChanges { target: topTimerRow; minutesLabelFlag: false }
+                PropertyChanges { target: topTimerRow; hoursLabelFlag: true }
+                PropertyChanges { target: analogTimer; timerHandRotation: hours * 6 }
+            },
+
+            State {
+                name: "DISABLED"
+                when: timerOn == true || viewState == "SAVEDPRESETS" || buttonTimer.state == "DONE"
+                PropertyChanges { target: topTimerRow; secondsLabelFlag: false }
+                PropertyChanges { target: topTimerRow; minutesLabelFlag: false }
+                PropertyChanges { target: topTimerRow; hoursLabelFlag: false }
+            }
+        ]
     }
 
-    AnalogFaceBase {
-        id: clockOuterCircle
-
-        AnalogHand {
-            id: timerHand
-
-            widthhand: units.gu(2); heighthand: units.gu(16); heighttop: units.gu(5)
-            rotationAngle: seconds * 6
-            colorhand: Constants.brightWhite
-            colortop: Constants.ubuntuOrange
-        }
-
-        Rectangle {
-            id: secondsCircle
-
-            width: units.gu(5); height: units.gu(5)
-            radius: width / 2
-            anchors.centerIn: parent
-            color: Constants.brightWhite
-            antialiasing: true
-            z: parent.z + 100
-        }
-
-        // Add analog clock texts 0,15,30 and 45. Ready for translation to other languages if necessary
-        Label {
-            id: point0
-
-            anchors {
-                horizontalCenter: clockOuterCircle.horizontalCenter
-                bottom: clockOuterCircle.top
-                bottomMargin: 20
-            }
-
-            fontSize: "medium"
-            text: i18n.tr("0")
-        }
-
-        Label {
-            id: point15
-
-            anchors {
-                verticalCenter: clockOuterCircle.verticalCenter
-                left: clockOuterCircle.right
-                leftMargin: 20
-            }
-
-            fontSize: "medium"
-            text: i18n.tr("15")
-        }
-
-        Label {
-            id: point30
-
-            anchors {
-                horizontalCenter: clockOuterCircle.horizontalCenter
-                top: clockOuterCircle.bottom
-                topMargin: 20
-            }
-
-            fontSize: "medium"
-            text: i18n.tr("30")
-        }
-
-        Label {
-            id: point45
-
-            anchors {
-                verticalCenter: clockOuterCircle.verticalCenter
-                right: clockOuterCircle.left
-                rightMargin: 20
-            }
-
-            fontSize: "medium"
-            text: i18n.tr("45")
-        }
-
-        Repeater {
-            model: 12
-            delegate: AnalogClockMarker {
-                number: index
-                size: 0.5
-                distance: 0.55
-                color: Constants.pitchBlack
-            }
-        }
-
-        // Implements touch support
-        MouseArea {
-            id: timerbackmousearea
-
-            property real truex: mouseX - clockOuterCircle.width/2
-            property real truey: clockOuterCircle.height/2 - mouseY
-            property real angle: Math.atan2(truex, truey)
-            property real strictangle: parseInt(angle * 180 / Math.PI)
-            property real modulo: strictangle % 6
-            property int seconds_up_flag: 0
-            property int seconds_down_flag: 0
-            property int minutes_up_flag: 0
-            property int minutes_down_flag: 0
-            property int temp_seconds: 0
-            property int temp_minutes: 0
-
-            enabled: !timerOn
-
-            anchors.fill: parent
-            preventStealing: true // move only Timer hand and ensures that the sideway motion of pages do not interrupt moving the clock hand
-            onPositionChanged:  if (buttonTimer.state != "STOP" && buttonTimer.state != "DONE") {
-                                    if (timerbackmousearea.angle < 0) {
-                                        timerHand.rotationAngle = strictangle - modulo + 360;
-                                        timerValue = parseInt(timerHand.rotationAngle/6);
-
-                                        if (secondslabelTimer.flag) {
-                                            secondslabelTimer.text = Utils.zeroleft(timerValue, 2);
-                                            seconds = timerValue;
-
-                                            if (seconds == 0) {
-                                                if (temp_seconds - seconds > 58) {
-                                                    // increasing minutes
-                                                    seconds_up_flag = 1
-                                                    temp_seconds = 0
-                                                }
-                                                else if (temp_seconds - seconds > 0) {
-                                                    // decreasing minutes
-                                                    seconds_down_flag = 1
-                                                    temp_seconds = 0
-                                                }
-                                                else {}
-
-                                                if (seconds_up_flag == 1) {
-                                                    if (minutes == 59) {
-                                                        hours += 1
-                                                        hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                        minutes = 0
-                                                    }
-                                                    else {
-                                                        minutes += 1
-                                                    }
-                                                    minuteslabelTimer.text = Utils.zeroleft(minutes, 2);
-                                                    seconds_up_flag = 0;
-                                                }
-                                            }
-
-                                            if (seconds == 1) {
-                                                temp_seconds = seconds
-                                            }
-
-                                            if (seconds == 59) {
-                                                temp_seconds = seconds
-                                                if (seconds_down_flag == 1) {
-                                                    if (minutes == 0) {
-                                                        minutes = 59
-                                                        hours -= 1
-                                                        hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                    }
-                                                    else {
-                                                        minutes -= 1
-                                                    }
-                                                    minuteslabelTimer.text = Utils.zeroleft(minutes, 2);
-                                                    seconds_down_flag = 0;
-                                                }
-                                            }
-
-
-                                        }
-
-                                        if (minuteslabelTimer.flag) {
-                                            minuteslabelTimer.text = Utils.zeroleft(timerValue, 2);
-                                            minutes = timerValue;
-
-                                            if (minutes == 0) {
-                                                if (temp_minutes - minutes > 58) {
-                                                    // increasing hours
-                                                    minutes_up_flag = 1
-                                                    temp_minutes = 0
-                                                }
-                                                else if (temp_minutes - minutes > 0) {
-                                                    // decreasing hours
-                                                    minutes_down_flag = 1
-                                                    temp_minutes = 0
-                                                }
-                                                else {}
-
-                                                if (minutes_up_flag == 1 && hours != 59) {
-                                                    hours += 1
-                                                    hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                    minutes_up_flag = 0;
-                                                }
-                                            }
-
-                                            if (minutes == 1) {
-                                                temp_minutes = minutes
-                                            }
-
-                                            if (minutes == 59) {
-                                                temp_minutes = minutes
-                                                if (minutes_down_flag == 1 && hours != 0) {
-                                                    hours -= 1
-                                                    hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                    minutes_down_flag = 0;
-                                                }
-                                            }
-                                        }
-
-                                        if (hourslabelTimer.flag) {
-                                            hourslabelTimer.text = Utils.zeroleft(timerValue, 2);
-                                            hours = timerValue;
-                                        }
-
-                                        if(secondslabelTimer.text != "00" || minuteslabelTimer.text != "00" || hourslabelTimer.text != "00") {
-                                            buttonTimer.state = "START";
-                                        } else {
-                                            buttonTimer.state = "PRESETS";
-                                        }
-                                    }
-                                    else {
-                                        timerHand.rotationAngle = strictangle - modulo + 6;
-                                        timerValue = parseInt(timerHand.rotationAngle/6);
-
-                                        if (secondslabelTimer.flag) {
-                                            secondslabelTimer.text = Utils.zeroleft(timerValue, 2);
-                                            seconds = timerValue;
-
-                                            if (seconds == 0) {
-                                                if (temp_seconds - seconds > 58) {
-                                                    // increasing minutes
-                                                    seconds_up_flag = 1
-                                                    temp_seconds = 0
-                                                }
-                                                else if (temp_seconds - seconds > 0) {
-                                                    // decreasing minutes
-                                                    seconds_down_flag = 1
-                                                    temp_seconds = 0
-                                                }
-                                                else {}
-
-                                                if (seconds_up_flag == 1) {
-                                                    if (minutes == 59) {
-                                                        hours += 1
-                                                        hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                        minutes = 0
-                                                    }
-                                                    else {
-                                                        minutes += 1
-                                                    }
-                                                    minuteslabelTimer.text = Utils.zeroleft(minutes, 2);
-                                                    seconds_up_flag = 0;
-                                                }
-                                            }
-
-                                            if (seconds == 1) {
-                                                temp_seconds = seconds
-                                            }
-
-                                            if (seconds == 59) {
-                                                temp_seconds = seconds
-                                                if (seconds_down_flag == 1) {
-                                                    if (minutes == 0) {
-                                                        minutes = 59
-                                                        hours -= 1
-                                                        hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                    }
-                                                    else {
-                                                        minutes -= 1
-                                                    }
-                                                    minuteslabelTimer.text = Utils.zeroleft(minutes, 2);
-                                                    seconds_down_flag = 0;
-                                                }
-                                            }
-
-
-                                        }
-
-                                        if (minuteslabelTimer.flag) {
-                                            minuteslabelTimer.text = Utils.zeroleft(timerValue, 2);
-                                            minutes = timerValue;
-
-                                            if (minutes == 0) {
-                                                if (temp_minutes - minutes > 58) {
-                                                    // increasing hours
-                                                    minutes_up_flag = 1
-                                                    temp_minutes = 0
-                                                }
-                                                else if (temp_minutes - minutes > 0) {
-                                                    // decreasing hours
-                                                    minutes_down_flag = 1
-                                                    temp_minutes = 0
-                                                }
-                                                else {}
-
-                                                if (minutes_up_flag == 1 && hours != 59) {
-                                                    hours += 1
-                                                    hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                    minutes_up_flag = 0;
-                                                }
-                                            }
-
-                                            if (minutes == 1) {
-                                                temp_minutes = minutes
-                                            }
-
-                                            if (minutes == 59) {
-                                                temp_minutes = minutes
-                                                if (minutes_down_flag == 1 && hours != 0) {
-                                                    hours -= 1
-                                                    hourslabelTimer.text = Utils.zeroleft(hours, 2);
-                                                    minutes_down_flag = 0;
-                                                }
-                                            }
-                                        }
-
-                                        if (hourslabelTimer.flag) {
-                                            hourslabelTimer.text = Utils.zeroleft(timerValue, 2);
-                                            hours = timerValue;
-                                        }
-
-                                        if(secondslabelTimer.text != "00" || minuteslabelTimer.text != "00" || hourslabelTimer.text != "00") {
-                                            buttonTimer.state = "START";
-                                        } else {
-                                            buttonTimer.state = "PRESETS";
-                                        }
-                                    }
-                                }
-        }
+    AnalogTimer {
+        id: analogTimer
+
+        secondsFlag: topTimerRow.secondsLabelFlag;
+        minutesFlag: topTimerRow.minutesLabelFlag;
+        hoursFlag: topTimerRow.hoursLabelFlag;
+        inProgressFlag: (timerOn == true || buttonTimer.state == "DONE") ? true : false;
+
+        onHoursChanged: topTimerRow.hoursLabel = Utils.zeroleft(hours, 2);
+        onMinutesChanged: topTimerRow.minutesLabel = Utils.zeroleft(minutes, 2);
+        onSecondsChanged: topTimerRow.secondsLabel = Utils.zeroleft(seconds, 2);
+        onTimerOnChanged: topTimerRow.timerOn = timerOn;
     }
 
     // Add preset done circle which is shown when the add preset toolbar button is pressed
@@ -588,7 +147,7 @@
             onClicked: {
                 if (namePreset.text != "" && (hours > 0 || minutes > 0 || seconds > 0)) {
                     storageTimer.setTimerValue(namePreset.text, TScript.totalSeconds(hours, minutes, seconds));
-                    TScript.resetAll();
+                    reset();
                     TScript.showAddPresetPage(false)
                     TScript.showTimerPage(true)
                 }
@@ -613,41 +172,44 @@
         states:[
             State {
                 name: "PRESETS"
+                when: (totalTime == "0" && timerOn == false && text != "Done")
                 PropertyChanges { target: buttonTimer; color: Constants.brightWhite; text: i18n.tr("Presets") }
-                PropertyChanges { target: timerHand; colortop: Constants.ubuntuOrange }
-                PropertyChanges { target: clockOuterCircle; glowColor: Constants.analogClockFaceGlowColor }
+                PropertyChanges { target: analogTimer; timerHandColor: Constants.ubuntuOrange }
+                PropertyChanges { target: analogTimer; glowColor: Constants.analogClockFaceGlowColor }
             },
 
             State {
                 name: "START"
+                when: ((seconds != "0" || minutes != "0" || hours != "0") && timerOn == false)
                 PropertyChanges { target: buttonTimer; color: Constants.ubuntuOrange; text: i18n.tr("Start") }
-                PropertyChanges { target: timerHand; colortop: Constants.ubuntuOrange }
-                PropertyChanges { target: clockOuterCircle; glowColor: Constants.analogClockFaceGlowColor }
+                PropertyChanges { target: analogTimer; timerHandColor: Constants.ubuntuOrange }
+                PropertyChanges { target: analogTimer; glowColor: Constants.analogClockFaceGlowColor }
             },
 
             State {
                 name: "STOP"
                 PropertyChanges { target: buttonTimer; color: Constants.darkGrey; text: i18n.tr("Stop") }
-                PropertyChanges { target: timerHand; colortop: Constants.ubuntuOrange }
-                PropertyChanges { target: clockOuterCircle; glowColor: Constants.analogClockFaceGlowColor }
+                PropertyChanges { target: analogTimer; timerHandColor: Constants.ubuntuOrange }
+                PropertyChanges { target: analogTimer; glowColor: Constants.analogClockFaceGlowColor }
             },
 
             State {
                 name: "DONE"
+                when: (totalTime == "-1" && timerOn == false)
                 PropertyChanges { target: buttonTimer; color: Constants.green; text: i18n.tr("Done") }
-                PropertyChanges { target: timerHand; colortop: Constants.green }
-                PropertyChanges { target: clockOuterCircle; glowColor: Constants.analogClockFaceGlowColorTimerDown }
+                PropertyChanges { target: analogTimer; timerHandColor: Constants.green }
+                PropertyChanges { target: analogTimer; glowColor: Constants.analogClockFaceGlowColorTimerDown }
             }
         ]
 
         onClicked: {
             switch (text) {
             case "Presets":
-                if (timerPage.viewState == "TIMER") {
-                    TScript.resetAll();
+                if (viewState == "TIMER") {
+                    reset();
                     TScript.showTimerPage(false);
+                    TScript.populatePreset();
                     TScript.showViewPresetPage(true);
-                    TScript.populatePreset();
 
                     addPreset.visible = true;
                     editPreset.visible = false;
@@ -661,44 +223,41 @@
                     TScript.showViewPresetPage(false);
 
                     if (!timerOn) {
-                        TScript.resetAll();
+                        reset();
                     }
 
                     TScript.showTimerPage(true);
                 }
-
                 break;
+
             case "Start":
-                TScript.prepareStartTimer();
-                if (totalTime > 0) {
-                    timerPage.timerOn = true;
-                    state = "STOP";
-                }
+                totalTime = TScript.totalSeconds(hours, minutes, seconds);
+                timerOn = true;
+                state = "STOP";
 
-                if (timerPage.viewState == "SAVEDPRESETS") {
+                if (viewState == "SAVEDPRESETS") {
                     TScript.showViewPresetPage(false);
                     TScript.showTimerPage(true);
                 }
-
                 break;
+
             case "Stop":
-                timerPage.timerOn = false;
+                timerOn = false;
                 state = "PRESETS";
-                TScript.resetAll();
+                reset();
 
-                if (timerPage.viewState == "SAVEDPRESETS") {
+                if (viewState == "SAVEDPRESETS") {
                     TScript.showViewPresetPage(true)
                 }
-
                 break;
+
             case "Done":
                 state = "PRESETS";
-                TScript.resetAll();
+                reset();
 
-                if (timerPage.viewState == "SAVEDPRESETS") {
+                if (viewState == "SAVEDPRESETS") {
                     TScript.showViewPresetPage(true)
                 }
-
                 break;
             }
         }
@@ -736,23 +295,21 @@
                 selected: select
                 removable: true
 
-                backgroundIndicator: BackgroundTimer {
-                    id: backgroundTimer
+                backgroundIndicator: SwipeDelete {
+                    id: swipeDelete
                     state: swipingState
                 }
 
-                onItemRemoved: if (backgroundTimer.state == "SwipingRight") {
-                                   storageTimer.delTimerValue(text);
-                                   TScript.populatePreset();
-                               } else {
-                                   storageTimer.delTimerValue(text);
-                                   TScript.populatePreset();
-                               }
+                // TODO: Implement different based actions based on the swipe direction.
+                onItemRemoved: {
+                    storageTimer.delTimerValue(text);
+                    TScript.populatePreset();
+                }
 
                 onClicked: {
                     if (!timerOn) {
                         buttonTimer.state = "START";
-                        TScript.setlabelTimer(secondstimer);
+                        analogTimer.setTime(secondstimer);
                         if (lastindex == -1) {
                             listModel.setProperty(index, "select", true)
                             lastindex = index;
@@ -800,7 +357,7 @@
             text: i18n.tr("Add Preset")
 
             onTriggered: {
-                TScript.resetAll()
+                reset()
                 TScript.showTimerPage(false);
                 TScript.showViewPresetPage(false);
                 TScript.showAddPresetPage(true);
@@ -851,8 +408,7 @@
                         storageTimer.delTimerValue(selectItemPreset);
                         TScript.populatePreset();
                     }
-                    TScript.resetAll();
-                    TScript.showViewPresetPage(true);
+                    analogTimer.reset();
                 }
             }
         }
@@ -866,10 +422,9 @@
                 TScript.showTimerPage(true);
 
                 if (!timerOn) {
-                    TScript.resetAll();
+                    reset();
                 }
             }
         }
     }
 }
-

=== modified file 'timer/TimerScript.js'
--- timer/TimerScript.js	2013-04-28 13:07:23 +0000
+++ timer/TimerScript.js	2013-05-12 14:25:31 +0000
@@ -20,102 +20,26 @@
 Qt.include("../common/ClockUtils.js")
 Qt.include("../common/Constants.js")
 
-// Function to calculate the hours, minutes and seconds from the total time
-function setlabelTimer ( sec ) {
-    var hor = parseInt(sec / 3600);
-    var change = sec - (hor * 3600);
-    var min = parseInt(change / 60);
-    change = change - (min * 60);
-
-    timerPage.hours = hor;
-    timerPage.minutes = min;
-    timerPage.seconds = change;
-
-    hourslabelTimer.text = zeroleft(hor, 2);
-    minuteslabelTimer.text = zeroleft(min, 2);
-    secondslabelTimer.text = zeroleft(change, 2);
-}
-
-// Countdown timer function
-function countDown () {
-    if (timerPage.totalTime > 0) {
-        timerPage.totalTime--;
-        setlabelTimer(timerPage.totalTime);
-    } else {
-        buttonTimer.state = "DONE";        
-        timerPage.timerOn = false;
-    }
-}
-
 // Function to return total seconds.
 function totalSeconds ( hou, min, sec ) {
-    var totalsec = (hou * 60 * 60) + (min * 60) + sec;
-    return totalsec;
+    return( (hou * 60 * 60) + (min * 60) + sec );
 }
 
 // Function to calculate the hours, minutes and seconds from the total time
-function getstringTimer ( sec ) {
-    var stringTimer;
-    var hor = parseInt(sec / 3600);
-    var change = sec - (hor * 3600);
-    var min = parseInt(change / 60);
-    change = change - (min * 60);
-
-    timerPage.hours = hor;
-    timerPage.minutes = min;
-    timerPage.seconds = change;
-
-    stringTimer = zeroleft(hor, 2) + ':' + zeroleft(min, 2) + ':' + zeroleft(change, 2);
-
-    return stringTimer
-}
-
-// Function to adjust timer properties before starting timer.
-function prepareStartTimer () {
-    timerPage.totalTime = totalSeconds(timerPage.hours, timerPage.minutes, timerPage.seconds);
-
-    secondslabelTimer.color = Constants.pitchBlack
-    minuteslabelTimer.color = Constants.pitchBlack
-    hourslabelTimer.color = Constants.pitchBlack
-
-    colonTimer1.color = Constants.pitchBlack
-    colonTimer2.color = Constants.pitchBlack
-}
-
-// Restore timer to its original state
-function resetAll () {
-    hourslabelTimer.text = "00";
-    hourslabelTimer.color = darkGrey;
-    hourslabelTimer.flag = false;
-
-    minuteslabelTimer.text = "00";
-    minuteslabelTimer.color = darkGrey;
-    minuteslabelTimer.flag = false;
-
-    secondslabelTimer.text = "00";
-    secondslabelTimer.color = ubuntuOrange;
-    secondslabelTimer.flag = true;
-
-    colonTimer1.color = darkGrey;
-    colonTimer2.color = darkGrey;
-
-    timerPage.hours = 0;
-    timerPage.minutes = 0;
-    timerPage.seconds = 0;
-    timerPage.totalTime = 0;
-    timerPage.timerValue = 0;
-
-    timerPage.timerOn = false;
-    timerHand.rotationAngle = 0;
-    buttonTimer.state = "PRESETS";
-
-    namePreset.text = "";
+function getstringTimer ( seconds ) {
+    var time = seconds
+    var sec = time % 60
+    time = Math.floor(time / 60)
+    var min = time % 60
+    var hor = Math.floor(time / 60)
+    return Utils.hmsToString(hor, min, sec);
 }
 
 // Show/Hide Timer Page
 function showTimerPage ( mode ) {
-    clockOuterCircle.visible = mode;
+    analogTimer.visible = mode;
 
+    // TODO: Remove these anchor changes once the flickable is implemented.
     if (mode) {
         timerPage.viewState = "TIMER";
         buttonTimer.visible = true
@@ -134,7 +58,7 @@
 
 // Show/Hide Add Preset Page
 function showAddPresetPage ( mode ) {
-    clockOuterCircle.visible = mode;    
+    analogTimer.visible = mode;
     addPresetCircleDone.visible = mode;
     namePreset.visible = mode;
     buttonTimer.visible = !mode
@@ -148,16 +72,13 @@
 function showViewPresetPage ( mode ) {
     listPreset.visible = mode;
 
+    //TODO: These anchors changes should be removed once a flickable is used.
     if (mode) {
         timerPage.viewState = "SAVEDPRESETS";
         buttonTimer.visible = true
         buttonTimer.anchors.bottom = topTimerRow.bottom;
         buttonTimer.anchors.bottomMargin = -units.gu(10);
     }
-
-    if (mode == true && !timerOn) {
-        secondslabelTimer.color = darkGrey;
-    }
 }
 
 // Call Workerscript to populate the preset list