Merge lp:~zsombi/ubuntu-ui-toolkit/80-selection-mode into lp:ubuntu-ui-toolkit/staging

[Zsombor Egri]

Introducing select/multiselect mode in ListItem.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1367
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1441/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/1354
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/168
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/171
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/171/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/168
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/1194
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1352
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1352/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/18052

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1441/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1369
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1445/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/1369
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/172
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/175
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/175/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/172
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/1209
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1367
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1367/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/18078

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1445/rebuild

review: Needs Fixing (continuous-integration)

[Cris Dywan (kalikiana)]

> 747 + self.wait_select_single('QQuickItem', objectName='selection_panel0')

A proper error message in a ToolkitException is desirable here I think.

The "new list items" section in the gallery prints "qml: Highlighting list item" when tapping, overlooked debugging? More importantly I don't see selection mode demonstrated at all.

I've used tests/resources/listitems/ListItemTest.qml for testing a bit, unfortunately it doesn't scroll so I'm not sure if I can see everything in there. At the bottom there's a very narrow item with a switch.

The test_listitem.ListItemTestCase.qml has "onPressAndHold: listView.ViewItems.selectMode = true", I'm thinking this should be available in the gallery and manual test case as well.

Visual observation: the animation from toggling select mode flickers extremely. Is this expected?

> 973 - flick(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);
> 974 + swipe(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);

Why is this? Work-around? Something to document?

> 268 + * attached property. This property is attached to each parent item of the ListItem

I don't really understand the explanation and the example doesn't demonstrate what I think it says. There's no ListView here. The Flickable has the attached property but Column supposedly won't work. I would expect Column to be the parent and have the property. Aside from clarifying the wording I'd suggest two examples because of the special case.

review: Needs Fixing

[Zsombor Egri (zsombi)]

> > 747 + self.wait_select_single('QQuickItem', objectName='selection_panel0')
>
> A proper error message in a ToolkitException is desirable here I think.

Ok, I'll add that.

>
> The "new list items" section in the gallery prints "qml: Highlighting list
> item" when tapping, overlooked debugging? More importantly I don't see
> selection mode demonstrated at all.

That is Tim's playground, he used to update that part when I have an MR bringing new features to ListItem, that's the way he used to test the new features and eventually suggest API changes, extra API. That's why I don't have anything there. The print is an expected extra for the gallery.

>
> I've used tests/resources/listitems/ListItemTest.qml for testing a bit,
> unfortunately it doesn't scroll so I'm not sure if I can see everything in
> there. At the bottom there's a very narrow item with a switch.

The whole view doesn't scroll, true. It's a bit crowded to be honest... It has a ListItem and a Flickable, testing attached behavior in both. Perhaps I should add a separate sample for select mode...

>
> The test_listitem.ListItemTestCase.qml has "onPressAndHold:
> listView.ViewItems.selectMode = true", I'm thinking this should be available
> in the gallery and manual test case as well.

Right. As said, Tim used to test the API, perhaps you can also do an MR based on this and then we submit that. It's better if someone else tries also the API to make sure it's understandable and easy to use.

>
> Visual observation: the animation from toggling select mode flickers
> extremely. Is this expected?
>
> > 973 - flick(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);
> > 974 + swipe(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);
>
> Why is this? Work-around? Something to document?

I think the swipe() function documents it... It is intentional, as we discussed in one of the standups last week, I have to move slower than the test function otherwise does, so the Repeater can create all the elements based on the model, otherwise the swipe is not reliable.

>
> > 268 + * attached property. This property is attached to each parent item
> of the ListItem
>
> I don't really understand the explanation and the example doesn't demonstrate
> what I think it says. There's no ListView here. The Flickable has the attached
> property but Column supposedly won't work. I would expect Column to be the
> parent and have the property. Aside from clarifying the wording I'd suggest
> two examples because of the special case.

No. ListItem's parents are the Column, and that will get the ViewItems attached property. Exception is the ListView, where the contentItem would be the one to have the attached property, but the ListItem detects it and attaches top ListView.

So, ViewItems is automatically attached to the ListItem's parent exception being when used as delegate of ListView, when will be attached to the ListView itself. So Column gets it automatically, and all you set in Column it will have effect to the ListItems in Column, but the one declared in Flickable won't work. It will not give error, but won't do anything. And unfortunately we cannot drive or detect whether...

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1372
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1447/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/1384
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/174/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/177
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/177/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/174/console
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/1222
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1382
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1382/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/18104

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1447/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1373
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1449/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/1389
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/176/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/179
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/179/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/176/console
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/1227
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1387
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1387/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/18110

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1449/rebuild

review: Needs Fixing (continuous-integration)

[Cris Dywan (kalikiana)]

So… "selectable" is now available… I expected ViewItems.selectMode to work on ListItem which isn't the case. Using "selectable" works but seems wrong because it appears to be a property of each item when it's for the whole group.

review: Needs Information

[Zsombor Egri (zsombi)]

> So… "selectable" is now available… I expected ViewItems.selectMode to work on
> ListItem which isn't the case. Using "selectable" works but seems wrong
> because it appears to be a property of each item when it's for the whole
> group.

Expecting ViewItems.selectMode to work on ListItem would mean you would have to have it attachable to the ListItem, right? That is equivalent on having the selectable property available, which we have now. Unless you meant to be "available" through its parent, in which case that is doable by having the "if (ListView.view != null) { ListView.view.ViewItems.selectMode } else { parent.ViewItems.selectMode }" setup.

In case this setup seems miserable, we can restrict to have the ViewItems available only for ListView, in which case we lose the flexibility of the ListItem. Dragging for instance will be available only on ListView, as it cannot handle the proper rearranging of the ListItems without the displaced animation, as Repeater or Column/Row for instance does not provide any abilities to animate the position changes.

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1377
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1458/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/1440/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/185/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/188/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/185/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/1438/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1458/rebuild

review: Needs Fixing (continuous-integration)

[lp:~zsombi/ubuntu-ui-toolkit/80-selection-mode]

1378. By Zsombor Egri on 2015-02-19

documentation fixed

1379. By Zsombor Egri on 2015-02-19

staging merge

[Cris Dywan (kalikiana)]

Looking good!

review: Approve

[PS Jenkins bot (ps-jenkins)]

review: Approve (continuous-integration)

=== modified file 'components.api'
--- components.api	2015-02-18 12:40:42 +0000
+++ components.api	2015-02-19 12:17:51 +0000
@@ -935,6 +935,8 @@
     Property { name: "contentMoving"; type: "bool"; isReadonly: true }
     Property { name: "color"; type: "QColor" }
     Property { name: "highlightColor"; type: "QColor" }
+    Property { name: "selected"; type: "bool" }
+    Property { name: "selectMode"; type: "bool" }
     Property { name: "action"; type: "UCAction"; isPointer: true }
     Property { name: "listItemData"; type: "QObject"; isList: true; isReadonly: true }
     Property { name: "listItemChildren"; type: "QQuickItem"; isList: true; isReadonly: true }
@@ -958,6 +960,7 @@
     prototype: "QQuickItem"
     exports: ["Ubuntu.Components.Styles/ListItemStyle 1.2"]
     Property { name: "snapAnimation"; type: "QQuickAbstractAnimation"; isPointer: true }
+    Property { name: "animatePanels"; type: "bool"; isReadonly: true }
     Method {
     name: "swipeEvent"
     Parameter { name: "event"; type: "UCSwipeEvent"; isPointer: true }
@@ -1074,6 +1077,8 @@
     name: "UCViewItemsAttached"
     prototype: "QObject"
     exports: ["ViewItems 1.2"]
+    Property { name: "selectMode"; type: "bool" }
+    Property { name: "selectedIndices"; type: "QList<int>" }
     name: "UbuntuI18n"
     prototype: "QObject"
     exports: ["i18n 0.1", "i18n 1.0"]
 
=== modified file 'examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml'
--- examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml	2015-01-05 20:34:54 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml	2015-02-19 12:17:51 +0000
@@ -27,4 +27,5 @@
             verticalCenter: parent.verticalCenter
         }
     }
+    onPressAndHold: selectMode = !selectMode
 }
 
=== modified file 'examples/ubuntu-ui-toolkit-gallery/NewListItems.qml'
--- examples/ubuntu-ui-toolkit-gallery/NewListItems.qml	2015-02-12 17:25:35 +0000
+++ examples/ubuntu-ui-toolkit-gallery/NewListItems.qml	2015-02-19 12:17:51 +0000
@@ -34,21 +34,37 @@
         // clip the action delegates while swiping left/right
         clip: true
 
-        ListItemWithLabel {
-            text: i18n.tr("Basic")
-        }
-        ListItemWithLabel {
-            text: i18n.tr("Colored divider")
-            divider {
-                colorFrom: UbuntuColors.red
-                colorTo: UbuntuColors.green
+        ListView {
+            height: units.gu(20)
+            width: parent.width
+
+            model: [ i18n.tr("Basic"), i18n.tr("Colored divider"), i18n.tr("No divider") ]
+            delegate: ListItemWithLabel {
+                text: modelData
+                divider {
+                    colorFrom: modelData == i18n.tr("Colored divider") ? UbuntuColors.red : Qt.rgba(0.0, 0.0, 0.0, 0.0)
+                    colorTo: modelData == i18n.tr("Colored divider") ? UbuntuColors.green : Qt.rgba(0.0, 0.0, 0.0, 0.0)
+                    visible: modelData != i18n.tr("No divider")
+                }
             }
         }
-        ListItemWithLabel {
-            text: i18n.tr("No divider")
-            divider.visible: false
+     }
+
+    TemplateSection {
+        className: "ListItem"
+        // no spacing between the list items in the Column
+        spacing: 0
+        Item {
+            // compensate for the spacing of 0 by adding this
+            // Item inbetween the title and the list items.
+            height: units.gu(3)
+            width: parent.width
         }
-        ListItemWithLabel {
+
+        // clip the action delegates while swiping left/right
+        clip: true
+
+       ListItemWithLabel {
             color: UbuntuColors.blue
             text: i18n.tr("Colored")
         }
@@ -56,7 +72,6 @@
             text: i18n.tr("Highlight color")
             highlightColor: UbuntuColors.orange
             // no highlight without clicked() or leading/trailing actions
-            onClicked: print(i18n.tr("Highlighting list item"))
         }
 
         ListItemActions {
 
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	2015-02-12 17:25:35 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	2015-02-19 12:17:51 +0000
@@ -44,13 +44,12 @@
         Rectangle {
             id: panel
             objectName: "ListItemPanel" + (leading ? "Leading" : "Trailing")
-            property bool leading: false
             readonly property real panelWidth: actionsRow.width
 
             // FIXME use theme palette colors once stabilized
             color: leading ? UbuntuColors.red : "white"
             anchors.fill: parent
-            width: parent.width
+            width: parent ? parent.width : 0
 
             readonly property ListItemActions itemActions: leading ? styledItem.leadingActions : styledItem.trailingActions
 
@@ -64,7 +63,7 @@
                     leftMargin: spacing
                 }
 
-                property real maxItemWidth: parent.width / itemActions.actions.length
+                readonly property real maxItemWidth: parent.width / itemActions.actions.length
 
                 Repeater {
                     model: itemActions.actions
@@ -124,6 +123,46 @@
             }
         }
     }
+    // the selection/multiselection panel
+    Component {
+        id: selectionDelegate
+        Item {
+            id: selectPanel
+            objectName: "selection_panel" + listItemIndex
+            anchors.fill: parent ? parent : undefined
+
+            CheckBox {
+                id: checkbox
+                opacity: 0
+                // for unit and autopilot tests
+                objectName: "listitem_select"
+                anchors.centerIn: parent
+                // for the initial value
+                checked: styledItem.selected
+                onCheckedChanged: styledItem.selected = checked;
+            }
+
+            states: State {
+                name: "enabled"
+                when: loaded && styledItem.selectMode
+                PropertyChanges {
+                    target: checkbox
+                    opacity: 1.0
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "*"
+                reversible: true
+                enabled: listItemStyle.animatePanels
+                OpacityAnimator {
+                    easing: UbuntuAnimation.StandardEasing
+                    duration: UbuntuAnimation.FastDuration
+                }
+            }
+        }
+    }
+
 
     // leading panel loader
     Loader {
@@ -135,13 +174,46 @@
             right: parent.left
         }
         width: parent.width
-        sourceComponent: styledItem.leadingActions && styledItem.leadingActions.actions.length > 0 ?
+        sourceComponent: internals.swiped && styledItem.leadingActions && styledItem.leadingActions.actions.length > 0 ?
                              panelComponent : null
-        onItemChanged: {
-            if (item) {
-                item.leading = true;
-            }
-        }
+        // context properties used in delegates
+        readonly property bool leading: true
+        readonly property bool loaded: status == Loader.Ready
+
+        // panel states
+        states: [
+            State {
+                name: "selectable"
+                when: styledItem.selectMode
+                PropertyChanges {
+                    target: leadingLoader
+                    sourceComponent: selectionDelegate
+                    width: units.gu(5)
+                }
+                PropertyChanges {
+                    target: listItemStyle
+                    anchors.leftMargin: 0
+                }
+                PropertyChanges {
+                    target: styledItem.contentItem
+                    anchors.leftMargin: units.gu(5)
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                from: ""
+                to: "selectable"
+                reversible: true
+                enabled: listItemStyle.animatePanels
+                PropertyAnimation {
+                    target: styledItem.contentItem
+                    properties: "anchors.leftMargin"
+                    easing: UbuntuAnimation.StandardEasing
+                    duration: UbuntuAnimation.FastDuration
+                }
+            }
+        ]
     }
     // trailing panel loader
     Loader {
@@ -153,13 +225,10 @@
             left: parent.right
         }
         width: parent.width
-        sourceComponent: styledItem.trailingActions && styledItem.trailingActions.actions.length > 0 ?
+        sourceComponent: internals.swiped && styledItem.trailingActions && styledItem.trailingActions.actions.length > 0 ?
                              panelComponent : null
-        onItemChanged: {
-            if (item) {
-                item.leading = false;
-            }
-        }
+        // context properties used in delegates
+        readonly property bool leading: false
     }
 
     // internals
@@ -168,10 +237,11 @@
         // action triggered
         property Action selectedAction
         // swipe handling
+        readonly property bool swiped: listItemStyle.x != styledItem.x && !styledItem.selectMode
         readonly property Item swipedPanel: listItemStyle.x > 0 ? leadingLoader.item : trailingLoader.item
         readonly property bool leadingPanel: listItemStyle.x > 0
         readonly property real swipedOffset: leadingPanel ? listItemStyle.x : -listItemStyle.x
-        readonly property real panelWidth: swipedPanel ? swipedPanel.panelWidth : 0
+        readonly property real panelWidth: swipedPanel && swipedPanel.hasOwnProperty("panelWidth") ? swipedPanel.panelWidth : 0
         property real prevX: 0.0
         property real snapChangerLimit: 0.0
         readonly property real threshold: units.gu(1.5)
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2015-02-19 08:31:38 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2015-02-19 12:17:51 +0000
@@ -305,6 +305,15 @@
     setContentMoving(styleItem->m_snapAnimation->isRunning());
 }
 
+// synchronizes selection mode, initializes the style if has not been done yet,
+// which in turn reveals the selection panels
+void UCListItemPrivate::_q_syncSelectMode()
+{
+    initStyleItem();
+    Q_Q(UCListItem);
+    Q_EMIT q->selectModeChanged();
+}
+
 /*!
  * \qmlproperty Component ListItem::style
  * Holds the style of the component defining the components visualizing the leading/
@@ -375,8 +384,9 @@
     }
 }
 
-// creates the style item
-void UCListItemPrivate::initStyleItem()
+// creates the style item, with altered default value of the animatePanels style property
+// the property is turned on after the panel initialization.
+void UCListItemPrivate::initStyleItem(bool withAnimatedPanels)
 {
     if (!ready || styleItem) {
         return;
@@ -411,8 +421,11 @@
         return;
     }
     QQml_setParent_noEvent(styleItem, q);
+    styleItem->setAnimatePanels(withAnimatedPanels);
     styleItem->setParentItem(q);
     delegate->completeCreate();
+    // turn animations on
+    styleItem->setAnimatePanels(true);
     Q_EMIT q->__styleInstanceChanged();
 }
 
@@ -459,7 +472,8 @@
    Q_Q(UCListItem);
    QPointF myPos = q->mapToItem(contentItem, event->localPos());
    QQuickItem *child = contentItem->childAt(myPos.x(), myPos.y());
-   bool activeComponent = child && (child->acceptedMouseButtons() & event->button()) && !qobject_cast<QQuickText*>(child);
+   bool activeComponent = child && (child->acceptedMouseButtons() & event->button()) &&
+           child->isEnabled() && !qobject_cast<QQuickText*>(child);
    // do highlight if not pressed above the active component, and the component has either
    // action, leading or trailing actions list or at least an active child component declared
    QQuickMouseArea *ma = q->findChild<QQuickMouseArea*>();
@@ -672,7 +686,8 @@
  * Being an Item, all properties can be accessed or altered. However, make sure you
  * never change \c x, \c y, \c width, \c height or \c anchors properties as those are
  * controlled by the ListItem itself when leading or trailing actions are revealed
- * and thus might cause the component to misbehave. Anchors margins are free to alter.
+ * or when selectable and draggable mode is turned on, and thus might cause the
+ * component to misbehave. Anchors margins are free to alter.
  *
  * Each ListItem has a thin divider shown on the bottom of the component. This
  * divider can be configured through the \c divider grouped property, which can
@@ -680,7 +695,7 @@
  * When used in \c ListView or \l UbuntuListView, the last list item will not
  * show the divider no matter of the visible property value set.
  *
- * ListItem can handle actions that can get swiped from front to back of the item.
+ * ListItem can handle actions that can get swiped from front or back of the item.
  * These actions are Action elements visualized in panels attached to the front
  * or to the back of the item, and are revealed by swiping the item horizontally.
  * The swipe is started only after the mouse/touch move had passed a given threshold.
@@ -738,6 +753,48 @@
  * of the ListItem. However not all properties are valid in all the circumstances.
  *
  * The component is styled using the \l ListItemStyle style interface.
+ *
+ * \section3 Selection mode
+ * The selection mode of a ListItem is controlled by the \l ViewItems::selectMode
+ * attached property. This property is attached to each parent item of the ListItem
+ * exception being when used as delegate in ListView, where the property is attached
+ * to the view itself.
+ * \qml
+ * import QtQuick 2.3
+ * import Ubuntu.Components 1.2
+ *
+ * Flickable {
+ *    width: units.gu(40)
+ *    height: units.gu(50)
+ *
+ *    // this will not have any effect
+ *    ViewItems.selectMode: true
+ *    Column {
+ *        // this will work
+ *        ViewItems.selectMode: false
+ *        width: parent.width
+ *        Repeater {
+ *            model: 25
+ *            ListItem {
+ *                Label {
+ *                    text: "ListItem in Flickable #" + index
+ *                }
+ *            }
+ *        }
+ *    }
+ * }
+ * \endqml
+ * The indices selected are stored in \l ViewItems::selectedIndices attached property,
+ * attached the same way as the \l ViewItems::selectMode property is. This is a
+ * read/write property, meaning that initial selected item indices can be set up.
+ * The list contains the indices added in the order of selection, not sorted in
+ * any form.
+ *
+ * \note When in selectable mode, the ListItem content is not disabled and \l clicked
+ * and \l pressAndHold signals are also emitted. The only restriction the component
+ * implies is that leading and trailing actions cannot be swiped in. \ selectable
+ * property can be used to implement different behavior when \l clicked or \l
+ * pressAndHold.
  */
 
 /*!
@@ -746,16 +803,16 @@
  * is set. The signal is not emitted if the ListItem content is swiped or when used in
  * Flickable (or ListView, GridView) and the Flickable gets moved.
  *
- * If the ListItem contains a component which contains a MouseArea, the clicked
- * signal will be supressed.
+ * If the ListItem contains a component which contains an active MouseArea, the clicked
+ * signal will be supressed when clicked over this area.
  */
 
 /*!
  * \qmlsignal ListItem::pressAndHold()
  * The signal is emitted when the list item is long pressed.
  *
- * If the ListItem contains a component which contains a MouseArea, the pressAndHold
- * signal will be supressed.
+ * If the ListItem contains a component which contains an active MouseArea, the pressAndHold
+ * signal will be supressed when pressed over this area.
  */
 
 UCListItem::UCListItem(QQuickItem *parent)
@@ -795,6 +852,20 @@
                          this, SLOT(_q_updateIndex()), Qt::DirectConnection);
         update();
     }
+
+    if (d->parentAttached) {
+        // connect selectedIndicesChanged
+        connect(d->parentAttached, &UCViewItemsAttached::selectedIndicesChanged,
+                this, &UCListItem::selectedChanged);
+        // sync selectModeChanged()
+        connect(d->parentAttached, SIGNAL(selectModeChanged()),
+                this, SLOT(_q_syncSelectMode()));
+
+        // if selection mode is on, initialize style
+        if (d->parentAttached->selectMode()) {
+            d->initStyleItem(false);
+        }
+    }
 }
 
 void UCListItem::itemChange(ItemChange change, const ItemChangeData &data)
@@ -830,10 +901,9 @@
 
         if (parentAttachee) {
             QObject::connect(parentAttachee, SIGNAL(widthChanged()), this, SLOT(_q_updateSize()), Qt::DirectConnection);
+            // update size
+            d->_q_updateSize();
         }
-
-        // update size
-        d->_q_updateSize();
     }
 }
 
@@ -936,7 +1006,10 @@
     Q_D(UCListItem);
     UCStyledItemBase::mouseMoveEvent(event);
 
-//    qDebug() << "MOVE" << event->localPos();
+    if (d->selectMode()) {
+        // no move is allowed while selectable mode is on
+        return;
+    }
 
     // accept the tugging only if the move is within the threshold
     if (d->highlighted && !d->swiped && (d->leadingActions || d->trailingActions)) {
@@ -1261,6 +1334,48 @@
 }
 
 /*!
+ * 
+ * \qmlproperty bool ListItem::selected
+ * The property drives whether a list item is selected or not. Defaults to false.
+ *
+ * \sa ListItem::selectMode, ViewItems::selectMode
+ */
+bool UCListItemPrivate::isSelected()
+{
+    Q_Q(UCListItem);
+    return UCViewItemsAttachedPrivate::get(parentAttached)->isItemSelected(q);
+}
+void UCListItemPrivate::setSelected(bool value)
+{
+    Q_Q(UCListItem);
+    if (value) {
+        UCViewItemsAttachedPrivate::get(parentAttached)->addSelectedItem(q);
+    } else {
+        UCViewItemsAttachedPrivate::get(parentAttached)->removeSelectedItem(q);
+    }
+}
+
+/*!
+ * \qmlproperty bool ListItem::selectMode
+ * The property reports whether the component and the view using the component
+ * is in selectable state. While selectable, the ListItem's leading- and trailing
+ * panels cannot be swiped in. \l clicked and \l pressAndHold signals are also
+ * triggered. Selectable mode can be set either through this property or through
+ * the parent attached \l ViewItems::selectMode property.
+ */
+bool UCListItemPrivate::selectMode()
+{
+    UCViewItemsAttachedPrivate *attached = UCViewItemsAttachedPrivate::get(parentAttached);
+    return attached ? attached->selectable : false;
+}
+void UCListItemPrivate::setSelectMode(bool selectable)
+{
+    if (parentAttached) {
+        parentAttached->setSelectMode(selectable);
+    }
+}
+
+/*!
  * \qmlproperty Action ListItem::action
  * The property holds the action which will be triggered when the ListItem is
  * clicked. ListItem will not visualize the action, that is the responsibility
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
--- modules/Ubuntu/Components/plugin/uclistitem.h	2015-02-11 13:35:34 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.h	2015-02-19 12:17:51 +0000
@@ -36,6 +36,8 @@
     Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool contentMoving READ contentMoving NOTIFY contentMovingChanged)
     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
     Q_PROPERTY(QColor highlightColor READ highlightColor WRITE setHighlightColor RESET resetHighlightColor NOTIFY highlightColorChanged)
+    Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool selected READ isSelected WRITE setSelected NOTIFY selectedChanged)
+    Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool selectMode READ selectMode WRITE setSelectMode NOTIFY selectModeChanged)
     Q_PRIVATE_PROPERTY(UCListItem::d_func(), UCAction *action READ action WRITE setAction NOTIFY actionChanged DESIGNABLE false)
     Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQmlListProperty<QObject> listItemData READ data DESIGNABLE false)
     Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQmlListProperty<QQuickItem> listItemChildren READ children NOTIFY listItemChildrenChanged DESIGNABLE false)
@@ -78,6 +80,8 @@
     void contentMovingChanged();
     void colorChanged();
     void highlightColorChanged();
+    void selectedChanged();
+    void selectModeChanged();
     void actionChanged();
     void listItemChildrenChanged();
 
@@ -100,6 +104,7 @@
     Q_PRIVATE_SLOT(d_func(), void _q_updateSize())
     Q_PRIVATE_SLOT(d_func(), void _q_updateIndex())
     Q_PRIVATE_SLOT(d_func(), void _q_contentMoving())
+    Q_PRIVATE_SLOT(d_func(), void _q_syncSelectMode())
 };
 
 class UCListItemDividerPrivate;
@@ -134,6 +139,8 @@
 class UCViewItemsAttached : public QObject
 {
     Q_OBJECT
+    Q_PROPERTY(bool selectMode READ selectMode WRITE setSelectMode NOTIFY selectModeChanged)
+    Q_PROPERTY(QList<int> selectedIndices READ selectedIndices WRITE setSelectedIndices NOTIFY selectedIndicesChanged)
 public:
     explicit UCViewItemsAttached(QObject *owner);
     ~UCViewItemsAttached();
@@ -145,8 +152,18 @@
     bool isMoving();
     bool isBoundTo(UCListItem *item);
 
+    // getter/setter
+    bool selectMode() const;
+    void setSelectMode(bool value);
+    QList<int> selectedIndices() const;
+    void setSelectedIndices(const QList<int> &list);
 private Q_SLOTS:
     void unbindItem();
+
+Q_SIGNALS:
+    void selectModeChanged();
+    void selectedIndicesChanged();
+
 private:
     Q_DECLARE_PRIVATE(UCViewItemsAttached)
     QScopedPointer<UCViewItemsAttachedPrivate> d_ptr;
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
--- modules/Ubuntu/Components/plugin/uclistitem_p.h	2015-02-12 17:25:35 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2015-02-19 12:17:51 +0000
@@ -57,6 +57,7 @@
     void _q_updateSize();
     void _q_updateIndex();
     void _q_contentMoving();
+    void _q_syncSelectMode();
     int index();
     bool canHighlight(QMouseEvent *event);
     void setHighlighted(bool pressed);
@@ -101,8 +102,12 @@
     QQmlComponent *style() const;
     void setStyle(QQmlComponent *delegate);
     void resetStyle();
-    void initStyleItem();
+    void initStyleItem(bool withAnimatedPanels = true);
     QQuickItem *styleInstance() const;
+    bool isSelected();
+    void setSelected(bool value);
+    bool selectMode();
+    void setSelectMode(bool selectable);
     UCAction *action() const;
     void setAction(UCAction *action);
 };
@@ -115,13 +120,23 @@
     UCViewItemsAttachedPrivate(UCViewItemsAttached *qq);
     ~UCViewItemsAttachedPrivate();
 
+    static UCViewItemsAttachedPrivate *get(UCViewItemsAttached *item)
+    {
+        return item ? item->d_func() : 0;
+    }
+
     void clearFlickablesList();
     void buildFlickablesList();
     void clearChangesList();
     void buildChangesList(const QVariant &newValue);
+    bool addSelectedItem(UCListItem *item);
+    bool removeSelectedItem(UCListItem *item);
+    bool isItemSelected(UCListItem *item);
 
     UCViewItemsAttached *q_ptr;
-    bool globalDisabled;
+    bool globalDisabled:1;
+    bool selectable:1;
+    QSet<int> selectedList;
     QList< QPointer<QQuickFlickable> > flickables;
     QList< PropertyChange* > changes;
     QPointer<UCListItem> boundItem;
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemstyle.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	2015-02-12 17:25:35 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	2015-02-19 12:17:51 +0000
@@ -38,6 +38,7 @@
 UCListItemStyle::UCListItemStyle(QQuickItem *parent)
     : QQuickItem(parent)
     , m_snapAnimation(0)
+    , m_animatePanels(true)
 {
 }
 
@@ -120,3 +121,22 @@
  * \qmlproperty Animation ListItemStyle::snapAnimation
  * Holds the behavior used in animating when snapped in or out.
  */
+
+/*!
+ * \qmlproperty bool ListItemStyle::animatePanels
+ * The property drives the different panel animations in the style. Panels should
+ * not be animated when created upon scrolling a view.
+ */
+bool UCListItemStyle::animatePanels() const
+{
+    return m_animatePanels;
+}
+// the setter is used by the ListItem to drive animation state
+void UCListItemStyle::setAnimatePanels(bool animate)
+{
+    if (m_animatePanels == animate) {
+        return;
+    }
+    m_animatePanels = animate;
+    Q_EMIT animatePanelsChanged();
+}
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemstyle.h'
--- modules/Ubuntu/Components/plugin/uclistitemstyle.h	2015-02-12 17:25:35 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemstyle.h	2015-02-19 12:17:51 +0000
@@ -64,14 +64,18 @@
 {
     Q_OBJECT
     Q_PROPERTY(QQuickAbstractAnimation *snapAnimation MEMBER m_snapAnimation NOTIFY snapAnimationChanged)
+    Q_PROPERTY(bool animatePanels READ animatePanels NOTIFY animatePanelsChanged)
 public:
     explicit UCListItemStyle(QQuickItem *parent = 0);
 
     void invokeSwipeEvent(UCSwipeEvent *event);
     void invokeRebound();
+    bool animatePanels() const;
+    void setAnimatePanels(bool animate);
 
 Q_SIGNALS:
     void snapAnimationChanged();
+    void animatePanelsChanged();
 
 public Q_SLOTS:
     void swipeEvent(UCSwipeEvent *event);
@@ -85,6 +89,8 @@
     QMetaMethod m_swipeEvent;
     QMetaMethod m_rebound;
     QQuickAbstractAnimation *m_snapAnimation;
+    bool m_animatePanels:1;
+
     friend class UCListItemPrivate;
     friend class UCActionPanel;
     friend class ListItemAnimator;
 
=== modified file 'modules/Ubuntu/Components/plugin/ucviewitemsattached.cpp'
--- modules/Ubuntu/Components/plugin/ucviewitemsattached.cpp	2015-02-10 10:27:30 +0000
+++ modules/Ubuntu/Components/plugin/ucviewitemsattached.cpp	2015-02-19 12:17:51 +0000
@@ -32,6 +32,7 @@
 UCViewItemsAttachedPrivate::UCViewItemsAttachedPrivate(UCViewItemsAttached *qq)
     : q_ptr(qq)
     , globalDisabled(false)
+    , selectable(false)
 {
 }
 
@@ -76,11 +77,7 @@
 void UCViewItemsAttachedPrivate::clearChangesList()
 {
     // clear property change objects
-    Q_FOREACH(PropertyChange *change, changes) {
-        // deleting PropertyChange will restore the saved property
-        // to its original binding/value
-        delete change;
-    }
+    qDeleteAll(changes);
     changes.clear();
 }
 
@@ -104,6 +101,17 @@
     }
 }
 
+/*!
+ * \qmltype ViewItems
+ * \instantiates UCViewItemsAttached
+ * \inqmlmodule Ubuntu.Components 1.2
+ * \ingroup unstable-ubuntu-listitems
+ * \since Ubuntu.Components 1.2
+ * \brief A set of properties attached to the ListItem's parent item or ListView.
+ *
+ * These properties are attached to the parent item of the ListItem, or to
+ * ListView, when the component is used as delegate.
+ */
 UCViewItemsAttached::UCViewItemsAttached(QObject *owner)
     : QObject(owner)
     , d_ptr(new UCViewItemsAttachedPrivate(this))
@@ -205,3 +213,73 @@
     // clear binding list
     d->clearFlickablesList();
 }
+
+/*!
+ * \qmlattachedproperty bool ViewItems::selectMode
+ * The property drives whether list items are selectable or not.
+ *
+ * When set, the ListItems of the Item the property is attached to will enter into
+ * selection state. ListItems provide a visual clue which can be used to toggle
+ * the selection state of each, which in order will be reflected in the
+ * \l {ViewItems::selectedIndices}{ViewItems.selectedIndices} list.
+ */
+bool UCViewItemsAttached::selectMode() const
+{
+    Q_D(const UCViewItemsAttached);
+    return d->selectable;
+}
+void UCViewItemsAttached::setSelectMode(bool value)
+{
+    Q_D(UCViewItemsAttached);
+    if (d->selectable == value) {
+        return;
+    }
+    d->selectable = value;
+    Q_EMIT selectModeChanged();
+}
+
+/*!
+ * \qmlattachedproperty list<int> ViewItems::selectedIndices
+ * The property contains the indexes of the ListItems marked as selected. The
+ * indexes are model indexes when used in ListView, and child indexes in other
+ * components. The property being writable, initial selection configuration
+ * can be provided for a view, and provides ability to save the selection state.
+ */
+QList<int> UCViewItemsAttached::selectedIndices() const
+{
+    Q_D(const UCViewItemsAttached);
+    return d->selectedList.toList();
+}
+void UCViewItemsAttached::setSelectedIndices(const QList<int> &list)
+{
+    Q_D(UCViewItemsAttached);
+    if (d->selectedList.toList() == list) {
+        return;
+    }
+    d->selectedList = QSet<int>::fromList(list);
+    Q_EMIT selectedIndicesChanged();
+}
+
+bool UCViewItemsAttachedPrivate::addSelectedItem(UCListItem *item)
+{
+    int index = UCListItemPrivate::get(item)->index();
+    if (!selectedList.contains(index)) {
+        selectedList.insert(index);
+        Q_EMIT q_ptr->selectedIndicesChanged();
+        return true;
+    }
+    return false;
+}
+bool UCViewItemsAttachedPrivate::removeSelectedItem(UCListItem *item)
+{
+    if (selectedList.remove(UCListItemPrivate::get(item)->index()) > 0) {
+        Q_EMIT q_ptr->selectedIndicesChanged();
+        return true;
+    }
+    return false;
+}
+
+bool UCViewItemsAttachedPrivate::isItemSelected(UCListItem *item)
+{
+    return selectedList.contains(UCListItemPrivate::get(item)->index());
+}
 
=== modified file 'tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_qquicklistview.py'
--- tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_qquicklistview.py	2014-08-21 06:29:28 +0000
+++ tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_qquicklistview.py	2015-02-19 12:17:51 +0000
@@ -85,3 +85,25 @@
         child = self.select_single(objectName=object_name)
         containers = self._get_containers()
         return self._is_child_visible(child, containers)
+
+    def _get_first_item(self):
+        """Returns the first item from the ListView."""
+        items = self.get_children_by_type('QQuickItem')[0].get_children()
+        items = sorted(items, key=lambda item: item.globalRect.y)
+        return items[0]
+
+    @autopilot_logging.log_action(logger.info)
+    def enable_select_mode(self):
+        """Default implementation to enable select mode. Performs a long tap
+           over the first list item in the ListView. The delegates must be
+           the new ListItem components.
+        """
+        self.swipe_to_top()
+        first_item = self._get_first_item()
+        self.pointing_device.click_object(first_item, press_duration=2)
+        try:
+            self.wait_select_single('QQuickItem',
+                                    objectName='selection_panel0')
+        except dbus.StateNotFoundError:
+            raise _common.ToolkitException(
+                'ListView delegate is not a ListItem or not in selectMode')
 
=== modified file 'tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_uclistitem.py'
--- tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_uclistitem.py	2015-01-07 06:42:09 +0000
+++ tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_uclistitem.py	2015-02-19 12:17:51 +0000
@@ -86,3 +86,9 @@
         """
         self._click_on_panel_action('trailing', action_objectName,
                                     wait_function)
+
+    @autopilot_logging.log_action(logger.info)
+    def toggle_selected(self):
+        """Toggles selected state of the ListItem. """
+        toggle = self.select_single(objectName='listitem_select')
+        self.pointing_device.click_object(toggle)
 
=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.ListItemTestCase.qml'
--- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.ListItemTestCase.qml	2015-02-04 16:27:27 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.ListItemTestCase.qml	2015-02-19 12:17:51 +0000
@@ -28,13 +28,15 @@
     Page {
         id: testPage
         objectName: "test_page"
-        title: "No action triggered"
+        title: listView.ViewItems.selectMode ? "In selection mode" : "No action triggered"
         ListView {
             id: listView
+            objectName: "test_view"
             anchors.fill: parent
             model: 25
             delegate: ListItem {
                 objectName: "listitem" + index
+                onPressAndHold: listView.ViewItems.selectMode = true
                 leadingActions: ListItemActions {
                     actions: [
                         Action {
 
=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.py'
--- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.py	2014-12-08 14:37:40 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_listitem.py	2015-02-19 12:17:51 +0000
@@ -28,6 +28,8 @@
 
     def setUp(self):
         super(ListItemTestCase, self).setUp()
+        self.list_view = self.main_view.select_single(
+            ubuntuuitoolkit.QQuickListView, objectName='test_view')
         self.test_listitem = self.main_view.select_single(
             'UCListItem', objectName='listitem0')
         self.test_page = self.main_view.select_single(
@@ -84,3 +86,13 @@
                                   'this_action_does_not_exist')
         self.assertEqual(str(error),
                          'The requested action not found on trailing side')
+
+    def test_select_items(self):
+        self.list_view.enable_select_mode()
+        self.test_listitem.toggle_selected()
+        self.assertTrue(self.test_listitem.selected)
+        # select an other one
+        listItem3 = self.main_view.select_single(
+            'UCListItem', objectName='listitem3')
+        listItem3.toggle_selected()
+        self.assertTrue(listItem3.selected)
 
=== modified file 'tests/resources/listitems/ListItemTest.qml'
--- tests/resources/listitems/ListItemTest.qml	2015-02-11 13:35:34 +0000
+++ tests/resources/listitems/ListItemTest.qml	2015-02-19 12:17:51 +0000
@@ -31,7 +31,10 @@
         id: stock
         iconName: "starred"
         text: "Staaaar"
-        onTriggered: print(iconName, "triggered", value)
+        onTriggered: {
+            print(iconName, "triggered", value)
+            view.ViewItems.selectedIndices = [0, 2, 9];
+        }
     }
 
     ListItemActions {
@@ -66,6 +69,7 @@
         ]
     }
 
+    property bool selectable: false
     property list<Action> leadingArray: [
         Action {
             iconName: "delete"
@@ -93,6 +97,11 @@
             right: parent.right
         }
 
+        Button {
+            text: "Selectable " + (selectable ? "OFF" : "ON")
+            onClicked: selectable = !selectable
+        }
+
         ListItem {
             id: testItem
             objectName: "single"
@@ -161,6 +170,9 @@
             height: units.gu(28)
             model: 25
             pressDelay: 0
+            ViewItems.selectMode: main.selectable
+            ViewItems.selectedIndices: [9,3,4,1]
+            ViewItems.onSelectedIndicesChanged: print("LISTVIEW INDEXES=", ViewItems.selectedIndices)
             delegate: ListItem {
                 objectName: "ListItem" + index
                 id: listItem
@@ -179,6 +191,10 @@
                     text: "This is one Label split in two lines.\n" +
                           "The second line - item #" + modelData
                 }
+                Button {
+                    text: "Pressme..."
+                    anchors.centerIn: parent
+                }
 
                 states: State {
                     name: "override"
@@ -203,11 +219,11 @@
                 id: trailing
                 actions: leading.actions
             }
-
             Column {
                 id: column
                 width: flicker.width
                 property alias count: repeater.count
+                ViewItems.selectMode: main.selectable
                 Repeater {
                     id: repeater
                     model: 10
 
=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2015-02-19 08:31:38 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2015-02-19 12:17:51 +0000
@@ -67,6 +67,7 @@
     }
 
     Column {
+        id: testColumn
         width: parent.width
         ListItem {
             id: defaults
@@ -107,6 +108,7 @@
             height: units.gu(28)
             clip: true
             model: 10
+            ViewItems.selectMode: false
             delegate: ListItem {
                 objectName: "listItem" + index
                 color: "lightgray"
@@ -134,6 +136,24 @@
                 }
             }
         }
+        Flickable {
+            id: flickable
+            width: parent.width
+            height: units.gu(14)
+            clip: true
+            contentHeight: column.height
+            Column {
+                id: column
+                width: parent.width
+                Repeater {
+                    model: 10
+                    ListItem {
+                        objectName: "listItem" + index
+                        color: "lightgreen"
+                    }
+                }
+            }
+        }
     }
 
     UbuntuTestCase {
@@ -183,6 +203,12 @@
             }
         }
 
+        // delayed swipe, gives few millisecond timeout between each move
+        // so Repeater has time to create the panel actions in style
+        function swipe(item, x, y, dx, dy) {
+            flick(item, x, y, dx, dy, 0, 0, undefined, undefined, 100);
+        }
+
         function initTestCase() {
             TestExtras.registerTouchDevice();
             waitForRendering(main);
@@ -191,6 +217,11 @@
         function cleanup() {
             testItem.action = null;
             testItem.contentItem.anchors.margins = 0;
+            testItem.selected = false;
+            testColumn.ViewItems.selectMode = false;
+            waitForRendering(testItem.contentItem, 200);
+            controlItem.selected = false;
+            waitForRendering(controlItem.contentItem, 200);
             movingSpy.clear();
             highlightedSpy.clear();
             clickSpy.clear();
@@ -199,6 +230,7 @@
             buttonSpy.clear();
             interactiveSpy.clear();
             listView.interactive = true;
+            listView.ViewItems.selectMode = false;
             // make sure we collapse
             mouseClick(defaults, 0, 0)
             movingSpy.target = null;
@@ -229,6 +261,10 @@
             compare(defaults.action, null, "No action by default.");
             compare(defaults.style, null, "Style is loaded upon first use.");
             compare(defaults.__styleInstance, null, "__styleInstance must be null.");
+            compare(defaults.selected, false, "Not selected by default");
+            compare(defaults.selectMode, false, "Not selectable by default");
+            compare(testColumn.ViewItems.selectMode, false, "The parent attached property is not selectable by default");
+            compare(testColumn.ViewItems.selectedIndices.length, 0, "No item is selected by default");
 
             compare(actionsDefault.delegate, null, "ListItemActions has no delegate set by default.");
             compare(actionsDefault.actions.length, 0, "ListItemActions has no actions set.");
@@ -277,7 +313,7 @@
             clickSpy.target = item;
             clickSpy.clear();
             movingSpy.target = item;
-            flick(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);
+            swipe(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);
             movingSpy.wait();
 
             // click over the contentItem
@@ -292,7 +328,7 @@
             pressAndHoldSpy.target = item;
             pressAndHoldSpy.clear();
             movingSpy.target = item;
-            flick(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);
+            swipe(item, centerOf(item).x, centerOf(item).y, units.gu(20), 0);
             movingSpy.wait();
 
             // press and hold
@@ -363,7 +399,7 @@
             listView.positionViewAtBeginning();
             movingSpy.target = data.item;
             if (data.mouse) {
-                flick(data.item, data.pos.x, data.pos.y, data.dx, 0);
+                swipe(data.item, data.pos.x, data.pos.y, data.dx, 0);
             } else {
                 TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, 0));
             }
@@ -392,7 +428,7 @@
             listView.positionViewAtBeginning();
             movingSpy.target = data.item;
             if (data.mouse) {
-                flick(data.item, data.pos.x, data.pos.y, data.dx, 0);
+                swipe(data.item, data.pos.x, data.pos.y, data.dx, 0);
             } else {
                 TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, 0));
             }
@@ -419,7 +455,7 @@
             movingSpy.target = data.item;
             interactiveSpy.target = listView;
             if (data.mouse) {
-                flick(data.item, data.pos.x, data.pos.y, data.dx, data.dy);
+                swipe(data.item, data.pos.x, data.pos.y, data.dx, data.dy);
             } else {
                 TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, data.dy));
             }
@@ -444,7 +480,7 @@
         }
         function test_visualized_actions(data) {
             movingSpy.target = data.item;
-            flick(data.item, centerOf(data.item).x, centerOf(data.item).y, data.leading ? units.gu(20) : -units.gu(20), 0);
+            swipe(data.item, centerOf(data.item).x, centerOf(data.item).y, data.leading ? units.gu(20) : -units.gu(20), 0);
             movingSpy.wait();
 
             // check if the action is visible
@@ -468,7 +504,7 @@
         function test_listitem_margins(data) {
             data.item.contentItem.anchors.margins = units.gu(1);
             movingSpy.target = data.item;
-            flick(data.item, centerOf(data.item).x, centerOf(data.item).y, data.dx, 0);
+            swipe(data.item, centerOf(data.item).x, centerOf(data.item).y, data.dx, 0);
             movingSpy.wait();
             var panel = panelItem(data.item, data.leading);
             verify(panel && panel.visible, "Panel not visible.");
@@ -489,7 +525,7 @@
             listView.positionViewAtBeginning();
             movingSpy.target = data.item;
             if (data.mouse) {
-                flick(data.item, data.pos.x, data.pos.y, data.dx, 0);
+                swipe(data.item, data.pos.x, data.pos.y, data.dx, 0);
             } else {
                 TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, 0));
             }
@@ -516,7 +552,7 @@
             listView.positionViewAtBeginning();
             var item = findChild(listView, "listItem0");
             movingSpy.target = item;
-            flick(item, centerOf(item).x, centerOf(item).y, -units.gu(20), 0);
+            swipe(item, centerOf(item).x, centerOf(item).y, -units.gu(20), 0);
             var panel = panelItem(item, false);
             verify(panel, "Panel is not visible");
             var custom = findChild(panel, "custom_delegate");
@@ -534,16 +570,16 @@
             return [
                 // the list snaps out if the panel is dragged in > overshoot GU (hardcoded for now)
                 {tag: "Snap out leading", item: listItem, dx: units.gu(2), snapIn: false},
-                {tag: "Snap in leading", item: listItem, dx: units.gu(4), snapIn: true},
+                {tag: "Snap in leading", item: listItem, dx: units.gu(6), snapIn: true},
                 {tag: "Snap out trailing", item: listItem, dx: -units.gu(2), snapIn: false},
-                {tag: "Snap in trailing", item: listItem, dx: -units.gu(4), snapIn: true},
+                {tag: "Snap in trailing", item: listItem, dx: -units.gu(6), snapIn: true},
             ];
         }
         function test_snap(data) {
             movingSpy.target = data.item;
-            flick(data.item, centerOf(data.item).x, centerOf(data.item).y, data.dx, 0);
+            swipe(data.item, centerOf(data.item).x, centerOf(data.item).y, data.dx, 0);
             movingSpy.wait();
-            waitForRendering(data.item, 400);
+            waitForRendering(data.item.contentItem, 400);
             movingSpy.clear();
             if (data.snapIn) {
                 verify(data.item.contentItem.x != 0.0, "Not snapped to be visible");
@@ -595,8 +631,6 @@
             listView.positionViewAtBeginning();
             var item0 = findChild(listView, "listItem0");
             var item1 = findChild(listView, "listItem1");
-            var item2 = findChild(listView, "listItem2");
-            var item3 = findChild(listView, "listItem3");
             return [
                 // testItem is the child item @index 3 in the topmost Column.
                 {tag: "Standalone item, child index 3", item: testItem, result: 3},
@@ -607,8 +641,9 @@
         function test_verify_action_value(data) {
             // tug actions in
             movingSpy.target = data.item;
-            flick(data.item, centerOf(data.item).x, centerOf(data.item).y, units.gu(20), 0);
+            swipe(data.item, 1, centerOf(data.item).y, units.gu(40), 0);
             movingSpy.wait();
+            wait(2000);
             verify(data.item.contentItem.x != data.item.contentItem.anchors.leftMargin, "Not snapped in");
 
             var panel = panelItem(data.item, "Leading");
@@ -709,7 +744,7 @@
             interactiveSpy.target = testFlickable;
             movingSpy.target = listItem;
             // tug leading
-            flick(listItem, centerOf(listItem).x, centerOf(listItem).y, listItem.width / 2, 0);
+            swipe(listItem, centerOf(listItem).x, centerOf(listItem).y, listItem.width / 2, 0);
             movingSpy.wait();
             // check if interactive got changed
             interactiveSpy.wait();
@@ -743,5 +778,141 @@
             compare(clickSpy.count, 0, "Click must be suppressed.");
             compare(actionSpy.count, 0, "Action triggered must be suppressed");
         }
+
+        function test_select_indices_updates_selected_items() {
+            listView.ViewItems.selectedIndices = [0,1,2];
+            listView.ViewItems.selectMode = true;
+            waitForRendering(listView, 500);
+            for (var i in listView.ViewItems.selectedIndices) {
+                var index = listView.ViewItems.selectedIndices[i];
+                var listItem = findChild(listView, "listItem" + index);
+                compare(listItem.selected, true, "ListItem at index " + index + " is not selected!");
+            }
+            listView.ViewItems.selectMode = false;
+            listView.ViewItems.selectedIndices = [];
+            waitForRendering(listView, 500);
+        }
+
+        function test_toggle_selectMode_data() {
+            return [
+                {tag: "When not selected", index: 0, selected: false},
+                {tag: "When selected", index: 0, selected: true},
+            ]
+        }
+        function test_toggle_selectMode(data) {
+            var listItem = findChild(listView, "listItem" + data.index)
+            verify(listItem, "Cannot get test item");
+            listItem.selected = data.selected;
+            listView.ViewItems.selectMode = true;
+            // wait few milliseconds
+            wait(400);
+            // testItem is the 4th child, so index is 3
+            verify(findChild(listItem, "selection_panel" + data.index), "Cannot find selection panel");
+            compare(listItem.contentItem.enabled, true, "contentItem is not disabled.");
+        }
+
+        SignalSpy {
+            id: selectedSpy
+            signalName: "selectedChanged"
+        }
+
+        function test_toggle_selected_data() {
+            return [
+                // item = <test-item>, clickOk: <item-to-click-on>, offsetX|Y: <clickOn offset clicked>
+                {tag: "Click over selection", selectableHolder: testColumn, item: controlItem, clickOn: "listitem_select", offsetX: units.gu(0.5), offsetY: units.gu(0.5), xfail: false},
+                {tag: "Click over contentItem", selectableHolder: testColumn, item: controlItem, clickOn: "ListItemHolder", offsetX: units.gu(0.5), offsetY: units.gu(0.5), xfail: true},
+                {tag: "Click over control", selectableHolder: testColumn, item: controlItem, clickOn: "button_in_list", offsetX: units.gu(0.5), offsetY: units.gu(0.5), xfail: true},
+            ];
+         }
+        function test_toggle_selected(data) {
+            // make test item selectable first, so the panel is created
+            data.selectableHolder.ViewItems.selectMode = true;
+            wait(400);
+            // get the control to click on
+            var clickOn = findChild(data.item, data.clickOn);
+            verify(clickOn, "control to be clicked on not found");
+            // click on the selection and check selected changed
+            selectedSpy.target = data.item;
+            selectedSpy.clear();
+            mouseClick(clickOn, data.offsetX, data.offsetY);
+            if (data.xfail) {
+                expectFail(data.tag, "Clicking anywhere else but selection panel should not toggle selection state!");
+            }
+            selectedSpy.wait();
+        }
+
+        SignalSpy {
+            id: selectedIndicesSpy
+            signalName: "selectedIndicesChanged"
+            target: listView.ViewItems
+        }
+
+        function test_selectedIndices_change() {
+            // move to the end of the view
+            listView.positionViewAtEnd();
+            var listItem = findChild(listView, "listItem" + (listView.count - 1));
+            verify(listItem, "Cannot get tested list item");
+            listView.ViewItems.selectMode = true;
+            waitForRendering(listItem);
+            selectedSpy.target = listItem;
+            selectedSpy.clear();
+
+            listItem.selected = true;
+            selectedSpy.wait();
+            selectedIndicesSpy.wait();
+        }
+
+        function test_no_tug_when_selectable() {
+            movingSpy.target = testItem;
+            testColumn.ViewItems.selectMode = true;
+            // wait till animation to selection mode ends
+            waitForRendering(testItem.contentItem);
+
+            // try to tug leading
+            movingSpy.clear();
+            swipe(testItem, centerOf(testItem).x, centerOf(testItem).y, units.gu(10), 0);
+            compare(movingSpy.count, 0, "No tug allowed when in selection mode");
+        }
+
+        function test_selectable_and_click() {
+            testColumn.ViewItems.selectMode = true;
+            // wait till animation to selection mode ends
+            waitForRendering(testItem.contentItem);
+
+            clickSpy.target = testItem;
+            mouseClick(testItem, centerOf(testItem).x, centerOf(testItem).y);
+            clickSpy.wait();
+        }
+
+        function test_selectable_and_pressandhold() {
+            testColumn.ViewItems.selectMode = true;
+            // wait till animation to selection mode ends
+            waitForRendering(testItem.contentItem);
+
+            pressAndHoldSpy.target = testItem;
+            mouseLongPress(testItem, centerOf(testItem).x, centerOf(testItem).y);
+            mouseRelease(testItem, centerOf(testItem).x, centerOf(testItem).y);
+            pressAndHoldSpy.wait();
+        }
+
+        function test_proper_attached_properties_data() {
+            return [
+                {tag: "Attached to ListView", item: listView},
+                {tag: "Attached to Column in Flickable", item: column},
+            ];
+        }
+        function test_proper_attached_properties(data) {
+            var listItem = findChild(data.item, "listItem0");
+            verify(listItem, "ListItem not found!");
+            data.item.ViewItems.selectMode = true;
+            // wait few milliseconds to get the selection panel opened
+            wait(400);
+            // check if the selection mode was activated by looking after the first selection panel
+            var panel = findChild(listItem, "selection_panel0");
+            // turn off selection mode so we have a proper cleanup
+            data.item.ViewItems.selectMode = false;
+            wait(400);
+            verify(panel, "Selection panel not found, wrong attached property target?");
+        }
     }
 }