Merge lp:~ubuntu-clock-dev/ubuntu-clock-app/4-migrate-alarm-listitems into lp:ubuntu-clock-app

[Nekhelesh Ramananthan]

- Transitions AlarmDelegate, AlarmList to using the new 15.04 ListItems
- Updated multi-select mode design to be similar to what Dekko and Music app have
- Removed custom components like MultipleSelectionListView, MultipleSelectionVisualMode and HeaderButton

This MP implements the following,
- Transitions AlarmDelegate, AlarmList to using the new 15.04 ListItems
- Updated multi-select mode design to be similar to what Dekko and Music app have
- Removed custom components like MultipleSelectionListView, MultipleSelectionVisualMode and HeaderButton

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

FAILED: Continuous integration, rev:277
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/683/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/ubuntu-clock-app-vivid-amd64-ci/29/console

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

review: Needs Fixing (continuous-integration)

[lp:~ubuntu-clock-dev/ubuntu-clock-app/4-migrate-alarm-listitems]

278. By Nekhelesh Ramananthan on 2015-07-24

merged prerequisite

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

PASSED: Continuous integration, rev:278
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/702/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-vivid-amd64-ci/47

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

review: Approve (continuous-integration)

[Bartosz Kosiorek (gang65)]

It is working perfectly for me

review: Approve

=== modified file 'app/alarm/AlarmDelegate.qml'
--- app/alarm/AlarmDelegate.qml	2015-06-18 13:36:42 +0000
+++ app/alarm/AlarmDelegate.qml	2015-07-24 13:32:56 +0000
@@ -18,17 +18,15 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.2
-import "../upstreamcomponents"
 
-ListItemWithActions {
+ListItem {
     id: root
 
     property var localTime
 
     width: parent ? parent.width : 0
     height: units.gu(6)
-    color: "Transparent"
-    selectedColor: "Transparent"
+    divider.visible: false
 
     Label {
         id: alarmTime
@@ -37,6 +35,7 @@
         anchors {
             top: alarmDetailsColumn.top
             left: parent.left
+            leftMargin: units.gu(2)
         }
 
         fontSize: "medium"
@@ -87,6 +86,7 @@
 
         anchors {
             right: parent.right
+            rightMargin: units.gu(2)
             verticalCenter: parent.verticalCenter
         }
 

=== modified file 'app/alarm/AlarmList.qml'
--- app/alarm/AlarmList.qml	2015-05-27 16:03:23 +0000
+++ app/alarm/AlarmList.qml	2015-07-24 13:32:56 +0000
@@ -18,127 +18,69 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.2
-import Ubuntu.Components.ListItems 1.0 as ListItem
-import "../components"
-import "../upstreamcomponents"
 
-MultipleSelectionListView {
+UbuntuListView {
     id: alarmListView
     objectName: "alarmListView"
 
-    property var _currentSwipedItem: null
     property var localTime
 
-    function _updateSwipeState(item)
-    {
-        if (item.swipping) {
-            return
-        }
-
-        if (item.swipeState !== "Normal") {
-            if (alarmListView._currentSwipedItem !== item) {
-                if (alarmListView._currentSwipedItem) {
-                    alarmListView._currentSwipedItem.resetSwipe()
-                }
-                alarmListView._currentSwipedItem = item
-            }
-        } else if (item.swipeState !== "Normal"
-                   && alarmListView._currentSwipedItem === item) {
-            alarmListView._currentSwipedItem = null
-        }
-    }
+    signal clearSelection()
+    signal closeSelection()
+    signal selectAll()
 
     clip: true
     anchors.fill: parent
 
-    listDelegate: AlarmDelegate {
+    delegate: AlarmDelegate {
         id: alarmDelegate
         objectName: "alarm" + index
 
-        property var removalAnimation
         localTime: alarmListView.localTime
 
-        function remove() {
-            removalAnimation.start()
-        }
-
-        selectionMode: alarmListView.isInSelectionMode
-        selected: alarmListView.isSelected(alarmDelegate)
-
-        onSwippingChanged: {
-            _updateSwipeState(alarmDelegate)
-        }
-
-        onSwipeStateChanged: {
-            _updateSwipeState(alarmDelegate)
-        }
-
-        leftSideAction: Action {
-            iconName: "delete"
-            text: i18n.tr("Delete")
-            onTriggered: {
-                alarmDelegate.remove()
-            }
-        }
-
-        ListView.onRemove: ScriptAction {
-            script: {
-                if (_currentSwipedItem
-                        === alarmDelegate) {
-                    _currentSwipedItem = null
-                }
-            }
-        }
-
-        removalAnimation: SequentialAnimation {
-            alwaysRunToEnd: true
-
-            PropertyAction {
-                target: alarmDelegate
-                property: "ListView.delayRemove"
-                value: true
-            }
-
-            UbuntuNumberAnimation {
-                target: alarmDelegate
-                property: "height"
-                to: 0
-            }
-
-            PropertyAction {
-                target: alarmDelegate
-                property: "ListView.delayRemove"
-                value: false
-            }
-
-            ScriptAction {
-                script: {
-                    var alarm = alarmModel.get(index)
-                    alarm.cancel()
-                }
-            }
-        }
-
-        onItemClicked: {
-            if(alarmListView.isInSelectionMode) {
-                if(!alarmListView.selectItem(alarmDelegate)) {
-                    alarmListView.deselectItem(alarmDelegate)
-                }
-                return
-            }
-
-            else {
-                pageStack.push(Qt.resolvedUrl("EditAlarmPage.qml"),
-                               {isNewAlarm: false, tempAlarm: model})
-            }
-        }
-
-        onItemPressAndHold: {
-            if (!alarmListView.isInSelectionMode) {
-                alarmListView.startSelection()
-                alarmListView.selectItem(alarmDelegate)
-            }
-        }
+        leadingActions: ListItemActions {
+            actions: [
+                Action {
+                    iconName: "delete"
+                    text: i18n.tr("Delete")
+                    onTriggered: {
+                        var alarm = alarmModel.get(index)
+                        alarm.cancel()
+                    }
+                }
+            ]
+        }
+
+        onClicked: {
+            if (selectMode) {
+                selected = !selected
+            } else {
+                pageStack.push(Qt.resolvedUrl("EditAlarmPage.qml"), {isNewAlarm: false, tempAlarm: model})
+            }
+        }
+
+        onPressAndHold: {
+            ListView.view.ViewItems.selectMode = !ListView.view.ViewItems.selectMode
+        }
+    }
+
+    onClearSelection: {
+        ViewItems.selectedIndices = []
+    }
+
+    onSelectAll: {
+        var tmp = []
+
+        for (var i=0; i < model.count; i++) {
+            tmp.push(i)
+        }
+
+        ViewItems.selectedIndices = tmp
+    }
+
+    onCloseSelection: {
+        clearSelection()
+        ViewItems.selectMode = false
     }
 }
 

=== modified file 'app/alarm/AlarmPage.qml'
--- app/alarm/AlarmPage.qml	2015-07-16 21:02:18 +0000
+++ app/alarm/AlarmPage.qml	2015-07-24 13:32:56 +0000
@@ -18,23 +18,21 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.2
-import "../components"
 
 Page {
     id: alarmPage
 
     title: i18n.tr("Alarms")
     objectName: 'AlarmPage'
+    flickable: null
 
     Component.onCompleted: console.log("[LOG]: Alarm Page loaded")
 
-    flickable: null
-
     states: [
         PageHeadState {
             name: "default"
             head: alarmPage.head
-            when: !alarmListView.isInSelectionMode
+            when: !alarmListView.ViewItems.selectMode
 
             backAction: Action {
                 iconName: "down"
@@ -59,89 +57,66 @@
         PageHeadState {
             name: "selection"
             head: alarmPage.head
-            when: alarmListView.isInSelectionMode
+            when: alarmListView.ViewItems.selectMode
 
             backAction: Action {
                 iconName: "back"
                 text: i18n.tr("Back")
                 onTriggered: {
-                    alarmListView.cancelSelection()
-                }
-            }
-
-            contents: Loader {
-                id: selectionStateLoader
-                active: alarmPage.state === "selection"
-                sourceComponent: selectionStateComponent
-                height: parent ? parent.height : undefined
-                anchors.right: parent ? parent.right: undefined
-            }
+                    alarmListView.ViewItems.selectMode = false
+                }
+            }
+
+            actions: [
+                Action {
+                    text: {
+                        if(alarmListView.ViewItems.selectedIndices.length === alarmListView.count) {
+                            return i18n.tr("Select None")
+                        } else {
+                            return i18n.tr("Select All")
+                        }
+                    }
+
+                    iconSource: {
+                        if(alarmListView.ViewItems.selectedIndices.length === alarmListView.count) {
+                            return Qt.resolvedUrl("../graphics/select-none.svg")
+                        } else {
+                            return Qt.resolvedUrl("../graphics/select.svg")
+                        }
+                    }
+
+                    onTriggered: {
+                        if(alarmListView.ViewItems.selectedIndices.length === alarmListView.count) {
+                            alarmListView.clearSelection()
+                        } else {
+                            alarmListView.selectAll()
+                        }
+                    }
+                },
+
+                Action {
+                    iconName: "delete"
+                    text: i18n.tr("Delete")
+                    enabled: alarmListView.ViewItems.selectedIndices.length !== 0
+
+                    onTriggered: {
+                        var items = alarmListView.ViewItems.selectedIndices
+
+                        for(var i=0; i < alarmListView.ViewItems.selectedIndices.length; i++) {
+                            var alarm = alarmModel.get(alarmListView.ViewItems.selectedIndices[i])
+                            alarm.cancel()
+                        }
+
+                        alarmListView.closeSelection()
+                    }
+                }
+            ]
         }
     ]
 
-    Component {
-        id: selectionStateComponent
-        Item {
-            HeaderButton {
-                id: selectButton
-
-                anchors {
-                    right: deleteButton.left
-                    rightMargin: units.gu(1)
-                }
-
-                text: {
-                    if(alarmListView.selectedItems.count === alarmListView.count) {
-                        return i18n.tr("Select None")
-                    } else {
-                        return i18n.tr("Select All")
-                    }
-                }
-
-                iconSource: {
-                    if(alarmListView.selectedItems.count === alarmListView.count) {
-                        return Qt.resolvedUrl("../graphics/select-none.svg")
-                    } else {
-                        return Qt.resolvedUrl("../graphics/select.svg")
-                    }
-                }
-
-                onTriggered: {
-                    if(alarmListView.selectedItems.count === alarmListView.count) {
-                        alarmListView.clearSelection()
-                    } else {
-                        alarmListView.selectAll()
-                    }
-                }
-            }
-
-            HeaderButton {
-                id: deleteButton
-
-                anchors.right: parent.right
-                anchors.rightMargin: units.gu(2)
-
-                iconName: "delete"
-                text: i18n.tr("Delete")
-                enabled: alarmListView.selectedItems.count !== 0
-
-                onTriggered: {
-                    var items = alarmListView.selectedItems
-
-                    for(var i=0; i < items.count; i++) {
-                        var alarm = alarmModel.get(items.get(i).itemsIndex)
-                        alarm.cancel()
-                    }
-
-                    alarmListView.endSelection()
-                }
-            }
-        }
-    }
-
     AlarmList {
         id: alarmListView
-        listModel: alarmModel
+        model: alarmModel
         anchors.fill: parent
         localTime: clockTime
     }

=== removed file 'app/components/HeaderButton.qml'
--- app/components/HeaderButton.qml	2015-05-27 16:03:23 +0000
+++ app/components/HeaderButton.qml	1970-01-01 00:00:00 +0000
@@ -1,65 +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/>.
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.2
-
-AbstractButton {
-    id: headerButton
-
-    property alias iconSource: _icon.source
-    property alias iconName: _icon.name
-    property alias text: _label.text
-
-    width: units.gu(6)
-    height: parent ? parent.height : undefined
-
-    Rectangle {
-        anchors.fill: parent
-        visible: headerButton.pressed
-        color: Theme.palette.selected.background
-    }
-
-    Column {
-        id: buttonHolder
-
-        width: _label.width
-        height: childrenRect.height
-
-        spacing: units.gu(0.2)
-        anchors.centerIn: parent
-        anchors.verticalCenterOffset: units.gu(0.3)
-
-        Icon {
-            id: _icon
-            color: UbuntuColors.darkGrey
-            width: units.gu(2.5)
-            height: width
-            opacity: headerButton.enabled ? 1.0 : 0.3
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        Label {
-            id: _label
-            color: UbuntuColors.darkGrey
-            fontSize: "xx-small"
-            opacity: headerButton.enabled ? 1.0 : 0.3
-            anchors.horizontalCenter: _icon.horizontalCenter
-        }
-    }
-}

=== removed file 'app/upstreamcomponents/MultipleSelectionListView.qml'
--- app/upstreamcomponents/MultipleSelectionListView.qml	2015-05-27 16:03:23 +0000
+++ app/upstreamcomponents/MultipleSelectionListView.qml	1970-01-01 00:00:00 +0000
@@ -1,199 +0,0 @@
-/*
- * 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 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.4
-import Ubuntu.Components 1.2
-import Ubuntu.Components.Popups 1.0 as Popups
-
-/*!
-    \qmltype ContactSimpleListView
-    \inqmlmodule Ubuntu.Contacts 0.1
-    \ingroup ubuntu
-    \brief The MultipleSelectionListView provides a ListView with support to multiple selection
-
-    The MultipleSelectionListViewprovides a ListView with support to multiple selection which can be used by any
-    application.
-
-    Example:
-    \qml
-        import Ubuntu.Contacts 0.1
-
-        MultipleSelectionListView {
-            id: view
-            anchors.fill: paret
-            model: 100
-            delegate: Rectangle {
-                width: parent.width
-                height: 100
-                color: view.selectedItems.indexOf(index) == -1 ? "white" : "blue"
-
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        if (view.isInSelectionModel) {
-                            view.selectItem(index)
-                        }
-                    }
-                    onPressAndHold: view.startSelection()
-                }
-            }
-            onSelectionDone: console.debug("Selected items:" + view.selectedItems)
-        }
-    \endqml
-*/
-
-ListView {
-    id: listView
-
-    /*!
-      \qmlproperty model selectedItems
-
-      This property holds the list of selected items
-    */
-    readonly property alias selectedItems: visualModel.selectedItems
-    /*!
-      \qmlproperty bool multipleSelection
-
-      This property holds if the selection will accept multiple items or single items
-    */
-    property bool multipleSelection: true
-
-    /*!
-      \qmlproperty model listModel
-
-      This property holds the model providing data for the list.
-    */
-    property alias listModel: visualModel.model
-    /*!
-      \qmlproperty Component listDelegate
-
-      The delegate provides a template defining each item instantiated by the view.
-    */
-    property alias listDelegate: visualModel.delegate
-
-    /*!
-      \qmlproperty bool isInSelectionMode
-
-      This property holds a list with the index of selected items
-    */
-    readonly property bool isInSelectionMode: state === "selection"
-    /*!
-      This handler is called when the selection mode is finished without be canceled
-    */
-    signal selectionDone(var items)
-    /*!
-      This handler is called when the selection mode is canceled
-    */
-    signal selectionCanceled()
-
-    /*!
-      Start the selection mode on the list view.
-    */
-    function startSelection()
-    {
-        state = "selection"
-    }
-    /*!
-      Check if the item is selected
-      Returns true if the item was marked as selected or false if the item is unselected
-    */
-    function isSelected(item)
-    {
-        if (item && item.VisualDataModel) {
-            return (item.VisualDataModel.inSelected === true)
-        } else {
-            return false
-        }
-    }
-    /*!
-      Mark the item as selected
-      Returns true if the item was marked as selected or false if the item is already selected
-    */
-    function selectItem(item)
-    {
-        if (item.VisualDataModel.inSelected) {
-            return false
-        } else {
-            if (!multipleSelection) {
-                clearSelection()
-            }
-            item.VisualDataModel.inSelected = true
-            return true
-        }
-    }
-    /*!
-      Remove the index from the selected list
-    */
-    function deselectItem(item)
-    {
-        var result = false
-        if (item.VisualDataModel.inSelected) {
-            item.VisualDataModel.inSelected = false
-            result = true
-        }
-        return result
-    }
-    /*!
-      Finish the selection mode with sucess
-    */
-    function endSelection()
-    {
-        selectionDone(listView.selectedItems)
-        clearSelection()
-        state = ""
-    }
-    /*!
-      Cancel the selection
-    */
-    function cancelSelection()
-    {
-        selectionCanceled()
-        clearSelection()
-        state = ""
-    }
-    /*!
-      Remove any selected item from the selection list
-    */
-    function clearSelection()
-    {
-        if (selectedItems.count > 0) {
-            selectedItems.remove(0, selectedItems.count)
-        }
-    }
-    /*!
-      Select all items in the list
-    */
-    function selectAll()
-    {
-        if (multipleSelection) {
-            visualModel.items.addGroups(0, visualModel.items.count, ["selected"] )
-        }
-    }
-
-    model: visualModel
-
-    MultipleSelectionVisualModel {
-        id: visualModel
-    }
-
-    Component.onCompleted: {
-        // FIXME: workaround for qtubuntu not returning values depending on the grid unit definition
-        // for Flickable.maximumFlickVelocity and Flickable.flickDeceleration
-        var scaleFactor = units.gridUnit / 8;
-        maximumFlickVelocity = maximumFlickVelocity * scaleFactor;
-        flickDeceleration = flickDeceleration * scaleFactor;
-    }
-}

=== removed file 'app/upstreamcomponents/MultipleSelectionVisualModel.qml'
--- app/upstreamcomponents/MultipleSelectionVisualModel.qml	2015-05-27 16:03:23 +0000
+++ app/upstreamcomponents/MultipleSelectionVisualModel.qml	1970-01-01 00:00:00 +0000
@@ -1,31 +0,0 @@
-/*
- * Copyright (C) 2012-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 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.4
-
-VisualDataModel {
-    id: contactVisualModel
-
-    property alias selectedItems: selectedGroup
-
-    groups: [
-        VisualDataGroup {
-            id: selectedGroup
-
-            name: "selected"
-        }
-    ]
-}

=== modified file 'po/com.ubuntu.clock.pot'
--- po/com.ubuntu.clock.pot	2015-07-24 13:32:56 +0000
+++ po/com.ubuntu.clock.pot	2015-07-24 13:32:56 +0000
@@ -23,38 +23,38 @@
 msgid "Label"
 msgstr ""
 
-#: ../app/alarm/AlarmList.qml:78 ../app/alarm/AlarmPage.qml:125
+#: ../app/alarm/AlarmList.qml:45 ../app/alarm/AlarmPage.qml:99
 #: ../app/worldclock/UserWorldCityList.qml:101
 msgid "Delete"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:26
+#: ../app/alarm/AlarmPage.qml:25
 msgid "Alarms"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:41 ../app/alarm/AlarmPage.qml:66
+#: ../app/alarm/AlarmPage.qml:39 ../app/alarm/AlarmPage.qml:64
 #: ../app/worldclock/WorldCityList.qml:79
 msgid "Back"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:51 ../app/alarm/EditAlarmPage.qml:44
+#: ../app/alarm/AlarmPage.qml:49 ../app/alarm/EditAlarmPage.qml:44
 #: ../app/alarm/EditAlarmPage.qml:166
 msgid "Alarm"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:95
+#: ../app/alarm/AlarmPage.qml:74
 msgid "Select None"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:97 ../app/alarm/AlarmRepeat.qml:38
+#: ../app/alarm/AlarmPage.qml:76 ../app/alarm/AlarmRepeat.qml:38
 msgid "Select All"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:162
+#: ../app/alarm/AlarmPage.qml:137
 msgid "No saved alarms"
 msgstr ""
 
-#: ../app/alarm/AlarmPage.qml:163
+#: ../app/alarm/AlarmPage.qml:138
 msgid "Tap the + icon to add an alarm"
 msgstr ""