Merge lp:~zsombi/ubuntu-ui-toolkit/35-options-panel-swipe into lp:~zsombi/ubuntu-ui-toolkit/listitem-master

[Zsombor Egri]

Actions panel handling, swiping and snap animation take in use. Uses fix-size panel for testing.

[lp:~zsombi/ubuntu-ui-toolkit/35-options-panel-swipe]

1287. By Zsombor Egri on 2014-11-07

small fixes

1288. By Zsombor Egri on 2014-11-07

prereq sync

1289. By Zsombor Egri on 2014-11-07

adjustments to prerequisite changes; documentation fix

1290. By Zsombor Egri on 2014-11-07

accessing private property fix

1291. By Zsombor Egri on 2014-11-07

test cases fixed

1292. By Zsombor Egri on 2014-11-07

prereq sync

1293. By Zsombor Egri on 2014-11-07

fixing eronous trailingActions assignment

1294. By Zsombor Egri on 2014-11-10

introduce styling; move ListItemPanel into Ambiance theme, expose ListItemStyle C++ style component from the main plugin

1295. By Zsombor Egri on 2014-11-10

animation cleanup

1296. By Zsombor Egri on 2014-11-11

make leadingPanel property readonly

1297. By Zsombor Egri on 2014-11-11

prereq sync

1298. By Zsombor Egri on 2014-11-11

adjusting code to prereq changes

1299. By Zsombor Egri on 2014-11-11

prereq sync

1300. By Zsombor Egri on 2014-11-12

staging in test fixing

1301. By Zsombor Egri on 2014-11-12

prereq sync

1302. By Zsombor Egri on 2014-11-12

prereq sync

1303. By Zsombor Egri on 2014-11-12

test fix

1304. By Zsombor Egri on 2014-11-12

fixing tests to comply with prereq changes

1305. By Zsombor Egri on 2014-11-12

prereq sync

1306. By Zsombor Egri on 2014-11-14

prereq sync

1307. By Zsombor Egri on 2014-11-14

method name fixed

1308. By Zsombor Egri on 2014-11-18

prereq sync

1309. By Zsombor Egri on 2014-11-19

prereq sync

1310. By Zsombor Egri on 2014-11-19

prereq sync

[Tim Peeters (tpeeters)]

I don't see icons with this code: http://pastebin.ubuntu.com/9145869/

[Tim Peeters (tpeeters)]

with the code above, the list item text never becomes red, so swiping never becomes true?

[Tim Peeters (tpeeters)]

66 + // for testing
67 + objectName: "ListItemPanel" + (leadingPanel ? "Leading" : "Trailing")

That might appear like you left some debugging code that should not be in the final version.

Change the comment to // Used for autopilot testing in filename.py?
or something similar.

[Tim Peeters (tpeeters)]

74 + Specifies whether the panel is used to visualize leading or trailing options.
75 + */
76 + readonly property bool leadingPanel: panel.ListItemActions.status == panel.ListItemActions.Leading

I prefer readonly property bool leading.
We know we are a panel.

[Zsombor Egri (zsombi)]

> 66 + // for testing
> 67 + objectName: "ListItemPanel" + (leadingPanel ? "Leading" :
> "Trailing")
>
> That might appear like you left some debugging code that should not be in the
> final version.
>
> Change the comment to // Used for autopilot testing in filename.py?
> or something similar.

It is used in module testing.

[Tim Peeters (tpeeters)]

321 + , xAxisMoveThresholdGU(1.5)
322 , overshoot(UCUnits::instance().gu(2))

let's do the x-axis threshold like the overshoot, so:
xAxisMoveThreshold(UCUnits::instance().gu(1.5))

[Tim Peeters (tpeeters)]

372 + if (!UCListItemActionsPrivate::isConnectedTo(leadingActions, q) && !UCListItemActionsPrivate::isConnectedTo(trailingActions, q)) {

add a linebreak

[Tim Peeters (tpeeters)]

383 + * animations. The component does not assume any visuals present in the style,
384 + * and will load its content only when requested, i.e. either of the mentioned
385 + * components are visualized.

the part from i.e. is a bit unclear to me. What do you try to say there?

[Tim Peeters (tpeeters)]

458 + setTugged(false);

didn't we switch from "tug" to "swipe" in a previous MR?

[Tim Peeters (tpeeters)]

should we include a link to ListItemStyle in the ListItem docs?

[Tim Peeters (tpeeters)]

Can we improve this text?

> The component defines the style API for the ListItem component.
> Provides the default actions visualization panel, snap animation,
> selection mode and drag handler delegates. ListItem treats the
> style differently compared to the other components, as it will
> load it only when needed, to load the components defining the
> look and feel of the different configurable elements of the component,
> and will ignore any visuals declared in the style.

Style API for the ListItem component which provides actions, select and
drag handler delegates, and snap animation via its properties.
ListItem treats the style differently compared to the other components,
as it:
- loads the style only when needed
- gets delegates and snap animation from the style properties
- ignores any other visuals defined in the style

[Tim Peeters (tpeeters)]

replace "tug" by "swipe" everywhere?

[Tim Peeters (tpeeters)]

Remove this completely?
I understand the example, but I think it is bad practice to show the same action on both sides, so we should not include it as a code example.

 If
568 + * it is desired to have the same action present in both leading and trailing
569 + * actions, one of the ListItemActions actions list can use the other's list. In
570 + * the following example the list item can be deleted through both leading and
571 + * trailing actions:
572 + * \qml
573 + * ListItem {
574 + * id: listItem
575 + * leadingActions: ListItemActions {
576 + * actions: [
577 + * Action {
578 + * iconName: "delete"
579 + * onTriggered: listItem.destroy()
580 + * }
581 + * ]
582 + * }
583 + * trailingActions: ListItemActions {
584 + * actions: leadingActions.actions
585 + * }
586 + * }

[Tim Peeters (tpeeters)]

1478 === added file 'tests/unit/tst_performance/ListItemWithInlineOptionsList.qml'

filename options-->actions

[Zsombor Egri (zsombi)]

> with the code above, the list item text never becomes red, so swiping never
> becomes true?

First, ListItem attached properties are only valid when attached to their parent, or if used in ListView, then attached to ListView, or when used in Flickables, attached to Flickables.

Second, swiping is not defined for ListItem, but for ListItemAttached. Now that property is valid only for leadin/trailing panels.

It is unfortunate that you can attach the property to any object, but this is something we cannot change. The same happens with ListView attached properties, it doesn't give you any warning/error (as it cannot) if attached to other elements but the ListView's delegate, but only works with the delegate.

[Zsombor Egri (zsombi)]

> 321 + , xAxisMoveThresholdGU(1.5)
> 322 , overshoot(UCUnits::instance().gu(2))
>
> let's do the x-axis threshold like the overshoot, so:
> xAxisMoveThreshold(UCUnits::instance().gu(1.5))

No, I would not. Especially that this is not configurable. If we decide to make it configurable, we can do it later. Yet, there's no reason to watch the units change to update this property, as we need the threshold only when swiping. And if we don't configure it, we can always get the proper pixel amount by converting in place.

[Zsombor Egri (zsombi)]

> 383 + * animations. The component does not assume any visuals present in
> the style,
> 384 + * and will load its content only when requested, i.e. either of the
> mentioned
> 385 + * components are visualized.
>
> the part from i.e. is a bit unclear to me. What do you try to say there?

Perhaps that si not even needed... Will remove it.

[Zsombor Egri (zsombi)]

> 458 + setTugged(false);
>
> didn't we switch from "tug" to "swipe" in a previous MR?

The concept yes, but this staid... I'll change it to swipe

[Zsombor Egri (zsombi)]

> should we include a link to ListItemStyle in the ListItem docs?

Yep. Added.

[Zsombor Egri (zsombi)]

> Can we improve this text?
>
> > The component defines the style API for the ListItem component.
> > Provides the default actions visualization panel, snap animation,
> > selection mode and drag handler delegates. ListItem treats the
> > style differently compared to the other components, as it will
> > load it only when needed, to load the components defining the
> > look and feel of the different configurable elements of the component,
> > and will ignore any visuals declared in the style.
>
> Style API for the ListItem component which provides actions, select and
> drag handler delegates, and snap animation via its properties.
> ListItem treats the style differently compared to the other components,
> as it:
> - loads the style only when needed
> - gets delegates and snap animation from the style properties
> - ignores any other visuals defined in the style

Done.

[Zsombor Egri (zsombi)]

> replace "tug" by "swipe" everywhere?

No. We agreed with design that they call it tug, so we will, at least in the doc.

[Zsombor Egri (zsombi)]

> Remove this completely?
> I understand the example, but I think it is bad practice to show the same
> action on both sides, so we should not include it as a code example.
>
>
> If
> 568 + * it is desired to have the same action present in both leading and
> trailing
> 569 + * actions, one of the ListItemActions actions list can use the
> other's list. In
> 570 + * the following example the list item can be deleted through both
> leading and
> 571 + * trailing actions:
> 572 + * \qml
> 573 + * ListItem {
> 574 + * id: listItem
> 575 + * leadingActions: ListItemActions {
> 576 + * actions: [
> 577 + * Action {
> 578 + * iconName: "delete"
> 579 + * onTriggered: listItem.destroy()
> 580 + * }
> 581 + * ]
> 582 + * }
> 583 + * trailingActions: ListItemActions {
> 584 + * actions: leadingActions.actions
> 585 + * }
> 586 + * }

Why not? this is a practice some apps may apply. So why shouldn't we have it documented on how to do it? This way we can be sure we won't spend useless time by triaging these kind of bugs...

[lp:~zsombi/ubuntu-ui-toolkit/35-options-panel-swipe]

1311. By Zsombor Egri on 2014-11-21

review comments applied

[Tim Peeters (tpeeters)]

okay, thanks

review: Approve

=== modified file 'components.api'
--- components.api	2014-11-21 14:40:26 +0000
+++ components.api	2014-11-21 14:40:28 +0000
@@ -876,6 +876,8 @@
     Property { name: "highlightColor"; type: "QColor" }
     Property { name: "data"; type: "QObject"; isList: true; isReadonly: true }
     Property { name: "children"; type: "QQuickItem"; isList: true; isReadonly: true }
+    Property { name: "style"; type: "QQmlComponent"; isPointer: true }
+    Property { name: "__styleInstance"; type: "QQuickItem"; isReadonly: true; isPointer: true }
     Signal { name: "clicked" }
     Signal { name: "contentMovementStarted" }
     Signal { name: "contentMovementEnded" }
@@ -910,6 +912,13 @@
     Property { name: "rightMargin"; type: "double" }
     Property { name: "colorFrom"; type: "QColor" }
     Property { name: "colorTo"; type: "QColor" }
+    name: "UCListItemStyle"
+    prototype: "QQuickItem"
+    exports: ["Ubuntu.Components.Styles/ListItemStyle 1.2"]
+    Property { name: "actionsDelegate"; type: "QQmlComponent"; isPointer: true }
+    Property { name: "selectionDelegate"; type: "QQmlComponent"; isPointer: true }
+    Property { name: "dragHandlerDelegate"; type: "QQmlComponent"; isPointer: true }
+    Property { name: "snapAnimation"; type: "QQuickPropertyAnimation"; isPointer: true }
     name: "UCMouse"
     prototype: "QObject"
     exports: ["Mouse 0.1", "Mouse 1.0"]
 
=== added file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	2014-11-21 14:40:28 +0000
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.2
+
+/*
+  This component is the holder of the ListItem options.
+  */
+Item {
+    id: panel
+
+    // styling properties
+    /*
+      Color of teh background.
+      */
+    // FIXME: use Palette colors instead when available
+    property color backgroundColor: (leading ? UbuntuColors.red : "white")
+
+    width: units.gu(20)
+
+    // used for module/autopilot testing
+    objectName: "ListItemPanel" + (leading ? "Leading" : "Trailing")
+
+    /*
+      Property holding the ListItem's contentItem instance
+      */
+    readonly property Item contentItem: parent ? parent.contentItem : null
+    /*
+      Specifies whether the panel is used to visualize leading or trailing options.
+      */
+    readonly property bool leading: panel.ListItemActions.status == panel.ListItemActions.Leading
+
+    anchors {
+        left: contentItem ? (leading ? undefined : contentItem.right) : undefined
+        right: contentItem ? (leading ? contentItem.left : undefined) : undefined
+        top: contentItem ? contentItem.top : undefined
+        bottom: contentItem ? contentItem.bottom : undefined
+    }
+
+    Rectangle {
+        objectName: "panel_background"
+        anchors {
+            fill: parent
+            // add 4 times the overshoot margins to cover the background when tugged
+            leftMargin: leading ? -units.gu(4 * panel.ListItemActions.overshoot) : 0
+            rightMargin: leading ? 0 : -units.gu(4 * panel.ListItemActions.overshoot)
+        }
+        color: panel.backgroundColor
+    }
+}
 
=== added file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	2014-11-21 14:40:28 +0000
@@ -0,0 +1,34 @@
+import QtQuick 2.3
+import Ubuntu.Components.Styles 1.2 as Styles
+import Ubuntu.Components 1.2
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Styles.ListItemStyle {
+
+    actionsDelegate: ListItemPanel{}
+
+    snapAnimation: PropertyAnimation {
+        property: "x"
+        easing {
+            type: Easing.OutElastic
+            period: 0.5
+        }
+        duration: UbuntuAnimation.BriskDuration
+        alwaysRunToEnd: true
+    }
+
+}
 
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir'
--- modules/Ubuntu/Components/Themes/Ambiance/qmldir	2014-11-10 17:08:05 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/qmldir	2014-11-21 14:40:28 +0000
@@ -55,3 +55,7 @@
 internal OverflowPanel OverflowPanel.qml
 internal HeadSeparatorImageStyle HeadSeparatorImageStyle.qml
 internal HeadDividerStyle HeadDividerStyle.qml
+
+#version 1.2
+ListItemPanel 1.2 ListItemPanel.qml
+ListItemStyle 1.2 ListItemStyle.qml
 
=== modified file 'modules/Ubuntu/Components/plugin/plugin.cpp'
--- modules/Ubuntu/Components/plugin/plugin.cpp	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/plugin.cpp	2014-11-21 14:40:28 +0000
@@ -55,6 +55,7 @@
 #include "uclistitem.h"
 #include "uclistitem_p.h"
 #include "uclistitemactions.h"
+#include "uclistitemstyle.h"
 
 #include <sys/types.h>
 #include <unistd.h>
@@ -176,6 +177,10 @@
     // initialize baseURL
     m_baseUrl = QUrl(baseUrl().toString() + '/');
 
+    // register internal styles
+    const char *styleUri = "Ubuntu.Components.Styles";
+    qmlRegisterType<UCListItemStyle, 2>(styleUri, 1, 2, "ListItemStyle");
+
     QQmlExtensionPlugin::initializeEngine(engine, uri);
     QQmlContext* context = engine->rootContext();
 
 
=== modified file 'modules/Ubuntu/Components/plugin/plugin.pro'
--- modules/Ubuntu/Components/plugin/plugin.pro	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/plugin.pro	2014-11-21 14:40:28 +0000
@@ -73,7 +73,8 @@
     uclistitem_p.h \
     uclistitemactions.h \
     uclistitemactions_p.h \
-    propertychange_p.h
+    propertychange_p.h \
+    uclistitemstyle.h
 
 SOURCES += plugin.cpp \
     uctheme.cpp \
@@ -115,7 +116,8 @@
     uclistitemactions.cpp \
     uclistitemactionsattached.cpp \
     uclistitemattached.cpp \
-    propertychange_p.cpp
+    propertychange_p.cpp \
+    uclistitemstyle.cpp
 
 # adapters
 SOURCES += adapters/alarmsadapter_organizer.cpp
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-21 14:40:28 +0000
@@ -18,12 +18,20 @@
 #include "uctheme.h"
 #include "uclistitem.h"
 #include "uclistitem_p.h"
+#include "uclistitemactions.h"
+#include "uclistitemactions_p.h"
+#include "ucubuntuanimation.h"
+#include "propertychange_p.h"
 #include <QtQml/QQmlInfo>
 #include <QtQuick/private/qquickitem_p.h>
 #include <QtQuick/private/qquickflickable_p.h>
 #include <QtQuick/private/qquickpositioners_p.h>
 #include <QtQuick/private/qquickanimation_p.h>
-#include "ucubuntuanimation.h"
+#include "uclistitemstyle.h"
+
+#define MIN(x, y)           ((x < y) ? x : y)
+#define MAX(x, y)           ((x > y) ? x : y)
+#define CLAMP(v, min, max)  (min <= max) ? MAX(min, MIN(v, max)) : MAX(max, MIN(v, min))
 
 QColor getPaletteColor(const char *profile, const char *color)
 {
@@ -90,8 +98,7 @@
     snap->setFrom(listItem->contentItem->property(snap->property().toLocal8Bit().constData()));
     snap->setTo(to);
     snap->setAlwaysRunToEnd(true);
-    // FIXME - this will be used later
-//    listItem->setContentMoved(true);
+    listItem->setContentMoving(true);
     snap->start();
     return true;
 }
@@ -127,11 +134,11 @@
         // no need to listen flickables any longer
         listItem->attachedProperties->listenToRebind(item, false);
     }
-    // disconnect actions - FIXME this will be used later
-//    listItem->grabPanel(listItem->leadingActions, false);
-//    listItem->grabPanel(listItem->trailingActions, false);
-    // set contentMoving to false - FIXME used later
-//    listItem->setContentMoving(false);
+    // disconnect actions
+    listItem->grabPanel(listItem->leadingActions, false);
+    listItem->grabPanel(listItem->trailingActions, false);
+    // set contentMoved to false
+    listItem->setContentMoving(false);
 }
 
 /*
@@ -145,9 +152,9 @@
         QQuickAbstractAnimation *snap = getDefaultAnimation();
         QObject::disconnect(snap, 0, 0, 0);
     }
-    // turn content moving off - FIXME used later
-//    UCListItemPrivate *listItem = UCListItemPrivate::get(item);
-//    listItem->setContentMoving(false);
+    // turn content moving off
+    UCListItemPrivate *listItem = UCListItemPrivate::get(item);
+    listItem->setContentMoving(false);
 }
 
 /*
@@ -155,8 +162,11 @@
  */
 QQuickPropertyAnimation *UCListItemSnapAnimator::getDefaultAnimation()
 {
-    // FIXME - return the animation from the style
-    return 0;
+    UCListItemPrivate *listItem = UCListItemPrivate::get(item);
+    if (!listItem->styleItem && listItem->loadStyle()) {
+        listItem->initStyleItem();
+    }
+    return listItem->styleItem ? listItem->styleItem->m_snapAnimation : 0;
 }
 
 /******************************************************************************
@@ -236,22 +246,23 @@
     }
 }
 
-QSGNode *UCListItemDivider::paint(const QRectF &rect)
+QSGNode *UCListItemDivider::paint(QSGNode *node, const QRectF &rect)
 {
-    if (m_visible && (m_gradient.size() > 0)) {
-        // the parent always recreates the node, so no worries for the existing child node
-        QSGRectangleNode *rectNode = m_listItem->sceneGraphContext()->createRectangleNode();
-        // margins are only applied when the ListItem is in normal state, when pressed,
-        // the divider is painted from edge to edge
-        qreal left = (m_listItem && m_listItem->pressed) ? 0 : m_leftMargin;
-        qreal right = (m_listItem && m_listItem->pressed) ? rect.width() : rect.width() - m_leftMargin - m_rightMargin;
-        rectNode->setRect(QRectF(left, rect.height() - m_thickness, right, m_thickness));
-        rectNode->setGradientStops(m_gradient);
-        rectNode->update();
-        return rectNode;
-    } else {
-        return 0;
+    QSGRectangleNode *dividerNode = static_cast<QSGRectangleNode*>(node);
+    if (m_visible && (m_gradient.size() > 0) && ((m_colorFrom.alphaF() >= (1.0f / 255.0f)) || (m_colorTo.alphaF() >= (1.0f / 255.0f)))) {
+        if (!dividerNode) {
+            dividerNode = m_listItem->sceneGraphContext()->createRectangleNode();
+        }
+        QRectF divider(m_leftMargin, rect.height() - m_thickness, rect.width() - m_leftMargin - m_rightMargin, m_thickness);
+        dividerNode->setRect(divider);
+        dividerNode->setGradientStops(m_gradient);
+        dividerNode->update();
+        return dividerNode;
+    } else if (node) {
+        // delete the node
+        delete node;
     }
+    return 0;
 }
 
 void UCListItemDivider::setVisible(bool visible)
@@ -317,7 +328,12 @@
     , pressed(false)
     , contentMoved(false)
     , highlightColorChanged(false)
+    , swiped(false)
+    , suppressClick(false)
     , ready(false)
+    , customStyle(false)
+    , customColor(false)
+    , xAxisMoveThresholdGU(1.5)
     , overshoot(UCUnits::instance().gu(2))
     , color(Qt::transparent)
     , highlightColor(Qt::transparent)
@@ -327,6 +343,8 @@
     , leadingActions(0)
     , trailingActions(0)
     , animator(0)
+    , styleComponent(0)
+    , styleItem(0)
 {
 }
 UCListItemPrivate::~UCListItemPrivate()
@@ -348,33 +366,122 @@
     // turn activeFocusOnPress on
     q->setActiveFocusOnPress(true);
 
-    // catch theme palette changes
-    QObject::connect(&UCTheme::instance(), SIGNAL(paletteChanged()), q, SLOT(_q_updateColors()));
-    _q_updateColors();
+    // catch theme changes
+    QObject::connect(&UCTheme::instance(), SIGNAL(nameChanged()), q, SLOT(_q_updateThemedData()));
+    _q_updateThemedData();
 
     // watch size change and set implicit size;
     QObject::connect(&UCUnits::instance(), SIGNAL(gridUnitChanged()), q, SLOT(_q_updateSize()));
     _q_updateSize();
 }
 
-void UCListItemPrivate::_q_updateColors()
+void UCListItemPrivate::_q_updateThemedData()
 {
-    Q_Q(UCListItem);
-    highlightColor = getPaletteColor("selected", "background");
-    q->update();
+    // update colors, panels
+    if (!customColor) {
+        Q_Q(UCListItem);
+        highlightColor = getPaletteColor("selected", "background");
+        q->update();
+    }
+    loadStyle();
 }
 
 void UCListItemPrivate::_q_rebound()
 {
     setPressed(false);
-    // disconnect the flickable
-    listenToRebind(false);
+    // initiate rebinding only if there were actions tugged
+    Q_Q(UCListItem);
+    if (!UCListItemActionsPrivate::isConnectedTo(leadingActions, q) &&
+        !UCListItemActionsPrivate::isConnectedTo(trailingActions, q)) {
+        return;
+    }
+    setSwiped(false);
+    // rebound to zero
+    animator->snap(0);
+}
+/*!
+ * \qmlproperty Component ListItem::style
+ * Holds the style of the component defining the components visualizing the leading/
+ * trailing actions, selection and dragging mode handlers as well as different
+ * animations. The component does not assume any visuals present in the style,
+ * and will load its content only when requested.
+ * \sa ListItemStyle
+ */
+QQmlComponent *UCListItemPrivate::style() const
+{
+    return styleComponent;
+}
+void UCListItemPrivate::setStyle(QQmlComponent *delegate)
+{
+    if (styleComponent == delegate) {
+        return;
+    }
+    Q_Q(UCListItem);
+    // make sure we're rebound before we change the panel component
+    promptRebound();
+    if (styleItem) {
+        delete styleItem;
+        styleItem = 0;
+        Q_EMIT q->__styleInstanceChanged();
+    }
+    delete styleComponent;
+    customStyle = (delegate == 0);
+    styleComponent = delegate;
+    loadStyle();
+    Q_EMIT q->styleChanged();
+}
+
+// update themed components
+bool UCListItemPrivate::loadStyle()
+{
+    if (!ready) {
+        return false;
+    }
+    if (!customStyle && !styleComponent) {
+        Q_Q(UCListItem);
+        if (styleItem) {
+            delete styleItem;
+            styleItem = 0;
+            Q_EMIT q->__styleInstanceChanged();
+        }
+        delete styleComponent;
+        styleComponent = UCTheme::instance().createStyleComponent("ListItemStyle.qml", q);
+    }
+    return (styleComponent != NULL);
+}
+// creates the style item
+void UCListItemPrivate::initStyleItem()
+{
+    if (!styleComponent || styleItem) {
+        return;
+    }
+    Q_Q(UCListItem);
+    QObject *object = styleComponent->beginCreate(qmlContext(q));
+    styleItem = qobject_cast<UCListItemStyle*>(object);
+    if (!styleItem) {
+        delete object;
+    }
+    QQml_setParent_noEvent(styleItem, q);
+    styleComponent->completeCreate();
+}
+
+/*!
+ * \qmlproperty Item ListItem::__styleInstance
+ * \internal
+ */
+QQuickItem *UCListItemPrivate::styleInstance() const
+{
+    return styleItem;
 }
 
 // rebound without animation
 void UCListItemPrivate::promptRebound()
 {
     setPressed(false);
+    setSwiped(false);
+    if (animator) {
+        animator->snapOut();
+    }
 }
 
 // called when units size changes
@@ -406,11 +513,45 @@
 {
     if (this->pressed != pressed) {
         this->pressed = pressed;
+        suppressClick = false;
         Q_Q(UCListItem);
         q->update();
         Q_EMIT q->pressedChanged();
     }
 }
+// toggles the tugged flag and installs/removes event filter
+void UCListItemPrivate::setSwiped(bool swiped)
+{
+    suppressClick = swiped;
+    if (this->swiped == swiped) {
+        return;
+    }
+    this->swiped = swiped;
+    Q_Q(UCListItem);
+    QQuickWindow *window = q->window();
+    if (swiped) {
+        window->installEventFilter(q);
+    } else {
+        window->removeEventFilter(q);
+    }
+}
+
+// grabs the panels from the leading/trailing actions and disables all ascending flickables
+bool UCListItemPrivate::grabPanel(UCListItemActions *actionsList, bool isTugged)
+{
+    Q_Q(UCListItem);
+    if (isTugged) {
+        bool grab = UCListItemActionsPrivate::connectToListItem(actionsList, q, (actionsList == leadingActions));
+        if (attachedProperties) {
+            attachedProperties->disableInteractive(q, true);
+        }
+        return grab;
+    } else {
+        UCListItemActionsPrivate::disconnectFromListItem(actionsList);
+        return false;
+    }
+}
+
 
 // connects/disconnects from the Flickable anchestor to get notified when to do rebound
 void UCListItemPrivate::listenToRebind(bool listen)
@@ -440,6 +581,19 @@
     q->update();
 }
 
+// clamps the X value and moves the contentItem to the new X value
+void UCListItemPrivate::clampAndMoveX(qreal &x, qreal dx)
+{
+    UCListItemActionsPrivate *leading = UCListItemActionsPrivate::get(leadingActions);
+    UCListItemActionsPrivate *trailing = UCListItemActionsPrivate::get(trailingActions);
+    x += dx;
+    // min cannot be less than the trailing's panel width
+    qreal min = (trailing && trailing->panelItem) ? -trailing->panelItem->width() : 0;
+    // max cannot be bigger than 0 or the leading's width in case we have leading panel
+    qreal max = (leading && leading->panelItem) ? leading->panelItem->width() : 0;
+    x = CLAMP(x, min, max);
+}
+
 /*!
  * \qmltype ListItem
  * \instantiates UCListItem
@@ -466,6 +620,62 @@
  * 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
  * configure its margins from the edges of the ListItem as well as its visibility.
+ *
+ * ListItem can handle actions that can get tugged from front to 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 tug is started only after the mouse/touch move had passed a given threshold.
+ * These actions are configured through the \l leadingActions as well as \l
+ * trailingActions properties.
+ * \qml
+ * ListItem {
+ *     id: listItem
+ *     leadingActions: ListItemActions {
+ *         actions: [
+ *             Action {
+ *                 iconName: "delete"
+ *                 onTriggered: listItem.destroy()
+ *             }
+ *         ]
+ *     }
+ *     trailingActions: ListItemActions {
+ *         actions: [
+ *             Action {
+ *                 iconName: "search"
+ *                 onTriggered: {
+ *                     // do some search
+ *                 }
+ *             }
+ *         ]
+ *     }
+ * }
+ * \endqml
+ * \note When a list item is tugged, it automatically connects both leading and
+ * trailing actions to the list item. This implies that a ListItem cannot use
+ * the same ListItemActions instance for both leading and trailing actions. If
+ * it is desired to have the same action present in both leading and trailing
+ * actions, one of the ListItemActions actions list can use the other's list. In
+ * the following example the list item can be deleted through both leading and
+ * trailing actions:
+ * \qml
+ * ListItem {
+ *     id: listItem
+ *     leadingActions: ListItemActions {
+ *         actions: [
+ *             Action {
+ *                 iconName: "delete"
+ *                 onTriggered: listItem.destroy()
+ *             }
+ *         ]
+ *     }
+ *     trailingActions: ListItemActions {
+ *         actions: leadingActions.actions
+ *     }
+ * }
+ * \endqml
+ * \sa ListItemActions
+ *
+ * The component is styled using the \l ListItemStyle style interface.
  */
 
 /*!
@@ -494,6 +704,8 @@
 void UCListItem::componentComplete()
 {
     UCStyledItemBase::componentComplete();
+    // must load the theme!
+    Q_D(UCListItem);
     d_func()->ready = true;
 }
 
@@ -515,6 +727,7 @@
 
         // attach ListItem properties to the flickable or to the parent item
         if (d->flickable) {
+            // connect to flickable to get width changes
             d->attachedProperties = static_cast<UCListItemAttached*>(qmlAttachedPropertiesObject<UCListItem>(d->flickable));
         } else if (data.item) {
             d->attachedProperties = static_cast<UCListItemAttached*>(qmlAttachedPropertiesObject<UCListItem>(data.item));
@@ -535,7 +748,7 @@
 void UCListItem::geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry)
 {
     UCStyledItemBase::geometryChanged(newGeometry, oldGeometry);
-    // resize background item
+    // resize contentItem item
     Q_D(UCListItem);
     d->resize();
 }
@@ -547,27 +760,47 @@
     Q_D(UCListItem);
     QColor color = d->pressed ? d->highlightColor : d->color;
 
-    delete oldNode;
     if (width() <= 0 || height() <= 0) {
+        delete oldNode;
         return 0;
     }
 
     QSGRectangleNode *rectNode = 0;
-    if (color.alpha() > 0) {
+    rectNode = static_cast<QSGRectangleNode*>(oldNode);
+    if (!rectNode) {
         rectNode = QQuickItemPrivate::get(this)->sceneGraphContext()->createRectangleNode();
+    }
+    if (color.alphaF() >= (1.0f / 255.0f)) {
         rectNode->setColor(color);
         // cover only the area of the contentItem
         rectNode->setRect(d->contentItem->boundingRect());
+        rectNode->setGradientStops(QGradientStops());
+        rectNode->setAntialiasing(true);
+        rectNode->setAntialiasing(false);
         rectNode->update();
+    } else {
+        // delete node, this will delete the divider node as well
+        delete rectNode;
+        rectNode = 0;
     }
     oldNode = rectNode;
+    QSGNode *dividerNode = oldNode ? oldNode->childAtIndex(0) : 0;
     if (d->divider && d->divider->m_visible) {
-        QSGNode * dividerNode = d->divider->paint(boundingRect());
-        if (dividerNode && oldNode) {
-            oldNode->appendChildNode(dividerNode);
-        } else if (dividerNode) {
-            oldNode = dividerNode;
-        }
+        QSGNode *newNode = d->divider->paint(dividerNode, boundingRect());
+        if (newNode != dividerNode && oldNode) {
+            if (dividerNode) {
+                oldNode->removeChildNode(dividerNode);
+            }
+            if (newNode) {
+                oldNode->appendChildNode(newNode);
+            }
+        }
+        if (!oldNode) {
+            oldNode = newNode;
+        }
+    } else if (dividerNode) {
+        // the divider painter node may be still added as child, so remove it
+        oldNode->removeChildNode(dividerNode);
     }
     return oldNode;
 }
@@ -582,8 +815,14 @@
     }
     if (event->button() == Qt::LeftButton) {
         d->setPressed(true);
+        d->lastPos = d->pressedPos = event->localPos();
         // connect the Flickable to know when to rebound
         d->listenToRebind(true);
+        // if it was moved, grab the panels
+        if (d->swiped) {
+            d->grabPanel(d->leadingActions, true);
+            d->grabPanel(d->trailingActions, true);
+        }
     }
     // accept the event so we get the rest of the events as well
     event->setAccepted(true);
@@ -596,11 +835,113 @@
     // set released
     if (d->pressed) {
         d->listenToRebind(false);
-        Q_EMIT clicked();
+        if (d->attachedProperties) {
+            d->attachedProperties->disableInteractive(this, false);
+        }
+
+        if (!d->suppressClick) {
+            Q_EMIT clicked();
+            d->_q_rebound();
+        } else if (d->contentItem->x() == 0.0) {
+            // if no actions list is connected, release flickable blockade
+            d->promptRebound();
+        } else {
+            d->setContentMoving(false);
+        }
     }
     d->setPressed(false);
 }
 
+void UCListItem::mouseMoveEvent(QMouseEvent *event)
+{
+    Q_D(UCListItem);
+    UCStyledItemBase::mouseMoveEvent(event);
+
+    // accept the tugging only if the move is within the threshold
+    bool leadingAttached = UCListItemActionsPrivate::isConnectedTo(d->leadingActions, this);
+    bool trailingAttached = UCListItemActionsPrivate::isConnectedTo(d->trailingActions, this);
+    if (d->pressed && !(leadingAttached || trailingAttached)) {
+        // check if we can initiate the drag at all
+        // only X direction matters, if Y-direction leaves the threshold, but X not, the tug is not valid
+        qreal threshold = UCUnits::instance().gu(d->xAxisMoveThresholdGU);
+        qreal mouseX = event->localPos().x();
+        qreal pressedX = d->pressedPos.x();
+
+        if ((mouseX < (pressedX - threshold)) || (mouseX > (pressedX + threshold))) {
+            // the press went out of the threshold area, enable move, if the direction allows it
+            d->lastPos = event->localPos();
+            // tries to connect both panels so we do no longer need to take care which
+            // got connected ad which not; this may fail in case of shared ListItemActions,
+            // as then the panel is shared between the list items, and the panel might be
+            // still in use in other panels. See UCListItemActionsPrivate::connectToListItem
+            leadingAttached = d->grabPanel(d->leadingActions, true);
+            trailingAttached = d->grabPanel(d->trailingActions, true);
+            // create animator if not created yet
+            if (!d->animator) {
+                d->animator = new UCListItemSnapAnimator(this);
+            }
+        }
+    }
+
+    if (leadingAttached || trailingAttached) {
+        qreal x = d->contentItem->x();
+        qreal dx = event->localPos().x() - d->lastPos.x();
+        d->lastPos = event->localPos();
+
+        if (dx) {
+            d->setContentMoving(true);
+            // clamp X into allowed dragging area
+            d->clampAndMoveX(x, dx);
+            // block flickable
+            d->setSwiped(true);
+            d->contentItem->setX(x);
+            // decide which panel is visible by checking the contentItem's X coordinates
+            if (d->contentItem->x() > 0) {
+                if (leadingAttached) {
+                    UCListItemActionsPrivate::get(d->leadingActions)->panelItem->setVisible(true);
+                }
+                if (trailingAttached) {
+                    UCListItemActionsPrivate::get(d->trailingActions)->panelItem->setVisible(false);
+                }
+            } else if (d->contentItem->x() < 0) {
+                // trailing revealed
+                if (leadingAttached) {
+                    UCListItemActionsPrivate::get(d->leadingActions)->panelItem->setVisible(false);
+                }
+                if (trailingAttached) {
+                    UCListItemActionsPrivate::get(d->trailingActions)->panelItem->setVisible(true);
+                }
+            }
+        }
+    }
+}
+
+bool UCListItem::eventFilter(QObject *target, QEvent *event)
+{
+    QPointF myPos;
+    // only filter press events, and rebound when pressed outside
+    if (event->type() == QEvent::MouseButtonPress) {
+        QMouseEvent *mouse = static_cast<QMouseEvent*>(event);
+        QQuickWindow *window = qobject_cast<QQuickWindow*>(target);
+        if (window) {
+            myPos = window->contentItem()->mapToItem(this, mouse->localPos());
+        }
+    } else if (event->type() == QEvent::TouchBegin) {
+        QTouchEvent *touch = static_cast<QTouchEvent*>(event);
+        QQuickWindow *window = qobject_cast<QQuickWindow*>(target);
+        if (window) {
+            myPos = window->contentItem()->mapToItem(this, touch->touchPoints()[0].pos());
+        }
+    }
+    if (!myPos.isNull() && !contains(myPos)) {
+        Q_D(UCListItem);
+        d->_q_rebound();
+        // only accept event, but let it be handled by the underlying or surrounding Flickables
+        event->accept();
+    }
+    return UCStyledItemBase::eventFilter(target, event);
+}
+
 /*!
  * \qmlproperty ListItemActions ListItem::leadingActions
  *
@@ -771,7 +1112,7 @@
     }
     d->highlightColor = color;
     // no more theme change watch
-    disconnect(&UCTheme::instance(), SIGNAL(paletteChanged()), this, SLOT(_q_updateColors()));
+    d->customColor = true;
     update();
     Q_EMIT highlightColorChanged();
 }
@@ -789,6 +1130,7 @@
 
 /*!
  * \qmlproperty list<Item> ListItem::children
+ * \internal
  * Overloaded default property containing all the visible children of the item.
  */
 QQmlListProperty<QQuickItem> UCListItem::children()
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
--- modules/Ubuntu/Components/plugin/uclistitem.h	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.h	2014-11-21 14:40:28 +0000
@@ -39,6 +39,9 @@
     Q_PROPERTY(QColor highlightColor READ highlightColor WRITE setHighlightColor NOTIFY highlightColorChanged)
     Q_PROPERTY(QQmlListProperty<QObject> data READ data DESIGNABLE false)
     Q_PROPERTY(QQmlListProperty<QQuickItem> children READ children NOTIFY childrenChanged DESIGNABLE false)
+    // FIXME move these to StyledItemBase with subtheming
+    Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQmlComponent *style READ style WRITE setStyle NOTIFY styleChanged)
+    Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQuickItem *__styleInstance READ styleInstance NOTIFY __styleInstanceChanged)
     Q_CLASSINFO("DefaultProperty", "data")
 public:
     explicit UCListItem(QQuickItem *parent = 0);
@@ -65,6 +68,8 @@
     void geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry);
     void mousePressEvent(QMouseEvent *event);
     void mouseReleaseEvent(QMouseEvent *event);
+    void mouseMoveEvent(QMouseEvent *event);
+    bool eventFilter(QObject *, QEvent *);
 
 Q_SIGNALS:
     void leadingActionsChanged();
@@ -77,6 +82,9 @@
 
     void clicked();
 
+    void styleChanged();
+    void __styleInstanceChanged();
+
     void contentMovementStarted();
     void contentMovementEnded();
 
@@ -86,7 +94,7 @@
     Q_DECLARE_PRIVATE(UCListItem)
     QQmlListProperty<QObject> data();
     QQmlListProperty<QQuickItem> children();
-    Q_PRIVATE_SLOT(d_func(), void _q_updateColors())
+    Q_PRIVATE_SLOT(d_func(), void _q_updateThemedData())
     Q_PRIVATE_SLOT(d_func(), void _q_rebound())
     Q_PRIVATE_SLOT(d_func(), void _q_updateSize())
 };
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
--- modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-11-21 14:40:28 +0000
@@ -23,10 +23,12 @@
 #include <QtQuick/private/qquickrectangle_p.h>
 
 class QQuickFlickable;
+class QQuickPropertyAnimation;
 class UCListItemContent;
 class UCListItemDivider;
 class UCListItemActions;
 class UCListItemSnapAnimator;
+class UCListItemStyle;
 class UCListItemPrivate : public UCStyledItemBasePrivate
 {
     Q_DECLARE_PUBLIC(UCListItem)
@@ -41,36 +43,55 @@
         return that->d_func();
     }
 
-    void _q_updateColors();
+    void _q_updateThemedData();
     void _q_rebound();
     void promptRebound();
     void _q_updateSize();
     int index();
     void setPressed(bool pressed);
+    void setSwiped(bool tugged);
+    bool grabPanel(UCListItemActions *optionList, bool isTugged);
     void listenToRebind(bool listen);
     void resize();
     void update();
+    void clampAndMoveX(qreal &x, qreal dx);
 
     bool pressed:1;
     bool contentMoved:1;
     bool highlightColorChanged:1;
+    bool swiped:1;
+    bool suppressClick:1;
     bool ready:1;
+    bool customStyle:1;
+    bool customColor:1;
+    qreal xAxisMoveThresholdGU;
     qreal overshoot;
+    QPointF lastPos;
+    QPointF pressedPos;
     QColor color;
     QColor highlightColor;
     QPointer<QQuickFlickable> flickable;
-    UCListItemAttached *attachedProperties;
+    QPointer<UCListItemAttached> attachedProperties;
     QQuickItem *contentItem;
     UCListItemDivider *divider;
     UCListItemActions *leadingActions;
     UCListItemActions *trailingActions;
     UCListItemSnapAnimator *animator;
 
+    // FIXME move these to StyledItemBase togehther with subtheming.
+    QQmlComponent *styleComponent;
+    UCListItemStyle *styleItem;
+
     // getter/setters
     bool contentMoving() const;
     void setContentMoving(bool moved);
     QQuickPropertyAnimation *snapAnimation() const;
     void setSnapAnimation(QQuickPropertyAnimation *animation);
+    QQmlComponent *style() const;
+    void setStyle(QQmlComponent *delegate);
+    bool loadStyle();
+    void initStyleItem();
+    QQuickItem *styleInstance() const;
 };
 
 class PropertyChange;
@@ -115,7 +136,7 @@
     void colorToChanged();
 
 protected:
-    QSGNode *paint(const QRectF &rect);
+    QSGNode *paint(QSGNode *node, const QRectF &rect);
 
 private Q_SLOTS:
     void unitsChanged();
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-11-21 14:40:28 +0000
@@ -19,13 +19,17 @@
 #include "uclistitem_p.h"
 #include "quickutils.h"
 #include "i18n.h"
+#include "plugin.h"
 #include <QtQml/QQmlInfo>
+#include "ucaction.h"
+#include "uclistitemstyle.h"
 
 UCListItemActionsPrivate::UCListItemActionsPrivate()
     : QObjectPrivate()
     , status(UCListItemActions::Disconnected)
     , offsetDragged(0)
     , delegate(0)
+    , panelDelegate(0)
     , panelItem(0)
 {
 }
@@ -33,7 +37,157 @@
 {
 }
 
-// FIXME - fis ListItemStyle::snapAnimation to a link when property available
+void UCListItemActionsPrivate::_q_updateDraggedOffset()
+{
+    UCListItem *listItem = qobject_cast<UCListItem*>(panelItem->parentItem());
+    if (!listItem) {
+        return;
+    }
+
+    Q_Q(UCListItemActions);
+    offsetDragged = (status == UCListItemActions::Leading) ? panelItem->width() + panelItem->x() :
+                         listItem->width() - panelItem->x();
+    if (offsetDragged < 0.0) {
+        offsetDragged = 0.0;
+    }
+}
+
+UCListItemActionsAttached *UCListItemActionsPrivate::attachedObject()
+{
+    if (!panelItem) {
+        return 0;
+    }
+    return static_cast<UCListItemActionsAttached*>(
+                qmlAttachedPropertiesObject<UCListItemActions>(panelItem, false));
+}
+
+/*
+ * Connects a ListItem to the ListItemActions' panel and returns true upon successful connection.
+ * Connection may fail if there is a different ListItem connected. In this case the new ListItem
+ * will be queued and automatically connected when the previous ListItem disconnects.
+ * The panel is only re-created when a different Component is used to create it.
+ * FIXME - despite each ListItem uses the same document to create the panel, theming engine
+ * provides different Component objects for each, due to not caching the components created.
+ * This must be fixed to optimize memory usage.
+ */
+bool UCListItemActionsPrivate::connectToListItem(UCListItemActions *actions, UCListItem *listItem, bool leading)
+{
+    UCListItemActionsPrivate *_this = get(actions);
+    if (!_this) {
+        return false;
+    }
+    // do we have a panel created already?
+    if (_this->panelItem) {
+        if (isConnectedTo(actions, listItem)) {
+            return true;
+        }
+        if (_this->panelItem->parentItem() && _this->panelItem->parentItem() != listItem) {
+            // set the requesting listItem as queuedItem
+            _this->queuedItem = listItem;
+            return false;
+        }
+    }
+    // no parent set or panelItem yet, proceed with panel creation
+    UCListItemPrivate *pItem = UCListItemPrivate::get(listItem);
+    if (!pItem->styleItem && pItem->loadStyle()) {
+        pItem->initStyleItem();
+    }
+    if (pItem->styleItem && !_this->createPanelItem(pItem->styleItem->m_actionsDelegate)) {
+        return false;
+    }
+
+    // check if the panel is still connected to a ListItem
+    // this may happen if there is a swipe over an other item while the previous
+    // one is rebounding
+    _this->panelItem->setParentItem(listItem);
+    if (_this->attachedObject()) {
+        _this->attachedObject()->connectListItem(listItem, true);
+    }
+    _this->offsetDragged = 0.0;
+    _this->status = leading ? UCListItemActions::Leading : UCListItemActions::Trailing;
+    Q_EMIT actions->statusChanged(_this->status);
+    return true;
+}
+
+void UCListItemActionsPrivate::disconnectFromListItem(UCListItemActions *actions)
+{
+    UCListItemActionsPrivate *_this = get(actions);
+    if (!_this || !_this->panelItem || !_this->panelItem->parentItem()) {
+        return;
+    }
+
+    if (_this->attachedObject()) {
+        _this->attachedObject()->connectListItem(static_cast<UCListItem*>(_this->panelItem->parentItem()), false);
+    }
+    _this->panelItem->setParentItem(0);
+    _this->status = UCListItemActions::Disconnected;
+    Q_EMIT actions->statusChanged(_this->status);
+    // if there was a queuedItem, make it grab the actions list
+    if (_this->queuedItem) {
+        UCListItemPrivate::get(_this->queuedItem.data())->grabPanel(actions, true);
+        // remove item from queue
+        _this->queuedItem.clear();
+    }
+}
+
+bool UCListItemActionsPrivate::isConnectedTo(UCListItemActions *actions, UCListItem *listItem)
+{
+    UCListItemActionsPrivate *_this = get(actions);
+    return _this && _this->panelItem &&
+            (_this->status != UCListItemActions::Disconnected) &&
+            (_this->panelItem->parentItem() == listItem);
+}
+
+QQuickItem *UCListItemActionsPrivate::createPanelItem(QQmlComponent *panel)
+{
+    if (panelItem && panelDelegate == panel) {
+        return panelItem;
+    }
+    // delete the panel if the next item's actionsDelegate differs from the
+    // one this panel was created from
+    if (panelDelegate != panel) {
+        delete panelItem;
+        panelItem = 0;
+    }
+
+    Q_Q(UCListItemActions);
+    if (!panel) {
+        qmlInfo(q) << UbuntuI18n::instance().tr("actionsDelegate not set!");
+        return 0;
+    }
+
+    panelDelegate = panel;
+    if (!panelDelegate->isError()) {
+        panelItem = qobject_cast<QQuickItem*>(panelDelegate->beginCreate(qmlContext(q)));
+        if (panelItem) {
+            QQml_setParent_noEvent(panelItem, q);
+            // add panelItem to data so we can access it in case is needed (i.e. tests)
+            data.append(panelItem);
+            // create attached property!
+            UCListItemActionsAttached *attached = static_cast<UCListItemActionsAttached*>(
+                        qmlAttachedPropertiesObject<UCListItemActions>(panelItem));
+            if (!attached->container()) {
+                attached->setList(q);
+            } else {
+                // container is set, but we need to emit the signal again so we get the
+                // attached props updated for those cases when the attached property is
+                // created before the statement above
+                Q_EMIT attached->containerChanged();
+            }
+            panelDelegate->completeCreate();
+
+            // calculate option's slot size
+            offsetDragged = 0.0;
+            // connect to panel to catch dragging
+            QObject::connect(panelItem, SIGNAL(xChanged()), q, SLOT(_q_updateDraggedOffset()));
+        }
+    } else {
+        qmlInfo(q) << panelDelegate->errorString();
+    }
+
+    return panelItem;
+}
+
 /*!
  * \qmltype ListItemActions
  * \instantiates UCListItemActions
@@ -111,7 +265,7 @@
  * However, this implies that swiping a new ListItem content while another one is
  * swiped will result in showing the newly swiped item's panel delayed, as the
  * panel can be shown only after the previous item's snapping is completed. Depending
- * on the \c ListItemStyle::snapAnimation duration, this may take some time, and the
+ * on the \l {ListItemStyle::snapAnimation}{snapAnimation} duration, this may take some time, and the
  * response time of the UI can become unacceptable.
  *
  * Having individual ListItemActions instances increases the memory footprint,
@@ -261,7 +415,6 @@
 
 /*!
  * \qmlproperty list<Action> ListItemActions::actions
- * \default
  * The property holds the actions to be displayed. It can hold instances cached or
  * declared in place. An example of cached actions:
  * \qml
@@ -290,3 +443,5 @@
     Q_D(UCListItemActions);
     return QQmlListProperty<QObject>(this, d->data);
 }
+
+#include "moc_uclistitemactions.cpp"
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.h'
--- modules/Ubuntu/Components/plugin/uclistitemactions.h	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions.h	2014-11-21 14:40:28 +0000
@@ -54,6 +54,7 @@
 
 private:
     Q_DECLARE_PRIVATE(UCListItemActions)
+    Q_PRIVATE_SLOT(d_func(), void _q_updateDraggedOffset())
 };
 
 class UCListItemActionsAttached : public QObject
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions_p.h'
--- modules/Ubuntu/Components/plugin/uclistitemactions_p.h	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions_p.h	2014-11-21 14:40:28 +0000
@@ -20,6 +20,7 @@
 #include "uclistitemactions.h"
 #include "QtCore/private/qobject_p.h"
 
+class UCListItem;
 class UCListItemActionsPrivate : public QObjectPrivate {
     Q_DECLARE_PUBLIC(UCListItemActions)
 public:
@@ -27,16 +28,27 @@
     ~UCListItemActionsPrivate();
     static UCListItemActionsPrivate* get(UCListItemActions *actions)
     {
-        Q_ASSERT(actions);
-        return actions->d_func();
+        return actions ? actions->d_func() : 0;
     }
 
     UCListItemActions::Status status;
     qreal offsetDragged;
+
     QQmlComponent *delegate;
+    QQmlComponent *panelDelegate;
     QQuickItem *panelItem;
     QList<UCAction*> actions;
     QList<QObject*> data;
+    QPointer<UCListItem> queuedItem;
+
+    void _q_updateDraggedOffset();
+    UCListItemActionsAttached *attachedObject();
+
+    static bool connectToListItem(UCListItemActions *options, UCListItem *listItem, bool leading);
+    static void disconnectFromListItem(UCListItemActions *options);
+    static bool isConnectedTo(UCListItemActions *options, UCListItem *listItem);
+
+    QQuickItem *createPanelItem(QQmlComponent *delegate);
 };
 
 #endif // UCLISTITEMACTIONS_P_H
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-11-21 14:40:26 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-11-21 14:40:28 +0000
@@ -121,7 +121,7 @@
 }
 
 /*!
- * \qmlproperty list<Action> ListItemActions::visibleActions
+ * \qmlattachedproperty list<Action> ListItemActions::visibleActions
  * Holds the list of visible actions. This is a convenience property to help action
  * visualization panel implementations to consider only visible actions.
  */
@@ -259,8 +259,11 @@
     if (position == 0.0) {
         listItem->_q_rebound();
     } else {
-        // FIXME: implement snaping
-        listItem->contentItem->setX(position);
+        if (listItem->animator) {
+            listItem->animator->snap(position);
+        } else {
+            listItem->contentItem->setX(position);
+        }
     }
 }
 
 
=== added file 'modules/Ubuntu/Components/plugin/uclistitemstyle.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	2014-11-21 14:40:28 +0000
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+#include "uclistitemstyle.h"
+
+/*!
+ * \qmltype ListItemStyle
+ * \instantiates UCListItemStyle
+ * \inqmlmodule Ubuntu.Components.Styles 1.2
+ * \ingroup style-api
+ * \since Ubuntu.Components.Styles 1.2
+ * \brief Style API for ListItem component.
+ *
+ * Style API for the ListItem component which provides actions, select and
+ * drag handler delegates, and snap animation via its properties.
+ * ListItem treats the style differently compared to the other components,
+ * as it:
+ * \list
+ *  \li - loads the style only when needed
+ *  \li - gets delegates and snap animation from the style properties
+ *  \li - ignores any other visuals defined in the style.
+ * \endlist
+ */
+UCListItemStyle::UCListItemStyle(QQuickItem *parent) :
+    QQuickItem(parent)
+{
+}
+
+/*!
+ * \qmlproperty Component ListItemStyle::actionsDelegate
+ * Specifies the component visualizing the leading/trailing actions.
+ */
+void UCListItemStyle::setActionsDelegate(QQmlComponent *delegate)
+{
+    if (m_actionsDelegate == delegate) {
+        return;
+    }
+    m_actionsDelegate = delegate;
+    Q_EMIT actionsDelegateChanged();
+}
+
+/*!
+ * \qmlproperty Component ListItemStyle::selectionDelegate
+ * Holds the component handling the selection mode.
+ */
+void UCListItemStyle::setSelectionDelegate(QQmlComponent *delegate)
+{
+    if (m_selectionDelegate == delegate) {
+        return;
+    }
+    m_selectionDelegate = delegate;
+    Q_EMIT selectionDelegateChanged();
+}
+
+/*!
+ * \qmlproperty Component ListItemStyle::dragHandlerDelegate
+ * Holds the component shown when dragging mode is enabled.
+ */
+void UCListItemStyle::setDragHandlerDelegate(QQmlComponent *delegate)
+{
+    if (m_dragHandlerDelegate == delegate) {
+        return;
+    }
+    m_dragHandlerDelegate = delegate;
+    Q_EMIT dragHandlerDelegateChanged();
+}
+
+/*!
+ * \qmlproperty PropertyAnimation ListItemStyle::snapAnimation
+ * Holds the animation used in animating when snapped in or out.
+ */
+void UCListItemStyle::setSnapAnimation(QQuickPropertyAnimation *animation)
+{
+    if (m_snapAnimation == animation) {
+        return;
+    }
+    m_snapAnimation = animation;
+    Q_EMIT snapAnimationChanged();
+}
 
=== added file 'modules/Ubuntu/Components/plugin/uclistitemstyle.h'
--- modules/Ubuntu/Components/plugin/uclistitemstyle.h	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemstyle.h	2014-11-21 14:40:28 +0000
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+#ifndef UCLISTITEMSTYLE_H
+#define UCLISTITEMSTYLE_H
+
+#include <QtQuick/QQuickItem>
+
+class QQmlComponent;
+class QQuickPropertyAnimation;
+class UCListItemStyle : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY(QQmlComponent *actionsDelegate MEMBER m_actionsDelegate WRITE setActionsDelegate NOTIFY actionsDelegateChanged)
+    Q_PROPERTY(QQmlComponent *selectionDelegate MEMBER m_selectionDelegate WRITE setSelectionDelegate NOTIFY selectionDelegateChanged)
+    Q_PROPERTY(QQmlComponent *dragHandlerDelegate MEMBER m_dragHandlerDelegate WRITE setDragHandlerDelegate NOTIFY dragHandlerDelegateChanged)
+    Q_PROPERTY(QQuickPropertyAnimation *snapAnimation MEMBER m_snapAnimation WRITE setSnapAnimation NOTIFY snapAnimationChanged)
+public:
+    explicit UCListItemStyle(QQuickItem *parent = 0);
+
+    void setActionsDelegate(QQmlComponent *delegate);
+    void setSelectionDelegate(QQmlComponent *delegate);
+    void setDragHandlerDelegate(QQmlComponent *delegate);
+    void setSnapAnimation(QQuickPropertyAnimation *animation);
+
+Q_SIGNALS:
+    void actionsDelegateChanged();
+    void selectionDelegateChanged();
+    void dragHandlerDelegateChanged();
+    void snapAnimationChanged();
+
+private:
+    QQmlComponent *m_actionsDelegate;
+    QQmlComponent *m_selectionDelegate;
+    QQmlComponent *m_dragHandlerDelegate;
+    QQuickPropertyAnimation *m_snapAnimation;
+
+    friend class UCListItemActionsPrivate;
+    friend class UCListItemSnapAnimator;
+};
+
+#endif // UCLISTITEMSTYLE_H
 
=== modified file 'tests/qmlapicheck.sh'
--- tests/qmlapicheck.sh	2014-10-30 10:44:19 +0000
+++ tests/qmlapicheck.sh	2014-11-21 14:40:28 +0000
@@ -33,7 +33,7 @@
     # https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1256999
     # https://bugreports.qt-project.org/browse/QTBUG-36243
     env UBUNTU_UI_TOOLKIT_THEMES_PATH=$SRCDIR/modules ALARM_BACKEND=memory \
-        qmlplugindump $i 0.1 $SRCDIR/modules 1>> $BLDDIR/plugins.qmltypes
+        qmlplugindump -noinstantiate $i 0.1 $SRCDIR/modules 1>> $BLDDIR/plugins.qmltypes
     test $? != 0 && ERRORS=1
 done
 test $ERRORS = 1 && echo Error: qmlplugindump failed && exit 1
 
=== modified file 'tests/resources/listitems/ListItemTest.qml'
--- tests/resources/listitems/ListItemTest.qml	2014-11-21 14:40:26 +0000
+++ tests/resources/listitems/ListItemTest.qml	2014-11-21 14:40:28 +0000
@@ -31,6 +31,7 @@
 
     ListItemActions {
         id: leading
+        objectName: "StockLeading"
         actions: [
             Action {
             },
@@ -41,6 +42,23 @@
         ]
     }
 
+    property list<Action> leadingArray: [
+        Action {
+            iconName: "delete"
+        }
+    ]
+    property list<Action> trailingArray: [
+        Action {
+            iconName: "search"
+        },
+        Action {
+            iconName: "edit"
+        },
+        Action {
+            iconName: "copy"
+        }
+    ]
+
     Column {
         anchors {
             left: parent.left
@@ -49,6 +67,7 @@
 
         ListItem {
             id: testItem
+            objectName: "single"
             color: "lime"
             onClicked: {
                 print("click")
@@ -59,6 +78,7 @@
                 text: units.gridUnit + "PX/unit"
             }
             leadingActions: ListItemActions {
+                objectName: "InlineLeading"
                 actions: [stock]
             }
             trailingActions: leading
@@ -72,6 +92,7 @@
             model: 100
             pressDelay: 0
             delegate: ListItem {
+                objectName: "ListItem" + index
                 id: listItem
                 onClicked: print(" clicked")
                 leadingActions: leading
@@ -100,10 +121,18 @@
                 Repeater {
                     model: 100
                     ListItem {
+                        objectName: "InFlickable"+index
                         color: "red"
                         highlightColor: "lime"
                         divider.colorFrom: UbuntuColors.green
 
+                        leadingActions: ListItemActions {
+                            actions: leadingArray
+                        }
+                        trailingActions: ListItemActions {
+                            actions: trailingArray
+                        }
+
                         Label {
                             text: modelData + " Flickable item"
                         }
 
=== renamed file 'tests/unit/tst_performance/ListItemWithOptionsList.qml' => 'tests/unit/tst_performance/ListItemWithActionsList.qml'
--- tests/unit/tst_performance/ListItemWithOptionsList.qml	2014-11-21 14:40:26 +0000
+++ tests/unit/tst_performance/ListItemWithActionsList.qml	2014-11-21 14:40:28 +0000
@@ -22,9 +22,15 @@
     height: 600
     ListItemActions {
         id: actions1
+        actions: [Action {}]
     }
     ListItemActions {
         id: actions2
+        actions: [
+            Action {},
+            Action {},
+            Action {}
+        ]
     }
 
     Repeater {
 
=== added file 'tests/unit/tst_performance/ListItemWithInlineActionsList.qml'
--- tests/unit/tst_performance/ListItemWithInlineActionsList.qml	1970-01-01 00:00:00 +0000
+++ tests/unit/tst_performance/ListItemWithInlineActionsList.qml	2014-11-21 14:40:28 +0000
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2014 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 1.2
+
+Column {
+    width: 800
+    height: 600
+
+    Repeater {
+        model: 5000
+        ListItem {
+            trailingActions: ListItemActions {
+                actions: [
+                    Action {}
+                ]
+            }
+            leadingActions: ListItemActions {
+                actions: [
+                    Action {},
+                    Action {},
+                    Action {}
+                ]
+            }
+        }
+    }
+}
 
=== modified file 'tests/unit/tst_performance/tst_performance.cpp'
--- tests/unit/tst_performance/tst_performance.cpp	2014-11-21 14:40:26 +0000
+++ tests/unit/tst_performance/tst_performance.cpp	2014-11-21 14:40:28 +0000
@@ -78,7 +78,8 @@
         QTest::newRow("grid with Slider") << "SliderGrid.qml" << QUrl();
         QTest::newRow("list with QtQuick Item") << "ItemList.qml" << QUrl();
         QTest::newRow("list with new ListItem") << "ListItemList.qml" << QUrl();
-        QTest::newRow("list with new ListItem with options") << "ListItemWithOptionsList.qml" << QUrl();
+        QTest::newRow("list with new ListItem with actions") << "ListItemWithActionsList.qml" << QUrl();
+        QTest::newRow("list with new ListItem with inline actions") << "ListItemWithInlineActionsList.qml" << QUrl();
         QTest::newRow("list with ListItems.Empty (equivalent to the new ListItem") << "ListItemsEmptyList.qml" << QUrl();
         // disable this test as it takes >20 seconds. Kept still for measurements to be done during development
 //        QTest::newRow("list with ListItems.Base (one icon, one label and one chevron)") << "ListItemsBaseList.qml" << QUrl();
 
=== modified file 'tests/unit/tst_performance/tst_performance.pro'
--- tests/unit/tst_performance/tst_performance.pro	2014-11-21 14:40:26 +0000
+++ tests/unit/tst_performance/tst_performance.pro	2014-11-21 14:40:28 +0000
@@ -22,6 +22,7 @@
     TextWithImportPopups.qml \
     ItemList.qml \
     ListItemList.qml \
-    ListItemWithOptionsList.qml \
     ListItemsEmptyList.qml \
-    ListItemsBaseList.qml
+    ListItemsBaseList.qml \
+    ListItemWithInlineActionsList.qml \
+    ListItemWithActionsList.qml
 
=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2014-11-21 14:40:26 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2014-11-21 14:40:28 +0000
@@ -58,6 +58,8 @@
             id: testItem
             width: parent.width
             color: "blue"
+            leadingActions: leading
+            trailingActions: trailing
             Item {
                 id: bodyItem
                 anchors.fill: parent
@@ -71,7 +73,10 @@
             model: 10
             delegate: ListItem {
                 objectName: "listItem" + index
+                color: "lightgray"
                 width: parent.width
+                leadingActions: leading
+                trailingActions: trailing
             }
         }
     }
@@ -81,6 +86,11 @@
         when: windowShown
 
         SignalSpy {
+            id: movingSpy
+            signalName: "contentMovementEnded"
+        }
+
+        SignalSpy {
             id: pressedSpy
             signalName: "pressedChanged"
             target: testItem
@@ -92,8 +102,24 @@
             target: testItem;
         }
 
-        function centerOf(item) {
-            return Qt.point(item.width / 2, item.height / 2);
+        SignalSpy {
+            id: interactiveSpy
+            signalName: "interactiveChanged"
+        }
+
+        function rebound(item, watchTarget) {
+            if (watchTarget === undefined) {
+                watchTarget = item;
+            }
+
+            movingSpy.target = null;
+            movingSpy.target = watchTarget;
+            movingSpy.clear();
+            mouseClick(item, centerOf(item).x, centerOf(item).y);
+            if (watchTarget.contentMoving) {
+                movingSpy.wait();
+            }
+            movingSpy.target = null;
         }
 
         function initTestCase() {
@@ -102,10 +128,16 @@
         }
 
         function cleanup() {
+            movingSpy.clear();
             pressedSpy.clear();
             clickSpy.clear();
-            // make sure all events are processed
-            wait(200);
+            listView.interactive = true;
+            // make sure we collapse
+            mouseClick(defaults, 0, 0)
+            movingSpy.target = null;
+            movingSpy.clear();
+            interactiveSpy.target = null;
+            interactiveSpy.clear();
         }
 
         function test_0_defaults() {
@@ -120,6 +152,9 @@
             fuzzyCompare(defaults.divider.colorFrom.a, 0.14, 0.01, "colorFrom alpha differs");
             compare(defaults.divider.colorTo, "#ffffff", "colorTo differs.");
             fuzzyCompare(defaults.divider.colorTo.a, 0.07, 0.01, "colorTo alpha differs");
+            compare(defaults.contentMoving, false, "default is not moving");
+            compare(defaults.style, null, "Style is loaded upon first use.");
+            compare(defaults.__styleInstance, null, "__styleInstance must be null.");
 
             compare(actionsDefault.delegate, null, "ListItemActions has no delegate set by default.");
             compare(actionsDefault.actions.length, 0, "ListItemActions has no options set.");
@@ -179,6 +214,7 @@
                 TestExtras.touchMove(0, listItem, Qt.point(listItem.width / 2, dy));
             }
             compare(listItem.pressed, false, "Item is pressed still!");
+            // cleanup, wait few milliseconds to avoid dbl-click collision
             TestExtras.touchRelease(0, listItem, Qt.point(listItem.width / 2, dy));
         }
 
@@ -190,5 +226,90 @@
             compare(testItem.contentItem.height, testItem.height, "ListItem's background height must be the same as the item itself.");
             testItem.divider.visible = true;
         }
+
+        function test_touch_tug_options_data() {
+            var item = findChild(listView, "listItem0");
+            return [
+                {tag: "Trailing, mouse", item: item, pos: centerOf(item), dx: -units.gu(20), positiveDirection: false, mouse: true},
+                {tag: "Leading, mouse", item: item, pos: centerOf(item), dx: units.gu(20), positiveDirection: true, mouse: true},
+                {tag: "Trailing, touch", item: item, pos: centerOf(item), dx: -units.gu(20), positiveDirection: false, mouse: false},
+                {tag: "Leading, touch", item: item, pos: centerOf(item), dx: units.gu(20), positiveDirection: true, mouse: false},
+            ];
+        }
+        function test_touch_tug_options(data) {
+            listView.positionViewAtBeginning();
+            movingSpy.target = data.item;
+            if (data.mouse) {
+                flick(data.item, data.pos.x, data.pos.y, data.dx, 0);
+            } else {
+                TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, 0));
+            }
+            movingSpy.wait();
+            if (data.positiveDirection) {
+                verify(data.item.contentItem.x > 0, data.tag + " options did not show up");
+            } else {
+                verify(data.item.contentItem.x < 0, data.tag + " options did not show up");
+            }
+
+            // dismiss
+            rebound(data.item);
+        }
+
+        function test_rebound_when_pressed_outside_or_clicked_data() {
+            var item0 = findChild(listView, "listItem0");
+            var item1 = findChild(listView, "listItem1");
+            return [
+                {tag: "Click on an other Item", item: item0, pos: centerOf(item0), dx: -units.gu(20), clickOn: item1, mouse: true},
+                {tag: "Click on the same Item", item: item0, pos: centerOf(item0), dx: -units.gu(20), clickOn: item0.contentItem, mouse: true},
+                {tag: "Tap on an other Item", item: item0, pos: centerOf(item0), dx: -units.gu(20), clickOn: item1, mouse: false},
+                {tag: "Tap on the same Item", item: item0, pos: centerOf(item0), dx: -units.gu(20), clickOn: item0.contentItem, mouse: false},
+            ];
+        }
+        function test_rebound_when_pressed_outside_or_clicked(data) {
+            listView.positionViewAtBeginning();
+            movingSpy.target = data.item;
+            if (data.mouse) {
+                flick(data.item, data.pos.x, data.pos.y, data.dx, 0);
+            } else {
+                TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, 0));
+            }
+            movingSpy.wait();
+            verify(data.item.contentItem.x != 0, "The component wasn't tugged!");
+            // dismiss
+            rebound(data.clickOn, data.item)
+        }
+
+        function test_listview_not_interactive_while_tugged_data() {
+            var item0 = findChild(listView, "listItem0");
+            var item1 = findChild(listView, "listItem1");
+            return [
+                {tag: "Trailing", item: item0, pos: centerOf(item0), dx: -units.gu(20), clickOn: item1, mouse: true},
+                {tag: "Leading", item: item0, pos: centerOf(item0), dx: units.gu(20), clickOn: item0.contentItem, mouse: true},
+                {tag: "Trailing", item: item0, pos: centerOf(item0), dx: -units.gu(20), clickOn: item1, mouse: false},
+                {tag: "Leading", item: item0, pos: centerOf(item0), dx: units.gu(20), clickOn: item0.contentItem, mouse: false},
+            ];
+        }
+        function test_listview_not_interactive_while_tugged(data) {
+            listView.positionViewAtBeginning();
+            movingSpy.target = data.item;
+            interactiveSpy.target = listView;
+            if (data.mouse) {
+                flick(data.item, data.pos.x, data.pos.y, data.dx, 0);
+            } else {
+                TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, 0));
+            }
+            movingSpy.wait();
+            // animation should no longer be running!
+            verify(!data.item.__styleInstance.snapAnimation.running, "Animation is still running!");
+            compare(listView.interactive, true, "The ListView is still non-interactive!");
+            compare(interactiveSpy.count, 2, "Less/more times changed!");
+            // check if it snapped in
+            verify(data.item.contentItem.x != 0.0, "Not snapped in!!");
+            // dismiss
+            rebound(data.clickOn, data.item);
+            // animation should no longer be running!
+            verify(!data.item.__styleInstance.snapAnimation.running, "Animation is still running!");
+            fuzzyCompare(data.item.contentItem.x, 0.0, 0.1, "Not snapped out!!");
+        }
     }
 }