Merge lp:~ahayzen/music-app/refactor-move-delegates into lp:music-app

[Andrew Hayzen]

* Move delegates into their own folder in components
* Split out multiselect/reorder code from ListItemWithActions.qml into MusicListItem.qml and remove use of primed in ListItemWithActions.qml as it is not used anymore
* Fix for ListItemWithActions.qml if user swipes left and clicks where a rightAction would have been (has to be enabled) causes a console error and doesn't reset the swipe

* Move delegates into their own folder in components
* Split out multiselect/reorder code from ListItemWithActions.qml into MusicListItem.qml and remove use of primed in ListItemWithActions.qml as it is not used anymore
* Fix for ListItemWithActions.qml if user swipes left and clicks where a rightAction would have been (has to be enabled) causes a console error and doesn't reset the swipe

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

FAILED: Continuous integration, rev:841
http://91.189.93.70:8080/job/music-app-refactor-ci/38/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests-vivid/1080
        deb: http://91.189.93.70:8080/job/generic-mediumtests-vivid/1080/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-refactor-vivid-amd64-ci/38

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-refactor-ci/38/rebuild

review: Needs Fixing (continuous-integration)

[lp:~ahayzen/music-app/refactor-move-delegates]

842. By Andrew Hayzen on 2015-02-16

* Fix for autopilot

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

PASSED: Continuous integration, rev:842
http://91.189.93.70:8080/job/music-app-refactor-ci/39/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-vivid/1081
        deb: http://91.189.93.70:8080/job/generic-mediumtests-vivid/1081/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-refactor-vivid-amd64-ci/39

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-refactor-ci/39/rebuild

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

Is there any way more we could get more code reuse out of MusicListItem.qml? It's a pretty skinny component and we still have a lot of code for each usage of MusicListItem. I'm not seeing an easy way of doing so, however.

review: Needs Information

[lp:~ahayzen/music-app/refactor-move-delegates]

843. By Andrew Hayzen on 2015-02-22

* Split reorder code into a separate component and out of ListItemWithActions.qml
* Split out some of the custom multiselect code

844. By Andrew Hayzen on 2015-02-22

* Pull further multiselect code into MusicListItem.qml
* Remove use of primed as it is not used anymore

845. By Andrew Hayzen on 2015-02-22

* Sort out autogenerated Component

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

PASSED: Continuous integration, rev:845
http://91.189.93.70:8080/job/music-app-refactor-ci/42/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic/2077
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic/2077/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-refactor-vivid-amd64-ci/42

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-refactor-ci/42/rebuild

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

This looks good. One issue I'm having is that deleting a playlist freezes the app. I'm not sure what your change would have done to cause this.

review: Needs Fixing

[Victor Thompson (vthompson)]

The above issue also exists in the refactor series's trunk. I get the following in the console:

QQmlExpression: Attempted to evaluate an expression in an invalid context
qml: called LibraryListModel::filterPlaylist()

Since this wasn't introduced by the code change here, this looks good to me. :)

review: Approve

=== modified file 'app/components/CMakeLists.txt'
--- app/components/CMakeLists.txt	2015-02-08 04:06:28 +0000
+++ app/components/CMakeLists.txt	2015-02-22 02:24:31 +0000
@@ -1,3 +1,4 @@
+add_subdirectory(Delegates)
 add_subdirectory(Dialog)
 add_subdirectory(HeadState)
 add_subdirectory(Flickables)

=== added directory 'app/components/Delegates'
=== added file 'app/components/Delegates/CMakeLists.txt'
--- app/components/Delegates/CMakeLists.txt	1970-01-01 00:00:00 +0000
+++ app/components/Delegates/CMakeLists.txt	2015-02-22 02:24:31 +0000
@@ -0,0 +1,4 @@
+# make the qml files visible on qtcreator
+file(GLOB DELEGATES_QML_FILES RELATIVE ${CMAKE_CURRENT_SOURCE_DIR} *.qml)
+
+add_custom_target(com_ubuntu_music_DELEGATES_QMLFiles ALL SOURCES ${DELEGATES_QML_FILES})

=== renamed file 'app/components/Card.qml' => 'app/components/Delegates/Card.qml'
--- app/components/Card.qml	2014-11-11 18:08:40 +0000
+++ app/components/Delegates/Card.qml	2015-02-22 02:24:31 +0000
@@ -17,6 +17,7 @@
 
 import QtQuick 2.3
 import Ubuntu.Components 1.1
+import "../"
 
 
 Item {

=== renamed file 'app/components/ListItemWithActions.qml' => 'app/components/Delegates/ListItemWithActions.qml'
--- app/components/ListItemWithActions.qml	2015-01-18 00:06:06 +0000
+++ app/components/Delegates/ListItemWithActions.qml	2015-02-22 02:24:31 +0000
@@ -45,11 +45,8 @@
     readonly property alias swipping: mainItemMoving.running
     readonly property bool _showActions: mouseArea.pressed || swipeState != "Normal" || swipping
 
-    property bool reorderable: false  // CUSTOM
-    property bool multiselectable: false  // CUSTOM
-
-    property int previousListItemIndex: -1  // CUSTOM
-    property int listItemIndex: index  // CUSTOM
+    property alias _main: main  // CUSTOM
+    property alias pressed: mouseArea.pressed  // CUSTOM
 
     /* internal */
     property var _visibleRightSideActions: filterVisibleActions(rightSideActions)
@@ -57,55 +54,6 @@
     signal itemClicked(var mouse)
     signal itemPressAndHold(var mouse)
 
-    signal reorder(int from, int to)  // CUSTOM
-
-    onItemPressAndHold: {
-        if (multiselectable) {
-            selectionMode = true
-        }
-    }
-    onListItemIndexChanged: {
-        var i = parent.parent.selectedItems.lastIndexOf(previousListItemIndex)
-
-        if (i !== -1) {
-            parent.parent.selectedItems[i] = listItemIndex
-        }
-
-        previousListItemIndex = listItemIndex
-    }
-
-    onSelectedChanged: {
-        if (selectionMode) {
-            var tmp = parent.parent.selectedItems
-
-            if (selected) {
-                if (parent.parent.selectedItems.indexOf(listItemIndex) === -1) {
-                    tmp.push(listItemIndex)
-                    parent.parent.selectedItems = tmp
-                }
-            } else {
-                tmp.splice(parent.parent.selectedItems.indexOf(listItemIndex), 1)
-                parent.parent.selectedItems = tmp
-            }
-        }
-    }
-
-    onSelectionModeChanged: {  // CUSTOM
-        if (reorderable && selectionMode) {
-            resetSwipe()
-        }
-
-        for (var j=0; j < main.children.length; j++) {
-            main.children[j].anchors.rightMargin = reorderable && selectionMode ? actionReorderLoader.width + units.gu(2) : 0
-        }
-
-        parent.parent.state = selectionMode ? "multiselectable" : "normal"
-
-        if (!selectionMode) {
-            selected = false
-        }
-    }
-
     function returnToBoundsRTL(direction)
     {
         var actionFullWidth = actionWidth + units.gu(2)
@@ -122,20 +70,11 @@
         var xOffset = Math.abs(main.x)
         var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
         var newX = 0
-        var j  // CUSTOM
 
         if (index === _visibleRightSideActions.length) {
             newX = -(rightActionsView.width - units.gu(2))
-
-            for (j=0; j < rightSideActions.length; j++) {  // CUSTOM
-                rightActionsRepeater.itemAt(j).primed = true
-            }
         } else if (index >= 1) {
             newX = -(actionFullWidth * index)
-
-            for (j=0; j < rightSideActions.length; j++) {  // CUSTOM
-                rightActionsRepeater.itemAt(j).primed = j === index
-            }
         }
 
         updatePosition(newX)
@@ -147,10 +86,6 @@
         if ((direction === "RTL") || (main.x <= (finalX * root.threshold)))
             finalX = 0
         updatePosition(finalX)
-
-        if (leftSideAction !== null) {  // CUSTOM
-            leftActionViewLoader.item.primed = main.x > (finalX * root.threshold)
-        }
     }
 
     function returnToBounds(direction)
@@ -206,18 +141,6 @@
         }
     }
 
-    function resetPrimed()  // CUSTOM
-    {
-        if (leftSideAction !== null) {
-            leftActionViewLoader.item.primed = false
-        }
-
-        for (var j=0; j < rightSideActions.length; j++) {
-            console.debug(rightActionsRepeater.itemAt(j));
-            rightActionsRepeater.itemAt(j).primed = false
-        }
-    }
-
     function resetSwipe()
     {
         updatePosition(0)
@@ -243,39 +166,6 @@
             mouseArea.state = ""
         }
         main.x = pos
-
-        if (pos === 0) {  // CUSTOM
-            //resetPrimed()
-        }
-    }
-
-    Connections {  // CUSTOM
-        target: mainView
-        onListItemSwiping: {
-            if (i !== index) {
-                root.resetSwipe();
-            }
-        }
-    }
-
-    Connections {  // CUSTOM
-        target: root.parent.parent
-        onClearSelection: selected = false
-        onFlickingChanged: {
-            if (root.parent.parent.flicking) {
-                root.resetSwipe()
-            }
-        }
-        onSelectAll: selected = true
-        onStateChanged: selectionMode = root.parent.parent.state === "multiselectable"
-    }
-
-    Component.onCompleted: {  // CUSTOM
-        if (parent.parent.selectedItems.indexOf(index) !== -1) {  // FIXME:
-            selected = true
-        }
-
-        selectionMode = root.parent.parent.state === "multiselectable"
     }
 
     // CUSTOM remove animation
@@ -301,7 +191,7 @@
             when: selectionMode || selected
             PropertyChanges {
                 target: selectionIcon
-                source: Qt.resolvedUrl("ListItemActions/CheckBox.qml")
+                source: Qt.resolvedUrl("../ListItemActions/CheckBox.qml")
                 anchors.leftMargin: units.gu(2)
             }
             PropertyChanges {
@@ -337,8 +227,6 @@
             width: root.leftActionWidth + actionThreshold
             color: UbuntuColors.red
 
-            property alias primed: leftActionIcon.primed  // CUSTOM
-
             Icon {
                 id: leftActionIcon
                 anchors {
@@ -350,8 +238,6 @@
                 color: Theme.palette.selected.field
                 height: units.gu(3)
                 width: units.gu(3)
-
-                property bool primed: false  // CUSTOM
             }
         }
     }
@@ -400,8 +286,6 @@
                    height: rightActionsView.height
                    width: root.actionWidth
 
-                   property alias primed: img.primed  // CUSTOM
-
                    Icon {
                        id: img
 
@@ -411,8 +295,6 @@
                        height: units.gu(3)
                        name: modelData.iconName
                        color: root.activeAction === modelData ? UbuntuColors.blue : styleMusic.common.white  // CUSTOM
-
-                       property bool primed: false  // CUSTOM
                    }
                }
            }
@@ -474,118 +356,6 @@
         }
     }
 
-    /* CUSTOM Brighten Component */
-    Rectangle {
-        id: listItemBrighten
-        anchors {
-            fill: main
-        }
-
-        color: mouseArea.pressed ? styleMusic.common.white : "transparent"
-        opacity: 0.1
-    }
-
-    /* CUSTOM Reorder Component */
-    Loader {
-        id: actionReorderLoader
-        anchors {
-            bottom: parent.bottom
-            right: main.right
-            rightMargin: units.gu(1)
-            top: parent.top
-        }
-        asynchronous: true
-        sourceComponent: reorderable && selectionMode && root.parent.parent.selectedItems.length === 0 ? actionReorderComponent : undefined
-    }
-
-    Component {
-        id: actionReorderComponent
-        Item {
-            id: actionReorder
-            width: units.gu(4)
-            visible: reorderable && selectionMode && root.parent.parent.selectedItems.length === 0
-
-            Icon {
-                anchors {
-                    horizontalCenter: parent.horizontalCenter
-                    verticalCenter: parent.verticalCenter
-                }
-                name: "navigation-menu"  // TODO: use proper image
-                height: width
-                width: units.gu(3)
-            }
-
-            MouseArea {
-                id: actionReorderMouseArea
-                anchors {
-                    fill: parent
-                }
-                property int startY: 0
-                property int startContentY: 0
-
-                onPressed: {
-                    root.parent.parent.interactive = false;  // stop scrolling of listview
-                    startY = root.y;
-                    startContentY = root.parent.parent.contentY;
-                    root.z += 10;  // force ontop of other elements
-
-                    console.debug("Reorder listitem pressed", root.y)
-                }
-                onMouseYChanged: root.y += mouse.y - (root.height / 2);
-                onReleased: {
-                    console.debug("Reorder diff by position", getDiff());
-
-                    var diff = getDiff();
-
-                    // Remove the height of the actual item if moved down
-                    if (diff > 0) {
-                        diff -= 1;
-                    }
-
-                    root.parent.parent.interactive = true;  // reenable scrolling
-
-                    if (diff === 0) {
-                        // Nothing has changed so reset the item
-                        // z index is restored after animation
-                        resetListItemYAnimation.start();
-                    }
-                    else {
-                        var newIndex = index + diff;
-
-                        if (newIndex < 0) {
-                            newIndex = 0;
-                        }
-                        else if (newIndex > root.parent.parent.count - 1) {
-                            newIndex = root.parent.parent.count - 1;
-                        }
-
-                        root.z -= 10;  // restore z index
-                        reorder(index, newIndex)
-                    }
-                }
-
-                function getDiff() {
-                    // Get the amount of items that have been passed over (by centre)
-                    return Math.round((((root.y - startY) + (root.parent.parent.contentY - startContentY)) / root.height) + 0.5);
-                }
-            }
-
-            SequentialAnimation {
-                id: resetListItemYAnimation
-                UbuntuNumberAnimation {
-                    target: root;
-                    property: "y";
-                    to: actionReorderMouseArea.startY
-                }
-                ScriptAction {
-                    script: {
-                        root.z -= 10;  // restore z index
-                    }
-                }
-            }
-        }
-    }
-
     SequentialAnimation {
         id: triggerAction
 
@@ -694,22 +464,22 @@
             direction = "None"
         }
         onClicked: {
-            if (selectionMode) {  // CUSTOM
+            if (selectionMode) {  // CUSTOM - selecting a listitem should toggle selection if in selectionMode
                 selected = !selected
                 return
-            }
-            else if (main.x === 0) {
+            } else 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)
-                    removeAnimation.action = action  // CUSTOM
+                    removeAnimation.action = action  // CUSTOM - use our animation instead
                     removeAnimation.start()  // CUSTOM
                 }
             } else {
                 var actionIndex = getActionAt(Qt.point(mouse.x, mouse.y))
-                if (actionIndex !== -1) {
+
+                if (actionIndex !== -1 && actionIndex !== leftSideAction) {  // CUSTOM - can be leftAction
                     root.activeItem = rightActionsRepeater.itemAt(actionIndex)
                     root.activeAction = root.rightSideActions[actionIndex]
                     triggerAction.start()
@@ -723,7 +493,7 @@
             if (mouseArea.pressed) {
                 updateActiveAction()
 
-                listItemSwiping(index)  // CUSTOM
+                listItemSwiping(index)  // CUSTOM - tells other listitems to dismiss any swipe
             }
         }
         onPressAndHold: {

=== added file 'app/components/Delegates/MusicListItem.qml'
--- app/components/Delegates/MusicListItem.qml	1970-01-01 00:00:00 +0000
+++ app/components/Delegates/MusicListItem.qml	2015-02-22 02:24:31 +0000
@@ -0,0 +1,151 @@
+/*
+ * Copyright (C) 2013, 2014, 2015
+ *      Andrew Hayzen <[e-mail]>
+ *      Nekhelesh Ramananthan <[e-mail]>
+ *      Victor Thompson <[e-mail]>
+ *
+ * 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.3
+import Ubuntu.Components 1.1
+import "../"
+
+
+ListItemWithActions {
+    id: root
+
+    property alias column: musicRow.column
+    property alias imageSource: musicRow.imageSource
+
+    property int listItemIndex: index
+    property bool multiselectable: false
+    property int previousListItemIndex: -1
+    property bool reorderable: false
+
+    signal reorder(int from, int to)
+
+    onItemPressAndHold: {
+        if (multiselectable) {
+            selectionMode = true
+        }
+    }
+
+    onListItemIndexChanged: {
+        var i = parent.parent.selectedItems.lastIndexOf(previousListItemIndex)
+
+        if (i !== -1) {
+            parent.parent.selectedItems[i] = listItemIndex
+        }
+
+        previousListItemIndex = listItemIndex
+    }
+
+    onSelectedChanged: {
+        if (selectionMode) {
+            var tmp = parent.parent.selectedItems
+
+            if (selected) {
+                if (parent.parent.selectedItems.indexOf(listItemIndex) === -1) {
+                    tmp.push(listItemIndex)
+                    parent.parent.selectedItems = tmp
+                }
+            } else {
+                tmp.splice(parent.parent.selectedItems.indexOf(listItemIndex), 1)
+                parent.parent.selectedItems = tmp
+            }
+        }
+    }
+
+    onSelectionModeChanged: {
+        if (reorderable && selectionMode) {
+            resetSwipe()
+        }
+
+        for (var j=0; j < _main.children.length; j++) {
+            if (_main.children[j] !== actionReorderLoader) {
+                _main.children[j].anchors.rightMargin = reorderable && selectionMode ? actionReorderLoader.width + units.gu(2) : 0
+            }
+        }
+
+        parent.parent.state = selectionMode ? "multiselectable" : "normal"
+
+        if (!selectionMode) {
+            selected = false
+        }
+    }
+
+    /* Highlight the listitem on press */
+    Rectangle {
+        id: listItemBrighten
+        color: root.pressed ? styleMusic.common.white : "transparent"
+        opacity: 0.1
+        height: root.height
+        x: root.x - parent.x  // -parent.x due to selectionIcon in ListItemWithActions
+        width: root.width
+    }
+
+    /* Reorder Component */
+    Loader {
+        id: actionReorderLoader
+        active: reorderable && selectionMode && root.parent.parent.selectedItems.length === 0
+        anchors {
+            bottom: parent.bottom
+            right: parent.right
+            rightMargin: units.gu(1)
+            top: parent.top
+        }
+        asynchronous: true
+        source: "../ListItemReorderComponent.qml"
+    }
+
+    Item {
+        Connections {  // Only allow one ListItem to be swiping at any time
+            target: mainView
+            onListItemSwiping: {
+                if (i !== index) {
+                    root.resetSwipe();
+                }
+            }
+        }
+
+        Connections {  // Connections from signals in the ListView
+            target: root.parent.parent
+            onClearSelection: selected = false
+            onFlickingChanged: {
+                if (root.parent.parent.flicking) {
+                    root.resetSwipe()
+                }
+            }
+            onSelectAll: selected = true
+            onStateChanged: selectionMode = root.parent.parent.state === "multiselectable"
+        }
+    }
+
+
+    MusicRow {
+        id: musicRow
+        anchors {
+            verticalCenter: parent.verticalCenter
+        }
+        height: parent.height
+    }
+
+    Component.onCompleted: {  // reload settings as delegates are destroyed
+        if (parent.parent.selectedItems.indexOf(index) !== -1) {
+            selected = true
+        }
+
+        selectionMode = root.parent.parent.state === "multiselectable"
+    }
+}

=== modified file 'app/components/ListItemActions/AddToPlaylist.qml'
--- app/components/ListItemActions/AddToPlaylist.qml	2015-02-04 19:01:14 +0000
+++ app/components/ListItemActions/AddToPlaylist.qml	2015-02-22 02:24:31 +0000
@@ -25,8 +25,6 @@
     objectName: "addToPlaylistAction"
     text: i18n.tr("Add to playlist")
 
-    property bool primed: false
-
     onTriggered: {
         console.debug("Debug: Add track to playlist");
 

=== modified file 'app/components/ListItemActions/Remove.qml'
--- app/components/ListItemActions/Remove.qml	2014-09-20 10:50:45 +0000
+++ app/components/ListItemActions/Remove.qml	2015-02-22 02:24:31 +0000
@@ -25,6 +25,4 @@
     iconName: "delete"
     objectName: "swipeDeleteAction"
     text: i18n.tr("Remove")
-
-    property bool primed: false
 }

=== added file 'app/components/ListItemReorderComponent.qml'
--- app/components/ListItemReorderComponent.qml	1970-01-01 00:00:00 +0000
+++ app/components/ListItemReorderComponent.qml	2015-02-22 02:24:31 +0000
@@ -0,0 +1,106 @@
+/*
+ * Copyright (C) 2013, 2014, 2015
+ *      Andrew Hayzen <[e-mail]>
+ *      Nekhelesh Ramananthan <[e-mail]>
+ *      Victor Thompson <[e-mail]>
+ *
+ * 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.3
+import Ubuntu.Components 1.1
+
+
+Item {
+    id: actionReorder
+    width: units.gu(4)
+
+    Icon {
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            verticalCenter: parent.verticalCenter
+        }
+        name: "navigation-menu"  // TODO: use proper image
+        height: width
+        width: units.gu(3)
+    }
+
+    MouseArea {
+        id: actionReorderMouseArea
+        anchors {
+            fill: parent
+        }
+        property int startY: 0
+        property int startContentY: 0
+
+        onPressed: {
+            root.parent.parent.interactive = false;  // stop scrolling of listview
+            startY = root.y;
+            startContentY = root.parent.parent.contentY;
+            root.z += 10;  // force ontop of other elements
+
+            console.debug("Reorder listitem pressed", root.y)
+        }
+        onMouseYChanged: root.y += mouse.y - (root.height / 2);
+        onReleased: {
+            console.debug("Reorder diff by position", getDiff());
+
+            var diff = getDiff();
+
+            // Remove the height of the actual item if moved down
+            if (diff > 0) {
+                diff -= 1;
+            }
+
+            root.parent.parent.interactive = true;  // reenable scrolling
+
+            if (diff === 0) {
+                // Nothing has changed so reset the item
+                // z index is restored after animation
+                resetListItemYAnimation.start();
+            }
+            else {
+                var newIndex = index + diff;
+
+                if (newIndex < 0) {
+                    newIndex = 0;
+                }
+                else if (newIndex > root.parent.parent.count - 1) {
+                    newIndex = root.parent.parent.count - 1;
+                }
+
+                root.z -= 10;  // restore z index
+                reorder(index, newIndex)
+            }
+        }
+
+        function getDiff() {
+            // Get the amount of items that have been passed over (by centre)
+            return Math.round((((root.y - startY) + (root.parent.parent.contentY - startContentY)) / root.height) + 0.5);
+        }
+    }
+
+    SequentialAnimation {
+        id: resetListItemYAnimation
+        UbuntuNumberAnimation {
+            target: root;
+            property: "y";
+            to: actionReorderMouseArea.startY
+        }
+        ScriptAction {
+            script: {
+                root.z -= 10;  // restore z index
+            }
+        }
+    }
+}

=== modified file 'app/ui/AddToPlaylist.qml'
--- app/ui/AddToPlaylist.qml	2015-02-08 04:06:28 +0000
+++ app/ui/AddToPlaylist.qml	2015-02-22 02:24:31 +0000
@@ -26,6 +26,7 @@
 import "../logic/meta-database.js" as Library
 import "../logic/playlists.js" as Playlists
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 

=== modified file 'app/ui/Albums.qml'
--- app/ui/Albums.qml	2015-02-08 04:06:28 +0000
+++ app/ui/Albums.qml	2015-02-22 02:24:31 +0000
@@ -21,6 +21,7 @@
 import Ubuntu.Components 1.1
 import Ubuntu.MediaScanner 0.1
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 

=== modified file 'app/ui/ArtistView.qml'
--- app/ui/ArtistView.qml	2015-02-08 04:06:28 +0000
+++ app/ui/ArtistView.qml	2015-02-22 02:24:31 +0000
@@ -26,6 +26,7 @@
 import QtQuick.LocalStorage 2.0
 import "../logic/meta-database.js" as Library
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/ViewButton"
 

=== modified file 'app/ui/Artists.qml'
--- app/ui/Artists.qml	2015-02-08 04:06:28 +0000
+++ app/ui/Artists.qml	2015-02-22 02:24:31 +0000
@@ -27,6 +27,7 @@
 import "../logic/meta-database.js" as Library
 import "../logic/playlists.js" as Playlists
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 

=== modified file 'app/ui/Genres.qml'
--- app/ui/Genres.qml	2015-02-08 04:06:28 +0000
+++ app/ui/Genres.qml	2015-02-22 02:24:31 +0000
@@ -21,6 +21,7 @@
 import Ubuntu.Components 1.1
 import Ubuntu.MediaScanner 0.1
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 

=== modified file 'app/ui/NowPlaying.qml'
--- app/ui/NowPlaying.qml	2015-02-08 04:06:28 +0000
+++ app/ui/NowPlaying.qml	2015-02-22 02:24:31 +0000
@@ -23,6 +23,7 @@
 import Ubuntu.Components 1.1
 import Ubuntu.Thumbnailer 0.1
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 import "../components/ListItemActions"
@@ -378,7 +379,6 @@
                 fill: parent
                 topMargin: units.gu(2)
             }
-            delegate: queueDelegate
             footer: Item {
                 height: mainView.height - (styleMusic.common.expandHeight + queueList.currentHeight) + units.gu(8)
             }
@@ -390,95 +390,62 @@
 
             onCountChanged: customdebug("Queue: Now has: " + queueList.count + " tracks")
 
-            Component {
-                id: queueDelegate
-                ListItemWithActions {
-                    id: queueListItem
-                    color: player.currentIndex === index ? "#2c2c34" : styleMusic.mainView.backgroundColor
-                    height: queueList.normalHeight
-                    objectName: "nowPlayingListItem" + index
-                    state: ""
-
-                    leftSideAction: Remove {
-                        onTriggered: trackQueue.removeQueueList([index])
-                    }
-                    multiselectable: true
-                    reorderable: true
-                    rightSideActions: [
-                        AddToPlaylist{
-
-                        }
-                    ]
-
-                    onItemClicked: {
-                        customdebug("File: " + model.filename) // debugger
-                        trackQueueClick(index);  // toggle track state
-                    }
-                    onReorder: {
-                        console.debug("Move: ", from, to);
-
-                        trackQueue.model.move(from, to, 1);
-                        Library.moveQueueItem(from, to);
-
-                        // Maintain currentIndex with current song
-                        if (from === player.currentIndex) {
-                            player.currentIndex = to;
-                        }
-                        else if (from < player.currentIndex && to >= player.currentIndex) {
-                            player.currentIndex -= 1;
-                        }
-                        else if (from > player.currentIndex && to <= player.currentIndex) {
-                            player.currentIndex += 1;
-                        }
-
-                        queueIndex = player.currentIndex
-                    }
-
-                    Item {
-                        id: trackContainer;
-                        anchors {
-                            fill: parent
-                        }
-
-                        NumberAnimation {
-                            id: trackContainerReorderAnimation
-                            target: trackContainer;
-                            property: "anchors.leftMargin";
-                            duration: queueList.transitionDuration;
-                            to: units.gu(2)
-                        }
-
-                        NumberAnimation {
-                            id: trackContainerResetAnimation
-                            target: trackContainer;
-                            property: "anchors.leftMargin";
-                            duration: queueList.transitionDuration;
-                            to: units.gu(0.5)
-                        }
-
-                        MusicRow {
-                            id: musicRow
-                            height: parent.height
-                            column: Column {
-                                Label {
-                                    id: trackTitle
-                                    color: player.currentIndex === index ? UbuntuColors.blue
-                                                                            : styleMusic.common.music
-                                    fontSize: "small"
-                                    objectName: "titleLabel"
-                                    text: model.title
-                                }
-
-                                Label {
-                                    id: trackArtist
-                                    color: styleMusic.common.subtitle
-                                    fontSize: "x-small"
-                                    objectName: "artistLabel"
-                                    text: model.author
-                                }
-                            }
-                        }
-                    }
+            delegate: MusicListItem {
+                id: queueListItem
+                color: player.currentIndex === index ? "#2c2c34" : styleMusic.mainView.backgroundColor
+                column: Column {
+                    Label {
+                        id: trackTitle
+                        color: player.currentIndex === index ? UbuntuColors.blue : styleMusic.common.music
+                        fontSize: "small"
+                        objectName: "titleLabel"
+                        text: model.title
+                    }
+
+                    Label {
+                        id: trackArtist
+                        color: styleMusic.common.subtitle
+                        fontSize: "x-small"
+                        objectName: "artistLabel"
+                        text: model.author
+                    }
+                }
+                height: queueList.normalHeight
+                objectName: "nowPlayingListItem" + index
+                state: ""
+                leftSideAction: Remove {
+                    onTriggered: trackQueue.removeQueueList([index])
+                }
+                multiselectable: true
+                reorderable: true
+                rightSideActions: [
+                    AddToPlaylist{
+
+                    }
+                ]
+
+                onItemClicked: {
+                    customdebug("File: " + model.filename) // debugger
+                    trackQueueClick(index);  // toggle track state
+                }
+                onReorder: {
+                    console.debug("Move: ", from, to);
+
+                    trackQueue.model.move(from, to, 1);
+                    Library.moveQueueItem(from, to);
+
+                    // Maintain currentIndex with current song
+                    if (from === player.currentIndex) {
+                        player.currentIndex = to;
+                    }
+                    else if (from < player.currentIndex && to >= player.currentIndex) {
+                        player.currentIndex -= 1;
+                    }
+                    else if (from > player.currentIndex && to <= player.currentIndex) {
+                        player.currentIndex += 1;
+                    }
+
+                    queueIndex = player.currentIndex
                 }
             }
         }

=== modified file 'app/ui/Playlists.qml'
--- app/ui/Playlists.qml	2015-02-08 04:06:28 +0000
+++ app/ui/Playlists.qml	2015-02-22 02:24:31 +0000
@@ -25,6 +25,7 @@
 import QtQuick.LocalStorage 2.0
 import "../logic/playlists.js" as Playlists
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 

=== modified file 'app/ui/Recent.qml'
--- app/ui/Recent.qml	2015-02-08 04:06:28 +0000
+++ app/ui/Recent.qml	2015-02-22 02:24:31 +0000
@@ -28,6 +28,7 @@
 import "../logic/meta-database.js" as Library
 import "../logic/playlists.js" as Playlists
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 
 MusicPage {

=== modified file 'app/ui/Songs.qml'
--- app/ui/Songs.qml	2015-02-08 04:06:28 +0000
+++ app/ui/Songs.qml	2015-02-22 02:24:31 +0000
@@ -25,6 +25,7 @@
 import QtQuick.LocalStorage 2.0
 import "../logic/playlists.js" as Playlists
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 import "../components/ListItemActions"
@@ -90,61 +91,43 @@
             }
         }
 
-        delegate: trackDelegate
-        Component {
-            id: trackDelegate
-
-            ListItemWithActions {
-                id: track
-                objectName: "tracksPageListItem" + index
-                height: units.gu(7)
-
-                multiselectable: true
-                rightSideActions: [
-                    AddToQueue {
-                    },
-                    AddToPlaylist {
-
-                    }
-                ]
-
-                onItemClicked: {
-                    if (songsPage.state === "search") {  // only play single track when searching
-                        trackQueue.clear()
-                        trackQueue.append(songsModelFilter.get(index))
-                        trackQueueClick(0)
-                    } else {
-                        trackClicked(songsModelFilter, index)  // play track
-                    }
-                }
-
-                MusicRow {
-                    id: musicRow
-                    anchors {
-                        verticalCenter: parent.verticalCenter
-                    }
-                    imageSource: {"art": model.art}
-                    column: Column {
-                        Label {
-                            id: trackTitle
-                            color: styleMusic.common.music
-                            fontSize: "small"
-                            objectName: "tracktitle"
-                            text: model.title
-                        }
-
-                        Label {
-                            id: trackArtist
-                            color: styleMusic.common.subtitle
-                            fontSize: "x-small"
-                            text: model.author
-                        }
-                    }
-                }
-
-                states: State {
-                    name: "Current"
-                    when: track.ListView.isCurrentItem
+        delegate: MusicListItem {
+            id: track
+            objectName: "tracksPageListItem" + index
+            column: Column {
+                Label {
+                    id: trackTitle
+                    color: styleMusic.common.music
+                    fontSize: "small"
+                    objectName: "tracktitle"
+                    text: model.title
+                }
+
+                Label {
+                    id: trackArtist
+                    color: styleMusic.common.subtitle
+                    fontSize: "x-small"
+                    text: model.author
+                }
+            }
+            height: units.gu(7)
+            imageSource: {"art": model.art}
+            multiselectable: true
+            rightSideActions: [
+                AddToQueue {
+                },
+                AddToPlaylist {
+
+                }
+            ]
+
+            onItemClicked: {
+                if (songsPage.state === "search") {  // only play single track when searching
+                    trackQueue.clear()
+                    trackQueue.append(songsModelFilter.get(index))
+                    trackQueueClick(0)
+                } else {
+                    trackClicked(songsModelFilter, index)  // play track
                 }
             }
         }

=== modified file 'app/ui/SongsView.qml'
--- app/ui/SongsView.qml	2015-02-08 04:06:28 +0000
+++ app/ui/SongsView.qml	2015-02-22 02:24:31 +0000
@@ -27,6 +27,7 @@
 import "../logic/meta-database.js" as Library
 import "../logic/playlists.js" as Playlists
 import "../components"
+import "../components/Delegates"
 import "../components/Flickables"
 import "../components/HeadState"
 import "../components/ListItemActions"
@@ -186,11 +187,9 @@
         anchors {
             fill: parent
         }
-        delegate: albumTracksDelegate
         model: isAlbum ? songsModel : albumTracksModel.model
         objectName: "songspage-listview"
         width: parent.width
-
         header: BlurredHeader {
             rightColumn: Column {
                 spacing: units.gu(2)
@@ -290,92 +289,82 @@
                 }
             }
         }
-
-        Component {
-            id: albumTracksDelegate
-
-            ListItemWithActions {
-                id: track
-                objectName: "songsPageListItem" + index
-                height: units.gu(6)
-
-                leftSideAction: songStackPage.line1 === i18n.tr("Playlist")
-                                ? playlistRemoveAction.item : null
-                multiselectable: true
-                reorderable: songStackPage.line1 === i18n.tr("Playlist")
-                rightSideActions: [
-                    AddToQueue {
-
-                    },
-                    AddToPlaylist {
-
-                    }
-                ]
-
-                onItemClicked: {
-                    trackClicked(albumtrackslist.model, index)  // play track
-
-                    if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
-                        Library.addRecent(albumtrackslist.model.get(0, albumtrackslist.model.RoleModelData).album, "album")
-                    } else if (songStackPage.line1 === i18n.tr("Playlist")) {
-                        Library.addRecent(songStackPage.line2, "playlist")
-                    } else {
-                        console.debug("Unknown type to add to recent")
-                    }
-
-                    recentModel.filterRecent()
-                }
-                onReorder: {
-                    console.debug("Move: ", from, to);
-
-                    Playlists.move(songStackPage.line2, from, to)
-
-                    albumTracksModel.filterPlaylistTracks(songStackPage.line2)
-                }
-
-                Loader {
-                    id: playlistRemoveAction
-                    sourceComponent: Remove {
-                        onTriggered: {
-                            Playlists.removeFromPlaylist(songStackPage.line2, model.i)
-
-                            playlistChangedHelper()  // update recent/playlist models
-
-                            albumTracksModel.filterPlaylistTracks(songStackPage.line2)
-
-                            // refresh cover art
-                            songStackPage.covers = Playlists.getPlaylistCovers(songStackPage.line2)
-                        }
-                    }
-                }
-
-                MusicRow {
-                    id: musicRow
-                    height: parent.height
-                    column: Column {
-                        Label {
-                            id: trackTitle
-                            color: styleMusic.common.music
-                            fontSize: "small"
-                            objectName: "songspage-tracktitle"
-                            text: model.title
-                        }
-
-                        Label {
-                            id: trackArtist
-                            color: styleMusic.common.subtitle
-                            fontSize: "x-small"
-                            text: model.author
-                        }
-                    }
-                }
-
-                Component.onCompleted: {
-                    if (model.date !== undefined)
-                    {
-                        songStackPage.file = model.filename;
-                        songStackPage.year = new Date(model.date).toLocaleString(Qt.locale(),'yyyy');
-                    }
+        delegate: MusicListItem {
+            id: track
+            objectName: "songsPageListItem" + index
+            column: Column {
+                Label {
+                    id: trackTitle
+                    color: styleMusic.common.music
+                    fontSize: "small"
+                    objectName: "songspage-tracktitle"
+                    text: model.title
+                }
+
+                Label {
+                    id: trackArtist
+                    color: styleMusic.common.subtitle
+                    fontSize: "x-small"
+                    text: model.author
+                }
+            }
+            height: units.gu(6)
+
+            leftSideAction: songStackPage.line1 === i18n.tr("Playlist")
+                            ? playlistRemoveAction.item : null
+            multiselectable: true
+            reorderable: songStackPage.line1 === i18n.tr("Playlist")
+            rightSideActions: [
+                AddToQueue {
+
+                },
+                AddToPlaylist {
+
+                }
+            ]
+
+            onItemClicked: {
+                trackClicked(albumtrackslist.model, index)  // play track
+
+                if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
+                    Library.addRecent(albumtrackslist.model.get(0, albumtrackslist.model.RoleModelData).album, "album")
+                } else if (songStackPage.line1 === i18n.tr("Playlist")) {
+                    Library.addRecent(songStackPage.line2, "playlist")
+                } else {
+                    console.debug("Unknown type to add to recent")
+                }
+
+                recentModel.filterRecent()
+            }
+            onReorder: {
+                console.debug("Move: ", from, to);
+
+                Playlists.move(songStackPage.line2, from, to)
+
+                albumTracksModel.filterPlaylistTracks(songStackPage.line2)
+            }
+
+            Loader {
+                id: playlistRemoveAction
+                sourceComponent: Remove {
+                    onTriggered: {
+                        Playlists.removeFromPlaylist(songStackPage.line2, model.i)
+
+                        playlistChangedHelper()  // update recent/playlist models
+
+                        albumTracksModel.filterPlaylistTracks(songStackPage.line2)
+
+                        // refresh cover art
+                        songStackPage.covers = Playlists.getPlaylistCovers(songStackPage.line2)
+                    }
+                }
+            }
+
+            Component.onCompleted: {
+                if (model.date !== undefined)
+                {
+                    songStackPage.file = model.filename;
+                    songStackPage.year = new Date(model.date).toLocaleString(Qt.locale(),'yyyy');
                 }
             }
         }

=== modified file 'tests/autopilot/music_app/__init__.py'
--- tests/autopilot/music_app/__init__.py	2015-02-04 04:20:07 +0000
+++ tests/autopilot/music_app/__init__.py	2015-02-22 02:24:31 +0000
@@ -187,7 +187,7 @@
         self.visible.wait_for(True)
 
     def get_track(self, i):
-        return (self.wait_select_single(ListItemWithActions,
+        return (self.wait_select_single(MusicListItem,
                 objectName="tracksPageListItem" + str(i)))
 
 
@@ -270,7 +270,7 @@
 
     @ensure_now_playing_list
     def get_track(self, i):
-        return (self.wait_select_single(ListItemWithActions,
+        return (self.wait_select_single(MusicListItem,
                 objectName="nowPlayingListItem" + str(i)))
 
     @ensure_now_playing_full
@@ -331,7 +331,7 @@
                                        objectName="songsPageHeaderAlbumArtist")
 
     def get_track(self, i):
-        return (self.wait_select_single(ListItemWithActions,
+        return (self.wait_select_single(MusicListItem,
                 objectName="songsPageListItem" + str(i)))
 
 
@@ -358,7 +358,7 @@
         now_playing_page.visible.wait_for(True)
 
 
-class ListItemWithActions(UbuntuUIToolkitCustomProxyObjectBase):
+class MusicListItem(UbuntuUIToolkitCustomProxyObjectBase):
     @click_object
     def click_add_to_playlist_action(self):
         return self.wait_select_single(objectName="addToPlaylistAction")