Merge lp:~zsombi/ubuntu-ui-toolkit/55-snap-options into lp:~zsombi/ubuntu-ui-toolkit/listitem-master

[Zsombor Egri]

Snap In/Out implementation.

[lp:~zsombi/ubuntu-ui-toolkit/55-snap-options]

1261. By Zsombor Egri on 2014-09-19

prereq sync

1262. By Zsombor Egri on 2014-09-24

prereq sync

1263. By Zsombor Egri on 2014-09-25

prereq sync

1264. By Zsombor Egri on 2014-09-25

tests fixed

1265. By Zsombor Egri on 2014-09-25

prereq sync

1266. By Zsombor Egri on 2014-09-25

test fixes on naming

1267. By Zsombor Egri on 2014-09-25

prereq sync

1268. By Zsombor Egri on 2014-09-25

test fix

1269. By Zsombor Egri on 2014-09-28

prereq merge

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

prereq sync

1275. By Zsombor Egri on 2014-10-22

prereq sync

1276. By Zsombor Egri on 2014-10-23

prereq sync

1277. By Zsombor Egri on 2014-10-24

overshoot

1278. By Zsombor Egri on 2014-10-24

overshoot completed

1279. By Zsombor Egri on 2014-10-24

test case fix

1280. By Zsombor Egri on 2014-10-24

prereq sync

1281. By Zsombor Egri on 2014-10-29

test cases adjusted to the new snapping logic

1282. By Zsombor Egri on 2014-10-29

snap out when actions list is changed

1283. By Zsombor Egri on 2014-10-29

provide a better name for rebounding with no animation

1284. By Zsombor Egri on 2014-10-30

prereq sync

1285. By Zsombor Egri on 2014-10-30

prereq sync

1286. By Zsombor Egri on 2014-10-30

tests fixed

1287. By Zsombor Egri on 2014-10-31

reboundTo renamed into snapTo

1288. By Zsombor Egri on 2014-11-04

prereq sync

1289. By Zsombor Egri on 2014-11-08

prereq sync

1290. By Zsombor Egri on 2014-11-10

prereq sync

1291. By Zsombor Egri on 2014-11-10

rename dragged to flicking as dragging will mean different thing

1292. By Zsombor Egri on 2014-11-10

test fixed

1293. By Zsombor Egri on 2014-11-10

test adjustments

1294. By Zsombor Egri on 2014-11-12

prereq sync

1295. By Zsombor Egri on 2014-11-12

fixing build and adjusting to prereq changes

1296. By Zsombor Egri on 2014-11-12

adding snap gesture test

1297. By Zsombor Egri on 2014-11-12

remove unneeded private slot

1298. By Zsombor Egri on 2014-11-17

prereq sync

1299. By Zsombor Egri on 2014-11-18

prereq sync

1300. By Zsombor Egri on 2014-11-19

prereq sync

1301. By Zsombor Egri on 2014-11-20

prereq sync

1302. By Zsombor Egri on 2014-11-24

prereq sync

1303. By Zsombor Egri on 2014-11-24

prereq sync

1304. By Zsombor Egri on 2014-11-25

leadingPAnel fixed

1305. By Zsombor Egri on 2014-11-25

prereq sync

1306. By Zsombor Egri on 2014-11-25

prereq sync

1307. By Zsombor Egri on 2014-11-25

prereq sync

[Tim Peeters (tpeeters)]

8 + // track drag dirrection, so we know in which direction we should snap

diRRection

[Tim Peeters (tpeeters)]

As a developer, I like to configure the overshoot when I use a custom delegate. Is that possible now? I have this delegate:

            delegate: Rectangle {
                color: delegateArea.pressed ? "orange" : "yellow"
                width: units.gu(10)
                ListItemActions.overshoot: 0
                Label {
                    text: action.text
                    anchors.centerIn: parent
                }
                MouseArea {
                    anchors.fill: parent
                    id: delegateArea
                    onPressed: print("press")
                }
            }

which is yellow, but when dragging I can pull a bit further and show the default white background of the panel. Can I disable the overshoot completely to avoid this?

[Tim Peeters (tpeeters)]

why is overshoot an attached property and not a property of ListItemActions directly?

[Zsombor Egri (zsombi)]

> As a developer, I like to configure the overshoot when I use a custom
> delegate. Is that possible now? I have this delegate:
>
> delegate: Rectangle {
> color: delegateArea.pressed ? "orange" : "yellow"
> width: units.gu(10)
> ListItemActions.overshoot: 0
> Label {
> text: action.text
> anchors.centerIn: parent
> }
> MouseArea {
> anchors.fill: parent
> id: delegateArea
> onPressed: print("press")
> }
> }
>
> which is yellow, but when dragging I can pull a bit further and show the
> default white background of the panel. Can I disable the overshoot completely
> to avoid this?

If you want to see the white background, you have to have a different actionsDelegate style component (perhaps we should name that differently?). Changing the overshoot to 0 would also mean that the panel cannot be dragged further than the panel size, so you won't see any background.

[Zsombor Egri (zsombi)]

> why is overshoot an attached property and not a property of ListItemActions
> directly?

that property is needed for the panel for sure. I thought we should expose that in the style, but we can expose it as property to ListItem rather to ListItemActions. As it is not actions specific, it is more like ListItem specific.

[lp:~zsombi/ubuntu-ui-toolkit/55-snap-options]

1308. By Zsombor Egri on 2014-11-27

prereq sync

1309. By Zsombor Egri on 2014-11-27

typo fix

[Tim Peeters (tpeeters)]

> 8 + // track drag dirrection, so we know in which direction we should
> snap
>
> diRRection

I was highlighting the mistake, direction is with 1 r.

[Tim Peeters (tpeeters)]

add ListItem.swipeOvershoot, and the style can have a default value for that.

review: Needs Fixing

[Zsombor Egri (zsombi)]

> add ListItem.swipeOvershoot, and the style can have a default value for that.

Now, we have a slight problem with getting the value from the style... as the style component is loaded only when someone starts swiping the content... so I can only get the value from the style when the style is loaded. Of course this doesn't make any harm when a user value is set on ListItem, but may cause property changed signalled when the style gets loaded.

[lp:~zsombi/ubuntu-ui-toolkit/55-snap-options]

1310. By Zsombor Egri on 2014-12-01

swipeOvershoot added to ListItem, overshoot removed from ListItemActions attached properties. Styling added.

[Tim Peeters (tpeeters)]

286 + * \qmlproperty real ListItem::swipeOvershoot
287 + * The property configures the overshoot value on swiping. Its default value is configured by the style.
288 + */

You can link "style" to ListItemStyle

[lp:~zsombi/ubuntu-ui-toolkit/55-snap-options]

1311. By Zsombor Egri on 2014-12-01

overshoot fix

1312. By Zsombor Egri on 2014-12-01

overshoot fixes

1313. By Zsombor Egri on 2014-12-01

rogue print removed

1314. By Zsombor Egri on 2014-12-01

link to style component

[Zsombor Egri (zsombi)]

> 286 + * \qmlproperty real ListItem::swipeOvershoot
> 287 + * The property configures the overshoot value on swiping. Its
> default value is configured by the style.
> 288 + */
>
> You can link "style" to ListItemStyle

Done.

[Tim Peeters (tpeeters)]

Perfect. >=0 overshoot works as expected now, and <0 overshoot sets the default value.

review: Approve

=== modified file 'components.api'
--- components.api	2014-12-01 15:58:43 +0000
+++ components.api	2014-12-01 15:58:45 +0000
@@ -871,6 +871,7 @@
     Property { name: "leadingActions"; type: "UCListItemActions"; isPointer: true }
     Property { name: "trailingActions"; type: "UCListItemActions"; isPointer: true }
     Property { name: "pressed"; type: "bool"; isReadonly: true }
+    Property { name: "swipeOvershoot"; type: "double" }
     Property { name: "contentMoving"; type: "bool"; isReadonly: true }
     Property { name: "color"; type: "QColor" }
     Property { name: "highlightColor"; type: "QColor" }
@@ -900,7 +901,6 @@
     Property { name: "offset"; type: "double"; isReadonly: true }
     Property { name: "status"; type: "UCListItemActions::Status"; isReadonly: true }
     Property { name: "swiping"; type: "bool"; isReadonly: true }
-    Property { name: "overshoot"; type: "double"; isReadonly: true }
     Method {
     name: "snapToPosition"
     Parameter { name: "position"; type: "double" }
@@ -919,6 +919,7 @@
     Property { name: "selectionDelegate"; type: "QQmlComponent"; isPointer: true }
     Property { name: "dragHandlerDelegate"; type: "QQmlComponent"; isPointer: true }
     Property { name: "snapAnimation"; type: "QQuickPropertyAnimation"; isPointer: true }
+    Property { name: "swipeOvershoot"; type: "double" }
     name: "UCMouse"
     prototype: "QObject"
     exports: ["Mouse 0.1", "Mouse 1.0"]

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	2014-12-01 15:58:45 +0000
@@ -70,8 +70,8 @@
         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)
+            leftMargin: (leading && panel.ListItemActions.listItem) ? -units.gu(4 * panel.ListItemActions.listItem.swipeOvershoot) : 0
+            rightMargin: (!leading && panel.ListItemActions.listItem) ? -units.gu(4 * panel.ListItemActions.listItem.swipeOvershoot) : 0
         }
         color: panel.backgroundColor
     }
@@ -84,6 +84,29 @@
         }
     }
 
+    // track drag direction, so we know in which direction we should snap
+    property real prevX: 0.0
+    property bool leftToRight: false
+    onXChanged: {
+        leftToRight = prevX < x;
+        prevX = x;
+    }
+    // default snapping!
+    ListItemActions.onSwipingChanged: {
+        if (ListItemActions.swiping) {
+            // the dragging got started, set prevX
+            prevX = panel.x;
+            return;
+        }
+        if (!visible) {
+            return;
+        }
+        // snap in if the offset is bigger than the overshoot and the direction of the drag is to reveal the panel
+        var snapPos = (ListItemActions.offset > ListItemActions.listItem.swipeOvershoot &&
+                       (leftToRight && leading || !leftToRight && !leading)) ? panel.width : 0.0;
+        ListItemActions.snapToPosition(snapPos);
+    }
+
     Row {
         id: actionsRow
         anchors {

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemStyle.qml	2014-12-01 15:58:45 +0000
@@ -1,6 +1,3 @@
-import QtQuick 2.3
-import Ubuntu.Components.Styles 1.2 as Styles
-import Ubuntu.Components 1.2
 /*
  * Copyright 2014 Canonical Ltd.
  *
@@ -17,8 +14,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import QtQuick 2.3
+import Ubuntu.Components.Styles 1.2 as Styles
+import Ubuntu.Components 1.2
+
 Styles.ListItemStyle {
 
+    swipeOvershoot: units.gu(2)
     actionsDelegate: ListItemPanel{}
 
     snapAnimation: PropertyAnimation {

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-12-01 15:58:45 +0000
@@ -22,6 +22,7 @@
 #include "uclistitemactions_p.h"
 #include "ucubuntuanimation.h"
 #include "propertychange_p.h"
+#include "i18n.h"
 #include <QtQml/QQmlInfo>
 #include <QtQuick/private/qquickitem_p.h>
 #include <QtQuick/private/qquickflickable_p.h>
@@ -164,9 +165,7 @@
 QQuickPropertyAnimation *UCListItemSnapAnimator::getDefaultAnimation()
 {
     UCListItemPrivate *listItem = UCListItemPrivate::get(item);
-    if (!listItem->styleItem && listItem->loadStyle()) {
-        listItem->initStyleItem();
-    }
+    listItem->initStyleItem();
     return listItem->styleItem ? listItem->styleItem->m_snapAnimation : 0;
 }
 
@@ -334,8 +333,10 @@
     , ready(false)
     , customStyle(false)
     , customColor(false)
+    , customOvershoot(false)
+    , flicked(false)
     , xAxisMoveThresholdGU(1.5)
-    , overshoot(UCUnits::instance().gu(2))
+    , overshoot(0)
     , color(Qt::transparent)
     , highlightColor(Qt::transparent)
     , attachedProperties(0)
@@ -384,7 +385,7 @@
         highlightColor = getPaletteColor("selected", "background");
         q->update();
     }
-    loadStyle();
+    loadStyle(true);
 }
 
 void UCListItemPrivate::_q_rebound()
@@ -400,6 +401,7 @@
     // rebound to zero
     animator->snap(0);
 }
+
 /*!
  * \qmlproperty Component ListItem::style
  * Holds the style of the component defining the components visualizing the leading/
@@ -428,19 +430,19 @@
     delete styleComponent;
     customStyle = (delegate == 0);
     styleComponent = delegate;
-    loadStyle();
+    loadStyle(false);
     Q_EMIT q->styleChanged();
 }
 
 // update themed components
-bool UCListItemPrivate::loadStyle()
+bool UCListItemPrivate::loadStyle(bool reload)
 {
     if (!ready) {
         return false;
     }
-    if (!customStyle && !styleComponent) {
+    if (!customStyle) {
         Q_Q(UCListItem);
-        if (styleItem) {
+        if (reload && styleItem) {
             delete styleItem;
             styleItem = 0;
             Q_EMIT q->__styleInstanceChanged();
@@ -453,7 +455,7 @@
 // creates the style item
 void UCListItemPrivate::initStyleItem()
 {
-    if (!styleComponent || styleItem) {
+    if (!styleItem && !loadStyle(false)) {
         return;
     }
     Q_Q(UCListItem);
@@ -461,9 +463,18 @@
     styleItem = qobject_cast<UCListItemStyle*>(object);
     if (!styleItem) {
         delete object;
+        styleComponent->completeCreate();
+        return;
     }
     QQml_setParent_noEvent(styleItem, q);
     styleComponent->completeCreate();
+    Q_EMIT q->__styleInstanceChanged();
+
+    // get the overshoot value from the style!
+    if (!customOvershoot) {
+        overshoot = styleItem->m_swipeOvershoot;
+        Q_EMIT q->swipeOvershootChanged();
+    }
 }
 
 /*!
@@ -492,8 +503,6 @@
     QQuickItem *owner = flickable ? flickable : parentItem;
     q->setImplicitWidth(owner ? owner->width() : UCUnits::instance().gu(40));
     q->setImplicitHeight(UCUnits::instance().gu(7));
-    // update overshoot value
-    overshoot = UCUnits::instance().gu(2);
 }
 
 // returns the index of the list item when used in model driven views,
@@ -605,9 +614,9 @@
     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;
+    qreal min = (trailing && trailing->panelItem) ? -trailing->panelItem->width() - overshoot: 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;
+    qreal max = (leading && leading->panelItem) ? leading->panelItem->width() + overshoot: 0;
     x = CLAMP(x, min, max);
 }
 
@@ -859,11 +868,6 @@
         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);
@@ -982,6 +986,8 @@
  *
  * The property holds the actions and its configuration to be revealed when swiped
  * from left to right.
+ *
+ * \sa trailingActions
  */
 UCListItemActions *UCListItem::leadingActions() const
 {
@@ -994,7 +1000,18 @@
     if (d->leadingActions == actions) {
         return;
     }
+    // snap out before we change the actions
+    d->promptRebound();
+    // then delete panelItem
+    if (d->leadingActions) {
+        UCListItemActionsPrivate *list = UCListItemActionsPrivate::get(d->leadingActions);
+        delete list->panelItem;
+        list->panelItem = 0;
+    }
     d->leadingActions = actions;
+    if (d->leadingActions == d->trailingActions && d->leadingActions) {
+        qmlInfo(this) << UbuntuI18n::tr("leadingActions and trailingActions cannot share the same object!");
+    }
     Q_EMIT leadingActionsChanged();
 }
 
@@ -1003,6 +1020,8 @@
  *
  * The property holds the actions and its configuration to be revealed when swiped
  * from right to left.
+ *
+ * \sa leadingActions
  */
 UCListItemActions *UCListItem::trailingActions() const
 {
@@ -1015,7 +1034,18 @@
     if (d->trailingActions == actions) {
         return;
     }
+    // snap out before we change the actions
+    d->promptRebound();
+    // then delete panelItem
+    if (d->trailingActions) {
+        UCListItemActionsPrivate *list = UCListItemActionsPrivate::get(d->trailingActions);
+        delete list->panelItem;
+        list->panelItem = 0;
+    }
     d->trailingActions = actions;
+    if (d->leadingActions == d->trailingActions && d->trailingActions) {
+        qmlInfo(this) << UbuntuI18n::tr("leadingActions and trailingActions cannot share the same object!");
+    }
     Q_EMIT trailingActionsChanged();
 }
 
@@ -1153,6 +1183,33 @@
 }
 
 /*!
+ * \qmlproperty real ListItem::swipeOvershoot
+ * The property configures the overshoot value on swiping. Its default value is
+ * configured by the \l {ListItemStyle}{style}. Any positive value overrides the
+ * default value, and any negative value resets it back to the default.
+ */
+qreal UCListItemPrivate::swipeOvershoot() const
+{
+    return overshoot;
+}
+void UCListItemPrivate::setSwipeOvershoot(qreal overshoot)
+{
+    // same value should be guarded only if the style hasn't been loaded yet
+    // swipeOvershoot can be set to 0 prior the style is loaded.
+    if (this->overshoot == overshoot && styleItem) {
+        return;
+    }
+    customOvershoot = (overshoot >= 0.0);
+    this->overshoot = (overshoot < 0.0) ?
+                // reset, use style to get the overshoot value
+                (styleItem ? styleItem->m_swipeOvershoot : 0.0) :
+                overshoot;
+    update();
+    Q_Q(UCListItem);
+    Q_EMIT q->swipeOvershootChanged();
+}
+
+/*!
  * \qmlproperty list<Object> ListItem::listItemData
  * \default
  * \internal

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
--- modules/Ubuntu/Components/plugin/uclistitem.h	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.h	2014-12-01 15:58:45 +0000
@@ -34,6 +34,7 @@
     Q_PROPERTY(UCListItemActions *leadingActions READ leadingActions WRITE setLeadingActions NOTIFY leadingActionsChanged DESIGNABLE false)
     Q_PROPERTY(UCListItemActions *trailingActions READ trailingActions WRITE setTrailingActions NOTIFY trailingActionsChanged DESIGNABLE false)
     Q_PROPERTY(bool pressed READ pressed NOTIFY pressedChanged)
+    Q_PRIVATE_PROPERTY(UCListItem::d_func(), qreal swipeOvershoot READ swipeOvershoot WRITE setSwipeOvershoot NOTIFY swipeOvershootChanged)
     Q_PRIVATE_PROPERTY(UCListItem::d_func(), bool contentMoving READ contentMoving NOTIFY contentMovingChanged)
     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
     Q_PROPERTY(QColor highlightColor READ highlightColor WRITE setHighlightColor NOTIFY highlightColorChanged)
@@ -76,6 +77,7 @@
     void leadingActionsChanged();
     void trailingActionsChanged();
     void pressedChanged();
+    void swipeOvershootChanged();
     void contentMovingChanged();
     void colorChanged();
     void highlightColorChanged();

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
--- modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-12-01 15:58:45 +0000
@@ -65,6 +65,8 @@
     bool ready:1;
     bool customStyle:1;
     bool customColor:1;
+    bool customOvershoot:1;
+    bool flicked:1;
     qreal xAxisMoveThresholdGU;
     qreal overshoot;
     QPointF lastPos;
@@ -84,13 +86,15 @@
     UCListItemStyle *styleItem;
 
     // getters/setters
+    qreal swipeOvershoot() const;
+    void setSwipeOvershoot(qreal overshoot);
     QQmlListProperty<QObject> data();
     QQmlListProperty<QQuickItem> children();
     bool contentMoving() const;
     void setContentMoving(bool moved);
     QQmlComponent *style() const;
     void setStyle(QQmlComponent *delegate);
-    bool loadStyle();
+    bool loadStyle(bool reload);
     void initStyleItem();
     QQuickItem *styleInstance() const;
 };

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-12-01 15:58:45 +0000
@@ -22,12 +22,14 @@
 #include "plugin.h"
 #include <QtQml/QQmlInfo>
 #include "ucaction.h"
+#include "ucunits.h"
 #include "uclistitemstyle.h"
 
 UCListItemActionsPrivate::UCListItemActionsPrivate()
     : QObjectPrivate()
     , status(UCListItemActions::Disconnected)
     , offsetDragged(0)
+    , optionSlotWidth(0.0)
     , delegate(0)
     , panelDelegate(0)
     , panelItem(0)
@@ -89,10 +91,8 @@
     }
     // 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)) {
+    pItem->initStyleItem();
+    if (!pItem->styleItem || (pItem->styleItem && !_this->createPanelItem(pItem->styleItem->m_actionsDelegate))) {
         return false;
     }
 
@@ -398,7 +398,7 @@
  * {ListItemStyle::actionsDelegate}{actionsDelegate} will be used.
  *
  * ListItemActions provides the \c action context property which contains the
- * Action instance visualized. Using this property delegates can access
+ * Action instance currently visualized. Using this property delegates can access
  * the information to be visualized. The action is triggered by the panel item
  * holding the visualized action, therefore only visualization is needed by the
  * custom delegate. The other context property exposed to delegates is the \c

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.h'
--- modules/Ubuntu/Components/plugin/uclistitemactions.h	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions.h	2014-12-01 15:58:45 +0000
@@ -67,7 +67,6 @@
     Q_PROPERTY(qreal offset READ offset NOTIFY offsetChanged)
     Q_PROPERTY(UCListItemActions::Status status READ status NOTIFY statusChanged)
     Q_PROPERTY(bool swiping READ swiping NOTIFY swipingChanged)
-    Q_PROPERTY(qreal overshoot READ overshoot NOTIFY overshootChanged)
 public:
     UCListItemActionsAttached(QObject *parent = 0);
     ~UCListItemActionsAttached();
@@ -84,7 +83,6 @@
     bool swiping();
     qreal offset();
     UCListItemActions::Status status();
-    qreal overshoot();
 
 
 public Q_SLOTS:
@@ -98,7 +96,6 @@
     void offsetChanged();
     void statusChanged();
     void swipingChanged();
-    void overshootChanged();
 
 private:
     QPointer<UCListItemActions> m_container;

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions_p.h'
--- modules/Ubuntu/Components/plugin/uclistitemactions_p.h	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions_p.h	2014-12-01 15:58:45 +0000
@@ -33,6 +33,7 @@
 
     UCListItemActions::Status status;
     qreal offsetDragged;
+    qreal optionSlotWidth;
 
     QQmlComponent *delegate;
     QQmlComponent *panelDelegate;

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-12-01 15:58:45 +0000
@@ -51,8 +51,6 @@
                          this, &UCListItemActionsAttached::listItemChanged);
         QObject::connect(m_container.data(), &UCListItemActions::statusChanged,
                          this, &UCListItemActionsAttached::listItemIndexChanged);
-        QObject::connect(m_container.data(), &UCListItemActions::statusChanged,
-                         this, &UCListItemActionsAttached::overshootChanged);
 
         UCListItemActionsPrivate *actions = UCListItemActionsPrivate::get(m_container.data());
         // connect panel's xChanged to update the dragged offset
@@ -212,28 +210,6 @@
 }
 
 /*!
- * \qmlattachedproperty real ListItemActions::overshoot
- * The property holds the overshoot value set for the list item.
- */
-qreal UCListItemActionsAttached::overshoot()
-{
-    if (status() == UCListItemActions::Disconnected) {
-        return 0.0;
-    }
-    QQuickItem *panelItem = UCListItemActionsPrivate::get(m_container)->panelItem;
-    if (!panelItem) {
-        // we don't have the panel created yet
-        return 0.0;
-    }
-    UCListItem *item = static_cast<UCListItem*>(panelItem->parentItem());
-    if (!item) {
-        // no ListItem attached
-        return 0.0;
-    }
-    return UCListItemPrivate::get(item)->overshoot;
-}
-
-/*!
  * \qmlattachedmethod void ListItemActions::snapToPosition(real position)
  * The function can be used to perform custom snapping, or to execute rebounding
  * and also disconnecting from the connected \l ListItem. This can be achieved by

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemstyle.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemstyle.cpp	2014-12-01 15:58:45 +0000
@@ -34,8 +34,13 @@
  *  \li - ignores any other visuals defined in the style.
  * \endlist
  */
-UCListItemStyle::UCListItemStyle(QQuickItem *parent) :
-    QQuickItem(parent)
+UCListItemStyle::UCListItemStyle(QQuickItem *parent)
+    : QQuickItem(parent)
+    , m_actionsDelegate(0)
+    , m_selectionDelegate(0)
+    , m_dragHandlerDelegate(0)
+    , m_snapAnimation(0)
+    , m_swipeOvershoot(0)
 {
 }
 
@@ -43,50 +48,23 @@
  * \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();
-}
+
+/*!
+ * \qmlproperty real ListItemStyle::swipeOvershoot
+ * The property specifies the overshoot value of the ListItem.
+ */

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemstyle.h'
--- modules/Ubuntu/Components/plugin/uclistitemstyle.h	2014-12-01 15:58:43 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemstyle.h	2014-12-01 15:58:45 +0000
@@ -23,30 +23,29 @@
 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)
+    Q_PROPERTY(QQmlComponent *actionsDelegate MEMBER m_actionsDelegate NOTIFY actionsDelegateChanged)
+    Q_PROPERTY(QQmlComponent *selectionDelegate MEMBER m_selectionDelegate NOTIFY selectionDelegateChanged)
+    Q_PROPERTY(QQmlComponent *dragHandlerDelegate MEMBER m_dragHandlerDelegate NOTIFY dragHandlerDelegateChanged)
+    Q_PROPERTY(QQuickPropertyAnimation *snapAnimation MEMBER m_snapAnimation NOTIFY snapAnimationChanged)
+    Q_PROPERTY(qreal swipeOvershoot MEMBER m_swipeOvershoot NOTIFY swipeOvershootChanged)
 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();
+    void swipeOvershootChanged();
 
 private:
     QQmlComponent *m_actionsDelegate;
     QQmlComponent *m_selectionDelegate;
     QQmlComponent *m_dragHandlerDelegate;
     QQuickPropertyAnimation *m_snapAnimation;
+    qreal m_swipeOvershoot;
 
+    friend class UCListItemPrivate;
     friend class UCListItemActionsPrivate;
     friend class UCListItemSnapAnimator;
 };

=== modified file 'modules/Ubuntu/Test/UbuntuTestCase.qml'
--- modules/Ubuntu/Test/UbuntuTestCase.qml	2014-10-10 16:49:22 +0000
+++ modules/Ubuntu/Test/UbuntuTestCase.qml	2014-12-01 15:58:45 +0000
@@ -163,12 +163,9 @@
         if (pressTimeout !== undefined && pressTimeout > 0) {
             wait(pressTimeout);
         }
-        mouseMove(item, x, y, button, modifiers, delay);
-        for (var i = 1; i <= steps; i++) {
-            // mouse moves are all processed immediately, without delay in between events
-            mouseMove(item, x + i * ddx, y + i * ddy, -1, button);
-        }
-        mouseRelease(item, x + dx, y + dy, button, modifiers, delay);
+        // mouse moves are all processed immediately, without delay in between events
+        mouseMoveSlowly(item, x, y, dx, dy, steps, delay);
+        mouseRelease(item, x + dx, y + dy, button, modifiers);
         // empty event buffer
         wait(200);
     }

=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2014-12-01 15:58:43 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2014-12-01 15:58:45 +0000
@@ -152,6 +152,7 @@
             movingSpy.clear();
             pressedSpy.clear();
             clickSpy.clear();
+            interactiveSpy.clear();
             listView.interactive = true;
             // make sure we collapse
             mouseClick(defaults, 0, 0)
@@ -160,6 +161,7 @@
             interactiveSpy.target = null;
             interactiveSpy.clear();
             trailing.delegate = null;
+            listView.positionViewAtBeginning();
         }
 
         function test_0_defaults() {
@@ -167,6 +169,7 @@
             compare(defaults.color, "#000000", "Transparent by default");
             compare(defaults.highlightColor, Theme.palette.selected.background, "Theme.palette.selected.background color by default")
             compare(defaults.pressed, false, "Not pressed buy default");
+            compare(defaults.swipeOvershoot, 0.0, "No overshoot till the style is loaded!");
             compare(defaults.divider.visible, true, "divider is visible by default");
             compare(defaults.divider.leftMargin, units.dp(2), "divider's left margin is 2GU");
             compare(defaults.divider.rightMargin, units.dp(2), "divider's right margin is 2GU");
@@ -317,12 +320,13 @@
         }
         function test_listview_not_interactive_while_tugged(data) {
             listView.positionViewAtBeginning();
+            compare(listView.interactive, true, "ListView is not interactive");
             movingSpy.target = data.item;
             interactiveSpy.target = listView;
             if (data.mouse) {
-                flick(data.item, data.pos.x, data.pos.y, data.dx, 0);
+                flick(data.item, data.pos.x, data.pos.y, data.dx, data.dy);
             } else {
-                TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, 0));
+                TestExtras.touchDrag(0, data.item, data.pos, Qt.point(data.dx, data.dy));
             }
             movingSpy.wait();
             // animation should no longer be running!
@@ -399,13 +403,124 @@
             trailing.delegate = customDelegate;
             listView.positionViewAtBeginning();
             var item = findChild(listView, "listItem0");
+            movingSpy.target = item;
             flick(item, centerOf(item).x, centerOf(item).y, -units.gu(20), 0);
             var panel = panelItem(item, false);
             verify(panel, "Panel is not visible");
             var custom = findChild(panel, "custom_delegate");
             verify(custom, "Custom delegate not in use");
+            movingSpy.wait();
             // cleanup
             rebound(item);
         }
+
+        // execute as last so we make sure we have the panel created
+        function test_snap_data() {
+            var listItem = findChild(listView, "listItem0");
+            verify(listItem, "ListItem cannot be found");
+
+            return [
+                // the list snaps out if the panel is dragged in > overshoot GU (hardcoded for now)
+                {tag: "Snap out leading", item: listItem, dx: units.gu(2), snapIn: false},
+                {tag: "Snap in leading", item: listItem, dx: units.gu(4), snapIn: true},
+                {tag: "Snap out trailing", item: listItem, dx: -units.gu(2), snapIn: false},
+                {tag: "Snap in trailing", item: listItem, dx: -units.gu(4), snapIn: true},
+            ];
+        }
+        function test_snap(data) {
+            movingSpy.target = data.item;
+            flick(data.item, centerOf(data.item).x, centerOf(data.item).y, data.dx, 0);
+            movingSpy.wait();
+            waitForRendering(data.item, 400);
+            movingSpy.clear();
+            if (data.snapIn) {
+                verify(data.item.contentItem.x != 0.0, "Not snapped to be visible");
+                // cleanup
+                rebound(data.item);
+            } else {
+                tryCompareFunction(function() { return data.item.contentItem.x; }, 0.0, 1000, "Not snapped back");
+            }
+        }
+
+        function test_snap_gesture_data() {
+            var listItem = findChild(listView, "listItem0");
+            var front = Qt.point(units.gu(1), listItem.height / 2);
+            var rear = Qt.point(listItem.width - units.gu(1), listItem.height / 2);
+            return [
+                // the first dx must be big enough to drag the panel in, it is always the last dx value
+                // which decides the snap direction
+                {tag: "Snap out, leading", item: listItem, grabPos: front, dx: [units.gu(10), -units.gu(2)], snapIn: false},
+                {tag: "Snap in, leading", item: listItem, grabPos: front, dx: [units.gu(10), -units.gu(1), units.gu(1)], snapIn: true},
+                // have less first dx as the trailing panel is shorter
+                {tag: "Snap out, trailing", item: listItem, grabPos: rear, dx: [-units.gu(5), units.gu(2)], snapIn: false},
+                {tag: "Snap in, trailing", item: listItem, grabPos: rear, dx: [-units.gu(5), units.gu(1), -units.gu(1)], snapIn: true},
+            ];
+        }
+        function test_snap_gesture(data) {
+            // performe the moves
+            movingSpy.target = data.item;
+            var pos = data.grabPos;
+            mousePress(data.item.contentItem, pos.x, pos.y);
+            for (var i in data.dx) {
+                var dx = data.dx[i];
+                mouseMoveSlowly(data.item.contentItem, pos.x, pos.y, dx, 0, 5, 100);
+                pos.x += dx;
+            }
+            mouseRelease(data.item.contentItem, pos.x, pos.y);
+            movingSpy.wait();
+
+            if (data.snapIn) {
+                // the contenTitem must be dragged in (snapIn)
+                verify(data.item.contentItem.x != 0.0, "Not snapped in!");
+                // dismiss
+                rebound(data.item);
+            } else {
+                fuzzyCompare(data.item.contentItem.x, 0.0, 0.1, "Not snapped out!");
+            }
+        }
+
+        function test_overshoot_from_style() {
+            // scroll to the last ListView element and test on that, to make sure we don't have the style loaded for that component
+            listView.positionViewAtEnd();
+            var listItem = findChild(listView, "listItem" + (listView.count - 1));
+            verify(listItem, "Cannot get list item for testing");
+
+            compare(listItem.swipeOvershoot, 0.0, "No overshoot should be set yet!");
+            // now swipe
+            movingSpy.target = listItem;
+            flick(listItem.contentItem, centerOf(listItem).x, centerOf(listItem).y, units.gu(5), 0);
+            movingSpy.wait();
+            compare(listItem.swipeOvershoot, listItem.__styleInstance.swipeOvershoot, "Overshoot not taken from style");
+
+            // cleanup
+            rebound(listItem);
+        }
+
+        function test_custom_overshoot_data() {
+            // use different items to make sure the style doesn't update the overshoot values during the test
+            return [
+                {tag: "Positive value", index: listView.count - 1, value: units.gu(10), expected: units.gu(10)},
+                {tag: "Zero value", index: listView.count - 2, value: 0, expected: 0},
+                // synchronize the expected value with the one from Ambiance theme!
+                {tag: "Negative value", index: listView.count - 3, value: -1, expected: units.gu(2)},
+            ];
+        }
+        function test_custom_overshoot(data) {
+            // scroll to the last ListView element and test on that, to make sure we don't have the style loaded for that component
+            listView.positionViewAtEnd();
+            var listItem = findChild(listView, "listItem" + data.index);
+            verify(listItem, "Cannot get list item for testing");
+
+            compare(listItem.swipeOvershoot, 0.0, "No overshoot should be set yet!");
+            listItem.swipeOvershoot = data.value;
+            // now swipe
+            movingSpy.target = listItem;
+            flick(listItem.contentItem, centerOf(listItem).x, centerOf(listItem).y, units.gu(5), 0);
+            movingSpy.wait();
+            compare(listItem.swipeOvershoot, data.expected, "Overshoot differs from one set!");
+
+            // cleanup
+            rebound(listItem);
+        }
     }
 }