Merge lp:~nik90/ubuntu-clock-app/13-next-alarm-bottomedge into lp:ubuntu-clock-app

[Nekhelesh Ramananthan]

Dynamically sets the bottom edge title with the time to the next active alarm.

Dynamically sets the bottom edge title with the time to the next active alarm.

[lp:~nik90/ubuntu-clock-app/13-next-alarm-bottomedge]

110. By Nekhelesh Ramananthan on 2014-10-05

Fixed failing qml tests

111. By Nekhelesh Ramananthan on 2014-10-05

merged pre-requisite branch changes

112. By Nekhelesh Ramananthan on 2014-10-05

Added unit tests for bottom edge title

113. By Nekhelesh Ramananthan on 2014-10-06

Split qml unit test into smaller unit test for better debugging when a test fails

114. By Nekhelesh Ramananthan on 2014-10-06

Merged pre-requisite branch changes

115. By Nekhelesh Ramananthan on 2014-10-09

merged prerequisite branch

116. By Nekhelesh Ramananthan on 2014-10-09

updated changelog

117. By Nekhelesh Ramananthan on 2014-10-09

Updated if loop according to riccardo's suggestion

118. By Nekhelesh Ramananthan on 2014-10-09

merged prerequisite branch

119. By Nekhelesh Ramananthan on 2014-10-10

Fixed AP test

Unmerged revisions

=== modified file 'app/alarm/AlarmDelegate.qml'
--- app/alarm/AlarmDelegate.qml	2014-09-03 22:51:48 +0000
+++ app/alarm/AlarmDelegate.qml	2014-10-05 15:35:22 +0000
@@ -23,6 +23,8 @@
 ListItemWithActions {
     id: root
 
+    property var localTime
+
     width: parent ? parent.width : 0
     height: units.gu(6)
     color: "Transparent"
@@ -39,6 +41,7 @@
 
         fontSize: "medium"
         text: Qt.formatTime(date)
+        opacity: model.enabled ? 1.0 : 0.8
     }
 
     Column {
@@ -70,9 +73,9 @@
 
             fontSize: "xx-small"
             width: parent.width
-            visible: type === Alarm.Repeating || _internalTimerLoader.sourceComponent != undefined
             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-            text: alarmUtils.format_day_string(daysOfWeek, type)
+            text: type === Alarm.Repeating ? alarmUtils.format_day_string(daysOfWeek, type)
+                                           : alarmUtils.get_time_to_next_alarm(model.date - localTime)
         }
     }
 
@@ -126,35 +129,8 @@
                 if (model.status === Alarm.Ready) {
                     alarmStatus.checked = model.enabled;
 
-                    if(alarmStatus.checked) {
-                        var timeObject = alarmUtils.get_time_to_next_alarm(model.date - new Date())
-                        var alarmETA
-
-                        // TRANSLATORS: the first argument is the number of days,
-                        // followed by hour and minute (eg. in 1d 20h 3m)
-                        if(timeObject.days) {
-                            alarmETA = i18n.tr("in %1d %1h %2m")
-                            .arg(timeObject.days)
-                            .arg(timeObject.hours)
-                            .arg(timeObject.minutes)
-                        }
-
-                        // TRANSLATORS: the first argument is the number of
-                        // hours followed by the minutes (eg. in 4h 3m)
-                        else if (timeObject.hours) {
-                            alarmETA = i18n.tr("in %1h %2m")
-                            .arg(timeObject.hours)
-                            .arg(timeObject.minutes)
-                        }
-
-                        // TRANSLATORS: the argument is the number of
-                        // minutes to the alarm (eg. in 3m)
-                        else {
-                            alarmETA = i18n.tr("in %1m")
-                            .arg(timeObject.minutes)
-                        }
-
-                        alarmSubtitle.text = alarmETA
+                    if(alarmStatus.checked && type === Alarm.Repeating) {
+                        alarmSubtitle.text = alarmUtils.get_time_to_next_alarm(model.date - localTime)
                         _internalTimerLoader.sourceComponent = _internalTimerComponent
                     }
                 }

=== modified file 'app/alarm/AlarmList.qml'
--- app/alarm/AlarmList.qml	2014-09-25 11:26:43 +0000
+++ app/alarm/AlarmList.qml	2014-10-05 15:35:22 +0000
@@ -21,13 +21,13 @@
 import Ubuntu.Components.ListItems 1.0 as ListItem
 import "../components"
 import "../upstreamcomponents"
-import "../components/Utils.js" as Utils
 
 MultipleSelectionListView {
     id: alarmListView
     objectName: "alarmListView"
 
     property var _currentSwipedItem: null
+    property var localTime
 
     function _updateSwipeState(item)
     {
@@ -51,15 +51,12 @@
     clip: true
     anchors.fill: parent
 
-    AlarmUtils {
-        id: alarmUtils
-    }
-
     listDelegate: AlarmDelegate {
         id: alarmDelegate
         objectName: "alarm" + index
 
         property var removalAnimation
+        localTime: alarmListView.localTime
 
         function remove() {
             removalAnimation.start()

=== modified file 'app/alarm/AlarmPage.qml'
--- app/alarm/AlarmPage.qml	2014-09-26 12:24:11 +0000
+++ app/alarm/AlarmPage.qml	2014-10-05 15:35:22 +0000
@@ -23,10 +23,12 @@
 Page {
     id: alarmPage
 
+    property var alarmModel
+
     title: i18n.tr("Alarms")
     objectName: 'AlarmPage'
 
-    Component.onCompleted: console.log("Alarm Page loaded")
+    Component.onCompleted: console.log("[LOG]: Alarm Page loaded")
 
     flickable: null
 
@@ -127,6 +129,7 @@
         id: alarmListView
         listModel: alarmModel
         anchors.fill: parent
+        localTime: clockTime
     }
 
     EmptyState {

=== modified file 'app/alarm/AlarmUtils.qml'
--- app/alarm/AlarmUtils.qml	2014-09-03 22:36:07 +0000
+++ app/alarm/AlarmUtils.qml	2014-10-05 15:35:22 +0000
@@ -50,21 +50,65 @@
         }
     }
 
-    function get_time_to_next_alarm ( datetime_offset ) {
-        // increase by a minute, so we could make a nicer time
-        // to the next alarm, otherwise a minute always missing
-        // which makes it look odd
-        datetime_offset += 60000;
-
-        var days_in_offset = Math.floor( datetime_offset / ( 3600000 * 24 ) );
-        var hours_in_offset = Math.floor( datetime_offset / 3600000 % 24 );
-        var minutes_in_offset = Math.floor( datetime_offset / 60000 % 60 );
-
-        return {
-            days : days_in_offset,
-            hours : hours_in_offset,
-            minutes : minutes_in_offset
-        }
+    // Function to set the bottom edge title with "Next Active in..."
+    function set_bottom_edge_title(alarmModel, clockTime) {
+        var bottom_edge_title = i18n.tr("No active alarms")
+
+        /*
+         Check if alarm model received is valid and has saved alarms and only
+         then proceed to find the next active alarm.
+        */
+        if (alarmModel && alarmModel.count) {
+            var activeAlarmDate = _get_next_active_alarm(alarmModel, clockTime)
+
+            // Return immediately if there are no active alarms found
+            if (!activeAlarmDate)  {
+                return bottom_edge_title
+            }
+        }
+
+        else {
+            return bottom_edge_title
+        }
+
+        bottom_edge_title = i18n.tr("Next Alarm %1").arg(get_time_to_next_alarm(activeAlarmDate - clockTime))
+        return bottom_edge_title
+    }
+
+    // Function to format the time to next alarm into a string
+    function get_time_to_next_alarm(totalTime) {
+        if(totalTime < 0) {
+            return i18n.tr("Alarm Passed")
+        }
+
+        var timeObject = _split_time(totalTime);
+        var alarmETA
+
+        // TRANSLATORS: the first argument is the number of days,
+        // followed by hour and minute (eg. in 1d 20h 3m)
+        if(timeObject.days) {
+            alarmETA = i18n.tr("in %1d %2h %3m")
+            .arg(timeObject.days)
+            .arg(timeObject.hours)
+            .arg(timeObject.minutes)
+        }
+
+        // TRANSLATORS: the first argument is the number of
+        // hours followed by the minutes (eg. in 4h 3m)
+        else if (timeObject.hours) {
+            alarmETA = i18n.tr("in %1h %2m")
+            .arg(timeObject.hours)
+            .arg(timeObject.minutes)
+        }
+
+        // TRANSLATORS: the argument is the number of
+        // minutes to the alarm (eg. in 3m)
+        else {
+            alarmETA = i18n.tr("in %1m")
+            .arg(timeObject.minutes)
+        }
+
+        return alarmETA;
     }
 
     // Function return the alarm dayOfWeek according to the day provided
@@ -84,6 +128,45 @@
       INTERNAL FUNCTIONS
     */
 
+    /*
+     Function to get the next active alarm. This function ignores alarms in the
+     past and also iteratively looks through every alarm since the alarm model
+     does not always list the active alarms in chronological order.
+    */
+    function _get_next_active_alarm(alarmModel, clockTime) {
+        var activeAlarmDate = undefined
+
+        for (var i=0; i<alarmModel.count; i++) {
+            var currentAlarm = alarmModel.get(i)
+            if (currentAlarm.enabled && currentAlarm.date > clockTime) {
+                if (activeAlarmDate === undefined ||
+                        currentAlarm.date < activeAlarmDate) {
+                    activeAlarmDate = currentAlarm.date
+                }
+            }
+        }
+
+        return activeAlarmDate
+    }
+
+    // Function to split time (in ms) into days, hours and minutes
+    function _split_time(totalTime) {
+        // increase by a minute, so we could make a nicer time
+        // to the next alarm, otherwise a minute always missing
+        // which makes it look odd
+        totalTime += 60000;
+
+        var days_in_offset = Math.floor(totalTime / ( 3600000 * 24));
+        var hours_in_offset = Math.floor(totalTime / 3600000 % 24);
+        var minutes_in_offset = Math.floor(totalTime / 60000 % 60);
+
+        return {
+            days : days_in_offset,
+            hours : hours_in_offset,
+            minutes : minutes_in_offset
+        }
+    }
+
     // Function to determine the locale's weekdays value
     function _get_weekdays() {
         var weekDays = 0

=== modified file 'app/alarm/EditAlarmPage.qml'
--- app/alarm/EditAlarmPage.qml	2014-09-25 11:26:43 +0000
+++ app/alarm/EditAlarmPage.qml	2014-10-05 15:35:22 +0000
@@ -23,7 +23,6 @@
 import Ubuntu.Components.Pickers 1.0
 import Ubuntu.Components.ListItems 1.0 as ListItem
 import "../components"
-import "../components/Utils.js" as Utils
 
 Page {
     id: _addAlarmPage
@@ -177,7 +176,7 @@
 
         onErrorChanged: {
             if (error !== Alarm.NoError) {
-                Utils.log(debugMode, "Error saving alarm, code: " + error)
+                console.log("[LOG]: Error saving alarm, code: " + error)
             }
         }
 

=== modified file 'app/clock/ClockPage.qml'
--- app/clock/ClockPage.qml	2014-09-26 11:36:12 +0000
+++ app/clock/ClockPage.qml	2014-10-05 15:35:22 +0000
@@ -17,12 +17,11 @@
  */
 
 import QtQuick 2.3
-import U1db 1.0 as U1db
 import Ubuntu.Components 1.1
+import "../alarm"
 import "../components"
 import "../upstreamcomponents"
 import "../worldclock"
-import "../components/Utils.js" as Utils
 
 PageWithBottomEdge {
     id: _clockPage
@@ -31,15 +30,32 @@
     // Property to keep track of the clock mode
     property alias isDigital: clock.isDigital
 
+    // Property to keep track of the clock time
+    property alias clockTime: clock.analogTime
+
+    property var alarmModel
+
     flickable: null
-
-    Component.onCompleted: Utils.log(debugMode, "Clock Page loaded")
+    bottomEdgeTitle: alarmUtils.set_bottom_edge_title(alarmModel, clockTime)
+
+    Component.onCompleted: {
+        console.log("[LOG]: Clock Page loaded")
+        _clockPage.setBottomEdgePage(Qt.resolvedUrl("../alarm/AlarmPage.qml"), { alarmModel: alarmModel })
+    }
+
+    AlarmUtils {
+        id: alarmUtils
+    }
 
     Flickable {
         id: _flickable
 
         Component.onCompleted: otherElementsStartUpAnimation.start()
 
+        onFlickStarted: {
+            forceActiveFocus()
+        }
+
         anchors.fill: parent
         contentWidth: parent.width
         contentHeight: clock.height + date.height + locationRow.height

=== modified file 'app/clock/MainClock.qml'
--- app/clock/MainClock.qml	2014-08-24 12:47:50 +0000
+++ app/clock/MainClock.qml	2014-10-05 15:35:22 +0000
@@ -17,7 +17,6 @@
  */
 
 import QtQuick 2.3
-import DateTime 1.0
 import Ubuntu.Components 1.1
 import "../components"
 
@@ -30,44 +29,6 @@
 
     isMainClock: true
 
-    Connections {
-        target: clockApp
-        onApplicationStateChanged: {
-            localTimeSource.update()
-        }
-    }
-
-    DateTime {
-        id: localTimeSource
-        updateInterval: isDigital ? 1000 : 10
-    }
-
-    /*
-     Create a new Date() object and pass the date, month, year, hour, minute
-     and second received from the DateTime plugin manually to ensure the
-     timezone info is set correctly.
-
-     Javascript Month is 0-11 while QDateTime month is 1-12. Hence the -1
-     is required.
-    */
-
-    /*
-      FIXME: When the upstream QT bug at
-      https://bugreports.qt-project.org/browse/QTBUG-40275 is fixed it will be
-      possible to receive a datetime object directly instead of using this hack.
-    */
-    analogTime: new Date
-                (
-                    localTimeSource.localDateString.split(":")[0],
-                    localTimeSource.localDateString.split(":")[1]-1,
-                    localTimeSource.localDateString.split(":")[2],
-                    localTimeSource.localTimeString.split(":")[0],
-                    localTimeSource.localTimeString.split(":")[1],
-                    localTimeSource.localTimeString.split(":")[2],
-                    localTimeSource.localTimeString.split(":")[3]
-                )
-    time: Qt.formatTime(analogTime)
-
     isDigital: clockModeDocument.contents.digitalMode ? true : false
 
     Component.onCompleted: {

=== modified file 'app/components/Clock.qml'
--- app/components/Clock.qml	2014-09-06 15:16:43 +0000
+++ app/components/Clock.qml	2014-10-05 15:35:22 +0000
@@ -18,7 +18,6 @@
 
 import QtQuick 2.3
 import Ubuntu.Components 1.1
-import "Utils.js" as Utils
 
 /*
  Generic clock component which has a digital and analog mode. A flip animation
@@ -148,6 +147,7 @@
             enabled: isMainClock
             anchors.fill: parent
             onClicked: {
+                forceActiveFocus()
                 clockFlipAnimation.start()
             }
         }

=== removed file 'app/components/Utils.js'
--- app/components/Utils.js	2014-07-17 12:21:45 +0000
+++ app/components/Utils.js	1970-01-01 00:00:00 +0000
@@ -1,25 +0,0 @@
-/*
- * Copyright (C) 2014 Canonical Ltd
- *
- * This file is part of Ubuntu Clock App
- *
- * Ubuntu Clock App 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.
- *
- * Ubuntu Clock App 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/>.
- */
-
-.pragma library
-
-function log (debugMode, message) {
-    if (debugMode) {
-        console.log("[LOG]" + message)
-    }
-}

=== modified file 'app/ubuntu-clock-app.qml'
--- app/ubuntu-clock-app.qml	2014-08-26 20:20:37 +0000
+++ app/ubuntu-clock-app.qml	2014-10-05 15:35:22 +0000
@@ -17,12 +17,11 @@
  */
 
 import QtQuick 2.3
+import DateTime 1.0
 import U1db 1.0 as U1db
 import Ubuntu.Components 1.1
 import "clock"
-import "alarm"
 import "components"
-import "components/Utils.js" as Utils
 
 MainView {
     id: clockApp
@@ -30,9 +29,6 @@
     // Property to store the state of an application (active or suspended)
     property bool applicationState: Qt.application.active
 
-    // Property to enable/disable the debug mode to show more console output
-    property bool debugMode: true
-
     // objectName for functional testing purposes (autopilot-qt5)
     objectName: "clock"
 
@@ -77,7 +73,16 @@
 
     AlarmModel {
         id: alarmModel
-        Component.onCompleted: Utils.log(debugMode, "Alarm Database loaded")
+        Component.onCompleted: console.log("[LOG]: Alarm Database loaded")
+    }
+
+    DateTime {
+        id: localTimeSource
+        updateInterval: clockModeDocument.contents.digitalMode ? 1000 : 10
+    }
+
+    onApplicationStateChanged: {
+        localTimeSource.update()
     }
 
     PageStack {
@@ -97,11 +102,31 @@
             */
 
             /*
-              #TODO: The bottom edge title should reflect the time to the next
-              alarm. For instance it should read "Next alarm in 9h23m".
-            */
-            bottomEdgeTitle: i18n.tr("Alarms")
-            bottomEdgePageComponent: AlarmPage {}
+             Create a new Date() object and pass the date, month, year, hour, minute
+             and second received from the DateTime plugin manually to ensure the
+             timezone info is set correctly.
+
+             Javascript Month is 0-11 while QDateTime month is 1-12. Hence the -1
+             is required.
+            */
+
+            /*
+              FIXME: When the upstream QT bug at
+              https://bugreports.qt-project.org/browse/QTBUG-40275 is fixed it will be
+              possible to receive a datetime object directly instead of using this hack.
+            */
+
+            alarmModel: alarmModel
+            clockTime: new Date
+                       (
+                           localTimeSource.localDateString.split(":")[0],
+                           localTimeSource.localDateString.split(":")[1]-1,
+                           localTimeSource.localDateString.split(":")[2],
+                           localTimeSource.localTimeString.split(":")[0],
+                           localTimeSource.localTimeString.split(":")[1],
+                           localTimeSource.localTimeString.split(":")[2],
+                           localTimeSource.localTimeString.split(":")[3]
+                       )
         }
     }
 }

=== modified file 'app/upstreamcomponents/PageWithBottomEdge.qml'
--- app/upstreamcomponents/PageWithBottomEdge.qml	2014-09-20 10:47:21 +0000
+++ app/upstreamcomponents/PageWithBottomEdge.qml	2014-10-05 15:35:22 +0000
@@ -62,7 +62,7 @@
 
 */
 
-import QtQuick 2.3
+import QtQuick 2.2
 import Ubuntu.Components 1.1
 
 Page {
@@ -71,7 +71,7 @@
     property alias bottomEdgePageComponent: edgeLoader.sourceComponent
     property alias bottomEdgePageSource: edgeLoader.source
     property alias bottomEdgeTitle: tipLabel.text
-    property alias bottomEdgeEnabled: bottomEdge.visible
+    property bool bottomEdgeEnabled: true
     property int bottomEdgeExpandThreshold: page.height * 0.2
     property int bottomEdgeExposedArea: bottomEdge.state !== "expanded" ? (page.height - bottomEdge.y - bottomEdge.tipHeight) : _areaWhenExpanded
     property bool reloadBottomEdgePage: true
@@ -87,6 +87,9 @@
     signal bottomEdgeReleased()
     signal bottomEdgeDismissed()
 
+    function giveFocus() {
+        tip.forceActiveFocus()
+    }
 
     function showBottomEdgePage(source, properties)
     {
@@ -142,13 +145,123 @@
         z: 1
     }
 
-    Timer {
-        id: hideIndicator
-
-        interval: 3000
-        running: true
-        repeat: false
-        onTriggered: tip.hiden = true
+    UbuntuShape {
+        id: tip
+        objectName: "bottomEdgeTip"
+
+        property bool hiden: (activeFocus === false) ||
+                             ((bottomEdge.y - units.gu(1)) < tip.y)
+
+        enabled: mouseArea.enabled
+        visible: page.bottomEdgeEnabled
+        anchors {
+            bottom: parent.bottom
+            horizontalCenter: bottomEdge.horizontalCenter
+            bottomMargin: hiden ? - height + units.gu(1) : -units.gu(1)
+            Behavior on bottomMargin {
+                SequentialAnimation {
+                    // wait some msecs in case of the focus change again, to avoid flickering
+                    PauseAnimation {
+                        duration: 300
+                    }
+                    UbuntuNumberAnimation {
+                        duration: UbuntuAnimation.SnapDuration
+                    }
+                }
+            }
+        }
+
+        z: 1
+        width: tipLabel.paintedWidth + units.gu(6)
+        height: bottomEdge.tipHeight + units.gu(1)
+        color: Theme.palette.normal.overlay
+        Label {
+            id: tipLabel
+
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+            }
+            height: bottomEdge.tipHeight
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            opacity: tip.hiden ? 0.0 : 1.0
+            Behavior on opacity {
+                UbuntuNumberAnimation {
+                    duration: UbuntuAnimation.SnapDuration
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: shadow
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        height: units.gu(1)
+        z: 1
+        opacity: 0.0
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "transparent" }
+            GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        property real previousY: -1
+        property string dragDirection: "None"
+
+        preventStealing: true
+        drag {
+            axis: Drag.YAxis
+            target: bottomEdge
+            minimumY: bottomEdge.pageStartY
+            maximumY: page.height
+        }
+        enabled: edgeLoader.status == Loader.Ready
+        visible: page.bottomEdgeEnabled
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        height: bottomEdge.tipHeight
+        z: 1
+
+        onReleased: {
+            page.bottomEdgeReleased()
+            if ((dragDirection === "BottomToTop") &&
+                    bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
+                bottomEdge.state = "expanded"
+            } else {
+                bottomEdge.state = "collapsed"
+            }
+            previousY = -1
+            dragDirection = "None"
+        }
+
+        onPressed: {
+            previousY = mouse.y
+            tip.forceActiveFocus()
+        }
+
+        onMouseYChanged: {
+            var yOffset = previousY - mouseY
+            // skip if was a small move
+            if (Math.abs(yOffset) <= units.gu(2)) {
+                return
+            }
+            previousY = mouseY
+            dragDirection = yOffset > 0 ? "BottomToTop" : "TopToBottom"
+        }
     }
 
     FakeHeader {
@@ -177,7 +290,7 @@
 
         z: 1
         color: Theme.palette.normal.background
-        parent: page
+        clip: true
         anchors {
             left: parent.left
             right: parent.right
@@ -185,99 +298,7 @@
         height: page.height
         y: height
 
-        UbuntuShape {
-            id: tip
-            objectName: "bottomEdgeTip"
-
-            property bool hiden: false
-
-            readonly property double visiblePosition: (page.height - bottomEdge.y) < units.gu(1) ? -bottomEdge.tipHeight + (page.height - bottomEdge.y) : 0
-            readonly property double invisiblePosition: (page.height - bottomEdge.y) < units.gu(1) ? -units.gu(1) : 0
-
-            z: -1
-            anchors.horizontalCenter: parent.horizontalCenter
-            y: hiden ? invisiblePosition : visiblePosition
-
-            width: tipLabel.paintedWidth + units.gu(6)
-            height: bottomEdge.tipHeight + units.gu(1)
-            color: Theme.palette.normal.overlay
-            Label {
-                id: tipLabel
-
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                }
-                height: bottomEdge.tipHeight
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-                opacity: tip.hiden ? 0.0 : 1.0
-                Behavior on opacity {
-                    UbuntuNumberAnimation {
-                        duration: UbuntuAnimation.SnapDuration
-                    }
-                }
-            }
-            Behavior on y {
-                UbuntuNumberAnimation {
-                    duration: UbuntuAnimation.SnapDuration
-                }
-            }
-        }
-
-        Rectangle {
-            id: shadow
-
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
-            height: units.gu(1)
-            y: -height
-            z: -2
-            opacity: 0.0
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "transparent" }
-                GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
-            }
-        }
-
-        MouseArea {
-            id: mouseArea
-
-            preventStealing: true
-            drag {
-                axis: Drag.YAxis
-                target: bottomEdge
-                minimumY: bottomEdge.pageStartY
-                maximumY: page.height
-                threshold: 100
-            }
-
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
-            height: bottomEdge.tipHeight
-            y: -height
-
-            onReleased: {
-                page.bottomEdgeReleased()
-                if (bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
-                    bottomEdge.state = "expanded"
-                } else {
-                    bottomEdge.state = "collapsed"
-                    bottomEdge.y = bottomEdge.height
-                }
-            }
-
-            onClicked: {
-                tip.hiden = false
-                hideIndicator.restart()
-            }
-        }
-
+        visible: !page.isCollapsed
         state: "collapsed"
         states: [
             State {
@@ -290,14 +311,6 @@
                     target: fakeHeader
                     y: -fakeHeader.height
                 }
-                PropertyChanges {
-                    target: tip
-                    opacity: 1.0
-                }
-                PropertyChanges {
-                    target: hideIndicator
-                    running: true
-                }
             },
             State {
                 name: "expanded"
@@ -309,10 +322,6 @@
                     target: fakeHeader
                     y: 0
                 }
-                PropertyChanges {
-                    target: hideIndicator
-                    running: false
-                }
             },
             State {
                 name: "floating"
@@ -321,14 +330,6 @@
                     target: shadow
                     opacity: 1.0
                 }
-                PropertyChanges {
-                    target: hideIndicator
-                    running: false
-                }
-                PropertyChanges {
-                    target: tip
-                    hiden: false
-                }
             }
         ]
 
@@ -336,18 +337,35 @@
             Transition {
                 to: "expanded"
                 SequentialAnimation {
+                    alwaysRunToEnd: true
                     ParallelAnimation {
-                        UbuntuNumberAnimation {
+                        SmoothedAnimation {
                             target: bottomEdge
                             property: "y"
-                            duration: UbuntuAnimation.SlowDuration
+                            duration: UbuntuAnimation.FastDuration
+                            easing.type: Easing.Linear
                         }
-                        UbuntuNumberAnimation {
+                        SmoothedAnimation {
                             target: fakeHeader
                             property: "y"
-                            duration: UbuntuAnimation.SlowDuration
+                            duration: UbuntuAnimation.FastDuration
+                            easing.type: Easing.Linear
                         }
                     }
+                    SmoothedAnimation {
+                        target: edgeLoader
+                        property: "anchors.topMargin"
+                        to: - units.gu(4)
+                        duration: UbuntuAnimation.FastDuration
+                        easing.type: Easing.Linear
+                    }
+                    SmoothedAnimation {
+                        target: edgeLoader
+                        property: "anchors.topMargin"
+                        to: 0
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasing
+                    }
                     ScriptAction {
                         script: page._pushPage()
                     }
@@ -357,6 +375,8 @@
                 from: "expanded"
                 to: "collapsed"
                 SequentialAnimation {
+                    alwaysRunToEnd: true
+
                     ScriptAction {
                         script: {
                             Qt.inputMethod.hide()
@@ -366,12 +386,12 @@
                         }
                     }
                     ParallelAnimation {
-                        UbuntuNumberAnimation {
+                        SmoothedAnimation {
                             target: bottomEdge
                             property: "y"
                             duration: UbuntuAnimation.SlowDuration
                         }
-                        UbuntuNumberAnimation {
+                        SmoothedAnimation {
                             target: fakeHeader
                             property: "y"
                             duration: UbuntuAnimation.SlowDuration
@@ -382,14 +402,14 @@
                             // destroy current bottom page
                             if (page.reloadBottomEdgePage) {
                                 edgeLoader.active = false
+                            } else {
+                                tip.forceActiveFocus()
                             }
 
                             // notify
                             page.bottomEdgeDismissed()
 
                             edgeLoader.active = true
-                            tip.hiden = false
-                            hideIndicator.restart()
                         }
                     }
                 }
@@ -404,30 +424,23 @@
             }
         ]
 
-        Item {
+        Loader {
+            id: edgeLoader
+
+            asynchronous: true
             anchors.fill: parent
-            clip: true
-
-            Loader {
-                id: edgeLoader
-
-                z: 1
-                active: true
-                asynchronous: true
-                anchors.fill: parent
-
-                //WORKAROUND: The SDK move the page contents down to allocate space for the header we need to avoid that during the page dragging
-                Binding {
-                    target: edgeLoader.status === Loader.Ready ? edgeLoader : null
-                    property: "anchors.topMargin"
-                    value:  edgeLoader.item && edgeLoader.item.flickable ? edgeLoader.item.flickable.contentY : 0
-                    when: !page.isReady
-                }
-
-                onLoaded: {
-                    if (page.isReady && edgeLoader.item.active !== true) {
-                        page._pushPage()
-                    }
+            //WORKAROUND: The SDK move the page contents down to allocate space for the header we need to avoid that during the page dragging
+            Binding {
+                target: edgeLoader.status === Loader.Ready ? edgeLoader : null
+                property: "anchors.topMargin"
+                value:  edgeLoader.item && edgeLoader.item.flickable ? edgeLoader.item.flickable.contentY : 0
+                when: !page.isReady
+            }
+
+            onLoaded: {
+                tip.forceActiveFocus()
+                if (page.isReady && edgeLoader.item.active !== true) {
+                    page._pushPage()
                 }
             }
         }

=== modified file 'app/worldclock/UserWorldCityList.qml'
--- app/worldclock/UserWorldCityList.qml	2014-08-24 12:47:50 +0000
+++ app/worldclock/UserWorldCityList.qml	2014-10-05 15:35:22 +0000
@@ -21,8 +21,6 @@
 import U1db 1.0 as U1db
 import Ubuntu.Components 1.1
 
-import "../components/Utils.js" as Utils
-
 Column {
     id: worldCityColumn
 

=== modified file 'tests/autopilot/ubuntu_clock_app/emulators.py'
--- tests/autopilot/ubuntu_clock_app/emulators.py	2014-09-12 19:44:18 +0000
+++ tests/autopilot/ubuntu_clock_app/emulators.py	2014-10-05 15:35:22 +0000
@@ -91,6 +91,8 @@
         self.bottomEdgePageLoaded.wait_for(True)
         try:
             action_item = self.wait_select_single(objectName='bottomEdgeTip')
+            action_item.hiden.wait_for(False)
+            action_item.enabled.wait_for(True)
             start_x = (action_item.globalRect.x +
                        (action_item.globalRect.width * 0.5))
             start_y = (action_item.globalRect.y +

=== modified file 'tests/unit/tst_alarm.qml'
--- tests/unit/tst_alarm.qml	2014-09-25 22:10:27 +0000
+++ tests/unit/tst_alarm.qml	2014-10-05 15:35:22 +0000
@@ -18,6 +18,7 @@
 
 import QtQuick 2.3
 import QtTest 1.0
+import DateTime 1.0
 import Ubuntu.Test 1.0
 import Ubuntu.Components 1.1
 import "../../app/alarm"
@@ -29,10 +30,26 @@
     height: units.gu(70)
     useDeprecatedToolbar: false
 
+    property var clockTime: new Date
+                            (
+                                localTimeSource.localDateString.split(":")[0],
+                                localTimeSource.localDateString.split(":")[1]-1,
+                                localTimeSource.localDateString.split(":")[2],
+                                localTimeSource.localTimeString.split(":")[0],
+                                localTimeSource.localTimeString.split(":")[1],
+                                localTimeSource.localTimeString.split(":")[2],
+                                localTimeSource.localTimeString.split(":")[3]
+                            )
+
     AlarmModel {
         id: alarmModel
     }
 
+    DateTime {
+        id: localTimeSource
+        updateInterval: 1000
+    }
+
     PageStack {
         id: pageStack
         Component.onCompleted: push(alarmPage)