Merge lp:~ahayzen/music-app/remix-add-multi-select-mode into lp:music-app/remix

[Andrew Hayzen]

* Pull upstream ListItemWithActions.qml
* Add support for multiselect mode
* Disable triggerOnRelease

* Pull upstream ListItemWithActions.qml
* Add support for multiselect mode
* Disable triggerOnRelease

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

PASSED: Continuous integration, rev:677
http://91.189.93.70:8080/job/music-app-remix-ci/128/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1108
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1108/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/128

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

review: Approve (continuous-integration)

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

PASSED: Continuous integration, rev:679
http://91.189.93.70:8080/job/music-app-remix-ci/134/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1127
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1127/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/134

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

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

A few initial things need fixing:
1. It seems as though the playlists are filtered again while reordering, this causes the view to flicker and the checked items get confused.
2. After reordering selected items and adding them to a playlist from the queue the items aren't quite right. Perhaps we shouldn't allow reordering when items are being selected.

review: Needs Fixing

[Victor Thompson (vthompson)]

Also, we may want to talk to design about the "select all"/"select none" icon. Perhaps it could/should toggle to an empty square or a "clear" icon when all is selected?

[Andrew Hayzen (ahayzen)]

1) Fixed due to the change in 2)
2) Disabled reordering when selectmode is enabled

[Victor Thompson (vthompson)]

While I think preventing reorder when items are selected is the proper way of doing this... we probably should talk to Design about it.

[Victor Thompson (vthompson)]

Could we please have 2 signals...

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

PASSED: Continuous integration, rev:680
http://91.189.93.70:8080/job/music-app-remix-ci/137/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1135
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1135/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/137

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

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

LGTM! This should help a lot and put us on the path towards improving performance elsewhere! Thanks!

review: Approve

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

PASSED: Continuous integration, rev:681
http://91.189.93.70:8080/job/music-app-remix-ci/139/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1139
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1139/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/139

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

review: Approve (continuous-integration)

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

FAILED: Autolanding.
More details in the following jenkins job:
http://91.189.93.70:8080/job/music-app-remix-autolanding/42/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1144
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/1144/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-autolanding/42

review: Needs Fixing (continuous-integration)

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

review: Approve (continuous-integration)

=== modified file 'MusicNowPlaying.qml'
--- MusicNowPlaying.qml	2014-10-21 16:22:20 +0000
+++ MusicNowPlaying.qml	2014-10-21 21:53:07 +0000
@@ -25,6 +25,7 @@
 import "common"
 import "common/ListItemActions"
 import "settings.js" as Settings
+import "playlists.js" as Playlists
 
 MusicPage {
     id: nowPlaying
@@ -41,43 +42,110 @@
         }
     }
 
-    head.backAction: Action {
-        iconName: "back";
-        objectName: "backButton"
-        onTriggered: {
-            mainPageStack.pop();
-
-            while (mainPageStack.depth > 1) {  // jump back to the tab layer if via SongsPage
-                mainPageStack.pop();
-            }
-        }
-    }
-
-    head {
-        actions: [
-            Action {
-                objectName: "clearQueue"
-                iconName: "delete"
-                visible: isListView
-                onTriggered: {
-                    head.backAction.trigger()
-                    trackQueue.model.clear()
-                }
-            },
-            Action {
-                objectName: "toggleView"
-                iconName: "media-playlist"
-                onTriggered: {
-                    isListView = !isListView
-                }
-            }
-        ]
-    }
-
     function positionAt(index) {
         queuelist.positionViewAtIndex(index, ListView.Center);
     }
 
+    state: isListView && queuelist.state === "multiselectable" ? "selection" : "default"
+    states: [
+        PageHeadState {
+            id: defaultState
+
+            name: "default"
+            backAction: Action {
+                iconName: "back";
+                objectName: "backButton"
+                onTriggered: {
+                    mainPageStack.pop();
+
+                    while (mainPageStack.depth > 1) {  // jump back to the tab layer if via SongsPage
+                        mainPageStack.pop();
+                    }
+                }
+            }
+            actions: [
+                Action {
+                    objectName: "clearQueue"
+                    iconName: "delete"
+                    visible: isListView
+                    onTriggered: {
+                        head.backAction.trigger()
+                        trackQueue.model.clear()
+                    }
+                },
+                Action {
+                    objectName: "toggleView"
+                    iconName: "media-playlist"
+                    onTriggered: {
+                        isListView = !isListView
+                    }
+                }
+            ]
+            PropertyChanges {
+                target: nowPlaying.head
+                backAction: defaultState.backAction
+                actions: defaultState.actions
+            }
+        },
+        PageHeadState {
+            id: selectionState
+
+            name: "selection"
+            backAction: Action {
+                text: i18n.tr("Cancel selection")
+                iconName: "back"
+                onTriggered: queuelist.state = "normal"
+            }
+            actions: [
+                Action {
+                    text: i18n.tr("Select All")
+                    iconName: "select"
+                    onTriggered: {
+                        if (queuelist.selectedItems.length === queuelist.model.count) {
+                            queuelist.clearSelection()
+                        } else {
+                            queuelist.selectAll()
+                        }
+                    }
+                },
+                Action {
+                    enabled: queuelist.selectedItems.length > 0
+                    iconName: "add-to-playlist"
+                    text: i18n.tr("Add to playlist")
+                    onTriggered: {
+                        var items = []
+
+                        for (var i=0; i < queuelist.selectedItems.length; i++) {
+                            items.push(makeDict(trackQueue.model.get(queuelist.selectedItems[i])));
+                        }
+
+                        chosenElements = items;
+                        mainPageStack.push(addtoPlaylist)
+
+                        queuelist.closeSelection()
+                    }
+                },
+                Action {
+                    enabled: queuelist.selectedItems.length > 0
+                    iconName: "delete"
+                    text: i18n.tr("Delete")
+                    onTriggered: {
+                        for (var i=0; i < queuelist.selectedItems.length; i++) {
+                            removeQueue(queuelist.selectedItems[i])
+                        }
+
+                        queuelist.closeSelection()
+                    }
+                }
+            ]
+            PropertyChanges {
+                target: nowPlaying.head
+                backAction: selectionState.backAction
+                actions: selectionState.actions
+            }
+        }
+    ]
+
     Rectangle {
         id: fullview
         anchors.fill: parent
@@ -376,6 +444,25 @@
         }
     }
 
+    function removeQueue(index)
+    {
+        var removedIndex = index
+
+        if (queuelist.count === 1) {
+            player.stop()
+            musicToolbar.goBack()
+        } else if (index === player.currentIndex) {
+            player.nextSong(player.isPlaying);
+        }
+
+        queuelist.model.remove(index);
+
+        if (removedIndex < player.currentIndex) {
+            // update index as the old has been removed
+            player.currentIndex -= 1;
+        }
+    }
+
     ListView {
         id: queuelist
         anchors {
@@ -388,23 +475,6 @@
         }
         model: trackQueue.model
         objectName: "nowPlayingQueueList"
-        state: "normal"
-        states: [
-            State {
-                name: "normal"
-                PropertyChanges {
-                    target: queuelist
-                    interactive: true
-                }
-            },
-            State {
-                name: "reorder"
-                PropertyChanges {
-                    target: queuelist
-                    interactive: false
-                }
-            }
-        ]
         visible: isListView
 
         property int normalHeight: units.gu(6)
@@ -414,6 +484,35 @@
             customdebug("Queue: Now has: " + queuelist.count + " tracks")
         }
 
+        // Requirements for ListItemWithActions
+        property var selectedItems: []
+
+        signal clearSelection()
+        signal closeSelection()
+        signal selectAll()
+
+        onClearSelection: selectedItems = []
+        onCloseSelection: {
+            clearSelection()
+            state = "normal"
+        }
+        onSelectAll: {
+            var tmp = selectedItems
+
+            for (var i=0; i < model.count; i++) {
+                if (tmp.indexOf(i) === -1) {
+                    tmp.push(i)
+                }
+            }
+
+            selectedItems = tmp
+        }
+        onVisibleChanged: {
+            if (!visible) {
+                clearSelection(true)
+            }
+        }
+
         Component {
             id: queueDelegate
             ListItemWithActions {
@@ -421,35 +520,18 @@
                 color: player.currentIndex === index ? "#2c2c34" : "transparent"
                 height: queuelist.normalHeight
                 objectName: "nowPlayingListItem" + index
-                showDivider: false
                 state: ""
 
                 leftSideAction: Remove {
-                    onTriggered: {
-                        var removedIndex = index
-
-                        if (queuelist.count === 1) {
-                            player.stop()
-                            musicToolbar.goBack()
-                        } else if (index === player.currentIndex) {
-                            player.nextSong(player.isPlaying);
-                        }
-
-                        queuelist.model.remove(index);
-
-                        if (removedIndex < player.currentIndex) {
-                            // update index as the old has been removed
-                            player.currentIndex -= 1;
-                        }
-                    }
+                    onTriggered: removeQueue(index)
                 }
+                multiselectable: true
                 reorderable: true
                 rightSideActions: [
                     AddToPlaylist{
 
                     }
                 ]
-                triggerActionOnMouseRelease: true
 
                 onItemClicked: {
                     customdebug("File: " + model.filename) // debugger
 
=== modified file 'MusicSearch.qml'
--- MusicSearch.qml	2014-09-20 15:41:33 +0000
+++ MusicSearch.qml	2014-10-21 21:53:07 +0000
@@ -154,6 +154,31 @@
                          searchTrackView.forceActiveFocus()
                      }
 
+                     // Requirements for ListItemWithActions
+                     property var selectedItems: []
+
+                     signal clearSelection(bool closeSelection)
+                     signal selectAll()
+
+                     onClearSelection: {
+                         selectedItems = []
+
+                         if (closeSelection || closeSelection === undefined) {
+                             state = "normal"
+                         }
+                     }
+                     onSelectAll: {
+                         for (var i=0; i < model.count; i++) {
+                             if (selectedItems.indexOf(i) === -1) {
+                                 selectedItems.push(i)
+                             }
+                         }
+                     }
+                     onVisibleChanged: {
+                         if (!visible) {
+                             clearSelection(true)
+                         }
+                     }
                      delegate: ListItemWithActions {
                             id: search
                             color: "transparent"
 
=== modified file 'MusicTracks.qml'
--- MusicTracks.qml	2014-10-10 05:50:32 +0000
+++ MusicTracks.qml	2014-10-21 21:53:07 +0000
@@ -34,6 +34,66 @@
     objectName: "tracksPage"
     title: i18n.tr("Songs")
 
+    state: tracklist.state === "multiselectable" ? "selection" : "default"
+    states: [
+        PageHeadState {
+            id: selectionState
+            name: "selection"
+            backAction: Action {
+                text: i18n.tr("Cancel selection")
+                iconName: "back"
+                onTriggered: tracklist.state = "normal"
+            }
+            actions: [
+                Action {
+                    iconName: "select"
+                    text: i18n.tr("Select All")
+                    onTriggered: {
+                        if (tracklist.selectedItems.length === tracklist.model.count) {
+                            tracklist.clearSelection()
+                        } else {
+                            tracklist.selectAll()
+                        }
+                    }
+                },
+                Action {
+                    enabled: tracklist.selectedItems.length !== 0
+                    iconName: "add-to-playlist"
+                    text: i18n.tr("Add to playlist")
+                    onTriggered: {
+                        var items = []
+
+                        for (var i=0; i < tracklist.selectedItems.length; i++) {
+                            items.push(makeDict(tracklist.model.get(tracklist.selectedItems[i], tracklist.model.RoleModelData)));
+                        }
+
+                        chosenElements = items;
+                        mainPageStack.push(addtoPlaylist)
+
+                        tracklist.closeSelection()
+                    }
+                },
+                Action {
+                    enabled: tracklist.selectedItems.length > 0
+                    iconName: "add"
+                    text: i18n.tr("Add to queue")
+                    onTriggered: {
+                        for (var i=0; i < tracklist.selectedItems.length; i++) {
+                            trackQueue.model.append(makeDict(tracklist.model.get(tracklist.selectedItems[i], tracklist.model.RoleModelData)));
+                        }
+
+                        tracklist.closeSelection()
+                    }
+                }
+            ]
+            PropertyChanges {
+                target: mainpage.head
+                backAction: selectionState.backAction
+                actions: selectionState.actions
+            }
+        }
+    ]
+
     ListView {
         id: tracklist
         anchors {
@@ -52,18 +112,46 @@
             sort.property: "title"
             sort.order: Qt.AscendingOrder
         }
+
+        // Requirements for ListItemWithActions
+        property var selectedItems: []
+
+        signal clearSelection()
+        signal closeSelection()
+        signal selectAll()
+
+        onClearSelection: selectedItems = []
+        onCloseSelection: {
+            clearSelection()
+            state = "normal"
+        }
+        onSelectAll: {
+            var tmp = selectedItems
+
+            for (var i=0; i < model.count; i++) {
+                if (tmp.indexOf(i) === -1) {
+                    tmp.push(i)
+                }
+            }
+
+            selectedItems = tmp
+        }
+        onVisibleChanged: {
+            if (!visible) {
+                clearSelection(true)
+            }
+        }
+
         delegate: trackDelegate
         Component {
             id: trackDelegate
 
             ListItemWithActions {
                 id: track
-                color: "transparent"
                 objectName: "tracksPageListItem" + index
-                width: parent.width
                 height: units.gu(7)
-                showDivider: false
 
+                multiselectable: true
                 rightSideActions: [
                     AddToQueue {
                     },
@@ -71,10 +159,6 @@
 
                     }
                 ]
-                triggerActionOnMouseRelease: true
-
-                // TODO: If http://pad.lv/1354753 is fixed to expose whether the Shape should appear pressed, update this as well.
-                onPressedChanged: musicRow.pressed = pressed
 
                 onItemClicked: trackClicked(tracklist.model, index)  // play track
 
 
=== modified file 'MusicaddtoPlaylist.qml'
--- MusicaddtoPlaylist.qml	2014-09-30 15:18:25 +0000
+++ MusicaddtoPlaylist.qml	2014-10-21 21:53:07 +0000
@@ -81,18 +81,17 @@
             property string count: model.count
 
             onClicked: {
-                console.debug("Debug: "+chosenElement.filename+" added to "+name)
+                for (var i=0; i < chosenElements.length; i++) {
+                    console.debug("Debug: "+chosenElements[i].filename+" added to "+name)
 
-                Playlists.addToPlaylist(name, chosenElement)
+                    Playlists.addToPlaylist(name, chosenElements[i])
+                }
 
                 playlistModel.filterPlaylists();
 
                 musicToolbar.goBack();  // go back to the previous page
             }
 
-            // TODO: If http://pad.lv/1354753 is fixed to expose whether the Shape should appear pressed, update this as well.
-            onPressedChanged: musicRow.pressed = pressed
-
             MusicRow {
                 id: musicRow
                 covers: Playlists.getPlaylistCovers(playlist.name)
 
=== modified file 'common/ListItemActions/AddToPlaylist.qml'
--- common/ListItemActions/AddToPlaylist.qml	2014-09-20 10:50:45 +0000
+++ common/ListItemActions/AddToPlaylist.qml	2014-10-21 21:53:07 +0000
@@ -27,7 +27,7 @@
     property bool primed: false
 
     onTriggered: {
-       chosenElement = makeDict(model);
+       chosenElements = [makeDict(model)];
        console.debug("Debug: Add track to playlist");
        mainPageStack.push(addtoPlaylist)
     }
 
=== added file 'common/ListItemActions/CheckBox.qml'
--- common/ListItemActions/CheckBox.qml	1970-01-01 00:00:00 +0000
+++ common/ListItemActions/CheckBox.qml	2014-10-21 21:53:07 +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 'common/ListItemWithActions.qml'
--- common/ListItemWithActions.qml	2014-09-20 10:50:45 +0000
+++ common/ListItemWithActions.qml	2014-10-21 21:53:07 +0000
@@ -19,116 +19,170 @@
 import Ubuntu.Components.ListItems 1.0 as ListItem
 
 
-ListItem.Standard {  // CUSTOM
-//Item {
+Item {
     id: root
+    width: parent.width
 
     property Action leftSideAction: null
     property list<Action> rightSideActions
     property double defaultHeight: units.gu(8)
     property bool locked: false
-    property bool pressed: false
     property Action activeAction: null
     property var activeItem: null
     property bool triggerActionOnMouseRelease: false
-    property alias color: main.color
-    default property alias contents: main.children
-
-    property bool reorderable: false  // CUSTOM
-    property bool reordering: false  // CUSTOM
-
-    readonly property double actionWidth: units.gu(5)
+    property color color: Theme.palette.normal.background
+    property color selectedColor: "#3d3d45"  // "#E6E6E6"  // CUSTOM
+    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(4)  // CUSTOM 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
+    readonly property bool _showActions: mouseArea.pressed || swipeState != "Normal" || swipping
+
+    property bool reorderable: false  // CUSTOM
+    property bool reordering: false  // CUSTOM
+    property bool multiselectable: false  // CUSTOM
+
+    property int previousListItemIndex: -1  // CUSTOM
+    property int listItemIndex: index  // CUSTOM
+
+    /* internal */
+    property var _visibleRightSideActions: filterVisibleActions(rightSideActions)
 
     signal itemClicked(var mouse)
     signal itemPressAndHold(var mouse)
 
     signal reorder(int from, int to)  // CUSTOM
 
-    onItemPressAndHold: reordering = reorderable && !reordering  // CUSTOM
-    onReorderingChanged: {  // CUSTOM
-        if (reordering) {
+    onItemPressAndHold: {
+        //reordering = reorderable && !reordering  // CUSTOM
+        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 = reordering ? actionReorder.width + units.gu(2) : 0
-        }
-
-        parent.state = reordering ? "reorder" : "normal"
+            main.children[j].anchors.rightMargin = reorderable && selectionMode ? actionReorder.width + units.gu(2) : 0
+        }
+
+        parent.parent.state = selectionMode ? "multiselectable" : "normal"
+
+        if (!selectionMode) {
+            selected = false
+        }
     }
 
-    function returnToBoundsRTL()
+    function returnToBoundsRTL(direction)
     {
         var actionFullWidth = actionWidth + units.gu(2)
+
+        // go back to normal state if swipping reverse
+        if (direction === "LTR") {
+            updatePosition(0)
+            return
+        } else if (!triggerActionOnMouseRelease) {
+            updatePosition(-rightActionsView.width + units.gu(2))
+            return
+        }
+
         var xOffset = Math.abs(main.x)
-        var index = Math.min(Math.floor(xOffset / actionFullWidth), rightSideActions.length)
-        var j;  // CUSTOM
-
-        if (index < 1) {
-            main.x = 0
-
-            resetPrimed()  // CUSTOM
-        } else if (index === rightSideActions.length) {
-            main.x = -rightActionsView.width
+        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 {
-            main.x = -(actionFullWidth * index)
+        } else if (index >= 1) {
+            newX = -(actionFullWidth * index)
 
             for (j=0; j < rightSideActions.length; j++) {  // CUSTOM
                 rightActionsRepeater.itemAt(j).primed = j === index
             }
         }
+
+        updatePosition(newX)
     }
 
-    function returnToBoundsLTR()
+    function returnToBoundsLTR(direction)
     {
         var finalX = leftActionWidth
-        if (main.x > (finalX * root.threshold))
-            main.x = finalX
-        else {
-            main.x = 0
-
-            resetPrimed()  // CUSTOM
-        }
+        if ((direction === "RTL") || (main.x <= (finalX * root.threshold)))
+            finalX = 0
+        updatePosition(finalX)
 
         if (leftSideAction !== null) {  // CUSTOM
             leftActionIcon.primed = main.x > (finalX * root.threshold)
         }
     }
 
-    function returnToBounds()
+    function returnToBounds(direction)
     {
         if (main.x < 0) {
-            returnToBoundsRTL()
+            returnToBoundsRTL(direction)
         } else if (main.x > 0) {
-            returnToBoundsLTR()
-        } else {  // CUSTOM
-            resetPrimed()  // CUSTOM
+            returnToBoundsLTR(direction)
+        } else {
+            updatePosition(0)
         }
     }
 
-    function contains(item, point)
+    function contains(item, point, marginX)
     {
-        return (point.x >= item.x) && (point.x <= (item.x + item.width)) && (point.y >= item.y) && (point.y <= (item.y + item.height));
+        var itemStartX = item.x - marginX
+        var itemEndX = item.x + item.width + marginX
+        return (point.x >= itemStartX) && (point.x <= itemEndX) &&
+               (point.y >= item.y) && (point.y <= (item.y + item.height));
     }
 
     function getActionAt(point)
     {
-        if (contains(leftActionView, point)) {
+        if (contains(leftActionView, point, 0)) {
             return leftSideAction
-        } else if (contains(rightActionsView, point)) {
+        } else if (contains(rightActionsView, point, 0)) {
             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)) {
+                if (contains(child, newPoint, units.gu(1))) {
                     return i
                 }
             }
@@ -138,15 +192,16 @@
 
     function updateActiveAction()
     {
-        if ((main.x <= -root.actionWidth) &&
-            (main.x > -rightActionsView.width)) {
+        if (triggerActionOnMouseRelease &&
+            (main.x <= -(root.actionWidth + units.gu(2))) &&
+            (main.x > -(rightActionsView.width - units.gu(2)))) {
             var actionFullWidth = actionWidth + units.gu(2)
             var xOffset = Math.abs(main.x)
-            var index = Math.min(Math.floor(xOffset / actionFullWidth), rightSideActions.length)
+            var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
             index = index - 1
             if (index > -1) {
                 root.activeItem = rightActionsRepeater.itemAt(index)
-                root.activeAction = root.rightSideActions[index]
+                root.activeAction = root._visibleRightSideActions[index]
             }
         } else {
             root.activeAction = null
@@ -160,15 +215,40 @@
         }
 
         for (var j=0; j < rightSideActions.length; j++) {
+            console.debug(rightActionsRepeater.itemAt(j));
             rightActionsRepeater.itemAt(j).primed = false
         }
     }
 
     function resetSwipe()
     {
-        main.x = 0
-
-        resetPrimed()  // CUSTOM
+        updatePosition(0)
+    }
+
+    function filterVisibleActions(actions)
+    {
+        var visibleActions = []
+        for(var i = 0; i < actions.length; i++) {
+            var action = actions[i]
+            if (action.visible) {
+                visibleActions.push(action)
+            }
+        }
+        return visibleActions
+    }
+
+    function updatePosition(pos)
+    {
+        if (!root.triggerActionOnMouseRelease && (pos !== 0)) {
+            mouseArea.state = pos > 0 ? "RightToLeft" : "LeftToRight"
+        } else {
+            mouseArea.state = ""
+        }
+        main.x = pos
+
+        if (pos === 0) {  // CUSTOM
+            //resetPrimed()
+        }
     }
 
     Connections {  // CUSTOM
@@ -181,8 +261,10 @@
     }
 
     Connections {  // CUSTOM
-        target: root.parent
-        onStateChanged: reordering = root.parent.state === "reorder"
+        target: root.parent.parent
+        onClearSelection: selected = false
+        onSelectAll: selected = true
+        onStateChanged: selectionMode = root.parent.parent.state === "multiselectable"
         onVisibleChanged: {
             if (!visible) {
                 reordering = false
@@ -190,7 +272,13 @@
         }
     }
 
-    Component.onCompleted: reordering = root.parent.state === "reorder"  // CUSTOM
+    Component.onCompleted: {  // CUSTOM
+        if (parent.parent.selectedItems.indexOf(index) !== -1) {  // FIXME:
+            selected = true
+        }
+
+        selectionMode = root.parent.parent.state === "multiselectable"
+    }
 
     /* CUSTOM Dim Component */
     Rectangle {
@@ -228,6 +316,26 @@
         }
     }
 
+    states: [
+        State {
+            name: "select"
+            when: selectionMode || selected
+            PropertyChanges {
+                target: selectionIcon
+                source: Qt.resolvedUrl("ListItemActions/CheckBox.qml")
+                anchors.leftMargin: units.gu(2)
+            }
+            PropertyChanges {
+                target: root
+                locked: true
+            }
+            PropertyChanges {
+                target: main
+                x: 0
+            }
+        }
+    ]
+
     height: defaultHeight
     clip: height !== defaultHeight
 
@@ -241,16 +349,15 @@
         }
         width: root.leftActionWidth + actionThreshold
         visible: leftSideAction
-        color: "red"
+        color: UbuntuColors.red
 
         Icon {
-            id: leftActionIcon
             anchors {
                 centerIn: parent
                 horizontalCenterOffset: actionThreshold / 2
             }
             objectName: "swipeDeleteAction"  // CUSTOM
-            name: leftSideAction ? leftSideAction.iconName : ""
+            name: leftSideAction && _showActions ? leftSideAction.iconName : ""
             color: Theme.palette.selected.field
             height: units.gu(3)
             width: units.gu(3)
@@ -259,7 +366,8 @@
         }
     }
 
-    Item {
+    //Rectangle {
+    Item {  // CUSTOM
        id: rightActionsView
 
        anchors {
@@ -268,8 +376,9 @@
            leftMargin: reordering ? actionReorder.width : units.gu(1)  // CUSTOM
            bottom: main.bottom
        }
-       visible: rightSideActions.length > 0
-       width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + actionThreshold : 0
+       visible: _visibleRightSideActions.length > 0
+       width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + root.actionThreshold + units.gu(2) : 0
+       // color: "white"  // CUSTOM
 
        Rectangle {  // CUSTOM
            anchors {
@@ -283,22 +392,23 @@
        }
 
        Row {
-           anchors {
-               fill: parent
-               leftMargin: units.gu(2)  // CUSTOM
+           anchors{
+               top: parent.top
+               left: parent.left
+               leftMargin: units.gu(2)
+               right: parent.right
+               rightMargin: units.gu(2)
+               bottom: parent.bottom
            }
            spacing: units.gu(2)
            Repeater {
                id: rightActionsRepeater
 
-               model: rightSideActions
+               model: _showActions ? _visibleRightSideActions : []
                Item {
                    property alias image: img
 
-                   anchors {
-                       top: parent.top
-                       bottom: parent.bottom
-                   }
+                   height: rightActionsView.height
                    width: root.actionWidth
 
                    property alias primed: img.primed  // CUSTOM
@@ -310,8 +420,8 @@
                        objectName: rightSideActions[index].objectName  // CUSTOM
                        width: units.gu(3)
                        height: units.gu(3)
-                       name: iconName
-                       color: root.activeAction === modelData || !root.triggerActionOnMouseRelease ? UbuntuColors.orange : styleMusic.common.white  // CUSTOM
+                       name: modelData.iconName
+                       color: root.activeAction === modelData ? UbuntuColors.orange : styleMusic.common.white  // CUSTOM
 
                        property bool primed: false  // CUSTOM
                    }
@@ -330,6 +440,38 @@
         }
 
         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)  // CUSTOM
+                top: parent.top
+                //topMargin: units.gu(1)  // CUSTOM
+                right: parent.right
+                //rightMargin: units.gu(2)  // CUSTOM
+                bottom: parent.bottom
+                //bottomMargin: units.gu(1)  // CUSTOM
+            }
+        }
 
         Behavior on x {
             UbuntuNumberAnimation {
@@ -342,7 +484,7 @@
     }
 
     /* CUSTOM Reorder Component */
-    Rectangle {
+    Item {
         id: actionReorder
         anchors {
             bottom: parent.bottom
@@ -350,9 +492,8 @@
             rightMargin: units.gu(1)
             top: parent.top
         }
-        color: "transparent"
         width: units.gu(4)
-        visible: reordering
+        visible: reorderable && selectionMode && root.parent.parent.selectedItems.length === 0
 
         Icon {
             anchors {
@@ -469,7 +610,10 @@
             value: 1.0
         }
         ScriptAction {
-            script: root.activeAction.triggered(root)
+            script: {
+                root.activeAction.triggered(root)
+                mouseArea.state = ""
+            }
         }
         PauseAnimation {
             duration: 500
@@ -479,23 +623,53 @@
             property: "x"
             to: 0
         }
-        ScriptAction {
-            script: resetPrimed()
-        }
     }
 
     MouseArea {
         id: mouseArea
 
-        property bool locked: root.locked || ((root.leftSideAction === null) && (root.rightSideActions.count === 0)) || reordering  // CUSTOM
+        property bool locked: root.locked || ((root.leftSideAction === null) && (root._visibleRightSideActions.count === 0)) || reordering  // CUSTOM
         property bool manual: false
+        property string direction: "None"
+        property real lastX: -1
 
         anchors.fill: parent
         drag {
             target: locked ? null : main
             axis: Drag.XAxis
-            minimumX: rightActionsView.visible ? -(rightActionsView.width + root.actionThreshold) : 0
+            minimumX: rightActionsView.visible ? -(rightActionsView.width) : 0
             maximumX: leftActionView.visible ? leftActionView.width : 0
+            threshold: root.actionThreshold
+        }
+
+        states: [
+            State {
+                name: "LeftToRight"
+                PropertyChanges {
+                    target: mouseArea
+                    drag.maximumX: 0
+                }
+            },
+            State {
+                name: "RightToLeft"
+                PropertyChanges {
+                    target: mouseArea
+                    drag.minimumX: 0
+                }
+            }
+        ]
+
+        onMouseXChanged: {
+            var offset = (lastX - mouseX)
+            if (Math.abs(offset) <= root.actionThreshold) {
+                return
+            }
+            lastX = mouseX
+            direction = offset > 0 ? "RTL" : "LTR";
+        }
+
+        onPressed: {
+            lastX = mouse.x
         }
 
         onReleased: {
@@ -505,10 +679,13 @@
                 root.returnToBounds()
                 root.activeAction = null
             }
+            lastX = -1
+            direction = "None"
         }
         onClicked: {
-            if (reordering) {  // CUSTOM
-                reordering = false
+            if (selectionMode) {  // CUSTOM
+                selected = !selected
+                return
             }
             else if (main.x === 0) {
                 root.itemClicked(mouse)
@@ -544,8 +721,6 @@
             }
         }
 
-        onPressedChanged: root.pressed = pressed
-
         z: -1
     }
 }
 
=== modified file 'common/SongsPage.qml'
--- common/SongsPage.qml	2014-10-21 17:30:51 +0000
+++ common/SongsPage.qml	2014-10-21 21:53:07 +0000
@@ -44,7 +44,7 @@
     property alias album: songsModel.album
     property alias genre: songsModel.genre
 
-    state: songStackPage.line1 === i18n.tr("Playlist") ? "playlist" : "album"
+    state: albumtrackslist.state === "multiselectable" ? "selection" : (songStackPage.line1 === i18n.tr("Playlist") ? "playlist" : "album")
     states: [
         PageHeadState {
             id: albumState
@@ -57,7 +57,6 @@
         },
         PageHeadState {
             id: playlistState
-
             name: "playlist"
             actions: [
                 Action {
@@ -82,6 +81,78 @@
                 backAction: playlistState.backAction
                 actions: playlistState.actions
             }
+        },
+        PageHeadState {
+            id: selectionState
+            name: "selection"
+            backAction: Action {
+                text: i18n.tr("Cancel selection")
+                iconName: "back"
+                onTriggered: albumtrackslist.state = "normal"
+            }
+            actions: [
+                Action {
+                    iconName: "select"
+                    text: i18n.tr("Select All")
+                    onTriggered: {
+                        if (albumtrackslist.selectedItems.length === albumtrackslist.model.count) {
+                            albumtrackslist.clearSelection()
+                        } else {
+                            albumtrackslist.selectAll()
+                        }
+                    }
+                },
+                Action {
+                    enabled: albumtrackslist.selectedItems.length > 0
+                    iconName: "add-to-playlist"
+                    text: i18n.tr("Add to playlist")
+                    onTriggered: {
+                        var items = []
+
+                        for (var i=0; i < albumtrackslist.selectedItems.length; i++) {
+                            items.push(makeDict(albumtrackslist.model.get(albumtrackslist.selectedItems[i], albumtrackslist.model.RoleModelData)));
+                        }
+
+                        chosenElements = items;
+                        mainPageStack.push(addtoPlaylist)
+
+                        albumtrackslist.closeSelection()
+                    }
+                },
+                Action {
+                    enabled: albumtrackslist.selectedItems.length > 0
+                    iconName: "add"
+                    text: i18n.tr("Add to queue")
+                    onTriggered: {
+                        for (var i=0; i < albumtrackslist.selectedItems.length; i++) {
+                            trackQueue.model.append(makeDict(albumtrackslist.model.get(albumtrackslist.selectedItems[i], albumtrackslist.model.RoleModelData)));
+                        }
+
+                        albumtrackslist.closeSelection()
+                    }
+                },
+                Action {
+                    enabled: albumtrackslist.selectedItems.length > 0
+                    iconName: "delete"
+                    text: i18n.tr("Delete")
+                    visible: songStackPage.line1 === i18n.tr("Playlist")
+                    onTriggered: {
+                        for (var i=0; i < albumtrackslist.selectedItems.length; i++) {
+                            Playlists.removeFromPlaylist(songStackPage.line2, albumtrackslist.selectedItems[i] - i)
+                        }
+
+                        albumtrackslist.closeSelection()
+
+                        albumTracksModel.filterPlaylistTracks(songStackPage.line2)
+                        playlistModel.filterPlaylists()
+                    }
+                }
+            ]
+            PropertyChanges {
+                target: songStackPage.head
+                backAction: selectionState.backAction
+                actions: selectionState.actions
+            }
         }
     ]
 
@@ -99,6 +170,36 @@
         model: isAlbum ? songsModel : albumTracksModel.model
         objectName: "songspage-listview"
         width: parent.width
+
+        // Requirements for ListItemWithActions
+        property var selectedItems: []
+
+        signal clearSelection()
+        signal closeSelection()
+        signal selectAll()
+
+        onClearSelection: selectedItems = []
+        onCloseSelection: {
+            clearSelection()
+            state = "normal"
+        }
+        onSelectAll: {
+            var tmp = selectedItems
+
+            for (var i=0; i < model.count; i++) {
+                if (tmp.indexOf(i) === -1) {
+                    tmp.push(i)
+                }
+            }
+
+            selectedItems = tmp
+        }
+        onVisibleChanged: {
+            if (!visible) {
+                clearSelection(true)
+            }
+        }
+
         header: BlurredHeader {
             rightColumn: Column {
                 spacing: units.gu(2)
@@ -238,15 +339,12 @@
 
             ListItemWithActions {
                 id: track
-                color: "transparent"
                 objectName: "songsPageListItem" + index
-                iconFrame: false
-                progression: false
-                showDivider: false
                 height: units.gu(6)
 
                 leftSideAction: songStackPage.line1 === i18n.tr("Playlist")
                                 ? playlistRemoveAction.item : null
+                multiselectable: true
                 reorderable: songStackPage.line1 === i18n.tr("Playlist")
                 rightSideActions: [
                     AddToQueue {
@@ -256,7 +354,6 @@
 
                     }
                 ]
-                triggerActionOnMouseRelease: true
 
                 onItemClicked: {
                     trackClicked(albumtrackslist.model, index)  // play track
@@ -289,9 +386,6 @@
                     }
                 }
 
-                // TODO: If http://pad.lv/1354753 is fixed to expose whether the Shape should appear pressed, update this as well.
-                onPressedChanged: musicRow.pressed = pressed
-
                 MusicRow {
                     id: musicRow
                     covers: []
 
=== modified file 'music-app.qml'
--- music-app.qml	2014-10-21 14:59:51 +0000
+++ music-app.qml	2014-10-21 21:53:07 +0000
@@ -594,7 +594,7 @@
     property string lastfmusername
     property string lastfmpassword
     property string timestamp // used to scrobble
-    property var chosenElement: null
+    property var chosenElements: []
     property bool toolbarShown: musicToolbar.visible
     property bool selectedAlbum: false
 
@@ -875,7 +875,7 @@
     }
 
     // Popover for tracks, queue and add to playlist, for example
-    Component {
+    Component {  // TODO: needed anymore? remove?
         id: trackPopoverComponent
         Popover {
             id: trackPopover
@@ -895,9 +895,12 @@
                         anchors.verticalCenter: parent.verticalCenter
                     }
                     onClicked: {
-                        console.debug("Debug: Add track to queue: " + JSON.stringify(chosenElement))
+                        console.debug("Debug: Add track to queue: " + JSON.stringify(chosenElements))
                         PopupUtils.close(trackPopover)
-                        trackQueue.append(chosenElement)
+
+                        for (var i=0; i < chosenElements.length; i++) {
+                            trackQueue.append(chosenElements[i])
+                        }
                     }
                 }
                 ListItem.Standard {