Merge lp:~zsombi/ubuntu-ui-toolkit/40-visualize-options into lp:~zsombi/ubuntu-ui-toolkit/listitem-master

[Zsombor Egri]

[lp:~zsombi/ubuntu-ui-toolkit/40-visualize-options]

1256. By Zsombor Egri on 2014-09-19

prereq sync

1257. By Zsombor Egri on 2014-09-24

prereq sync

1258. By Zsombor Egri on 2014-09-25

prereq sync

1259. By Zsombor Egri on 2014-09-29

prereq sync

1260. By Zsombor Egri on 2014-10-02

prereq sync

1261. By Zsombor Egri on 2014-10-13

prereq sync

1262. By Zsombor Egri on 2014-10-20

prereq sync

1263. By Zsombor Egri on 2014-10-22

prereq sync

1264. By Zsombor Egri on 2014-10-22

prereq sync

1265. By Zsombor Egri on 2014-10-23

prereq sync

1266. By Zsombor Egri on 2014-10-23

prereq sync

1267. By Zsombor Egri on 2014-10-24

prereq sync

1268. By Zsombor Egri on 2014-10-30

prereq sync

1269. By Zsombor Egri on 2014-10-30

disabled actions are shown 50% dimmed

1270. By Zsombor Egri on 2014-11-04

prereq sync

1271. By Zsombor Egri on 2014-11-07

prereq sync

1272. By Zsombor Egri on 2014-11-07

fixing panel and test app due to prereq changes

1273. By Zsombor Egri on 2014-11-07

small fixes

1274. By Zsombor Egri on 2014-11-07

prereq sync

1275. By Zsombor Egri on 2014-11-07

prereq sync

1276. By Zsombor Egri on 2014-11-07

test fixed

1277. By Zsombor Egri on 2014-11-10

prereq sync

1278. By Zsombor Egri on 2014-11-12

prereq sync

1279. By Zsombor Egri on 2014-11-12

tests added

[Zsombor Egri (zsombi)]

ListItem's data and child properties had to be renamed as findChild()/findInvisibleChild() won't find the panel item anymore.

[lp:~zsombi/ubuntu-ui-toolkit/40-visualize-options]

1280. By Zsombor Egri on 2014-11-12

API updated

1281. By Zsombor Egri on 2014-11-12

prereq sync

1282. By Zsombor Egri on 2014-11-17

prereq sync

1283. By Zsombor Egri on 2014-11-17

use correct signal to forward children changes

1284. By Zsombor Egri on 2014-11-18

prereq sync

1285. By Zsombor Egri on 2014-11-19

prereq sync

1286. By Zsombor Egri on 2014-11-20

prereq sync

1287. By Zsombor Egri on 2014-11-24

prereq sync

1288. By Zsombor Egri on 2014-11-24

ListItemPanel fixes

[Tim Peeters (tpeeters)]

I am testing with this test program https://code.launchpad.net/~tpeeters/+junk/lists and I see the following potential UX problems:
- When I swipe left/right, and then release the mouse button, the list item stays exactly where it was, see https://www.dropbox.com/s/iinpzauwtm7hhsn/Screenshot%202014-11-24%2015.23.47.png?dl=0 I think it should snap in or out, or to the nearest border between actions
- When I press an action, there is no visible highlight on the action
- When I press an action, the list item itself gets highlighted. But when I release the button, the highlight stays.

[Tim Peeters (tpeeters)]

I like to have some more flexibility in coloring the background of the panel. Currently the left one is always red, the right one white.

I would like to have the possibility to easily change these standard colors (left: green, right: yellow, or example). And maybe even have the possibility to change the background color per action in each of the panels. That last possibility is still a point of discussion.

[Tim Peeters (tpeeters)]

I like to have a delete action that deletes the list item that the action was added to, but for leadingActions, I use a reference to a common set of actions that we have for each list item. So I would need the Action.trigger() function to be called with the index of the list item in order to know which one needs to be deleted. Or do you know a better solution?

This is not only the case for deleting of list items. Each action (edit, move, reply e-mail, todo item done, etc) needs to know to which list item it applies.

[Giorgio Venturi (giorgio-venturi-deactivatedaccount)]

Hi Tim,

- When you swipe left/right, and then release, the list item should snap in and reveal *all the trailing or leading actions*
- When you press an action, there *should be* a visible highlight on the action (tap state)
- When you press an action, the list item should not be highlighted.
- I would recommend to give the possibility to change the background colour per action in each of the panels, but provide a default colour

[Zsombor Egri (zsombi)]

> I am testing with this test program
> https://code.launchpad.net/~tpeeters/+junk/lists and I see the following
> potential UX problems:
> - When I swipe left/right, and then release the mouse button, the list item
> stays exactly where it was, see https://www.dropbox.com/s/iinpzauwtm7hhsn/Scre
> enshot%202014-11-24%2015.23.47.png?dl=0 I think it should snap in or out, or
> to the nearest border between actions

I think we should go thru the MRs because you keep posting comments that will be solved in later MRs. snap comes in 55. It should either snap in or out, there's no snap to action borders, Mark disliked that.

> - When I press an action, there is no visible highlight on the action

No visible highlight was requested or specified by design.

> - When I press an action, the list item itself gets highlighted. But when I
> release the button, the highlight stays.

Hmm, that's a bug. And I think it got fixed in a later MR, but must check it.

[Zsombor Egri (zsombi)]

> I like to have some more flexibility in coloring the background of the panel.
> Currently the left one is always red, the right one white.

As discussed, we can add these properties to ListItemActions, but that will always be applied to these objects. The panel delegates are linked to ListItems, so in that sense these properties would rather be welcomed there than ListItemActions. We can discuss this later, and perhaps have it in a later MR.
>
> I would like to have the possibility to easily change these standard colors
> (left: green, right: yellow, or example). And maybe even have the possibility
> to change the background color per action in each of the panels. That last
> possibility is still a point of discussion.

Per action can be driven thru the ListItemActions.delegate (comes in MR# 50). Otherwise these color props must be added to action, which shouldn't be the case. OTOH, custom panel theme can be used any time for this.

[Zsombor Egri (zsombi)]

> I like to have a delete action that deletes the list item that the action was
> added to, but for leadingActions, I use a reference to a common set of actions
> that we have for each list item. So I would need the Action.trigger() function
> to be called with the index of the list item in order to know which one needs
> to be deleted. Or do you know a better solution?

It is done like that. The index is provided in MR #60.

>
> This is not only the case for deleting of list items. Each action (edit, move,
> reply e-mail, todo item done, etc) needs to know to which list item it
> applies.

Watch for MR #60 :)

[Zsombor Egri (zsombi)]

> Hi Tim,
>
> - When you swipe left/right, and then release, the list item should snap in
> and reveal *all the trailing or leading actions*

MR #55.

> - When you press an action, there *should be* a visible highlight on the
> action (tap state)

This is the first time I hear this. It would be nice to know what they mean about that.

> - When you press an action, the list item should not be highlighted.

If it done so, this is because there's no MouseArea yet in the ListItemPanel to handle the press events. When that is there, the highlight will also disappear. So the previous founding you had was because of this.

> - I would recommend to give the possibility to change the background colour
> per action in each of the panels, but provide a default colour

That requires color properties to be given in Actions. I do not think this is nice way to do things. OTOH, ListItemActions.delegate can be used for this, but then delegates must handle the action visualization, just like done in MR %50.

[lp:~zsombi/ubuntu-ui-toolkit/40-visualize-options]

1289. By Zsombor Egri on 2014-11-24

highlight when pressed

1290. By Zsombor Egri on 2014-11-24

highlight fix

1291. By Zsombor Egri on 2014-11-24

highlight fix

[Zsombor Egri (zsombi)]

Pressed action highlight added; Highlight when actions are pressed fixed.

[lp:~zsombi/ubuntu-ui-toolkit/40-visualize-options]

1292. By Zsombor Egri on 2014-11-24

revert UCStyledItemBase changes from rev 1290 so we do not forward child mouse events as normal mouse events, as we can get loads of similar mouse events (i.e. press events) on ListItem when a child is pressed. Instead handle mouse events in child filter

1293. By Zsombor Egri on 2014-11-25

calling super-class method

[Tim Peeters (tpeeters)]

works good now, including highlights :)

review: Approve

=== modified file 'components.api'
--- components.api	2014-11-25 07:30:59 +0000
+++ components.api	2014-11-25 07:31:01 +0000
@@ -874,8 +874,8 @@
     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 }
+    Property { name: "listItemData"; type: "QObject"; isList: true; isReadonly: true }
+    Property { name: "listItemChildren"; type: "QQuickItem"; isList: true; isReadonly: true }
     Property { name: "style"; type: "QQmlComponent"; isPointer: true }
     Property { name: "__styleInstance"; type: "QQuickItem"; isReadonly: true; isPointer: true }
     Signal { name: "clicked" }

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	2014-11-25 07:30:59 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	2014-11-25 07:31:01 +0000
@@ -21,16 +21,30 @@
   This component is the holder of the ListItem options.
   */
 Item {
-    id: panel
 
     // styling properties
     /*
-      Color of teh background.
+      Color of the background.
       */
     // FIXME: use Palette colors instead when available
     property color backgroundColor: (leading ? UbuntuColors.red : "white")
 
-    width: units.gu(20)
+    /*
+      Color used in coloring the icons.
+      */
+    // FIXME: use Palette colors instead when available
+    property color foregroundColor: leading ? "white" : UbuntuColors.darkGrey
+
+    /*
+      Specifies the width of the component visualizing the action.
+      */
+    property real visualizedActionWidth: units.gu(2.5)
+
+    // panel implementation
+    id: panel
+    width: Math.max(
+               optionsRow.childrenRect.width,
+               ListItemActions.visibleActions.length * MathUtils.clamp(visualizedActionWidth, height, optionsRow.maxItemWidth))
 
     // used for module/autopilot testing
     objectName: "ListItemPanel" + (leading ? "Leading" : "Trailing")
@@ -61,4 +75,64 @@
         }
         color: panel.backgroundColor
     }
+
+    Row {
+        id: optionsRow
+        anchors {
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
+            leftMargin: spacing
+        }
+
+        property real maxItemWidth: panel.parent ? (panel.parent.width / panel.ListItemActions.visibleActions.length) : 0
+
+        Repeater {
+            model: panel.ListItemActions.visibleActions
+            AbstractButton {
+                action: modelData
+                enabled: action.enabled
+                opacity: action.enabled ? 1.0 : 0.5
+                width: MathUtils.clamp(delegateLoader.item ? delegateLoader.item.width : 0, height, optionsRow.maxItemWidth)
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: Theme.palette.selected.background
+                    visible: pressed
+                }
+
+                Loader {
+                    id: delegateLoader
+                    height: parent.height
+                    sourceComponent: panel.ListItemActions.delegate ? panel.ListItemActions.delegate : defaultDelegate
+                    property Action action: modelData
+                    property int index: index
+                    onItemChanged: {
+                        // use action's objectName to identify the visualized action
+                        if (item && item.objectName === "") {
+                            item.objectName = modelData.objectName;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: defaultDelegate
+        Item {
+            width: height
+            Icon {
+                width: panel.visualizedActionWidth
+                height: width
+                name: action.iconName
+                color: panel.foregroundColor
+                anchors.centerIn: parent
+            }
+        }
+    }
 }

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-25 07:30:59 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-25 07:31:01 +0000
@@ -27,6 +27,7 @@
 #include <QtQuick/private/qquickflickable_p.h>
 #include <QtQuick/private/qquickpositioners_p.h>
 #include <QtQuick/private/qquickanimation_p.h>
+#include <QtQuick/private/qquickmousearea_p.h>
 #include "uclistitemstyle.h"
 
 #define MIN(x, y)           ((x < y) ? x : y)
@@ -361,7 +362,7 @@
     // content will be redirected to the contentItem, therefore we must report
     // children changes as it would come from the main component
     QObject::connect(contentItem, &QQuickItem::childrenChanged,
-                     q, &UCListItem::childrenChanged);
+                     q, &UCListItem::listItemChildrenChanged);
     q->setFlag(QQuickItem::ItemHasContents);
     // turn activeFocusOnPress on
     q->setActiveFocusOnPress(true);
@@ -508,6 +509,22 @@
                 (parentItem ? QQuickItemPrivate::get(parentItem)->childItems.indexOf(q) : -1);
 }
 
+// returns true if the highlight is possible
+bool UCListItemPrivate::canHighlight(QMouseEvent *event)
+{
+    // localPos is a position relative to ListItem which will give us a child from
+    // from the original coordinates; therefore we must map the position to the contentItem
+   Q_Q(UCListItem);
+   QPointF myPos = q->mapToItem(contentItem, event->localPos());
+   QQuickItem *child = contentItem->childAt(myPos.x(), myPos.y());
+   bool activeComponent = child && (child->acceptedMouseButtons() & event->button()) && !qobject_cast<QQuickText*>(child);
+   // do highlight if not pressed above the active component, and the component has either
+   // action, leading or trailing actions list or at least an active child component declared
+   QQuickMouseArea *ma = q->findChild<QQuickMouseArea*>();
+   bool activeMouseArea = ma && ma->isEnabled();
+   return !activeComponent && (leadingActions || trailingActions || activeMouseArea);
+}
+
 // set pressed flag and update contentItem
 void UCListItemPrivate::setPressed(bool pressed)
 {
@@ -813,7 +830,7 @@
         // while moving, we cannot select any items
         return;
     }
-    if (event->button() == Qt::LeftButton) {
+    if (event->button() == Qt::LeftButton && d->canHighlight(event)) {
         d->setPressed(true);
         d->lastPos = d->pressedPos = event->localPos();
         // connect the Flickable to know when to rebound
@@ -916,6 +933,24 @@
     }
 }
 
+bool UCListItem::childMouseEventFilter(QQuickItem *child, QEvent *event)
+{
+    QEvent::Type type = event->type();
+    if (type == QEvent::MouseButtonPress) {
+        // suppress click event if pressed over an active area, except Text, which can also handle
+        // mouse clicks when content is an URL
+        QMouseEvent *mouse = static_cast<QMouseEvent*>(event);
+        if (child->isEnabled() && (child->acceptedMouseButtons() & mouse->button()) && !qobject_cast<QQuickText*>(child)) {
+            Q_D(UCListItem);
+            d->suppressClick = true;
+        }
+    } else if (type == QEvent::MouseButtonRelease) {
+        Q_D(UCListItem);
+        d->suppressClick = false;
+    }
+    return UCStyledItemBase::childMouseEventFilter(child, event);
+}
+
 bool UCListItem::eventFilter(QObject *target, QEvent *event)
 {
     QPointF myPos;
@@ -1118,25 +1153,24 @@
 }
 
 /*!
- * \qmlproperty list<Object> ListItem::data
+ * \qmlproperty list<Object> ListItem::listItemData
  * \default
+ * \internal
  * Overloaded default property containing all the children and resources.
  */
-QQmlListProperty<QObject> UCListItem::data()
+QQmlListProperty<QObject> UCListItemPrivate::data()
 {
-    Q_D(UCListItem);
-    return QQuickItemPrivate::get(d->contentItem)->data();
+    return QQuickItemPrivate::get(contentItem)->data();
 }
 
 /*!
- * \qmlproperty list<Item> ListItem::children
+ * \qmlproperty list<Item> ListItem::listItemChildren
  * \internal
  * Overloaded default property containing all the visible children of the item.
  */
-QQmlListProperty<QQuickItem> UCListItem::children()
+QQmlListProperty<QQuickItem> UCListItemPrivate::children()
 {
-    Q_D(UCListItem);
-    return QQuickItemPrivate::get(d->contentItem)->children();
+    return QQuickItemPrivate::get(contentItem)->children();
 }
 
 #include "moc_uclistitem.cpp"

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
--- modules/Ubuntu/Components/plugin/uclistitem.h	2014-11-25 07:30:59 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.h	2014-11-25 07:31:01 +0000
@@ -37,12 +37,12 @@
     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)
-    Q_PROPERTY(QQmlListProperty<QQuickItem> children READ children NOTIFY childrenChanged DESIGNABLE false)
+    Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQmlListProperty<QObject> listItemData READ data DESIGNABLE false)
+    Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQmlListProperty<QQuickItem> listItemChildren READ children NOTIFY listItemChildrenChanged DESIGNABLE false)
     // FIXME move these to StyledItemBase with subtheming
     Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQmlComponent *style READ style WRITE setStyle NOTIFY styleChanged)
     Q_PRIVATE_PROPERTY(UCListItem::d_func(), QQuickItem *__styleInstance READ styleInstance NOTIFY __styleInstanceChanged)
-    Q_CLASSINFO("DefaultProperty", "data")
+    Q_CLASSINFO("DefaultProperty", "listItemData")
 public:
     explicit UCListItem(QQuickItem *parent = 0);
     ~UCListItem();
@@ -69,6 +69,7 @@
     void mousePressEvent(QMouseEvent *event);
     void mouseReleaseEvent(QMouseEvent *event);
     void mouseMoveEvent(QMouseEvent *event);
+    bool childMouseEventFilter(QQuickItem *child, QEvent *event);
     bool eventFilter(QObject *, QEvent *);
 
 Q_SIGNALS:
@@ -78,7 +79,7 @@
     void contentMovingChanged();
     void colorChanged();
     void highlightColorChanged();
-    void childrenChanged();
+    void listItemChildrenChanged();
 
     void clicked();
 
@@ -92,8 +93,6 @@
 
 private:
     Q_DECLARE_PRIVATE(UCListItem)
-    QQmlListProperty<QObject> data();
-    QQmlListProperty<QQuickItem> children();
     Q_PRIVATE_SLOT(d_func(), void _q_updateThemedData())
     Q_PRIVATE_SLOT(d_func(), void _q_rebound())
     Q_PRIVATE_SLOT(d_func(), void _q_updateSize())

=== modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
--- modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-11-25 07:30:59 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-11-25 07:31:01 +0000
@@ -48,6 +48,7 @@
     void promptRebound();
     void _q_updateSize();
     int index();
+    bool canHighlight(QMouseEvent *event);
     void setPressed(bool pressed);
     void setSwiped(bool tugged);
     bool grabPanel(UCListItemActions *optionList, bool isTugged);
@@ -83,6 +84,8 @@
     UCListItemStyle *styleItem;
 
     // getter/setters
+    QQmlListProperty<QObject> data();
+    QQmlListProperty<QQuickItem> children();
     bool contentMoving() const;
     void setContentMoving(bool moved);
     QQuickPropertyAnimation *snapAnimation() const;

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-11-25 07:30:59 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-11-25 07:31:01 +0000
@@ -64,6 +64,7 @@
             QObject::connect(action, &UCAction::visibleChanged,
                              this, &UCListItemActionsAttached::updateVisibleActions);
         }
+        updateVisibleActions();
     }
     Q_EMIT containerChanged();
     Q_EMIT visibleActionsChanged();

=== modified file 'modules/Ubuntu/Components/plugin/ucstyleditembase.cpp'
--- modules/Ubuntu/Components/plugin/ucstyleditembase.cpp	2014-09-02 12:49:00 +0000
+++ modules/Ubuntu/Components/plugin/ucstyleditembase.cpp	2014-11-25 07:31:01 +0000
@@ -186,13 +186,11 @@
         // therefore must check containment
         QPointF point = mapFromItem(child, mouse->localPos());
         if (contains(point)) {
-            QMouseEvent press(event->type(), point, mouse->windowPos(), mouse->screenPos(),
-                              mouse->button(), mouse->buttons(), mouse->modifiers());
-            mousePressEvent(&press);
+            requestFocus(Qt::MouseFocusReason);
         }
     }
     // let the event be passed to children
-    return false;
+    return QQuickItem::childMouseEventFilter(child, event);
 }
 
 #include "moc_ucstyleditembase.cpp"

=== modified file 'tests/resources/listitems/ListItemTest.qml'
--- tests/resources/listitems/ListItemTest.qml	2014-11-25 07:30:59 +0000
+++ tests/resources/listitems/ListItemTest.qml	2014-11-25 07:31:01 +0000
@@ -27,6 +27,8 @@
     Action {
         objectName: "stock"
         id: stock
+        iconName: "starred"
+        onTriggered: print(iconName, "triggered")
     }
 
     ListItemActions {
@@ -34,10 +36,29 @@
         objectName: "StockLeading"
         actions: [
             Action {
-            },
-            Action {
-            },
-            Action {
+                iconName: "delete"
+                onTriggered: print(iconName, "triggered")
+            },
+            Action {
+                iconName: "alarm-clock"
+                enabled: false
+                onTriggered: print(iconName, "triggered")
+            },
+            Action {
+                iconName: "camcorder"
+                onTriggered: print(iconName, "triggered")
+            },
+            Action {
+                iconName: "stock_website"
+                onTriggered: print(iconName, "triggered")
+            },
+            Action {
+                iconName: "starred"
+                onTriggered: print(iconName, "triggered")
+            },
+            Action {
+                iconName: "go-home"
+                onTriggered: print(iconName, "triggered")
             }
         ]
     }
@@ -55,7 +76,7 @@
             iconName: "edit"
         },
         Action {
-            iconName: "copy"
+            iconName: "email"
         }
     ]
 
@@ -83,6 +104,16 @@
             }
             trailingActions: leading
         }
+        ListItem {
+            Label {
+                anchors.fill: parent
+                text: "Another standalone ListItem"
+            }
+            leadingActions: testItem.leadingActions
+            trailingActions: ListItemActions {
+                actions: leading.actions
+            }
+        }
 
         ListView {
             id: view
@@ -115,6 +146,11 @@
             height: units.gu(20)
             clip: true
             contentHeight: column.childrenRect.height
+            ListItemActions {
+                id: trailing
+                actions: leading.actions
+            }
+
             Column {
                 id: column
                 width: view.width

=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2014-11-25 07:30:59 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2014-11-25 07:31:01 +0000
@@ -26,15 +26,23 @@
 
     Action {
         id: stockAction
+        iconName: "starred"
+        objectName: "stockAction"
     }
     ListItemActions {
         id: leading
         actions: [
             Action {
-            },
-            Action {
-            },
-            Action {
+                iconName: "starred"
+                objectName: "leading_1"
+            },
+            Action {
+                iconName: "starred"
+                objectName: "leading_2"
+            },
+            Action {
+                iconName: "starred"
+                objectName: "leading_3"
             }
         ]
     }
@@ -42,6 +50,7 @@
         id: trailing
         actions: [
             stockAction,
+            stockAction,
         ]
     }
     ListItemActions {
@@ -107,6 +116,10 @@
             signalName: "interactiveChanged"
         }
 
+        function panelItem(item, leading) {
+            return findInvisibleChild(item, (leading ? "ListItemPanelLeading" : "ListItemPanelTrailing"));
+        }
+
         function rebound(item, watchTarget) {
             if (watchTarget === undefined) {
                 watchTarget = item;
@@ -200,6 +213,8 @@
             }
             compare(listItem.pressed, false, "Item is pressed still!");
             mouseRelease(listItem, listItem.width / 2, dy);
+            // dismiss
+            rebound(listItem);
         }
         function test_touch_click_on_listitem() {
             var listItem = findChild(listView, "listItem0");
@@ -216,6 +231,8 @@
             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));
+            // dismiss
+            rebound(listItem);
         }
 
         function test_background_height_change_on_divider_visible() {
@@ -311,5 +328,29 @@
             verify(!data.item.__styleInstance.snapAnimation.running, "Animation is still running!");
             fuzzyCompare(data.item.contentItem.x, 0.0, 0.1, "Not snapped out!!");
         }
+
+        function test_visualized_actions_data() {
+            var listItem0 = findChild(listView, "listItem0");
+            var listItem1 = findChild(listView, "listItem1");
+            return [
+                {tag: "Leading actions", item: listItem0, leading: true, expected: ["leading_1", "leading_2", "leading_3"]},
+                {tag: "Trailing actions", item: listItem0, leading: false, expected: ["stockAction"]},
+            ];
+        }
+        function test_visualized_actions(data) {
+            movingSpy.target = data.item;
+            flick(data.item, centerOf(data.item).x, centerOf(data.item).y, data.leading ? units.gu(20) : -units.gu(20), 0);
+            movingSpy.wait();
+
+            // check if the action is visible
+            var panel = panelItem(data.item, data.leading);
+            verify(panel, "Panel not visible");
+            for (var i in data.expected) {
+                var actionItem = findChild(panel, data.expected[i]);
+                verify(actionItem, data.expected[i] + " action not found");
+            }
+            // dismiss
+            rebound(data.item);
+        }
     }
 }