Merge lp:~nik90/ubuntu-clock-app/new-timer-design into lp:ubuntu-clock-app/saucy

[Nekhelesh Ramananthan]

Implements the new visual designs of timer (just the skeleton layout) without background gradients or ubuntu shape.

Implements the new visual designs of timer (just the skeleton layout) without background gradients or ubuntu shape.

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

PASSED: Continuous integration, rev:120
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/1/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-quantal-amd64-ci/2
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/1

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

review: Approve (continuous-integration)

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

PASSED: Continuous integration, rev:120
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/3/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-quantal-amd64-ci/3
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/3

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

review: Approve (continuous-integration)

=== modified file 'timer/AnalogTimer.qml'
--- timer/AnalogTimer.qml	2013-06-03 21:39:09 +0000
+++ timer/AnalogTimer.qml	2013-06-25 21:45:33 +0000
@@ -33,21 +33,14 @@
     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
 
+    property alias innerDimension: innerCircle.width;
+    signal clicked(var mouse)
+
     // Timer function called by the main clock loop
     function onTimerUpdate () {
         if( timerOn ) {
@@ -58,7 +51,6 @@
                 totalTime = -1;
             } else {
                 ssToTime(remTime);
-                timerHand.rotationAngle = seconds * 6;
             }
         }
     }
@@ -69,259 +61,83 @@
         time = Math.floor(time / 60)
         minutes = time % 60
         hours = Math.floor(time / 60)
+        secondHand.rotationValue = seconds * 6;
+        minuteHand.rotationValue = minutes * 6;
+        hourHand.rotationValue = hours * 6;
     }
 
     // Function to disable timer and reset time
     function reset() {
         timerOn = false;
         startTime = remTime = 0;
-        hours = minutes = seconds = totalTime = timerValue = timerHand.rotationAngle = 0;
+        hourHand.rotationValue = minuteHand.rotationValue = secondHand.rotationValue = 0;
+        hours = minutes = seconds = totalTime = 0;
+        hourHand.timerValue = minuteHand.timerValue = secondHand.timerValue = 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
-    }
-    
+    // inner circle which also acts as the button to start/stop the timer
     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
+        id: innerCircle;
+        objectName: "buttonTimer"
+
+        z: parent.z + 1;
+        height: units.gu(19); width: units.gu(19);
+        radius: width / 2;
+        anchors.centerIn: parent;
+        color: Constants.coolGrey;
+        antialiasing: true;
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: clockOuterCircle.clicked(mouse)
         }
     }
-    
+
     Repeater {
         model: 12
         delegate: AnalogClockMarker {
             number: index
             size: 0.5
-            distance: 0.55
-            color: Constants.pitchBlack
+            distance: 0.48
+            color: Constants.coolGrey
         }
     }
-    
-    // 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;
-                               }
-                           }
+
+    // Hour hand with touch/mouse drag support
+    AnalogTouchHand {
+        id: hourHand
+
+        onTimerValueChanged: hours = timerValue;
+
+        handHeight: units.gu(12.5); handWidth: units.gu(1);
+        zOrder: minuteHand.z + 1;
+        animateFlag: inProgressFlag;
+        enabled: !inProgressFlag;
+    }
+
+    // Minute hand with touch/mouse drag support
+    AnalogTouchHand {
+        id: minuteHand
+
+        onTimerValueChanged: minutes = timerValue;
+
+        handHeight: units.gu(14.5); handWidth: units.gu(0.5);
+        animateFlag: inProgressFlag;
+        enabled: !inProgressFlag;
+        grabMargin: -units.gu(1)
+        grabHeight: units.gu(7)
+    }
+
+    // Second hand with touch/mouse drag support
+    AnalogTouchHand {
+        id: secondHand
+
+        onTimerValueChanged: seconds = timerValue;
+
+        handHeight: units.gu(17); handWidth: units.gu(0.5);
+        zOrder: parent.z - 1;
+        animateFlag: inProgressFlag;
+        enabled: !inProgressFlag;
+        grabMargin: -units.gu(2)
     }
 }
-

=== added file 'timer/AnalogTouchHand.qml'
--- timer/AnalogTouchHand.qml	1970-01-01 00:00:00 +0000
+++ timer/AnalogTouchHand.qml	2013-06-25 21:45:33 +0000
@@ -0,0 +1,128 @@
+/*
+ * 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"
+
+// Qml item to enable touch input to the AnalogClockHand component
+Item {
+    id: touchHand;
+
+    z: parent.z;
+    width: parent.width; height: width;
+    anchors.centerIn: parent;
+
+    /*!
+      Enable/Disable rotation animation. Disable it while dragging the clock hand to avoid
+      receiving inaccurate input values.
+      */
+    property alias animateFlag: rotation.enabled;
+
+    /*!
+      Set if the dial should be rotated by the seconds, minutes or hours. This generally needs to be
+      multiplied by 6 to convert it into degrees per second/hour/minute.
+      */
+    property alias rotationValue: rotatingDial.rotation;
+
+
+    // Set the touch/mouse grab area height and top margin
+    property alias grabHeight: grabArea.height;
+    property int grabMargin: units.gu(0);
+
+    // Height and width of the clock hand
+    property alias handHeight: hand.height;
+    property alias handWidth: hand.width;
+
+    // z order of the clock hand
+    property alias zOrder: touchHand.z;
+
+    // internal properties required for the functioning of the AnalogTouchHand
+    property int timerValue: 0;
+    property real centerX : (width / 2);
+    property real centerY : (height / 2);
+
+    // Dial which covers the clock hand and does the actual rotatio
+    Rectangle{
+        id: rotatingDial;
+
+        color: "transparent";
+        transformOrigin: Item.Center;
+        radius: (width / 2);
+        antialiasing: true;
+        anchors.fill: parent;
+        
+        // Clock hand which lies above the rotating dial. This is stationary w.r.t to the rotating dial.
+        AnalogClockHand {
+            id: hand
+            
+            height: units.gu(0); width: units.gu(0);
+            antialiasing: true;
+
+            /*!
+              Element to define the grab area of the clock hand. This allows us to define small clock hand
+              which are still easier to grab.
+              */
+            Rectangle {
+                id: grabArea
+                color: "transparent"
+                width: units.gu(5); height: width;
+                anchors { top: hand.top; topMargin: touchHand.grabMargin; horizontalCenter: hand.horizontalCenter }
+            }
+            
+            MouseArea{
+                anchors.fill: grabArea;
+                preventStealing: true;
+                enabled: true;
+                onPositionChanged:  {
+                    var point =  mapToItem (touchHand, mouse.x, mouse.y);
+                    var diffX = (point.x - touchHand.centerX);
+                    var diffY = -1 * (point.y - touchHand.centerY);
+                    var rad = Math.atan (diffY / diffX);
+                    var deg = (rad * 180 / Math.PI);
+
+                    if (diffX > 0 && diffY > 0) {
+                        rotatingDial.rotation = 90 - Math.abs (deg);
+                    }
+                    else if (diffX > 0 && diffY < 0) {
+                        rotatingDial.rotation = 90 + Math.abs (deg);
+                    }
+                    else if (diffX < 0 && diffY > 0) {
+                        rotatingDial.rotation = 270 + Math.abs (deg);
+                    }
+                    else if (diffX < 0 && diffY < 0) {
+                        rotatingDial.rotation = 270 - Math.abs (deg);
+                    }
+
+                    if (Math.round(rotatingDial.rotation/6) == 60) {
+                        touchHand.timerValue == 0
+                    } else {
+                        touchHand.timerValue = Math.round(rotatingDial.rotation/6);
+                    }
+
+                }
+            }
+        }
+
+        Behavior on rotation {
+            id: rotation;
+            enabled: false;
+            RotationAnimation { direction: RotationAnimation.Shortest }
+        }
+    }
+}

=== modified file 'timer/TimerPage.qml'
--- timer/TimerPage.qml	2013-06-15 14:21:07 +0000
+++ timer/TimerPage.qml	2013-06-25 21:45:33 +0000
@@ -31,7 +31,6 @@
     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() {
@@ -48,6 +47,18 @@
         return( (hou * 60 * 60) + (min * 60) + sec );
     }
 
+    // Function to print timer label (format mm:ss and hh:mm:ss when hh > 0) at top
+    function intervalToString(hours, minutes, seconds)
+    {
+        var locale = Qt.locale();
+
+        if (hours > 0) {
+            return Utils.zeroleft(hours, 2) + ":" + Utils.zeroleft(minutes, 2) + ":" + Utils.zeroleft(seconds, 2);
+        } else {
+            return Utils.zeroleft(minutes, 2) + ":" + Utils.zeroleft(seconds, 2);
+        }
+    }
+
     // Function to calculate and print the hours, minutes and seconds from the total time as a string
     function getstringTimer(time) {
         var hours, minutes, seconds;
@@ -64,8 +75,6 @@
         Utils.log("TimerPage loaded");
     }
 
-    anchors.margins: units.gu(2)
-
     PresetTimersModel {
         id: presetModel
     }
@@ -78,122 +87,61 @@
         }
     ]
 
-    // Timer label hh:mm:ss
-    TimerLabelRow {
-        id: topTimerRow
-
-        state: "FOCUS-SEC"
-        timerOn: analogTimer.timerOn;
-        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 || timerAnimationContainer.state == "SCROLLED" || buttonTimer.state == "DONE"
-                PropertyChanges { target: topTimerRow; secondsLabelFlag: false }
-                PropertyChanges { target: topTimerRow; minutesLabelFlag: false }
-                PropertyChanges { target: topTimerRow; hoursLabelFlag: false }
-            }
-        ]
-    }
-
     AnimationContainer {
         id: timerAnimationContainer
 
-        // 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.
-        initYPos: units.gu(8);
-        finalYPos: -listPreset.height
+        initYPos: units.gu(0);
+        finalYPos: -listTimerPreset.height
 
-        anchors { left: parent.left; top: topTimerRow.bottom; right: parent.right; bottom: parent.bottom }
+        anchors.fill: parent
 
         onStateChanged: if (state == "SCROLLED") listTimerPreset.currentIndex = -1
 
+        // Label to show the current time
+        Item {
+            id: labelContainer;
+
+            z: analogTimer.z + 1;
+            width: analogTimer.innerDimension; height: width;
+            anchors.centerIn: analogTimer;
+
+            Label {
+                id: labelTimer
+                objectName: "labelTimer"
+
+                anchors.centerIn: parent
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                color: Constants.brightWhite;
+
+                fontSize: "x-large"
+                text: labelTimer.text = intervalToString(hours, minutes, seconds);
+            }
+        }
+
         // Main element which draws the timer face and manages time.
         AnalogTimer {
             id: analogTimer
 
-            anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
-
-            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;
-        }
-
-        // Multi-function button (Preset, Start, Stop, Done)
-        Button {
-            id: buttonTimer
-
-            width: units.gu(12); height: units.gu(5)
-            anchors { top: analogTimer.bottom; topMargin: units.gu(8); horizontalCenter: parent.horizontalCenter }
-            color: Constants.brightWhite
-            visible: timerPage.state == "ADDPRESET" ? false : true;
-
-            text: i18n.tr("Presets")
+            anchors { top: parent.top; topMargin: units.gu(9); horizontalCenter: parent.horizontalCenter }
+            inProgressFlag: (timerOn == true || analogTimer.state == "DONE") ? true : false;
+            onSecondsChanged: labelTimer.text = intervalToString(hours, minutes, seconds);
+            onMinutesChanged: labelTimer.text = intervalToString(hours, minutes, seconds);
+            onHoursChanged: labelTimer.text = intervalToString(hours, minutes, seconds);
 
             states:[
-                State {
-                    name: "START"
-                    when: ((seconds != 0 || minutes != 0 || hours != 0) && timerOn == false)
-                    PropertyChanges { target: buttonTimer; color: Constants.ubuntuOrange; text: i18n.tr("Start") }
-                    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: analogTimer; timerHandColor: Constants.ubuntuOrange }
-                    PropertyChanges { target: analogTimer; glowColor: Constants.analogClockFaceGlowColor }
-                },
-
+                State { name: "STOP" },
                 State {
                     name: "DONE"
                     when: (totalTime == -1 && timerOn == false)
-                    PropertyChanges { target: buttonTimer; color: Constants.green; text: i18n.tr("Done") }
-                    PropertyChanges { target: analogTimer; timerHandColor: Constants.green }
                     PropertyChanges { target: analogTimer; glowColor: Constants.analogClockFaceGlowColorTimerDown }
                 }
             ]
 
             onClicked: {
-                switch (buttonTimer.state) {
+                switch (analogTimer.state) {
+
                 case "":
-                    timerAnimationContainer.swipeView()
-                    break;
-
-                case "START":
                     totalTime = totalSeconds(hours, minutes, seconds);
                     analogTimer.startTime = new Date();
                     timerOn = true;
@@ -205,12 +153,14 @@
                     break;
 
                 case "STOP":
-                    timerOn = false;
+                    timerOn = false;                    
                     reset();
+                    state = "";
                     break;
 
                 case "DONE":
                     reset();
+                    state = "";
                     break;
                 }
             }
@@ -222,25 +172,35 @@
 
             height: childrenRect.height
             visible: timerPage.state == "ADDPRESET" ? false : true;
-            anchors { left: parent.left; right: parent.right; top: buttonTimer.bottom; topMargin: units.gu(5) }
-
-            ListItem.Divider { }
-
-            ListItem.Header { text: i18n.tr("Saved Presets") }
+            anchors { left: parent.left; right: parent.right; top: analogTimer.bottom; topMargin: units.gu(13) }
+
+            ListItem.ThinDivider { }
+
+            ListItem.Header {
+                Label {
+                    text: i18n.tr("Presets")
+                    anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
+                    fontSize: "medium"
+                }
+            }
 
             ListView {
                 id: listTimerPreset
 
                 anchors { left: parent.left; right: parent.right }
-                height: units.gu(35)
+                height: units.gu(21)
                 model: presetModel
                 currentIndex: -1
 
                 delegate: ListItem.Standard {
-                    text: label
+                    Label {
+                        fontSize: "large";
+                        text: label
+                        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(3) }
+                    }
 
                     Label {
-                        fontSize: "medium"
+                        fontSize: "large"
                         text: getstringTimer(seconds);
                         anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: units.gu(2) }
                     }
@@ -259,8 +219,7 @@
                     }
 
                     onClicked: {
-                        if (!timerOn) {
-                            buttonTimer.state = "START";
+                        if (!timerOn) {                            
                             analogTimer.ssToTime(seconds);
                             listTimerPreset.currentIndex = index
                         }
@@ -275,18 +234,17 @@
 
             width: units.gu(12); height: units.gu(12)
             radius: width / 2
-            anchors.centerIn: analogTimer
-            border.color: Constants.normalGrey
-            color: "#F8F8F8"
+            anchors.centerIn: analogTimer            
+            color: "transparent"
             antialiasing: true
             visible: false
 
             Label {
                 id: addPresetTextDone
 
-                anchors.centerIn: parent
+                //anchors.centerIn: parent
                 color: Constants.green
-                fontSize: "large"
+                fontSize: "x-large"
 
                 text: i18n.tr("DONE")
             }