Merge lp:~nik90/ubuntu-clock-app/custom-swipe-delete into lp:ubuntu-clock-app

[Nekhelesh Ramananthan]

Implemented custom swipe delete for user world clock and saved alarm list matching the address book app as specified by design.

This MP implements a custom swipe delete for the lists (world clock, alarm list) etc. The designers requested that it match the implementation of the address book. Hence I imported ListItemWithActions.qml from the address book app. So it is not necessary to review that file since no changes were made to it.

All upstream components are placed inside the upstreamcomponents folder for easier identification and replacement when they are available in the SDK.

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

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

http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/91/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1229/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/91/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/91/rebuild

review: Needs Fixing (continuous-integration)

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

FAILED: Continuous integration, rev:41
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/96/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1246/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/96/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/96/rebuild

review: Needs Fixing (continuous-integration)

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

FAILED: Continuous integration, rev:43
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/118/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1326/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/118/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/118/rebuild

review: Needs Fixing (continuous-integration)

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

FAILED: Continuous integration, rev:44
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/119/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1329/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/119/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/119/rebuild

review: Needs Fixing (continuous-integration)

[lp:~nik90/ubuntu-clock-app/custom-swipe-delete]

48. By Nekhelesh Ramananthan on 2014-08-07

removed unnecessary import

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

FAILED: Continuous integration, rev:48
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/123/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic/1391/console
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-utopic-amd64-ci/123/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-dev-ubuntu-clock-app-utopic-3.0-ci/123/rebuild

review: Needs Fixing (continuous-integration)

[Nicholas Skaggs (nskaggs)]

review: Approve

[lp:~nik90/ubuntu-clock-app/custom-swipe-delete]

49. By Nekhelesh Ramananthan on 2014-08-08

Merged trunk

=== added file 'app/alarm/AlarmDelegate.qml'
--- app/alarm/AlarmDelegate.qml	1970-01-01 00:00:00 +0000
+++ app/alarm/AlarmDelegate.qml	2014-08-08 09:11:15 +0000
@@ -0,0 +1,104 @@
+/*
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import "../upstreamcomponents"
+
+ListItemWithActions {
+    id: root
+
+    height: units.gu(6)
+    width: parent ? parent.width : 0
+    color: "Transparent"
+
+    Item {
+        id: delegate
+
+        anchors.fill: parent
+
+        Label {
+            id: alarmTime
+            objectName: "listAlarmTime" + index
+
+            anchors {
+                top: alarmDetailsColumn.top
+                left: parent.left
+            }
+
+            fontSize: "medium"
+            text: Qt.formatTime(date)
+        }
+
+        Column {
+            id: alarmDetailsColumn
+
+            anchors {
+                left: alarmTime.right
+                right: alarmStatus.left
+                verticalCenter: parent.verticalCenter
+                margins: units.gu(1)
+            }
+
+            Label {
+                id: alarmLabel
+                objectName: "listAlarmLabel" + index
+
+                text: message
+                fontSize: "medium"
+                elide: Text.ElideRight
+                color: UbuntuColors.midAubergine
+            }
+
+            Label {
+                id: alarmSubtitle
+                objectName: "listAlarmSubtitle" + index
+
+                fontSize: "xx-small"
+                width: parent.width
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                text: alarmUtils.format_day_string(daysOfWeek)
+            }
+        }
+
+        Switch {
+            id: alarmStatus
+            objectName: "listAlarmStatus" + index
+
+            anchors {
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+
+            checked: enabled
+
+            /*
+             #TODO: Add the ability to enable/disable alarms using the
+             switch. At the moment it only shows the alarm status.
+             This was postponed since a similar implementation in the
+             old clock app caused it to loop. So if user clicks on the
+             switch, it disables and then re-enables the alarm again.
+            */
+        }
+    }
+
+    onItemClicked: {
+        mainStack.push(Qt.resolvedUrl("EditAlarmPage.qml"),
+                       {"isNewAlarm": false, "alarmIndex": index})
+    }
+}

=== modified file 'app/alarm/AlarmList.qml'
--- app/alarm/AlarmList.qml	2014-08-05 12:49:45 +0000
+++ app/alarm/AlarmList.qml	2014-08-08 09:11:15 +0000
@@ -63,87 +63,95 @@
         anchors.fill: parent
 
         Repeater {
+            id: alarmRepeater
+            objectName: "alarmListRepeater"
+
+            property var _currentSwipedItem: null
+
+            function _updateSwipeState(item)
+            {
+                if (item.swipping) {
+                    return
+                }
+
+                if (item.swipeState !== "Normal") {
+                    if (alarmRepeater._currentSwipedItem !== item) {
+                        if (alarmRepeater._currentSwipedItem) {
+                            alarmRepeater._currentSwipedItem.resetSwipe()
+                        }
+                        alarmRepeater._currentSwipedItem = item
+                    }
+                } else if (item.swipeState !== "Normal"
+                           && alarmRepeater._currentSwipedItem === item) {
+                    alarmRepeater._currentSwipedItem = null
+                }
+            }
+
             model: alarmListFlickable.model
-            objectName: "alarmListRepeater"
-            ListItem.Base {
+
+            delegate: AlarmDelegate {
+                id: alarmDelegate
                 objectName: "alarm" + index
 
-                Label {
-                    id: alarmTime
-                    objectName: "listAlarmTime" + index
-
-                    anchors {
-                        top: alarmDetailsColumn.top
-                        left: parent.left
-                        leftMargin: units.gu(0)
-                    }
-
-                    fontSize: "medium"
-                    text: Qt.formatTime(date)
-                }
-
-                Column {
-                    id: alarmDetailsColumn
-
-                    anchors {
-                        left: alarmTime.right
-                        right: alarmStatus.left
-                        verticalCenter: parent.verticalCenter
-                        margins: units.gu(1)
-                    }
-
-                    Label {
-                        id: alarmLabel
-                        objectName: "listAlarmLabel" + index
-
-                        text: message
-                        fontSize: "medium"
-                        elide: Text.ElideRight
-                        color: UbuntuColors.midAubergine
-                    }
-
-                    Label {
-                        id: alarmSubtitle
-                        objectName: "listAlarmSubtitle" + index
-
-                        fontSize: "xx-small"
-                        width: parent.width
-                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                        text: alarmUtils.format_day_string(daysOfWeek)
-                    }
-                }
-
-                Switch {
-                    id: alarmStatus
-                    objectName: "listAlarmStatus" + index
-
-                    anchors {
-                        right: parent.right
-                        verticalCenter: parent.verticalCenter
-                    }
-
-                    checked: enabled
-
-                    /*
-                      #TODO: Add the ability to enable/disable alarms using the
-                      switch. At the moment it only shows the alarm status.
-                      This was postponed since a similar implementation in the
-                      old clock app caused it to loop. So if user clicks on the
-                      switch, it disables and then re-enables the alarm again.
-                    */
-                }
-
-                removable: true
-                confirmRemoval: true
-
-                onItemRemoved: {
-                    var alarm = alarmModel.get(index)
-                    alarm.cancel()
-                }
-
-                onClicked: mainStack.push(Qt.resolvedUrl("EditAlarmPage.qml"),
-                                          {"isNewAlarm": false,
-                                              "alarmIndex": index})
+                property var removalAnimation
+
+                function remove() {
+                    removalAnimation.start()
+                }
+
+                onSwippingChanged: {
+                    alarmRepeater._updateSwipeState(alarmDelegate)
+                }
+
+                onSwipeStateChanged: {
+                    alarmRepeater._updateSwipeState(alarmDelegate)
+                }
+
+                leftSideAction: Action {
+                    iconName: "delete"
+                    text: i18n.tr("Delete")
+                    onTriggered: {
+                        alarmDelegate.remove()
+                    }
+                }
+
+                ListView.onRemove: ScriptAction {
+                    script: {
+                        if (alarmRepeater._currentSwipedItem
+                                === alarmDelegate) {
+                            alarmRepeater._currentSwipedItem = null
+                        }
+                    }
+                }
+
+                removalAnimation: SequentialAnimation {
+                    alwaysRunToEnd: true
+
+                    PropertyAction {
+                        target: alarmDelegate
+                        property: "ListView.delayRemove"
+                        value: true
+                    }
+
+                    UbuntuNumberAnimation {
+                        target: alarmDelegate
+                        property: "height"
+                        to: 1
+                    }
+
+                    PropertyAction {
+                        target: alarmDelegate
+                        property: "ListView.delayRemove"
+                        value: false
+                    }
+
+                    ScriptAction {
+                        script: {
+                            var alarm = alarmModel.get(index)
+                            alarm.cancel()
+                        }
+                    }
+                }
             }
         }
     }

=== modified file 'app/clock/ClockPage.qml'
--- app/clock/ClockPage.qml	2014-08-06 20:12:32 +0000
+++ app/clock/ClockPage.qml	2014-08-08 09:11:15 +0000
@@ -49,7 +49,7 @@
         anchors.fill: parent
         contentWidth: parent.width
         contentHeight: clock.height + date.height + locationRow.height
-                       + worldCityColumn.height + units.gu(20)
+                       + worldCityColumn.height + units.gu(14)
 
         PullToAdd {
             id: addCityButton
@@ -150,6 +150,8 @@
             id: worldCityColumn
             objectName: "worldCityColumn"
             opacity: settingsIcon.opacity
+            anchors.top: locationRow.bottom
+            anchors.topMargin: units.gu(4)
         }
 
         onDragEnded: {

=== added file 'app/upstreamcomponents/ListItemWithActions.qml'
--- app/upstreamcomponents/ListItemWithActions.qml	1970-01-01 00:00:00 +0000
+++ app/upstreamcomponents/ListItemWithActions.qml	2014-08-08 09:11:15 +0000
@@ -0,0 +1,371 @@
+/*
+ * Copyright (C) 2012-2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+Item {
+    id: root
+
+    property Action leftSideAction: null
+    property list<Action> rightSideActions
+    property double defaultHeight: units.gu(8)
+    property bool locked: false
+    property Action activeAction: null
+    property var activeItem: null
+    property bool triggerActionOnMouseRelease: false
+    property color color: Theme.palette.normal.background
+    property color selectedColor: "#E6E6E6"
+    property bool selected: false
+    property bool selectionMode: false
+    property alias internalAnchors: mainContents.anchors
+    default property alias contents: mainContents.children
+
+    readonly property double actionWidth: units.gu(5)
+    readonly property double leftActionWidth: units.gu(10)
+    readonly property double actionThreshold: actionWidth * 0.4
+    readonly property double threshold: 0.4
+    readonly property string swipeState: main.x == 0 ? "Normal" : main.x > 0 ? "LeftToRight" : "RightToLeft"
+    readonly property alias swipping: mainItemMoving.running
+
+    signal itemClicked(var mouse)
+    signal itemPressAndHold(var mouse)
+
+    function returnToBoundsRTL()
+    {
+        var actionFullWidth = actionWidth + units.gu(2)
+        var xOffset = Math.abs(main.x)
+        var index = Math.min(Math.floor(xOffset / actionFullWidth), rightSideActions.length)
+
+        if (index < 1) {
+            main.x = 0
+        } else if (index === rightSideActions.length) {
+            main.x = -rightActionsView.width
+        } else {
+            main.x = -(actionFullWidth * index)
+        }
+    }
+
+    function returnToBoundsLTR()
+    {
+        var finalX = leftActionWidth
+        if (main.x > (finalX * root.threshold))
+            main.x = finalX
+        else
+            main.x = 0
+    }
+
+    function returnToBounds()
+    {
+        if (main.x < 0) {
+            returnToBoundsRTL()
+        } else if (main.x > 0) {
+            returnToBoundsLTR()
+        }
+    }
+
+    function contains(item, point)
+    {
+        return (point.x >= item.x) && (point.x <= (item.x + item.width)) && (point.y >= item.y) && (point.y <= (item.y + item.height));
+    }
+
+    function getActionAt(point)
+    {
+        if (contains(leftActionView, point)) {
+            return leftSideAction
+        } else if (contains(rightActionsView, point)) {
+            var newPoint = root.mapToItem(rightActionsView, point.x, point.y)
+            for (var i = 0; i < rightActionsRepeater.count; i++) {
+                var child = rightActionsRepeater.itemAt(i)
+                if (contains(child, newPoint)) {
+                    return i
+                }
+            }
+        }
+        return -1
+    }
+
+    function updateActiveAction()
+    {
+        if ((main.x <= -root.actionWidth) &&
+            (main.x > -rightActionsView.width)) {
+            var actionFullWidth = actionWidth + units.gu(2)
+            var xOffset = Math.abs(main.x)
+            var index = Math.min(Math.floor(xOffset / actionFullWidth), rightSideActions.length)
+            index = index - 1
+            if (index > -1) {
+                root.activeItem = rightActionsRepeater.itemAt(index)
+                root.activeAction = root.rightSideActions[index]
+            }
+        } else {
+            root.activeAction = null
+        }
+    }
+
+    function resetSwipe()
+    {
+        main.x = 0
+    }
+
+    states: [
+        State {
+            name: "select"
+            when: selectionMode || selected
+            PropertyChanges {
+                target: selectionIcon
+                source: Qt.resolvedUrl("ListItemWithActionsCheckBox.qml")
+                anchors.leftMargin: units.gu(2)
+            }
+            PropertyChanges {
+                target: root
+                locked: true
+            }
+            PropertyChanges {
+                target: main
+                x: 0
+            }
+        }
+    ]
+
+    height: defaultHeight
+    clip: height !== defaultHeight
+
+    Rectangle {
+        id: leftActionView
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            right: main.left
+        }
+        width: root.leftActionWidth + actionThreshold
+        visible: leftSideAction
+        color: "red"
+
+        Icon {
+            anchors {
+                centerIn: parent
+                horizontalCenterOffset: actionThreshold / 2
+            }
+            name: leftSideAction ? leftSideAction.iconName : ""
+            color: Theme.palette.selected.field
+            height: units.gu(3)
+            width: units.gu(3)
+        }
+    }
+
+    Item {
+       id: rightActionsView
+
+       anchors {
+           top: main.top
+           left: main.right
+           leftMargin: units.gu(1)
+           bottom: main.bottom
+       }
+       visible: rightSideActions.length > 0
+       width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + actionThreshold : 0
+       Row {
+           anchors.fill: parent
+           spacing: units.gu(2)
+           Repeater {
+               id: rightActionsRepeater
+
+               model: rightSideActions
+               Item {
+                   property alias image: img
+
+                   anchors {
+                       top: parent.top
+                       bottom: parent.bottom
+                   }
+                   width: root.actionWidth
+
+                   Icon {
+                       id: img
+
+                       anchors.centerIn: parent
+                       width: units.gu(3)
+                       height: units.gu(3)
+                       name: iconName
+                       color: root.activeAction === modelData || !root.triggerActionOnMouseRelease ? UbuntuColors.lightAubergine : Theme.palette.selected.background
+                   }
+               }
+           }
+       }
+    }
+
+
+    Rectangle {
+        id: main
+        objectName: "mainItem"
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        width: parent.width
+        color: root.selected ? root.selectedColor : root.color
+
+        Loader {
+            id: selectionIcon
+
+            anchors {
+                left: main.left
+                verticalCenter: main.verticalCenter
+            }
+            width: (status === Loader.Ready) ? item.implicitWidth : 0
+            visible: (status === Loader.Ready) && (item.width === item.implicitWidth)
+            Behavior on width {
+                NumberAnimation {
+                    duration: UbuntuAnimation.SnapDuration
+                }
+            }
+        }
+
+
+        Item {
+            id: mainContents
+
+            anchors {
+                left: selectionIcon.right
+                leftMargin: units.gu(2)
+                top: parent.top
+                topMargin: units.gu(1)
+                right: parent.right
+                rightMargin: units.gu(2)
+                bottom: parent.bottom
+                bottomMargin: units.gu(1)
+            }
+        }
+
+        Behavior on x {
+            UbuntuNumberAnimation {
+                id: mainItemMoving
+
+                easing.type: Easing.OutElastic
+                duration: UbuntuAnimation.SlowDuration
+            }
+        }
+        Behavior on color {
+           ColorAnimation {}
+        }
+    }
+
+    SequentialAnimation {
+        id: triggerAction
+
+        property var currentItem: root.activeItem ? root.activeItem.image : null
+
+        running: false
+        ParallelAnimation {
+            UbuntuNumberAnimation {
+                target: triggerAction.currentItem
+                property: "opacity"
+                from: 1.0
+                to: 0.0
+                duration: UbuntuAnimation.SlowDuration
+                easing {type: Easing.InOutBack; }
+            }
+            UbuntuNumberAnimation {
+                target: triggerAction.currentItem
+                properties: "width, height"
+                from: units.gu(3)
+                to: root.actionWidth
+                duration: UbuntuAnimation.SlowDuration
+                easing {type: Easing.InOutBack; }
+            }
+        }
+        PropertyAction {
+            target: triggerAction.currentItem
+            properties: "width, height"
+            value: units.gu(3)
+        }
+        PropertyAction {
+            target: triggerAction.currentItem
+            properties: "opacity"
+            value: 1.0
+        }
+        ScriptAction {
+            script: root.activeAction.triggered(root)
+        }
+        PauseAnimation {
+            duration: 500
+        }
+        UbuntuNumberAnimation {
+            target: main
+            property: "x"
+            to: 0
+
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        property bool locked: root.locked || ((root.leftSideAction === null) && (root.rightSideActions.count === 0))
+        property bool manual: false
+
+        anchors.fill: parent
+        drag {
+            target: locked ? null : main
+            axis: Drag.XAxis
+            minimumX: rightActionsView.visible ? -(rightActionsView.width + root.actionThreshold) : 0
+            maximumX: leftActionView.visible ? leftActionView.width : 0
+        }
+
+        onReleased: {
+            if (root.triggerActionOnMouseRelease && root.activeAction) {
+                triggerAction.start()
+            } else {
+                root.returnToBounds()
+                root.activeAction = null
+            }
+        }
+        onClicked: {
+            if (main.x === 0) {
+                root.itemClicked(mouse)
+            } else if (main.x > 0) {
+                var action = getActionAt(Qt.point(mouse.x, mouse.y))
+                if (action && action !== -1) {
+                    action.triggered(root)
+                }
+            } else {
+                var actionIndex = getActionAt(Qt.point(mouse.x, mouse.y))
+                if (actionIndex !== -1) {
+                    root.activeItem = rightActionsRepeater.itemAt(actionIndex)
+                    root.activeAction = root.rightSideActions[actionIndex]
+                    triggerAction.start()
+                    return
+                }
+            }
+            root.resetSwipe()
+        }
+
+        onPositionChanged: {
+            if (mouseArea.pressed) {
+                updateActiveAction()
+            }
+        }
+        onPressAndHold: {
+            if (main.x === 0) {
+                root.itemPressAndHold(mouse)
+            }
+        }
+        z: -1
+    }
+}

=== added file 'app/upstreamcomponents/ListItemWithActionsCheckBox.qml'
--- app/upstreamcomponents/ListItemWithActionsCheckBox.qml	1970-01-01 00:00:00 +0000
+++ app/upstreamcomponents/ListItemWithActionsCheckBox.qml	2014-08-08 09:11:15 +0000
@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2012-2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * 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/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+CheckBox {
+    checked: root.selected
+    width: implicitWidth
+    // disable item mouse area to avoid conflicts with parent mouse area
+    __mouseArea.enabled: false
+}

=== modified file 'app/upstreamcomponents/README.components'
--- app/upstreamcomponents/README.components	2014-08-06 23:57:59 +0000
+++ app/upstreamcomponents/README.components	2014-08-08 09:11:15 +0000
@@ -15,3 +15,12 @@
 FastScroll.qml
 
 https://bazaar.launchpad.net/~phablet-team/address-book-app/trunk/view/head:/src/imports/Ubuntu/Contacts/FastScroll.qml
+
+ListItemWithActions.qml
+
+https://bazaar.launchpad.net/~phablet-team/address-book-app/trunk/view/head:/src/imports/Ubuntu/Contacts/ListItemWithActions.qml
+
+ListItemWithActionsCheckBox.qml
+
+https://bazaar.launchpad.net/~phablet-team/address-book-app/trunk/view/head:/src/imports/Ubuntu/Contacts/ListItemWithActionsCheckBox.qml
+

=== added file 'app/worldclock/UserWorldCityDelegate.qml'
--- app/worldclock/UserWorldCityDelegate.qml	1970-01-01 00:00:00 +0000
+++ app/worldclock/UserWorldCityDelegate.qml	2014-08-08 09:11:15 +0000
@@ -0,0 +1,182 @@
+/*
+ * 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/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import "../components"
+import "../upstreamcomponents"
+
+ListItemWithActions {
+    id: root
+
+    function getTimeDiff(time) {
+        var hours, minutes;
+        time = Math.floor(time / 60)
+        minutes = time % 60
+        hours = Math.floor(time / 60)
+        return [hours, minutes]
+    }
+
+    height: units.gu(9)
+    width: parent ? parent.width : 0
+    color: "Transparent"
+
+    Item {
+        id: delegate
+
+        anchors.fill: parent
+
+        Column {
+            id: cityColumn
+
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+            }
+
+            Label {
+                id: cityNameText
+                fontSize: "medium"
+                text: model.city
+                color: UbuntuColors.midAubergine
+            }
+
+            Label {
+                id: countryNameText
+                text: model.country
+                fontSize: "xx-small"
+            }
+        }
+
+        Clock {
+            id: localTimeVisual
+            objectName: "localTimeVisual" + index
+
+            /*
+                 This function would not be required once the upstream QT bug at
+                 https://bugreports.qt-project.org/browse/QTBUG-40275 is fixed.
+                 Due to this bug we are returning a time string instead of a
+                 time object which forces us to parse the string and convert it
+                 into a time object here.
+                */
+            function getTime(timeString) {
+                var properTime = new Date()
+                properTime.setHours(timeString.split(":")[0])
+                properTime.setMinutes(timeString.split(":")[1])
+                properTime.setSeconds(0)
+                return properTime
+            }
+
+            fontSize: units.dp(14)
+            periodFontSize: units.dp(7)
+            innerCircleWidth: units.gu(5)
+            width: units.gu(7)
+
+            analogTime: getTime(model.localTime)
+
+            anchors.centerIn: parent
+
+            Connections {
+                target: clock
+                onTriggerFlip: {
+                    localTimeVisual.flipClock()
+                }
+            }
+
+            Component.onCompleted: {
+                isDigital = clockModeDocument.contents.digitalMode ? true : false
+                if (clockModeDocument.contents.digitalMode) {
+                    digitalModeLoader.setSource
+                            ("../components/DigitalMode.qml",
+                             {
+                                 "width": innerCircleWidth,
+                                 "timeFontSize": fontSize,
+                                 "timePeriodFontSize": periodFontSize
+                             })
+                }
+                else {
+                    analogModeLoader.setSource(
+                                "../components/AnalogMode.qml",
+                                {
+                                    "width": innerCircleWidth,
+                                    "showSeconds": isMainClock
+                                })
+                }
+            }
+        }
+
+        Label {
+            id: relativeTimeLabel
+            objectName: "relativeTimeLabel" + index
+
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+
+            fontSize: "xx-small"
+            horizontalAlignment: Text.AlignRight
+            text: {
+                var day;
+
+                if(model.daysTo === 0) {
+                    day = i18n.tr("Today")
+                }
+
+                else if(model.daysTo === 1) {
+                    day = i18n.tr("Tomorrow")
+                }
+
+                else if(model.daysTo === -1) {
+                    day = i18n.tr("Yesterday")
+                }
+
+                var isBehind = model.timeTo > 0 ? i18n.tr("behind")
+                                                : i18n.tr("ahead")
+
+                var timediff = getTimeDiff(Math.abs(model.timeTo))
+                var minute = timediff[1]
+                var hour = timediff[0]
+
+                if(hour > 0 &&  minute > 0) {
+                    return ("%1\n%2hr%3min %4")
+                    .arg(day)
+                    .arg(hour)
+                    .arg(minute)
+                    .arg(isBehind)
+                }
+
+                else if(hour > 0 && minute === 0) {
+                    return ("%1\n%2hr %3")
+                    .arg(day)
+                    .arg(hour)
+                    .arg(isBehind)
+                }
+
+                else if(hour === 0 && minute > 0) {
+                    return ("%1\n%2min %3")
+                    .arg(day)
+                    .arg(minute)
+                    .arg(isBehind)
+                }
+
+                else {
+                    return i18n.tr("No Time Difference")
+                }
+            }
+        }
+    }
+}

=== modified file 'app/worldclock/UserWorldCityList.qml'
--- app/worldclock/UserWorldCityList.qml	2014-08-05 12:49:45 +0000
+++ app/worldclock/UserWorldCityList.qml	2014-08-08 09:11:15 +0000
@@ -20,23 +20,14 @@
 import Timezone 1.0
 import U1db 1.0 as U1db
 import Ubuntu.Components 1.1
-import "../components"
+
 import "../components/Utils.js" as Utils
 
 Column {
     id: worldCityColumn
 
-    function getTimeDiff(time) {
-        var hours, minutes;
-        time = Math.floor(time / 60)
-        minutes = time % 60
-        hours = Math.floor(time / 60)
-        return [hours, minutes]
-    }
-
-    anchors.top: locationRow.bottom
-    anchors.topMargin: units.gu(4)
     width: parent.width
+    height: childrenRect.height
 
     // U1db Index to index all documents storing the world city details
     U1db.Index {
@@ -63,143 +54,91 @@
     }
 
     Repeater {
+        id: userWorldCityRepeater
         objectName: "userWorldCityRepeater"
+
+        property var _currentSwipedItem: null
+
+        function _updateSwipeState(item)
+        {
+            if (item.swipping) {
+                return
+            }
+
+            if (item.swipeState !== "Normal") {
+                if (userWorldCityRepeater._currentSwipedItem !== item) {
+                    if (userWorldCityRepeater._currentSwipedItem) {
+                        userWorldCityRepeater._currentSwipedItem.resetSwipe()
+                    }
+                    userWorldCityRepeater._currentSwipedItem = item
+                }
+            } else if (item.swipeState !== "Normal"
+                       && userWorldCityRepeater._currentSwipedItem === item) {
+                userWorldCityRepeater._currentSwipedItem = null
+            }
+        }
+
         model: u1dbModel
-        delegate: SubtitledListItem {
+
+        delegate: UserWorldCityDelegate {
+            id: userWorldCityDelegate
             objectName: "userWorldCityItem" + index
 
-            height: units.gu(9)
-
-            text: model.city
-            subText: model.country
-            showDivider: false
-            removable: true
-            confirmRemoval: true
-
-            Clock {
-                id: localTimeVisual
-                objectName: "localTimeVisual" + index
-
-                /*
-                 This function would not be required once the upstream QT bug at
-                 https://bugreports.qt-project.org/browse/QTBUG-40275 is fixed.
-                 Due to this bug we are returning a time string instead of a
-                 time object which forces us to parse the string and convert it
-                 into a time object here.
-                */
-                function getTime(timeString) {
-                    var properTime = new Date()
-                    properTime.setHours(timeString.split(":")[0])
-                    properTime.setMinutes(timeString.split(":")[1])
-                    properTime.setSeconds(0)
-                    return properTime
-                }
-
-                fontSize: units.dp(14)
-                periodFontSize: units.dp(7)
-                innerCircleWidth: units.gu(5)
-                width: units.gu(7)
-
-                analogTime: getTime(model.localTime)
-
-                anchors.centerIn: parent
-
-                Connections {
-                    target: clock
-                    onTriggerFlip: {
-                        localTimeVisual.flipClock()
-                    }
-                }
-
-                Component.onCompleted: {
-                    isDigital = clockModeDocument.contents.digitalMode ? true : false
-                    if (clockModeDocument.contents.digitalMode) {
-                        digitalModeLoader.setSource
-                                ("../components/DigitalMode.qml",
-                                 {
-                                     "width": innerCircleWidth,
-                                     "timeFontSize": fontSize,
-                                     "timePeriodFontSize": periodFontSize
-                                 })
-                    }
-                    else {
-                        analogModeLoader.setSource(
-                                    "../components/AnalogMode.qml",
-                                    {
-                                        "width": innerCircleWidth,
-                                        "showSeconds": isMainClock
-                                    })
-                    }
-                }
-            }
-
-            Label {
-                id: relativeTimeLabel
-                objectName: "relativeTimeLabel" + index
-
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-
-                fontSize: "xx-small"
-                horizontalAlignment: Text.AlignRight
-                text: {
-                    var day;
-
-                    if(model.daysTo === 0) {
-                        day = i18n.tr("Today")
-                    }
-
-                    else if(model.daysTo === 1) {
-                        day = i18n.tr("Tomorrow")
-                    }
-
-                    else if(model.daysTo === -1) {
-                        day = i18n.tr("Yesterday")
-                    }
-
-                    var isBehind = model.timeTo > 0 ? i18n.tr("behind")
-                                                    : i18n.tr("ahead")
-
-                    var timediff = worldCityColumn.getTimeDiff(Math.abs(model.timeTo))
-                    var minute = timediff[1]
-                    var hour = timediff[0]
-
-                    if(hour > 0 &&  minute > 0) {
-                        return ("%1\n%2hr%3min %4")
-                        .arg(day)
-                        .arg(hour)
-                        .arg(minute)
-                        .arg(isBehind)
-                    }
-
-                    else if(hour > 0 && minute === 0) {
-                        return ("%1\n%2hr %3")
-                        .arg(day)
-                        .arg(hour)
-                        .arg(isBehind)
-                    }
-
-                    else if(hour === 0 && minute > 0) {
-                        return ("%1\n%2min %3")
-                        .arg(day)
-                        .arg(minute)
-                        .arg(isBehind)
-                    }
-
-                    else {
-                        return i18n.tr("No Time Difference")
-                    }
-                }
-            }
-
-            onItemRemoved: {
-                /*
-                 NOTE: This causes the document to be deleted twice resulting
-                 in an error. The bug has been reported at
-                 https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1276118
-                */
-                Utils.log("Deleting world location: " + model.city)
-                clockDB.deleteDoc(worldCityQuery.documents[index])
+            property var removalAnimation
+
+            function remove() {
+                removalAnimation.start()
+            }
+
+            onSwippingChanged: {
+                userWorldCityRepeater._updateSwipeState(userWorldCityDelegate)
+            }
+
+            onSwipeStateChanged: {
+                userWorldCityRepeater._updateSwipeState(userWorldCityDelegate)
+            }
+
+            leftSideAction: Action {
+                iconName: "delete"
+                text: i18n.tr("Delete")
+                onTriggered: {
+                    userWorldCityDelegate.remove()
+                }
+            }
+
+            ListView.onRemove: ScriptAction {
+                script: {
+                    if (userWorldCityRepeater._currentSwipedItem
+                            === userWorldCityDelegate) {
+                        userWorldCityRepeater._currentSwipedItem = null
+                    }
+                }
+            }
+
+            removalAnimation: SequentialAnimation {
+                alwaysRunToEnd: true
+
+                PropertyAction {
+                    target: userWorldCityDelegate
+                    property: "ListView.delayRemove"
+                    value: true
+                }
+
+                UbuntuNumberAnimation {
+                    target: userWorldCityDelegate
+                    property: "height"
+                    to: 1
+                }
+
+                PropertyAction {
+                    target: userWorldCityDelegate
+                    property: "ListView.delayRemove"
+                    value: false
+                }
+
+                ScriptAction {
+                    script: clockDB.deleteDoc(worldCityQuery.documents[index])
+                }
             }
         }
     }

=== modified file 'tests/autopilot/ubuntu_clock_app/emulators.py'
--- tests/autopilot/ubuntu_clock_app/emulators.py	2014-08-07 13:41:43 +0000
+++ tests/autopilot/ubuntu_clock_app/emulators.py	2014-08-08 09:11:15 +0000
@@ -386,10 +386,26 @@
         """Delete an alarm at the specified index."""
         old_alarm_count = self.get_num_of_alarms()
         alarm = self.proxy_object.wait_select_single(
-            'Base', objectName='alarm{}'.format(index))
+            objectName='alarm{}'.format(index))
+
         alarm.swipe_to_delete()
         alarm.confirm_removal()
         try:
             self._get_saved_alarms_list().count.wait_for(old_alarm_count - 1)
         except AssertionError:
             raise ClockEmulatorException('Error deleting alarm.')
+
+
+class ListItemWithActions(ubuntuuitoolkit.UbuntuUIToolkitCustomProxyObjectBase):
+
+    def swipe_to_delete(self):
+        x, y, width, height = self.globalRect
+        start_x = x + (width * 0.2)
+        stop_x = x + (width * 0.8)
+        start_y = stop_y = y + (height // 2)
+
+        self.pointing_device.drag(start_x, start_y, stop_x, stop_y)
+
+    def confirm_removal(self):
+        deleteButton = self.wait_select_single(name='delete')
+        self.pointing_device.click_object(deleteButton)