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

[Zsombor Egri]

ListOptions swipe implementation. Uses an empty panel with a fix size to get teh measures working.

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

1217. By Zsombor Egri on 2014-08-25

Flickable control

1218. By Zsombor Egri on 2014-08-26

tapping outside or when clicked rebinds ListItem

1219. By Zsombor Egri on 2014-08-26

test cases added, touch interaction fixed

1220. By Zsombor Egri on 2014-08-26

test app reverted

1221. By Zsombor Egri on 2014-08-26

reverting unneeded changes

1222. By Zsombor Egri on 2014-08-26

prereq merge

1223. By Zsombor Egri on 2014-08-27

performance tests extended

1224. By Zsombor Egri on 2014-08-27

some fixtures

1225. By Zsombor Egri on 2014-08-28

prereq merge

1226. By Zsombor Egri on 2014-08-28

minor adjustments

1227. By Zsombor Egri on 2014-08-29

disconnect when panel goes off

1228. By Zsombor Egri on 2014-08-29

prereq merge

1229. By Zsombor Egri on 2014-08-29

binding loop fixes

1230. By Zsombor Egri on 2014-08-29

simplification

1231. By Zsombor Egri on 2014-08-29

minor update on event filter

1232. By Zsombor Egri on 2014-09-04

prereq merge

1233. By Zsombor Egri on 2014-09-05

small fixes due to merge

1234. By Zsombor Egri on 2014-09-05

prereq merge

1235. By Zsombor Egri on 2014-09-05

accidental rename of palette color

1236. By Zsombor Egri on 2014-09-06

code reorganized: ListItemOptions connects only when released from the previous item.

1237. By Zsombor Egri on 2014-09-06

tug acceptance condition fixed

1238. By Zsombor Egri on 2014-09-06

documentation update

1239. By Zsombor Egri on 2014-09-06

asynchronous panel detach API added; documentation updated

1240. By Zsombor Egri on 2014-09-06

prereq merge

1241. By Zsombor Egri on 2014-09-06

test fixed

1242. By Zsombor Egri on 2014-09-06

fix for the leading flag

1243. By Zsombor Egri on 2014-09-06

tugging fix when only one option list is assigned

1244. By Zsombor Egri on 2014-09-06

undesired changes reverted, tug threshold fixed

1245. By Zsombor Egri on 2014-09-08

prereq

1246. By Zsombor Egri on 2014-09-08

merge fix

1247. By Zsombor Egri on 2014-09-09

performance test amount adjusted to match the others

1248. By Zsombor Egri on 2014-09-11

signal removed, queuing is done with a single pointer member

1249. By Zsombor Egri on 2014-09-11

prereq merge

1250. By Zsombor Egri on 2014-09-11

prereq merge

1251. By Zsombor Egri on 2014-09-15

prereq

1252. By Zsombor Egri on 2014-09-15

trailing panel color fix

1253. By Zsombor Egri on 2014-09-15

prereq merge

1254. By Zsombor Egri on 2014-09-15

prereq

1255. By Zsombor Egri on 2014-09-15

version fix

1256. By Zsombor Egri on 2014-09-15

prereq

1257. By Zsombor Egri on 2014-09-16

prereq

1258. By Zsombor Egri on 2014-09-17

comments applied, ListItemOptions.options list is no longer the default property

1259. By Zsombor Egri on 2014-09-17

defautl property data added.

1260. By Zsombor Egri on 2014-09-17

doc fix

1261. By Zsombor Egri on 2014-09-17

small API changes

1262. By Zsombor Egri on 2014-09-17

performance test fixed

1263. By Zsombor Egri on 2014-09-17

ListItemOptions turned to ListItemActions

1264. By Zsombor Egri on 2014-09-18

prereq

1265. By Zsombor Egri on 2014-09-18

prereq merge & build fixed

1266. By Zsombor Egri on 2014-09-19

prereq sync

1267. By Zsombor Egri on 2014-09-24

prereq sync

1268. By Zsombor Egri on 2014-09-25

prereq sync

1269. By Zsombor Egri on 2014-09-25

code fixed due to panelItem removal

1270. By Zsombor Egri on 2014-09-29

prereq sync

1271. By Zsombor Egri on 2014-10-02

prereq sync

1272. By Zsombor Egri on 2014-10-13

prereq sync

1273. By Zsombor Egri on 2014-10-20

prereq sync

1274. By Zsombor Egri on 2014-10-22

rebound animation easing changed to elastic

1275. By Zsombor Egri on 2014-10-22

painting optimized, do not delete painter node every time the list item/divider is updated

1276. By Zsombor Egri on 2014-10-22

animation easing curve and duration fixed

1277. By Zsombor Egri on 2014-10-22

easing period and duration fixed

1278. By Zsombor Egri on 2014-10-23

rogue logs removed

1279. By Zsombor Egri on 2014-10-24

prereq sync

1280. By Zsombor Egri on 2014-10-30

adding moving API

1281. By Zsombor Egri on 2014-10-30

movingStarted and movingEnded signals added, being in sync with Flickable's approach

1282. By Zsombor Egri on 2014-11-04

prereq sync

1283. By Zsombor Egri on 2014-11-06

change step

1284. By Zsombor Egri on 2014-11-06

prereq sync

1285. By Zsombor Egri on 2014-11-06

adjusting code to support ListItemActions attached properties

1286. By Zsombor Egri on 2014-11-07

adjusting new prerequisite

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

1311. By Zsombor Egri on 2014-11-21

review comments applied

Unmerged revisions

=== added file 'modules/Ubuntu/Components/ListItemPanel.qml'
--- modules/Ubuntu/Components/ListItemPanel.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/ListItemPanel.qml	2014-09-11 06:51:26 +0000
@@ -0,0 +1,53 @@
+/*
+ * 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.1
+
+/*
+  This component is the holder of the ListItem options.
+  */
+Item {
+    id: panel
+    width: units.gu(20)
+
+    readonly property Item contentItem: parent ? parent.contentItem : null
+    /*
+      Specifies whether the panel is used to visualize leading or trailing options.
+      */
+    property bool leadingPanel: false
+    /*
+      The delegate to be used to visualize the options
+      */
+    property Component delegate
+
+    /*
+      Options
+      */
+    property var optionList
+
+    anchors {
+        left: contentItem ? (leadingPanel ? undefined : contentItem.right) : undefined
+        right: contentItem ? (leadingPanel ? contentItem.left : undefined) : undefined
+        top: contentItem ? contentItem.top : undefined
+        bottom: contentItem ? contentItem.bottom : undefined
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: leadingPanel ? UbuntuColors.red : UbuntuColors.green
+    }
+}

=== modified file 'modules/Ubuntu/Components/plugin/plugin.pro'
--- modules/Ubuntu/Components/plugin/plugin.pro	2014-09-11 06:51:25 +0000
+++ modules/Ubuntu/Components/plugin/plugin.pro	2014-09-11 06:51:26 +0000
@@ -69,7 +69,8 @@
     uclistitem.h \
     uclistitem_p.h \
     uclistitemoptions.h \
-    uclistitemoptions_p.h
+    uclistitemoptions_p.h \
+    propertychange_p.h
 
 SOURCES += plugin.cpp \
     uctheme.cpp \
@@ -105,7 +106,8 @@
     unixsignalhandler_p.cpp \
     ucstyleditembase.cpp \
     uclistitem.cpp \
-    uclistitemoptions.cpp
+    uclistitemoptions.cpp \
+    propertychange_p.cpp
 
 # adapters
 SOURCES += adapters/alarmsadapter_organizer.cpp

=== added file 'modules/Ubuntu/Components/plugin/propertychange_p.cpp'
--- modules/Ubuntu/Components/plugin/propertychange_p.cpp	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/propertychange_p.cpp	2014-09-11 06:51:26 +0000
@@ -0,0 +1,76 @@
+/*
+ * 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 "propertychange_p.h"
+
+#include <QtQml/private/qqmlabstractbinding_p.h>
+#define foreach Q_FOREACH //workaround to fix private includes
+#include <QtQml/private/qqmlbinding_p.h>     // for QmlBinding
+#undef foreach
+
+/*
+ * The class is used to save properties and their bindings while the property is
+ * altered temporarily.
+ */
+PropertyChange::PropertyChange(QObject *item, const char *property)
+    : m_backedUp(false)
+    , qmlProperty(item, property, qmlContext(item))
+{
+}
+PropertyChange::~PropertyChange()
+{
+    restore(this);
+}
+
+/*
+ * Sets a value to the property. Will back up the original values if it wasn't yet.
+ * This function can be called many times, it will not destroy the backed up value/binding.
+ */
+void PropertyChange::setValue(PropertyChange *change, const QVariant &value)
+{
+    if (!change) {
+        return;
+    }
+    if (!change->m_backedUp) {
+        change->backup.first = QQmlPropertyPrivate::setBinding(change->qmlProperty, 0);
+        change->backup.second = change->qmlProperty.read();
+        change->m_backedUp = true;
+    }
+    change->qmlProperty.write(value);
+}
+
+/*
+ * Restore backed up value or binding.
+ */
+void PropertyChange::restore(PropertyChange *change)
+{
+    if (!change) {
+        return;
+    }
+    if (change->m_backedUp) {
+        // if there was a binding, restore it
+        if (change->backup.first) {
+            QQmlAbstractBinding *prevBinding = QQmlPropertyPrivate::setBinding(change->qmlProperty, change->backup.first);
+            if (prevBinding && prevBinding != change->backup.first) {
+                prevBinding->destroy();
+            }
+        } else {
+            // there was no binding, restore previous value
+            change->qmlProperty.write(change->backup.second);
+        }
+        change->m_backedUp = false;
+    }
+}

=== added file 'modules/Ubuntu/Components/plugin/propertychange_p.h'
--- modules/Ubuntu/Components/plugin/propertychange_p.h	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/propertychange_p.h	2014-09-11 06:51:26 +0000
@@ -0,0 +1,39 @@
+/*
+ * 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 PROPERTYCHANGE_P_H
+#define PROPERTYCHANGE_P_H
+
+#include <QtCore/QVariant>
+#include <QtCore/QObject>
+#include <QtQml/QQmlProperty>
+
+class QQmlAbstractBinding;
+class PropertyChange
+{
+public:
+    PropertyChange(QObject *item, const char *property);
+    ~PropertyChange();
+
+    static void setValue(PropertyChange* change, const QVariant &value);
+    static void restore(PropertyChange* change);
+private:
+    bool m_backedUp;
+    QQmlProperty qmlProperty;
+    QPair<QQmlAbstractBinding*, QVariant> backup;
+};
+
+#endif // PROPERTYCHANGE_P_H

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-09-11 06:51:25 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-09-11 06:51:26 +0000
@@ -18,11 +18,19 @@
 #include "uctheme.h"
 #include "uclistitem.h"
 #include "uclistitem_p.h"
+#include "uclistitemoptions.h"
+#include "uclistitemoptions_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>
 
+#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)
 {
     QColor result;
@@ -234,6 +242,11 @@
 UCListItemPrivate::UCListItemPrivate()
     : UCStyledItemBasePrivate()
     , pressed(false)
+    , moved(false)
+    , ready(false)
+    , xAxisMoveThresholdGU(1.5)
+    , reboundAnimation(0)
+    , flickableInteractive(0)
     , contentItem(new UCListItemContent)
     , divider(new UCListItemDivider)
     , leadingOptions(0)
@@ -242,6 +255,7 @@
 }
 UCListItemPrivate::~UCListItemPrivate()
 {
+    delete flickableInteractive;
 }
 
 void UCListItemPrivate::init()
@@ -263,6 +277,16 @@
     // watch size change and set implicit size;
     QObject::connect(&UCUnits::instance(), SIGNAL(gridUnitChanged()), q, SLOT(_q_updateSize()));
     _q_updateSize();
+
+    // create rebound animation
+    UCUbuntuAnimation animationCodes;
+    reboundAnimation = new QQuickPropertyAnimation(q);
+    reboundAnimation->setEasing(animationCodes.StandardEasing());
+    reboundAnimation->setDuration(animationCodes.SnapDuration());
+    reboundAnimation->setTargetObject(contentItem);
+    reboundAnimation->setProperty("x");
+    reboundAnimation->setAlwaysRunToEnd(true);
+    QObject::connect(reboundAnimation, SIGNAL(stopped()), q, SLOT(_q_completeRebinding()));
 }
 
 void UCListItemPrivate::setFocusable()
@@ -276,8 +300,37 @@
 void UCListItemPrivate::_q_rebound()
 {
     setPressed(false);
-    // disconnect the flickable
-    listenToRebind(false);
+    // initiate rebinding only if there were options tugged
+    Q_Q(UCListItem);
+    if (!UCListItemOptionsPrivate::isConnectedTo(leadingOptions, q) && !UCListItemOptionsPrivate::isConnectedTo(trailingOptions, q)) {
+        return;
+    }
+    setMoved(false);
+    // rebound to zero
+    reboundTo(0);
+}
+void UCListItemPrivate::_q_completeRebinding()
+{
+    // restore flickable's interactive and cleanup
+    PropertyChange::restore(flickableInteractive);
+    // disconnect options
+    grabPanel(leadingOptions, false);
+    grabPanel(trailingOptions, false);
+}
+
+// the function performs a cleanup on mouse release without any rebound animation
+void UCListItemPrivate::cleanup()
+{
+    setPressed(false);
+    setMoved(false);
+    _q_completeRebinding();
+}
+
+void UCListItemPrivate::reboundTo(qreal x)
+{
+    reboundAnimation->setFrom(contentItem->x());
+    reboundAnimation->setTo(x);
+    reboundAnimation->restart();
 }
 
 // called when units size changes
@@ -294,11 +347,45 @@
 {
     if (this->pressed != pressed) {
         this->pressed = pressed;
+        suppressClick = false;
         contentItem->update();
         Q_Q(UCListItem);
         Q_EMIT q->pressedChanged();
     }
 }
+// toggles the moved flag and installs/removes event filter
+void UCListItemPrivate::setMoved(bool moved)
+{
+    suppressClick = moved;
+    if (this->moved == moved) {
+        return;
+    }
+    this->moved = moved;
+    Q_Q(UCListItem);
+    QQuickWindow *window = q->window();
+    if (moved) {
+        window->installEventFilter(q);
+    } else {
+        window->removeEventFilter(q);
+    }
+}
+
+// sets the moved flag but also grabs the panels from the leading/trailing options
+bool UCListItemPrivate::grabPanel(UCListItemOptions *optionsList, bool isMoved)
+{
+    Q_Q(UCListItem);
+    if (isMoved) {
+        bool grab = UCListItemOptionsPrivate::connectToListItem(optionsList, q, (optionsList == leadingOptions));
+        if (grab) {
+            PropertyChange::setValue(flickableInteractive, false);
+        }
+        return grab;
+    } else {
+        UCListItemOptionsPrivate::disconnectFromListItem(optionsList);
+        return false;
+    }
+}
+
 
 // connects/disconnects from the Flickable anchestor to get notified when to do rebound
 void UCListItemPrivate::listenToRebind(bool listen)
@@ -333,6 +420,18 @@
     q->update();
 }
 
+void UCListItemPrivate::clampX(qreal &x, qreal dx)
+{
+    UCListItemOptionsPrivate *leading = UCListItemOptionsPrivate::get(leadingOptions);
+    UCListItemOptionsPrivate *trailing = UCListItemOptionsPrivate::get(trailingOptions);
+    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
@@ -363,6 +462,52 @@
  * Each ListItem has a thin divider shown on the bottom of the component. This
  * divider can be configured through the \l divider grouped property, which can
  * configure its margins from the edges of the ListItem as well as its visibility.
+ *
+ * ListItem can handle options that can ge tugged from front ot right of the item.
+ * These options are Action elements visualized in panels attached to the front
+ * or to the end 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 options are configured through the \l leadingOptions as well as \l
+ * trailingOptions properties.
+ * \qml
+ * ListItem {
+ *     id: listItem
+ *     leadingOptions: ListItemOptions {
+ *         Action {
+ *             iconName: "delete"
+ *             onTriggered: listItem.destroy()
+ *         }
+ *     }
+ *     trailingOptions: ListItemOptions {
+ *         Action {
+ *             iconName: "search"
+ *             onTriggered: {
+ *                 // do some search
+ *             }
+ *         }
+ *     }
+ * }
+ * \endqml
+ * \note A ListItem cannot use the same ListItemOption instance for both leading or
+ * trailing options. If it is desired to have the same action present in both leading
+ * and trailing options, one of the ListItemOption options list can use the other's
+ * list. In the following example the list item can be deleted through both option
+ * leading and trailing options:
+ * \qml
+ * ListItem {
+ *     id: listItem
+ *     leadingOptions: ListItemOptions {
+ *         Action {
+ *             iconName: "delete"
+ *             onTriggered: listItem.destroy()
+ *         }
+ *     }
+ *     trailingOptions: ListItemOptions {
+ *         options: leadingOptions.options
+ *     }
+ * }
+ * \endqml
+ * \sa ListItemOptions
  */
 
 /*!
@@ -406,10 +551,18 @@
         }
 
         if (d->flickable) {
+            // create the flickableInteractive property change now
+            d->flickableInteractive = new PropertyChange(d->flickable, "interactive");
             // connect to flickable to get width changes
             QObject::connect(d->flickable, SIGNAL(widthChanged()), this, SLOT(_q_updateSize()));
         } else if (data.item) {
             QObject::connect(data.item, SIGNAL(widthChanged()), this, SLOT(_q_updateSize()));
+        } else {
+            // in case we had a flickableInteractive property change active, destroy it
+            if (d->flickableInteractive) {
+                delete d->flickableInteractive;
+                d->flickableInteractive = 0;
+            }
         }
 
         // update size
@@ -420,7 +573,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();
 }
@@ -442,10 +595,11 @@
     UCStyledItemBase::mousePressEvent(event);
     Q_D(UCListItem);
     if (!d->flickable.isNull() && d->flickable->isMoving()) {
-        // while moving, we cannot select any items
+        // while moving, we cannot select or tug any items
         return;
     }
     d->setPressed(true);
+    d->lastPos = d->pressedPos = event->localPos();
     // connect the Flickable to know when to rebound
     d->listenToRebind(true);
     // accept the event so we get the rest of the events as well
@@ -454,18 +608,89 @@
 
 void UCListItem::mouseReleaseEvent(QMouseEvent *event)
 {
+    UCStyledItemBase::mouseReleaseEvent(event);
     Q_D(UCListItem);
     // set released
     if (d->pressed) {
-        Q_EMIT clicked();
+        // disconnect the flickable
+        d->listenToRebind(false);
+
+        if (!d->suppressClick) {
+            Q_EMIT clicked();
+            d->_q_rebound();
+        } else if (d->contentItem->x() == 0.0) {
+            // if no options list is connected, release flickable blockade
+            d->cleanup();
+        }
     }
-    // save pressed state as UCFocusScope resets it seemlessly
-    bool wasPressed = d->pressed;
-    UCStyledItemBase::mouseReleaseEvent(event);
-    d->pressed = wasPressed;
     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 = UCListItemOptionsPrivate::isConnectedTo(d->leadingOptions, this);
+    bool trailingAttached = UCListItemOptionsPrivate::isConnectedTo(d->trailingOptions, 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();
+            // connect both panels
+            leadingAttached = d->grabPanel(d->leadingOptions, true);
+            trailingAttached = d->grabPanel(d->trailingOptions, true);
+        }
+    }
+
+    if (leadingAttached || trailingAttached) {
+        qreal x = d->contentItem->x();
+        qreal dx = event->localPos().x() - d->lastPos.x();
+        d->lastPos = event->localPos();
+
+        if (dx) {
+            // clamp X into allowed dragging area
+            d->clampX(x, dx);
+            // block flickable
+            d->setMoved(true);
+            d->contentItem->setX(x);
+        }
+    }
+}
+
+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 ListItemOptions ListItem::leadingOptions
  *
@@ -514,7 +739,7 @@
  * \qmlproperty color ListItem::contentItem.pressedColor
  *
  * contentItem holds the components placed on a ListItem. \c color configures
- * the color of the normal background, and \c pressedColor configures the color
+ * the color of the normal contentItem, and \c pressedColor configures the color
  * when pressed.
  */
 UCListItemContent* UCListItem::contentItem() const

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
--- modules/Ubuntu/Components/plugin/uclistitem.h	2014-09-11 06:51:25 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.h	2014-09-11 06:51:26 +0000
@@ -54,6 +54,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 leadingOptionsChanged();
@@ -71,6 +73,7 @@
     QQmlListProperty<QQuickItem> children();
     Q_PRIVATE_SLOT(d_func(), void _q_rebound())
     Q_PRIVATE_SLOT(d_func(), void _q_updateSize())
+    Q_PRIVATE_SLOT(d_func(), void _q_completeRebinding())
 };
 
 #endif // UCLISTITEM_H

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
--- modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-09-11 06:51:25 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-09-11 06:51:26 +0000
@@ -23,9 +23,11 @@
 #include <QtQuick/private/qquickrectangle_p.h>
 
 class QQuickFlickable;
+class QQuickPropertyAnimation;
 class UCListItemContent;
 class UCListItemDivider;
 class UCListItemOptions;
+class PropertyChange;
 class UCListItemPrivate : public UCStyledItemBasePrivate
 {
     Q_DECLARE_PUBLIC(UCListItem)
@@ -45,14 +47,27 @@
 
     void _q_rebound();
     void _q_updateSize();
+    void _q_completeRebinding();
+    void cleanup();
+    void reboundTo(qreal x);
     void setPressed(bool pressed);
+    void setMoved(bool moved);
+    bool grabPanel(UCListItemOptions *optionList, bool isMoved);
     void listenToRebind(bool listen);
     void resize();
     void update();
+    void clampX(qreal &x, qreal dx);
 
     bool pressed:1;
+    bool moved:1;
+    bool suppressClick:1;
     bool ready:1;
+    qreal xAxisMoveThresholdGU;
+    QPointF lastPos;
+    QPointF pressedPos;
     QPointer<QQuickFlickable> flickable;
+    QQuickPropertyAnimation *reboundAnimation;
+    PropertyChange *flickableInteractive;
     UCListItemContent *contentItem;
     UCListItemDivider *divider;
     UCListItemOptions *leadingOptions;

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemoptions.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemoptions.cpp	2014-09-11 06:51:25 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemoptions.cpp	2014-09-11 06:51:26 +0000
@@ -19,11 +19,14 @@
 #include "uclistitem_p.h"
 #include "quickutils.h"
 #include "i18n.h"
+#include "plugin.h"
 #include <QtQml/QQmlInfo>
 
 UCListItemOptionsPrivate::UCListItemOptionsPrivate()
     : QObjectPrivate()
     , optionsFailure(false)
+    , connected(false)
+    , leading(false)
     , delegate(0)
     , panelItem(0)
 {
@@ -66,6 +69,76 @@
     return plist->options.clear();
 }
 
+bool UCListItemOptionsPrivate::connectToListItem(UCListItemOptions *options, UCListItem *listItem, bool leading)
+{
+    UCListItemOptionsPrivate *_this = get(options);
+    if (!_this || !_this->createPanelItem() || isConnectedTo(options, listItem)) {
+        return isConnectedTo(options, listItem);
+    }
+    // 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
+    if (_this->panelItem->parentItem()) {
+        // set the requesting listItem as queuedItem
+        _this->queuedItem = listItem;
+        return false;
+    }
+    _this->leading = leading;
+    _this->panelItem->setProperty("leadingPanel", leading);
+    _this->panelItem->setParentItem(listItem);
+    _this->connected = true;
+    return true;
+}
+
+void UCListItemOptionsPrivate::disconnectFromListItem(UCListItemOptions *options)
+{
+    UCListItemOptionsPrivate *_this = get(options);
+    if (!_this || !_this->panelItem || !_this->panelItem->parentItem()) {
+        return;
+    }
+    _this->panelItem->setParentItem(0);
+    _this->connected = false;
+    _this->leading = false;
+    // if there was a queuedItem, make it grab the options list
+    if (_this->queuedItem) {
+        UCListItemPrivate::get(_this->queuedItem.data())->grabPanel(options, true);
+        // remove item from queue
+        _this->queuedItem.clear();
+    }
+}
+
+bool UCListItemOptionsPrivate::isConnectedTo(UCListItemOptions *options, UCListItem *listItem)
+{
+    UCListItemOptionsPrivate *_this = get(options);
+    return _this && _this->panelItem && _this->connected && (_this->panelItem->parentItem() == listItem);
+}
+
+QQuickItem *UCListItemOptionsPrivate::createPanelItem()
+{
+    if (panelItem) {
+        return panelItem;
+    }
+    Q_Q(UCListItemOptions);
+    QUrl panelDocument = UbuntuComponentsPlugin::pluginUrl().
+            resolved(QUrl::fromLocalFile("ListItemPanel.qml"));
+    QQmlComponent component(qmlEngine(q), panelDocument);
+    if (!component.isError()) {
+        panelItem = qobject_cast<QQuickItem*>(component.beginCreate(qmlContext(q)));
+        if (panelItem) {
+            QQml_setParent_noEvent(panelItem, q);
+            if (delegate) {
+                panelItem->setProperty("delegate", QVariant::fromValue(delegate));
+            }
+            panelItem->setProperty("optionList", QVariant::fromValue(options));
+            component.completeCreate();
+            Q_EMIT q->panelItemChanged();
+        }
+    } else {
+        qmlInfo(q) << component.errorString();
+    }
+    return panelItem;
+}
+
 /*!
  * \qmltype ListItemOptions
  * \instantiates UCListItemOptions
@@ -93,6 +166,11 @@
  * valid for the case when the option is visibl eless than 50%, in which case the
  * option is hidden. Options can be triggered by tapping.
  *
+ * \note You can use the same ListItemOptions for leading and for trailing options
+ * the same time only if the options are used in a ListView or in a list where the
+ * list items are scrolled by the same Flickable. In any other circumstances use
+ * separate ListItemOptions for leading and trailing options.
+ *
  * \section3 Notes on performance
  * When used with views, or when the amount of items of same kind to be created
  * is huge, it is recommended to use cached actions as well as cached ListItemOption
@@ -193,3 +271,5 @@
     Q_D(const UCListItemOptions);
     return d->panelItem;
 }
+
+#include "moc_uclistitemoptions.cpp"

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemoptions_p.h'
--- modules/Ubuntu/Components/plugin/uclistitemoptions_p.h	2014-09-11 06:51:25 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemoptions_p.h	2014-09-11 06:51:26 +0000
@@ -20,6 +20,7 @@
 #include "uclistitemoptions.h"
 #include "QtCore/private/qobject_p.h"
 
+class UCListItem;
 class UCListItemOptionsPrivate : public QObjectPrivate {
     Q_DECLARE_PUBLIC(UCListItemOptions)
 public:
@@ -27,20 +28,28 @@
     ~UCListItemOptionsPrivate();
     static UCListItemOptionsPrivate* get(UCListItemOptions *options)
     {
-        Q_ASSERT(options);
-        return options->d_func();
+        return options ? options->d_func() : 0;
     }
 
     bool optionsFailure:1;
+    bool connected:1;
+    bool leading:1;
     QQmlComponent *delegate;
     QQuickItem *panelItem;
     QList<QObject*> options;
+    QPointer<UCListItem> queuedItem;
 
     // options list property functions
     static void funcAppend(QQmlListProperty<QObject>*, QObject*);
     static int funcCount(QQmlListProperty<QObject>*);
     static QObject *funcAt(QQmlListProperty<QObject>*, int);
     static void funcClear(QQmlListProperty<QObject>*);
+
+    static bool connectToListItem(UCListItemOptions *options, UCListItem *listItem, bool leading);
+    static void disconnectFromListItem(UCListItemOptions *options);
+    static bool isConnectedTo(UCListItemOptions *options, UCListItem *listItem);
+
+    QQuickItem *createPanelItem();
 };
 
 #endif // UCLISTITEMOPTIONS_P_H

=== modified file 'modules/Ubuntu/Components/qmldir'
--- modules/Ubuntu/Components/qmldir	2014-09-03 08:17:24 +0000
+++ modules/Ubuntu/Components/qmldir	2014-09-11 06:51:26 +0000
@@ -106,3 +106,4 @@
 Icon 1.1 Icon11.qml
 StyledItem 1.1 StyledItem.qml
 singleton UbuntuColors 1.1 11/UbuntuColors.qml
+internal ListItemPanel ListItemPanel.qml

=== modified file 'tests/resources/listitems/ListItemTest.qml'
--- tests/resources/listitems/ListItemTest.qml	2014-09-11 06:51:25 +0000
+++ tests/resources/listitems/ListItemTest.qml	2014-09-11 06:51:26 +0000
@@ -31,6 +31,7 @@
 
     ListItemOptions {
         id: leading
+        objectName: "StockLeading"
         Action {
         }
         Action {
@@ -47,6 +48,7 @@
 
         ListItem {
             id: testItem
+            objectName: "single"
             contentItem.color: "lime"
             onClicked: {
                 print("click")
@@ -57,6 +59,7 @@
                 text: units.gridUnit + "PX/unit"
             }
             leadingOptions: ListItemOptions {
+                objectName: "InlineLeading"
                 options: [stock]
             }
             trailingOptions: leading
@@ -70,6 +73,7 @@
             model: 100
             pressDelay: 0
             delegate: ListItem {
+                objectName: "ListItem" + index
                 id: listItem
                 onClicked: print(" clicked")
                 leadingOptions: leading
@@ -98,10 +102,15 @@
                 Repeater {
                     model: 100
                     ListItem {
+                        objectName: "InFlickable"+index
                         contentItem {
                             color: "red"
                             pressedColor: "lime"
                         }
+                        trailingOptions: ListItemOptions {
+                            options: leading.options
+                        }
+
                         Label {
                             text: modelData + " Flickable item"
                         }

=== added file 'tests/unit/tst_performance/ListItemWithInlineOptionsList.qml'
--- tests/unit/tst_performance/ListItemWithInlineOptionsList.qml	1970-01-01 00:00:00 +0000
+++ tests/unit/tst_performance/ListItemWithInlineOptionsList.qml	2014-09-11 06:51:26 +0000
@@ -0,0 +1,39 @@
+/*
+ * 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.1
+
+Column {
+    width: 800
+    height: 600
+
+    Repeater {
+        model: 5000
+        ListItem {
+            trailingOptions: ListItemOptions {
+                Action {}
+                Action {}
+                Action {}
+            }
+            leadingOptions: ListItemOptions {
+                Action {}
+                Action {}
+                Action {}
+            }
+        }
+    }
+}

=== modified file 'tests/unit/tst_performance/ListItemWithOptionsList.qml'
--- tests/unit/tst_performance/ListItemWithOptionsList.qml	2014-09-11 06:51:25 +0000
+++ tests/unit/tst_performance/ListItemWithOptionsList.qml	2014-09-11 06:51:26 +0000
@@ -22,13 +22,19 @@
     height: 600
     ListItemOptions {
         id: options1
+        Action {}
+        Action {}
+        Action {}
     }
     ListItemOptions {
         id: options2
+        Action {}
+        Action {}
+        Action {}
     }
 
     Repeater {
-        model: 10000
+        model: 5000
         ListItem {
             trailingOptions: options1
             leadingOptions: options2

=== modified file 'tests/unit/tst_performance/tst_performance.cpp'
--- tests/unit/tst_performance/tst_performance.cpp	2014-09-11 06:51:25 +0000
+++ tests/unit/tst_performance/tst_performance.cpp	2014-09-11 06:51:26 +0000
@@ -79,6 +79,7 @@
         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 inline options") << "ListItemWithInlineOptionsList.qml" << QUrl();
         QTest::newRow("list with ListItems.Empty (equivalent to the new ListItem") << "ListItemsEmptyList.qml" << QUrl();
         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-09-11 06:51:25 +0000
+++ tests/unit/tst_performance/tst_performance.pro	2014-09-11 06:51:26 +0000
@@ -22,6 +22,7 @@
     TextWithImportPopups.qml \
     ItemList.qml \
     ListItemList.qml \
-    ListItemWithOptionsList.qml
+    ListItemWithOptionsList.qml \
+    ListItemWithInlineOptionsList.qml \
     ListItemsEmptyList.qml \
     ListItemsBaseList.qml

=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2014-09-11 06:51:25 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2014-09-11 06:51:26 +0000
@@ -68,6 +68,8 @@
             id: testItem
             width: parent.width
             contentItem.color: "blue"
+            leadingOptions: leading
+            trailingOptions: leading
             Item {
                 id: bodyItem
                 anchors.fill: parent
@@ -82,6 +84,8 @@
             delegate: ListItem {
                 objectName: "listItem" + index
                 width: parent.width
+                leadingOptions: leading
+                trailingOptions: trailing
             }
         }
     }
@@ -114,6 +118,7 @@
         function cleanup() {
             pressedSpy.clear();
             clickSpy.clear();
+            listView.interactive = true;
             // make sure all events are processed
             wait(200);
         }
@@ -186,6 +191,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));
         }
 
@@ -213,5 +219,95 @@
             }
             compare(data.object.options.length, data.expected, data.tag + ": expected options differ.");
         }
+
+        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();
+            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));
+            }
+            waitForRendering(data.item, 400);
+            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
+            if (data.mouse) {
+                mouseClick(main, 1, 1);
+            } else {
+                TestExtras.touchClick(0, main, Qt.point(1, 1));
+            }
+            waitForRendering(data.item, 400);
+        }
+
+        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();
+            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));
+            }
+            waitForRendering(data.item, 400);
+            verify(data.item.contentItem.x != 0, "The component wasn't tugged!");
+            // dismiss
+            if (data.mouse) {
+                mouseClick(data.clickOn, centerOf(data.clickOn).x, centerOf(data.clickOn).y);
+            } else {
+                TestExtras.touchClick(0, data.clickOn, centerOf(data.clickOn));
+            }
+            waitForRendering(data.item, 400);
+            tryCompareFunction(function(){ return data.item.contentItem.x; }, 0, 1000);
+        }
+
+        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();
+            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));
+            }
+            waitForRendering(data.item, 800);
+            compare(listView.interactive, false, "The ListView is still interactive!");
+            // dismiss
+            if (data.mouse) {
+                mouseClick(data.clickOn, centerOf(data.clickOn).x, centerOf(data.clickOn).y);
+            } else {
+                TestExtras.touchClick(0, data.clickOn, centerOf(data.clickOn));
+            }
+            waitForRendering(data.item, 400);
+            tryCompareFunction(function(){ return listView.interactive; }, true, 1000);
+        }
     }
 }