Merge lp:~zsombi/ubuntu-ui-toolkit/32-listitemactions-attached into lp:~zsombi/ubuntu-ui-toolkit/listitem-master

[Zsombor Egri]

Introducing ListItemActions attached properties, which will be attached automatically to action visualization panels.

[lp:~zsombi/ubuntu-ui-toolkit/32-listitemactions-attached]

1320. By Zsombor Egri on 2014-11-07

adding missing connects

[Tim Peeters (tpeeters)]

53 + , overshootGU(2)

would overshoot(units.gu(2)) work instead of this?

[lp:~zsombi/ubuntu-ui-toolkit/32-listitemactions-attached]

1321. By Zsombor Egri on 2014-11-11

dragging event renamed to flicking, as dragging is planned to name a different thing; visibleActions attached property added

[Zsombor Egri (zsombi)]

> 53 + , overshootGU(2)
>
> would overshoot(units.gu(2)) work instead of this?

It could. I'll move to that.

[Zsombor Egri (zsombi)]

> > 53 + , overshootGU(2)
> >
> > would overshoot(units.gu(2)) work instead of this?
>
> It could. I'll move to that.

Though I woudl need slightly more code, but it's much better to use that approach.

[lp:~zsombi/ubuntu-ui-toolkit/32-listitemactions-attached]

1322. By Zsombor Egri on 2014-11-11

overshoot property fix

1323. By Zsombor Egri on 2014-11-11

API fixes

1324. By Zsombor Egri on 2014-11-11

swiping fix

[Tim Peeters (tpeeters)]

Instead of speaking of "tugged", I'd use "swiped", or "swiped horizontally" if you want to be even more specific. "Swiping" of list items is becoming pretty common language for list items in various other softwares.

[Tim Peeters (tpeeters)]

This is funny in the generated docs file:///home/tim/dev/ubuntu-ui-toolkit/r/32-listitemactions-attached/documentation/html/qml-ubuntu-components-listitem.html :

 Import Statement: import Ubuntu.Components 1.1
 Since: Ubuntu.Components 1.2

The first one should be 1.2. But if that is difficult to fix, leave it until we release 1.2.

[Tim Peeters (tpeeters)]

> The component is dedicated to be used in designs with static or dynamic lists (i.e. list views
> where each item's layout differs or in lists where the content is determined by a given model,
> thus each element has the same layout)

> The element does not define any specific layout, components can be placed in any ways on it.
> However, when used in list views, the content must be carefully chosen to in order to keep the
> kinetic behavior and the highest FPS possible.

That's all very abstract, I don't know what a developer can do with this information.

What about this?

The ListItem component was designed to be used in a list view. It does not define any specific layout, but while its contents can be freely chosen by the developer, care must be taken to keep the contents light in order to ensure good performance when used in long list views.

[Tim Peeters (tpeeters)]

> The component provides two color properties which configures the item's background
> when normal or pressed.

> This can be configures through color and highlightColor properties.

configureD

highlightColor only applies when pressed? With previous list items that color was used when pressed || selected.

> void UCListItemPrivate::_q_updateColors()
> {
> Q_Q(UCListItem);
> highlightColor = getPaletteColor("selected", "background");
> q->update();
> }

should this also update color?

[Tim Peeters (tpeeters)]

> contentItem holds all components and resources declared as child to ListItem.
> Being an Item, all other properties can be accessed or altered, with the exception of some:

> 1. do not alter x, y, width or height properties as those are controlled by the ListItem
> itself when leading or trailing actions are revealed and thus will destroy your logic
> 2. never anchor left or right anchor lines as it will block revealing the actions.

Can we say never to alter x,y,width,height or the anchors? The way it is written now it leaves the option to change top and bottom anchors (which will change the height), and margins (which may mess up the visuals, for example by using negative margins).

[Tim Peeters (tpeeters)]

> Each ListItem has a thin divider shown on the bottom of the component. This divider can be
> configured through the divider grouped property, which can configure its margins from the
> edges of the ListItem as well as its visibility.

"divider" links to ListItems.divider instead of the grouped property.

[Tim Peeters (tpeeters)]

The documentation needs example code

review: Needs Fixing

[Tim Peeters (tpeeters)]

^I was looking at the wrong MR I guess.. There is example code :)

but adding more won't hurt ;)

ListItemActions {
    id: cacedActions
    actions: [
        copyAction, searchAction, cutAction
    ]
}

cacedActions == cachedActions

[Tim Peeters (tpeeters)]

How do I enable the swiping in a list item?

I created a small test program here - https://code.launchpad.net/~tpeeters/+junk/lists
It has a ListView with the new ListItems that have leading and trailing actions, but I cannot swipe to show them.

[Tim Peeters (tpeeters)]

^ I guess they come in a later MR. But how can I test it now?

[Zsombor Egri (zsombi)]

> Instead of speaking of "tugged", I'd use "swiped", or "swiped horizontally" if
> you want to be even more specific. "Swiping" of list items is becoming pretty
> common language for list items in various other softwares.

Fixed in revno 1325.

[Zsombor Egri (zsombi)]

> This is funny in the generated docs file:///home/tim/dev/ubuntu-ui-
> toolkit/r/32-listitemactions-attached/documentation/html/qml-ubuntu-
> components-listitem.html :
>
>
> Import Statement: import Ubuntu.Components 1.1
> Since: Ubuntu.Components 1.2
>
>
> The first one should be 1.2. But if that is difficult to fix, leave it until
> we release 1.2.

It's a qdoc behavior we cannot really do much about. You cannot document two versions of a framework in the same set. Let's fix this once we close 1.1. Anyways, the whole documentation is under Unstable section, and we must move them outa there.

[Zsombor Egri (zsombi)]

> > The component is dedicated to be used in designs with static or dynamic
> lists (i.e. list views
> > where each item's layout differs or in lists where the content is determined
> by a given model,
> > thus each element has the same layout)
>
> > The element does not define any specific layout, components can be placed in
> any ways on it.
> > However, when used in list views, the content must be carefully chosen to in
> order to keep the
> > kinetic behavior and the highest FPS possible.
>
> That's all very abstract, I don't know what a developer can do with this
> information.
>
> What about this?
>
> The ListItem component was designed to be used in a list view. It does not
> define any specific layout, but while its contents can be freely chosen by the
> developer, care must be taken to keep the contents light in order to ensure
> good performance when used in long list views.

Sounds indeed better. Revno 1326.

[Zsombor Egri (zsombi)]

> > The component provides two color properties which configures the item's
> background
> > when normal or pressed.
>
> > This can be configures through color and highlightColor properties.
>
> configureD

ehh...

>
>
> highlightColor only applies when pressed? With previous list items that color
> was used when pressed || selected.

Will be applied also when selected, just did not wanted to add it here yet, will come when the selection mode will be implemented, in MR #80

>
>
>
> > void UCListItemPrivate::_q_updateColors()
> > {
> > Q_Q(UCListItem);
> > highlightColor = getPaletteColor("selected", "background");
> > q->update();
> > }
>
> should this also update color?
Not yet, as the color is transparent and not themed. If we'll theme that as well, we'll have to update that as well.

Typo fix in revno 1327.

[Zsombor Egri (zsombi)]

> > contentItem holds all components and resources declared as child to
> ListItem.
> > Being an Item, all other properties can be accessed or altered, with the
> exception of some:
>
> > 1. do not alter x, y, width or height properties as those are controlled by
> the ListItem
> > itself when leading or trailing actions are revealed and thus will destroy
> your logic
> > 2. never anchor left or right anchor lines as it will block revealing the
> actions.
>
> Can we say never to alter x,y,width,height or the anchors? The way it is
> written now it leaves the option to change top and bottom anchors (which will
> change the height), and margins (which may mess up the visuals, for example by
> using negative margins).

Is revno change 1328 any better?

[Zsombor Egri (zsombi)]

> > Each ListItem has a thin divider shown on the bottom of the component. This
> divider can be
> > configured through the divider grouped property, which can configure its
> margins from the
> > edges of the ListItem as well as its visibility.
>
> "divider" links to ListItems.divider instead of the grouped property.

I cannot make it to link to the group property... qdoc simply doesn't take it... I fixed for now as \c. revno 1329

[Zsombor Egri (zsombi)]

> The documentation needs example code

I did not see any reasons yet to give example code, there will be later some. Yet, the documentation is focusing on the stuff we have implemented, and these are pretty obvious. If you see the need still, let me know what examples you'd like to see.

[Zsombor Egri (zsombi)]

> How do I enable the swiping in a list item?
>
> I created a small test program here -
> https://code.launchpad.net/~tpeeters/+junk/lists
> It has a ListView with the new ListItems that have leading and trailing
> actions, but I cannot swipe to show them.

This will come in #35, there's no panel at this moment. This MR introduces the attached property, and would be too much to get the styling and the minimal panel implementation introduced.

[Zsombor Egri (zsombi)]

> ^ I guess they come in a later MR. But how can I test it now?

Yes, as said previously. The whole logic - the final version - is done til #67. After that will come the selectionMode.

[Zsombor Egri (zsombi)]

> > ^ I guess they come in a later MR. But how can I test it now?
>
> Yes, as said previously. The whole logic - the final version - is done til
> #67. After that will come the selectionMode.

Also, please check revno 1330, I rewrote a section in ListItemAttached main documentation, section Using with ListView.

[lp:~zsombi/ubuntu-ui-toolkit/32-listitemactions-attached]

1325. By Zsombor Egri on 2014-11-12

fixing tug->swipe

1326. By Zsombor Egri on 2014-11-12

ListItem documentation headline fixed

1327. By Zsombor Egri on 2014-11-12

small typo fix

1328. By Zsombor Egri on 2014-11-12

reformulate contentItem property access

1329. By Zsombor Egri on 2014-11-12

bad linking on divider, qdoc doesn't link to the group property

1330. By Zsombor Egri on 2014-11-12

rewrite ListItemActions section Using with ListView documentation

[Tim Peeters (tpeeters)]

> > > void UCListItemPrivate::_q_updateColors()
> > > {
> > > Q_Q(UCListItem);
> > > highlightColor = getPaletteColor("selected", "background");
> > > q->update();
> > > }
> >
> > should this also update color?
> Not yet, as the color is transparent and not themed. If we'll theme that as
> well, we'll have to update that as well.

But the developer can just set color = "red" in the ListItem code. For that you don't need to update it here? And for highlightColor, if the developer sets it to "yellow" will the function here override that?

[Tim Peeters (tpeeters)]

> > > contentItem holds all components and resources declared as child to
> > ListItem.
> > > Being an Item, all other properties can be accessed or altered, with the
> > exception of some:
> >
> > > 1. do not alter x, y, width or height properties as those are controlled
> by
> > the ListItem
> > > itself when leading or trailing actions are revealed and thus will destroy
> > your logic
> > > 2. never anchor left or right anchor lines as it will block revealing the
> > actions.
> >
> > Can we say never to alter x,y,width,height or the anchors? The way it is
> > written now it leaves the option to change top and bottom anchors (which
> will
> > change the height), and margins (which may mess up the visuals, for example
> by
> > using negative margins).
>
> Is revno change 1328 any better?

yep :)

[Tim Peeters (tpeeters)]

923 + // FIXME: implement snaping

snapping ;)

[Tim Peeters (tpeeters)]

> (rebount)

rebound?

[Tim Peeters (tpeeters)]

> On the other hand, memory consumption will increase signifficantly doe to separate panel creation

due to*

[Tim Peeters (tpeeters)]

> > On the other hand, memory consumption will increase signifficantly doe to
> separate panel creation
>
> due to*

*significantly

[Tim Peeters (tpeeters)]

> depending on how "badly" are the actions declared, within the ListItemActions or as shared actions.

I don't know what you mean with that sentence

[Tim Peeters (tpeeters)]

In the new "optimized" code example, you define list<Action>:... Why not pre-define the full ListItemActions that you re-use in all of that ListItems? That is what you describe above to save memory. Perhaps you can say that with the code you show you do not have the disadvantages of that method

[Zsombor Egri (zsombi)]

>
> > > > void UCListItemPrivate::_q_updateColors()
> > > > {
> > > > Q_Q(UCListItem);
> > > > highlightColor = getPaletteColor("selected", "background");
> > > > q->update();
> > > > }
> > >
> > > should this also update color?
> > Not yet, as the color is transparent and not themed. If we'll theme that as
> > well, we'll have to update that as well.
>
> But the developer can just set color = "red" in the ListItem code. For that
> you don't need to update it here? And for highlightColor, if the developer
> sets it to "yellow" will the function here override that?

If the user changes the color, that won't be subject of theming update, right? This function does the theming update. If the hightlightColor will be set to any color different than the "stock" color (theme color), that will also be omitted. See setHighlightColor, where we disconnect the slot.

[Zsombor Egri (zsombi)]

> 923 + // FIXME: implement snaping
>
> snapping ;)

Won't bother, will be removed in #35

[Tim Peeters (tpeeters)]

I think for the ListItemActions docs, we can have a section
*potential pitfalls* where you give two (short) code examples how it should not be done and say why it is wrong. Then we can give the *recommended solution* with a short code example.

[Zsombor Egri (zsombi)]

> > depending on how "badly" are the actions declared, within the
> ListItemActions or as shared actions.
>
>
> I don't know what you mean with that sentence

Reformulated.

[Zsombor Egri (zsombi)]

> In the new "optimized" code example, you define list<Action>:... Why not pre-
> define the full ListItemActions that you re-use in all of that ListItems? That
> is what you describe above to save memory. Perhaps you can say that with the
> code you show you do not have the disadvantages of that method

In the paragraph I was talking about a more responsive UI. That one requires to have separate ListItemActions instances per ListItem.

[lp:~zsombi/ubuntu-ui-toolkit/32-listitemactions-attached]

1331. By Zsombor Egri on 2014-11-12

review comments applied

[Tim Peeters (tpeeters)]

Good. Next!

review: Approve

[lp:~zsombi/ubuntu-ui-toolkit/32-listitemactions-attached]

1332. By Zsombor Egri on 2014-11-19

prereq sync

=== modified file 'components.api'
--- components.api	2014-11-19 15:10:15 +0000
+++ components.api	2014-11-19 15:10:18 +0000
@@ -871,17 +871,37 @@
     Property { name: "leadingActions"; type: "UCListItemActions"; isPointer: true }
     Property { name: "trailingActions"; type: "UCListItemActions"; isPointer: true }
     Property { name: "pressed"; type: "bool"; isReadonly: true }
+    Property { name: "contentMoving"; type: "bool"; isReadonly: true }
     Property { name: "color"; type: "QColor" }
     Property { name: "highlightColor"; type: "QColor" }
     Property { name: "data"; type: "QObject"; isList: true; isReadonly: true }
     Property { name: "children"; type: "QQuickItem"; isList: true; isReadonly: true }
     Signal { name: "clicked" }
+    Signal { name: "contentMovementStarted" }
+    Signal { name: "contentMovementEnded" }
     name: "UCListItemActions"
     prototype: "QObject"
     exports: ["ListItemActions 1.2"]
+    name: "Status"
     Property { name: "delegate"; type: "QQmlComponent"; isPointer: true }
     Property { name: "actions"; type: "UCAction"; isList: true; isReadonly: true }
     Property { name: "data"; type: "QObject"; isList: true; isReadonly: true }
+    Signal {
+    name: "statusChanged"
+    Parameter { name: "status"; type: "Status" }
+    name: "UCListItemActionsAttached"
+    prototype: "QObject"
+    Property { name: "container"; type: "UCListItemActions"; isReadonly: true; isPointer: true }
+    Property { name: "visibleActions"; type: "UCAction"; isList: true; isReadonly: true }
+    Property { name: "listItem"; type: "UCListItem"; isReadonly: true; isPointer: true }
+    Property { name: "listItemIndex"; type: "int"; isReadonly: true }
+    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" }
     name: "UCListItemDivider"
     prototype: "QObject"
     Property { name: "visible"; type: "bool" }
 
=== modified file 'modules/Ubuntu/Components/plugin/plugin.pro'
--- modules/Ubuntu/Components/plugin/plugin.pro	2014-11-19 15:10:15 +0000
+++ modules/Ubuntu/Components/plugin/plugin.pro	2014-11-19 15:10:18 +0000
@@ -111,7 +111,8 @@
     ucactionmanager.cpp \
     adapters/actionsproxy_p.cpp \
     uclistitem.cpp \
-    uclistitemactions.cpp
+    uclistitemactions.cpp \
+    uclistitemactionsattached.cpp
 
 # adapters
 SOURCES += adapters/alarmsadapter_organizer.cpp
 
=== modified file 'modules/Ubuntu/Components/plugin/ucaction.h'
--- modules/Ubuntu/Components/plugin/ucaction.h	2014-09-01 06:56:39 +0000
+++ modules/Ubuntu/Components/plugin/ucaction.h	2014-11-19 15:10:18 +0000
@@ -87,6 +87,7 @@
     Type m_parameterType;
 
     friend class UCActionContext;
+    friend class UCListItemActionsAttached;
 
     bool isValidType(QVariant::Type valueType);
     void generateName();
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-19 15:10:15 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-19 15:10:18 +0000
@@ -191,7 +191,10 @@
 UCListItemPrivate::UCListItemPrivate()
     : UCStyledItemBasePrivate()
     , pressed(false)
+    , contentMoved(false)
     , highlightColorChanged(false)
+    , ready(false)
+    , overshoot(UCUnits::instance().gu(2))
     , color(Qt::transparent)
     , highlightColor(Qt::transparent)
     , contentItem(new QQuickItem)
@@ -249,6 +252,21 @@
     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,
+// and the child index in other cases
+int UCListItemPrivate::index()
+{
+    Q_Q(UCListItem);
+    // is there an index context property?
+    QQmlContext *context = qmlContext(q);
+    QVariant index = context->contextProperty("index");
+    return index.isValid() ?
+                index.toInt() :
+                (parentItem ? QQuickItemPrivate::get(parentItem)->childItems.indexOf(q) : -1);
 }
 
 // set pressed flag and update contentItem
@@ -303,30 +321,23 @@
  * \since Ubuntu.Components 1.2
  * \brief The ListItem element provides Ubuntu design standards for list or grid
  * views.
- *
- * The component is dedicated to be used in designs with static or dynamic lists
- * (i.e. list views where each item's layout differs or in lists where the content
- * is determined by a given model, thus each element has the same layout). The
- * element does not define any specific layout, components can be placed in any
- * ways on it. However, when used in list views, the content must be carefully
- * chosen to in order to keep the kinetic behavior and the highest FPS possible.
+ * The ListItem component was designed to be used in a list view. It does not
+ * define any specific layout, but while its contents can be freely chosen by
+ * the developer, care must be taken to keep the contents light in order to ensure
+ * good performance when used in long list views.
  *
  * The component provides two color properties which configures the item's background
- * when normal or pressed. This can be configures through \l color and \l highlightColor
+ * when normal or pressed. This can be configured through \l color and \l highlightColor
  * properties.
  *
  * \c contentItem holds all components and resources declared as child to ListItem.
- * Being an Item, all other properties can be accessed or altered, with the exception
- * of some:
- * \list A
- * \li do not alter \c x, \c y, \c width or \c height properties as those are
- *      controlled by the ListItem itself when leading or trailing actions are
- *      revealed and thus will destroy your logic
- * \li never anchor left or right anchor lines as it will block revealing the actions.
- * \endlist
+ * Being an Item, all properties can be accessed or altered. However, make sure you
+ * never change \c x, \c y, \c width, \c height or \c anchors properties as those are
+ * controlled by the ListItem itself when leading or trailing actions are revealed
+ * and thus might cause the component to misbehave.
  *
  * 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
+ * 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.
  */
 
@@ -334,7 +345,7 @@
  * \qmlsignal ListItem::clicked()
  *
  * The signal is emitted when the component gets released while the \l pressed property
- * is set. The signal is not emitted if the ListItem content is tugged or when used in
+ * is set. The signal is not emitted if the ListItem content is swiped or when used in
  * Flickable (or ListView, GridView) and the Flickable gets moved.
  */
 UCListItem::UCListItem(QQuickItem *parent)
@@ -516,8 +527,8 @@
  *
  * This grouped property configures the thin divider shown in the bottom of the
  * component. Configures the visibility and the margins from the left and right
- * of the ListItem. When tugged (swiped left or right to reveal the actions),
- * it is not moved together with the content. \c colorFrom and \c colorTo configure
+ * of the ListItem. When swiped left or right to reveal the actions, it is not
+ * moved together with the content. \c colorFrom and \c colorTo configure
  * the starting and ending colors of the divider.
  *
  * When \c visible is true, the ListItem's content size gets thinner with the
@@ -550,6 +561,43 @@
 }
 
 /*!
+ * \qmlproperty bool ListItem::contentMoving
+ * \readonly
+ * The property describes whether the content is moving or not. The content is
+ * moved when swiped or when snapping in or out, and lasts till the snapping
+ * animation completes.
+ */
+
+/*!
+ * \qmlsignal ListItem::contentMovementStarted()
+ * The signal is emitted when the content movement has started.
+ */
+
+/*!
+ * \qmlsignal UCListItemPrivate::contentMovementEnded
+ * The signal is emitted when the content movement has ended.
+ */
+bool UCListItemPrivate::contentMoving() const
+{
+    return contentMoved;
+}
+void UCListItemPrivate::setContentMoving(bool moved)
+{
+    if (contentMoved == moved) {
+        return;
+    }
+    contentMoved = moved;
+    Q_Q(UCListItem);
+    if (contentMoved) {
+        Q_EMIT q->contentMovementStarted();
+    } else {
+        Q_EMIT q->contentMovementEnded();
+    }
+    Q_EMIT q->contentMovingChanged();
+
+}
+
+/*!
  * \qmlproperty color ListItem::color
  * Configures the color of the normal background. The default value is transparent.
  */
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
--- modules/Ubuntu/Components/plugin/uclistitem.h	2014-11-19 15:10:15 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.h	2014-11-19 15:10:18 +0000
@@ -32,6 +32,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(), 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)
     Q_PROPERTY(QQmlListProperty<QObject> data READ data DESIGNABLE false)
@@ -65,12 +66,16 @@
     void leadingActionsChanged();
     void trailingActionsChanged();
     void pressedChanged();
+    void contentMovingChanged();
     void colorChanged();
     void highlightColorChanged();
     void childrenChanged();
 
     void clicked();
 
+    void contentMovementStarted();
+    void contentMovementEnded();
+
 public Q_SLOTS:
 
 private:
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
--- modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-11-19 15:10:15 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-11-19 15:10:18 +0000
@@ -43,14 +43,17 @@
     void _q_updateColors();
     void _q_rebound();
     void _q_updateSize();
+    int index();
     void setPressed(bool pressed);
     void listenToRebind(bool listen);
     void resize();
     void update();
 
     bool pressed:1;
+    bool contentMoved:1;
     bool highlightColorChanged:1;
     bool ready:1;
+    qreal overshoot;
     QColor color;
     QColor highlightColor;
     QPointer<QQuickFlickable> flickable;
@@ -58,6 +61,10 @@
     UCListItemDivider *divider;
     UCListItemActions *leadingActions;
     UCListItemActions *trailingActions;
+
+    // getter/setters
+    bool contentMoving() const;
+    void setContentMoving(bool moved);
 };
 
 class UCListItemDivider : public QObject
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-11-19 15:10:15 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-11-19 15:10:18 +0000
@@ -23,6 +23,8 @@
 
 UCListItemActionsPrivate::UCListItemActionsPrivate()
     : QObjectPrivate()
+    , status(UCListItemActions::Disconnected)
+    , offsetDragged(0)
     , delegate(0)
     , panelItem(0)
 {
@@ -31,6 +33,7 @@
 {
 }
 
+// FIXME - fis ListItemStyle::snapAnimation to a link when property available
 /*!
  * \qmltype ListItemActions
  * \instantiates UCListItemActions
@@ -40,7 +43,7 @@
  * \ingroup unstable-ubuntu-listitems
  * \brief Provides configuration for actions to be added to a ListItem.
  *
- * ListItem accepts actions that can be configured to appear when tugged to left
+ * ListItem accepts actions that can be configured to appear when swiped to left
  * or right. The API does not limit the number of actions to be assigned for leading
  * or trailing actions, however the design constrains are allowing a maximum of
  * 1 action on leading- and a maximum of 3 actions on trailing side of the ListItem.
@@ -53,46 +56,155 @@
  * the first time the actions are accessed. The colors of the panel is taken from
  * the theme's palette.
  *
- * When tugged, panels reveal the actions one by one. In case an option is revealed
- * more than 50%, the option will be snapped and revealed completely. This is also
- * valid for the case when the option is visibl eless than 50%, in which case the
- * option is hidden. Actions can be triggered by tapping.
- *
- * \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 ListItemActions
- * instances. In this way we can reduce the creation time of the items:
- * \qml
- * import QtQuick 2.2
- * import Ubuntu.Components 1.2
- *
- * MainView {
- *     width: units.gu(40)
- *     height: units.gu(71)
- *
- *     UbuntuListView {
- *         anchors.fill: parent
- *         model: 10000
- *         ListItemActions {
- *             id: commonActions
- *             actions: [
- *                 Action {
- *                     iconName: "search"
- *                 },
- *                 Action {
- *                     iconName: "edit"
- *                 },
- *                 Action {
- *                     iconName: "copy"
- *                 }
- *             ]
- *         }
- *         delegate: ListItem {
- *             trailingActions: commonActions
- *         }
- *     }
- * }
- * \endqml
+ * When swiped, panels reveal the actions one by one. In case an action is revealed
+ * more than 50%, the action will be snapped and revealed completely. This is also
+ * valid for the case when the action is visible less than 50%, in which case the
+ * action is hidden. Actions can be triggered by tapping.
+ *
+ * \note You can use the same ListItemActions for leading and for trailing actions
+ * the same time only if the instance is used by different groups of list items,
+ * where one group uses it as leading and other group as trailing. In any other
+ * circumstances use separate ListItemActions for leading and trailing actions.
+ * \qml
+ * import QtQuick 2.2
+ * import Ubuntu.Components 1.2
+ * MainView {
+ *     width: units.gu(40)
+ *     height: units.gu(71)
+ *
+ *     ListItemActions {
+ *         id: sharedActions
+ *         actions: [
+ *             Action {
+ *                 iconName: "search"
+ *             },
+ *             Action {
+ *                 iconName: "edit"
+ *             },
+ *             Action {
+ *                 iconName: "copy"
+ *             }
+ *         ]
+ *     }
+ *
+ *     Column {
+ *         ListItem {
+ *             leadingActions: sharedActions
+ *         }
+ *         UbuntuListView {
+ *             anchors.fill: parent
+ *             model: 10000
+ *             delegate: ListItem {
+ *                 trailingActions: sharedActions
+ *             }
+ *         }
+ *     }
+ * }
+ * \endqml
+ *
+ * \section3 Using with ListViews
+ * ListItemActions instances can be shared between ListItem instances within the
+ * same view. When shared, the memory footprint of the view will be lot smaller,
+ * as there will be no individual panel created for each list's actions visualization.
+ * Depending on how long the initialization of the component used in \c ListItem::actionsDelegate
+ * takes, creation time will be also reduced to one time per view.
+ * 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
+ * response time of the UI can become unacceptable.
+ *
+ * Having individual ListItemActions instances increases the memory footprint,
+ * however the UI will be more responsive as swiping individual ListItems will
+ * not have to wait till the previous ListItem's panel is snapped out (rebound).
+ * On the other hand, memory consumption will increase significantly due to
+ * separate panel creation, and performance may decrease with up to 40%, depending
+ * on what way are the actions declared, within the ListItemActions or as shared
+ * actions.
+ *
+ * The example above illustrates how to share ListItemActions between ListItem
+ * delegates, which can be the worst-performant but most lightwaight memory consumer
+ * setup. The following example illustrates the worst case:
+ * \qml
+ * import QtQuick 2.2
+ * import Ubuntu.Components 1.2
+ * MainView {
+ *     width: units.gu(40)
+ *     height: units.gu(71)
+ *
+ *     UbuntuListView {
+ *         anchors.fill: parent
+ *         model: 10000
+ *         delegate: ListItem {
+ *             leadingActions: ListItemActions {
+ *                 actions: [
+ *                     Action {
+ *                         iconName: "delete"
+ *                     }
+ *                 ]
+ *             }
+ *             trailingActions: ListItemActions {
+ *                 actions: [
+ *                     Action {
+ *                         iconName: "search"
+ *                     },
+ *                     Action {
+ *                         iconName: "edit"
+ *                     },
+ *                     Action {
+ *                         iconName: "copy"
+ *                     }
+ *                 ]
+ *             }
+ *         }
+ *     }
+ * }
+ * \endqml
+ *
+ * This example can be optimized by sharing the action arrays between the items:
+ * \qml
+ * import QtQuick 2.2
+ * import Ubuntu.Components 1.2
+ * MainView {
+ *     width: units.gu(40)
+ *     height: units.gu(71)
+ *
+ *     property list<Action> leading: [
+ *         Action {
+ *             iconName: "delete"
+ *         }
+ *     ]
+ *     property list<Action> trailing: [
+ *         Action {
+ *             iconName: "search"
+ *         },
+ *         Action {
+ *             iconName: "edit"
+ *         },
+ *         Action {
+ *             iconName: "copy"
+ *         }
+ *     ]
+ *
+ *     UbuntuListView {
+ *         anchors.fill: parent
+ *         model: 10000
+ *         delegate: ListItem {
+ *             leadingActions: ListItemActions {
+ *                 actions: leading
+ *             }
+ *             trailingActions: ListItemActions {
+ *                 actions: trailing
+ *             }
+ *         }
+ *     }
+ * }
+ * \endqml
+ *
+ * \section3 Attached properties
+ * ListItemActions provides a set of attached properties to the panels visualizing
+ * the actions. These properties can be used by implementations visualizing the
+ * actions.
  */
 
 UCListItemActions::UCListItemActions(QObject *parent)
@@ -103,6 +215,28 @@
 {
 }
 
+UCListItemActionsAttached *UCListItemActions::qmlAttachedProperties(QObject *owner)
+{
+    /*
+     * Detect the attachee, whether is it a child item of the panelItem. The panelItem
+     * itself cannot be detected, as the object can be attached during the call of
+     * component.beginCreate().
+     */
+    UCListItemActionsAttached *attached = new UCListItemActionsAttached(owner);
+    QQuickItem *item = qobject_cast<QQuickItem*>(owner);
+    while (item) {
+        // has item our attached property?
+        UCListItemActionsAttached *itemAttached = static_cast<UCListItemActionsAttached*>(
+                    qmlAttachedPropertiesObject<UCListItemActions>(item, false));
+        if (itemAttached) {
+            attached->setList(itemAttached->container());
+            break;
+        }
+        item = item->parentItem();
+    }
+    return attached;
+}
+
 /*!
  * \qmlproperty Component ListItemActions::delegate
  * Custom delegate which overrides the default one used by the ListItem. If the
@@ -132,7 +266,7 @@
  * declared in place. An example of cached actions:
  * \qml
  * ListItemActions {
- *     id: cacedActions
+ *     id: cachedActions
  *     actions: [
  *         copyAction, searchAction, cutAction
  *     ]
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.h'
--- modules/Ubuntu/Components/plugin/uclistitemactions.h	2014-11-19 15:10:15 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions.h	2014-11-19 15:10:18 +0000
@@ -22,6 +22,7 @@
 
 class QQmlComponent;
 class UCAction;
+class UCListItemActionsAttached;
 class UCListItemActionsPrivate;
 class UCListItemActions : public QObject
 {
@@ -30,10 +31,18 @@
     Q_PROPERTY(QQmlListProperty<UCAction> actions READ actions CONSTANT)
     Q_PROPERTY(QQmlListProperty<QObject> data READ data)
     Q_CLASSINFO("DefaultProperty", "data")
+    Q_ENUMS(Status)
 public:
+    enum Status {
+        Disconnected,
+        Leading,
+        Trailing
+    };
     explicit UCListItemActions(QObject *parent = 0);
     ~UCListItemActions();
 
+    static UCListItemActionsAttached *qmlAttachedProperties(QObject *owner);
+
     QQmlComponent *delegate() const;
     void setDelegate(QQmlComponent *delegate);
     QQmlListProperty<UCAction> actions();
@@ -41,9 +50,66 @@
 
 Q_SIGNALS:
     void delegateChanged();
+    void statusChanged(Status status);
 
 private:
     Q_DECLARE_PRIVATE(UCListItemActions)
 };
 
+class UCListItemActionsAttached : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(UCListItemActions *container READ container NOTIFY containerChanged)
+    Q_PROPERTY(QQmlListProperty<UCAction> visibleActions READ visibleActions NOTIFY visibleActionsChanged)
+    Q_PROPERTY(UCListItem *listItem READ listItem NOTIFY listItemChanged)
+    Q_PROPERTY(int listItemIndex READ listItemIndex NOTIFY listItemIndexChanged)
+    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();
+    void setList(UCListItemActions *list);
+    void connectListItem(UCListItem *item, bool connect);
+
+    UCListItemActions *container() const
+    {
+        return m_container.data();
+    }
+    QQmlListProperty<UCAction> visibleActions();
+    UCListItem *listItem();
+    int listItemIndex();
+    bool swiping();
+    qreal offset();
+    UCListItemActions::Status status();
+    qreal overshoot();
+
+
+public Q_SLOTS:
+    void snapToPosition(qreal position);
+
+Q_SIGNALS:
+    void containerChanged();
+    void visibleActionsChanged();
+    void listItemChanged();
+    void listItemIndexChanged();
+    void offsetChanged();
+    void statusChanged();
+    void swipingChanged();
+    void overshootChanged();
+
+private:
+    QPointer<UCListItemActions> m_container;
+    QList<UCAction*> m_visibleActions;
+    bool m_swiping;
+    friend class UCListItemAction;
+
+private Q_SLOTS:
+    void updateVisibleActions();
+    void updateSwipeState();
+};
+
+QML_DECLARE_TYPEINFO(UCListItemActions, QML_HAS_ATTACHED_PROPERTIES)
+
 #endif // UCLISTITEMACTIONS_H
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions_p.h'
--- modules/Ubuntu/Components/plugin/uclistitemactions_p.h	2014-11-19 15:10:15 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions_p.h	2014-11-19 15:10:18 +0000
@@ -31,16 +31,12 @@
         return actions->d_func();
     }
 
+    UCListItemActions::Status status;
+    qreal offsetDragged;
     QQmlComponent *delegate;
     QQuickItem *panelItem;
     QList<UCAction*> actions;
     QList<QObject*> data;
-
-    // options list property functions
-    static void funcAppend(QQmlListProperty<UCAction>*, UCAction*);
-    static int funcCount(QQmlListProperty<UCAction>*);
-    static QObject *funcAt(QQmlListProperty<UCAction>*, int);
-    static void funcClear(QQmlListProperty<UCAction>*);
 };
 
 #endif // UCLISTITEMACTIONS_P_H
 
=== added file 'modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-11-19 15:10:18 +0000
@@ -0,0 +1,267 @@
+/*
+ * 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 "uclistitem.h"
+#include "uclistitem_p.h"
+#include "uclistitemactions.h"
+#include "uclistitemactions_p.h"
+#include "ucunits.h"
+#include "ucaction.h"
+
+UCListItemActionsAttached::UCListItemActionsAttached(QObject *parent)
+    : QObject(parent)
+    , m_swiping(false)
+{
+}
+
+UCListItemActionsAttached::~UCListItemActionsAttached()
+{
+}
+
+/*!
+ * \qmlattachedproperty ListItemActions ListItemActions::container
+ * \readonly
+ * The property holds the instance of the \l ListItemActions the ListItem's actions
+ * panel is visualizing.
+ */
+void UCListItemActionsAttached::setList(UCListItemActions *list)
+{
+    if (list == m_container) {
+        return;
+    }
+    m_container = list;
+    if (!m_container.isNull()) {
+        // connect statusChanged() to update status, listItem, listItemIndex and overshoot values
+        QObject::connect(m_container.data(), &UCListItemActions::statusChanged,
+                         this, &UCListItemActionsAttached::statusChanged);
+        QObject::connect(m_container.data(), &UCListItemActions::statusChanged,
+                         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
+        QObject::connect(actions->panelItem, &QQuickItem::xChanged,
+                         this, &UCListItemActionsAttached::offsetChanged);
+
+        // connect actions to get updates about visible changes
+        Q_FOREACH(UCAction *action, UCListItemActionsPrivate::get(m_container)->actions) {
+            QObject::connect(action, &UCAction::visibleChanged,
+                             this, &UCListItemActionsAttached::updateVisibleActions);
+        }
+    }
+    Q_EMIT containerChanged();
+    Q_EMIT visibleActionsChanged();
+}
+
+void UCListItemActionsAttached::connectListItem(UCListItem *item, bool connect)
+{
+    if (!item) {
+        return;
+    }
+    if (connect) {
+        QObject::connect(item, &UCListItem::pressedChanged,
+                         this, &UCListItemActionsAttached::updateSwipeState);
+        QObject::connect(item, &UCListItem::contentMovingChanged,
+                         this, &UCListItemActionsAttached::updateSwipeState);
+    } else {
+        QObject::disconnect(item, &UCListItem::pressedChanged,
+                            this, &UCListItemActionsAttached::updateSwipeState);
+        QObject::disconnect(item, &UCListItem::contentMovingChanged,
+                            this, &UCListItemActionsAttached::updateSwipeState);
+    }
+}
+
+// private slot to update visible actions
+void UCListItemActionsAttached::updateVisibleActions()
+{
+    m_visibleActions.clear();
+    if (!m_container.isNull()) {
+        Q_FOREACH(UCAction *action, UCListItemActionsPrivate::get(m_container)->actions) {
+            if (action->m_visible) {
+                m_visibleActions << action;
+            }
+        }
+    }
+    Q_EMIT visibleActionsChanged();
+}
+
+// private slot updating swipe state
+void UCListItemActionsAttached::updateSwipeState()
+{
+    if (m_container.isNull()) {
+        return;
+    }
+    QQuickItem *panelItem = UCListItemActionsPrivate::get(m_container)->panelItem;
+    if (!panelItem || !panelItem->parentItem()) {
+        return;
+    }
+    UCListItem *item = static_cast<UCListItem*>(panelItem->parentItem());
+    UCListItemPrivate *listItem = UCListItemPrivate::get(item);
+    bool swiped = listItem->pressed && listItem->contentMoved;
+    if (swiped != m_swiping) {
+        m_swiping = swiped;
+        Q_EMIT swipingChanged();
+    }
+}
+
+/*!
+ * \qmlproperty 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.
+ */
+QQmlListProperty<UCAction> UCListItemActionsAttached::visibleActions()
+{
+    return QQmlListProperty<UCAction>(this, m_visibleActions);
+}
+
+/*!
+ * \qmlattachedproperty ListItem ListItemActions::listItem
+ * \readonly
+ * The property reports the connected \l ListItem to the list of actions.
+ */
+UCListItem *UCListItemActionsAttached::listItem()
+{
+    if (m_container.isNull()) {
+        return NULL;
+    }
+    QQuickItem *panelItem = UCListItemActionsPrivate::get(m_container)->panelItem;
+    if (!panelItem) {
+        return NULL;
+    }
+    QQuickItem *listItem = panelItem->parentItem();
+    return static_cast<UCListItem*>(listItem);
+}
+
+/*!
+ * \qmlattachedproperty int ListItemActions::listItemIndex
+ * \readonly
+ * Holds the index of the \l ListItem within a view, if the \l ListItem is used
+ * in a model driven view. Otherwise it is set to -1.
+ */
+int UCListItemActionsAttached::listItemIndex() {
+    if (m_container.isNull()) {
+        return -1;
+    }
+    QQuickItem *panelItem = UCListItemActionsPrivate::get(m_container)->panelItem;
+    if (!panelItem) {
+        return -1;
+    }
+    QQuickItem *listItem = panelItem->parentItem();
+    return listItem ? UCListItemPrivate::get(static_cast<UCListItem*>(listItem))->index() : -1;
+}
+
+/*!
+ * \qmlattachedproperty bool ListItemActions::swiping
+ * \readonly
+ * The property notifies whether the panel is swiped or not. The property does
+ * not notify the rebounding.
+ */
+bool UCListItemActionsAttached::swiping()
+{
+    return m_swiping;
+}
+
+/*!
+ * \qmlattachedproperty real ListItemActions::offset
+ * The property returns the offset the panel item holding the visualized actions
+ * is visible. This can be used to do different animations on the panel and on
+ * the action visualizations.
+ */
+qreal UCListItemActionsAttached::offset()
+{
+    if (m_container.isNull()) {
+        return 0.0;
+    }
+    return UCListItemActionsPrivate::get(m_container)->offsetDragged;
+}
+
+/*!
+ * \qmlattachedproperty enum ListItemActions::status
+ * \readonly
+ * The property holds the status of the ListItemActions, whether is connected
+ * as leading or as trailing action list to a \l ListItem. Possible valueas are:
+ * \list A
+ *  \li \b Disconnected - default, the actions list is not connected to any \l ListItem
+ *  \li \b Leading - the actions list is connected as leading list
+ *  \li \b Trailing - the actions list is connected as trailing list
+ * \endlist
+ */
+UCListItemActions::Status UCListItemActionsAttached::status()
+{
+    if (m_container.isNull()) {
+        return UCListItemActions::Disconnected;
+    }
+    return UCListItemActionsPrivate::get(m_container)->status;
+}
+
+/*!
+ * \qmlproperty 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
+ * calling the function with 0.0 value.
+ */
+void UCListItemActionsAttached::snapToPosition(qreal position)
+{
+    //if it is disconnected, leave (this also includes the case when m_container is null)
+    if (status() == UCListItemActions::Disconnected) {
+        return;
+    }
+    QQuickItem *panelItem = UCListItemActionsPrivate::get(m_container)->panelItem;
+    if (!panelItem) {
+        // we don't have the panel created yet
+        return;
+    }
+    UCListItem *item = static_cast<UCListItem*>(panelItem->parentItem());
+    if (!item) {
+        // no ListItem attached
+        return;
+    }
+    UCListItemPrivate *listItem = UCListItemPrivate::get(item);
+    position *= (status() == UCListItemActions::Leading) ? 1 : -1;
+    if (position == 0.0) {
+        listItem->_q_rebound();
+    } else {
+        // FIXME: implement snaping
+        listItem->contentItem->setX(position);
+    }
+}
+
+