Merge lp:~zsombi/ubuntu-ui-toolkit/listItemExpandContent into lp:ubuntu-ui-toolkit/staging

[Zsombor Egri]

[lp:~zsombi/ubuntu-ui-toolkit/listItemExpandContent]

1626. By Zsombor Egri on 2015-09-02

API added

1627. By Zsombor Egri on 2015-09-03

preparing states

1628. By Zsombor Egri on 2015-09-03

transition management

1629. By Zsombor Egri on 2015-09-03

style transitions on the go

1630. By Zsombor Egri on 2015-09-04

reverting custom transitions

1631. By Zsombor Egri on 2015-09-04

contentItem added, expansion under ListItem.contentItem implemented

1632. By Zsombor Egri on 2015-09-04

rename hideCollapsedContent with overlapListItem

1633. By Zsombor Egri on 2015-09-04

API updated

1634. By Zsombor Egri on 2015-09-04

overlapping content support

1635. By Zsombor Egri on 2015-09-04

docs updated

1636. By Zsombor Egri on 2015-09-04

few examples in gallery

1637. By Zsombor Egri on 2015-09-04

sync

1638. By Zsombor Egri on 2015-09-07

simplifying transitions

1639. By Zsombor Egri on 2015-09-07

small tweaks to avoid expanded being highlighted when the expanded content is scrollable

1640. By Zsombor Egri on 2015-09-09

lock expanded when content is Flickable

Unmerged revisions

1640. By Zsombor Egri on 2015-09-09

lock expanded when content is Flickable

1639. By Zsombor Egri on 2015-09-07

small tweaks to avoid expanded being highlighted when the expanded content is scrollable

1638. By Zsombor Egri on 2015-09-07

simplifying transitions

1637. By Zsombor Egri on 2015-09-04

sync

1636. By Zsombor Egri on 2015-09-04

few examples in gallery

1635. By Zsombor Egri on 2015-09-04

docs updated

1634. By Zsombor Egri on 2015-09-04

overlapping content support

1633. By Zsombor Egri on 2015-09-04

API updated

1632. By Zsombor Egri on 2015-09-04

rename hideCollapsedContent with overlapListItem

1631. By Zsombor Egri on 2015-09-04

contentItem added, expansion under ListItem.contentItem implemented

=== modified file 'components.api'
--- components.api	2015-09-04 12:35:16 +0000
+++ components.api	2015-09-09 10:37:17 +0000
@@ -472,6 +472,7 @@
     Started
 Ubuntu.Components.Styles.ListItemStyle 1.3 1.2: Item
     readonly property bool animatePanels
+    readonly property bool completed 1.3
     property Item dragPanel
     property PropertyAnimation dropAnimation
     readonly property Flickable flickable 1.3
@@ -1248,8 +1249,11 @@
     property color colorFrom
     property color colorTo
 UCListItemExpansion: QtObject
+    property Component content
+    readonly property Item contentItem
     property bool expanded
     property double height
+    property bool overlapListItem
 UCStateSaverAttached: QtObject
     property bool enabled
     property string properties
 
=== modified file 'examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml'
--- examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml	2015-07-03 16:52:20 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml	2015-09-09 10:37:17 +0000
@@ -27,5 +27,4 @@
             verticalCenter: parent.verticalCenter
         }
     }
-    onPressAndHold: selectMode = !selectMode
 }
 
=== modified file 'examples/ubuntu-ui-toolkit-gallery/NewListItems.qml'
--- examples/ubuntu-ui-toolkit-gallery/NewListItems.qml	2015-04-25 08:18:45 +0000
+++ examples/ubuntu-ui-toolkit-gallery/NewListItems.qml	2015-09-09 10:37:17 +0000
@@ -34,13 +34,15 @@
         // clip the action delegates while swiping left/right
         clip: true
 
-       ListItemWithLabel {
+        ListItemWithLabel {
             color: UbuntuColors.blue
             text: i18n.tr("Colored")
+            onPressAndHold: selectMode = !selectMode
         }
         ListItemWithLabel {
             text: i18n.tr("Highlight color")
             highlightColor: UbuntuColors.orange
+            onPressAndHold: selectMode = !selectMode
             // no highlight without clicked() or leading/trailing actions
         }
 
@@ -70,18 +72,22 @@
         ListItemWithLabel {
             text: i18n.tr("Leading actions")
             leadingActions: exampleLeadingActions
+            onPressAndHold: selectMode = !selectMode
         }
         ListItemWithLabel {
             text: i18n.tr("Trailing actions")
             trailingActions: exampleTrailingActions
+            onPressAndHold: selectMode = !selectMode
         }
         ListItemWithLabel {
             text: i18n.tr("Leading and trailing actions")
             leadingActions: exampleLeadingActions
             trailingActions: exampleTrailingActions
+            onPressAndHold: selectMode = !selectMode
         }
         ListItemWithLabel {
             text: i18n.tr("Custom action delegates")
+            onPressAndHold: selectMode = !selectMode
             leadingActions: ListItemActions {
                 actions: [
                     Action {
@@ -163,6 +169,7 @@
             model: [ i18n.tr("Basic"), i18n.tr("Colored divider"), i18n.tr("Immutable"), i18n.tr("No divider") ]
             delegate: ListItemWithLabel {
                 text: modelData
+                onPressAndHold: selectMode = !selectMode
                 color: dragging ? "lightblue" : "transparent"
                 divider {
                     colorFrom: modelData == i18n.tr("Colored divider") ? UbuntuColors.red : Qt.rgba(0.0, 0.0, 0.0, 0.0)
@@ -209,6 +216,7 @@
             delegate: ListItemWithLabel {
                 text: modelData
                 color: dragMode ? "lightblue" : "lightgray"
+                onPressAndHold: selectMode = !selectMode
                 divider {
                     colorFrom: modelData == i18n.tr("Colored divider") ? UbuntuColors.red : Qt.rgba(0.0, 0.0, 0.0, 0.0)
                     colorTo: modelData == i18n.tr("Colored divider") ? UbuntuColors.green : Qt.rgba(0.0, 0.0, 0.0, 0.0)
@@ -217,4 +225,112 @@
             }
         }
     }
+
+    TemplateSection {
+        className: "ListItem"
+        title: "Expansion - exclusive, unlocked, auto-collapsing"
+
+        UbuntuListView {
+            width: parent.width
+            height: units.gu(28)
+            clip: true
+            model: 5
+            ViewItems.expansionFlags: ViewItems.CollapseOnOutsidePress | ViewItems.UnlockExpanded
+            delegate: ListItemWithLabel {
+                text: i18n.tr("Item #%1: pressAndHold to expand/collapse").arg(modelData)
+                leadingActions: exampleLeadingActions
+                trailingActions: exampleTrailingActions
+                expansion.height: units.gu(15)
+                onPressAndHold: expansion.expanded = !expansion.expanded
+            }
+        }
+    }
+
+    TemplateSection {
+        className: "ListItem"
+        title: "Expansion - content under collapsed layout"
+
+        UbuntuListView {
+            id: view
+            width: parent.width
+            height: units.gu(28)
+            clip: true
+            model: ListModel {
+                Component.onCompleted: {
+                    for (var i = 0; i < 5; i++) {
+                        append({label: i18n.tr("Item #%1: pressAndHold to expand/collapse").arg(i)})
+                    }
+                }
+            }
+
+            delegate: ListItemWithLabel {
+                id: mainItem
+                property int itemIndex: index
+                text: label
+                onPressAndHold: expansion.expanded = !expansion.expanded
+                expansion {
+                    height: units.gu(21)
+                    content: UbuntuListView {
+                        clip: true
+                        anchors.right: parent.right
+                        width: parent.width - units.gu(4)
+                        height: units.gu(14)
+                        model: 5
+                        delegate: ListItemWithLabel {
+                            text: i18n.tr("Sub-item #%1").arg(modelData)
+                            onClicked: {
+                                view.model.get(mainItem.itemIndex).label = "Replaced with " + text;
+                                mainItem.expansion.expanded = false;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    TemplateSection {
+        className: "ListItem"
+        title: "Expansion - content over ListItem"
+
+        UbuntuListView {
+            id: view2
+            width: parent.width
+            height: units.gu(28)
+            clip: true
+            model: ListModel {
+                Component.onCompleted: {
+                    for (var i = 0; i < 5; i++) {
+                        append({label: i18n.tr("Item #%1: pressAndHold to expand/collapse").arg(i)})
+                    }
+                }
+            }
+            ViewItems.expansionFlags: ViewItems.CollapseOnOutsidePress
+
+            delegate: ListItemWithLabel {
+                id: mainItem2
+                property int itemIndex: index
+                text: label
+                onPressAndHold: { print(1); expansion.expanded = !expansion.expanded}
+                expansion {
+                    height: units.gu(21)
+                    overlapListItem: true
+                    content: UbuntuListView {
+                        clip: true
+                        anchors.right: parent.right
+                        width: parent.width - units.gu(4)
+                        height: units.gu(14)
+                        model: 5
+                        delegate: ListItemWithLabel {
+                            text: i18n.tr("Sub-item #%1").arg(modelData)
+                            onClicked: {
+                                view2.model.get(mainItem2.itemIndex).label = "Replaced with " + text;
+                                mainItem2.expansion.expanded = false;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/ListItemStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/ListItemStyle.qml	2015-09-04 09:32:31 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/ListItemStyle.qml	2015-09-09 10:37:17 +0000
@@ -423,7 +423,24 @@
 
     // expansion
     Component.onCompleted: internals.completed = true
-    state: (internals.completed && styledItem.expansion.expanded) ? (listItemStyle.flickable ? "expandedWithFlickable" : "expandedNoFlickable") : ""
+    state: {
+        if (!internals.completed || !styledItem.expansion.expanded) {
+            return "";
+        }
+        // states are:
+        // expandedWithFlickable, expandedNoFlickable
+        // expandedOverContentWithFlickable, expandedOverContentNoFlickable
+        // expandedUnderContentWithFlickable, expandedUnderContentNoFlickable
+        var result = "expanded";
+
+        if (styledItem.expansion.content) {
+            result += styledItem.expansion.overlapListItem ? "OverContent" : "UnderContent";
+        }
+
+        result += (listItemStyle.flickable) ? "WithFlickable" : "NoFlickable";
+
+        return result;
+    }
     states: [
         State {
             name: "expandedNoFlickable"
@@ -454,6 +471,104 @@
                     }
                 }
             }
+        },
+        State {
+            name: "expandedUnderContentNoFlickable"
+            AnchorChanges {
+                target: styledItem.contentItem
+                anchors.bottom: undefined
+            }
+            PropertyChanges {
+                target: styledItem.expansion.contentItem
+                opacity: 1.0
+                z: 1
+            }
+            PropertyChanges {
+                target: styledItem
+                height: styledItem.expansion.height
+            }
+        },
+        State {
+            name: "expandedUnderContentWithFlickable"
+            AnchorChanges {
+                target: styledItem.contentItem
+                anchors.bottom: undefined
+            }
+            PropertyChanges {
+                target: styledItem.expansion.contentItem
+                opacity: 1.0
+                z: 1
+            }
+            PropertyChanges {
+                target: styledItem
+                height: styledItem.expansion.height
+            }
+            PropertyChanges {
+                target: listItemStyle.flickable
+                // we do not need to restore the original values
+                restoreEntryValues: false
+                // and we should not get any binding updates even
+                explicit: true
+                contentY: {
+                    var bottom = styledItem.y + styledItem.expansion.height - listItemStyle.flickable.contentY + listItemStyle.flickable.originY;
+                    var dy = bottom - listItemStyle.flickable.height;
+                    if (dy > 0) {
+                        return listItemStyle.flickable.contentY + dy - listItemStyle.flickable.originY;
+                    } else {
+                        return listItemStyle.flickable.contentY;
+                    }
+                }
+            }
+        },
+        State {
+            name: "expandedOverContentNoFlickable"
+            PropertyChanges {
+                target: styledItem.contentItem
+                opacity: 0.0
+                enabled: false
+            }
+            PropertyChanges {
+                target: styledItem.expansion.contentItem
+                opacity: 1.0
+                z: 1
+            }
+            PropertyChanges {
+                target: styledItem
+                height: styledItem.expansion.height
+            }
+        },
+        State {
+            name: "expandedOverContentWithFlickable"
+            PropertyChanges {
+                target: styledItem.contentItem
+                opacity: 0.0
+                enabled: false
+            }
+            PropertyChanges {
+                target: styledItem.expansion.contentItem
+                opacity: 1.0
+                z: 1
+            }
+            PropertyChanges {
+                target: styledItem
+                height: styledItem.expansion.height
+            }
+            PropertyChanges {
+                target: listItemStyle.flickable
+                // we do not need to restore the original values
+                restoreEntryValues: false
+                // and we should not get any binding updates even
+                explicit: true
+                contentY: {
+                    var bottom = styledItem.y + styledItem.expansion.height - listItemStyle.flickable.contentY + listItemStyle.flickable.originY;
+                    var dy = bottom - listItemStyle.flickable.height;
+                    if (dy > 0) {
+                        return listItemStyle.flickable.contentY + dy - listItemStyle.flickable.originY;
+                    } else {
+                        return listItemStyle.flickable.contentY;
+                    }
+                }
+            }
         }
     ]
     transitions: [
@@ -462,15 +577,29 @@
             to: "expandedWithFlickable"
             reversible: true
             enabled: listItemStyle.animatePanels
-            ParallelAnimation {
-                UbuntuNumberAnimation {
-                    target: listItemStyle.flickable
-                    property: "contentY"
-                }
-                UbuntuNumberAnimation {
-                    target: styledItem
-                    property: "height"
-                }
+            UbuntuNumberAnimation {
+                targets: [listItemStyle.flickable, styledItem]
+                properties: "contentY, height"
+            }
+        },
+        Transition {
+            from: ""
+            to: "expandedUnderContentWithFlickable"
+            reversible: true
+            enabled: listItemStyle.animatePanels
+            UbuntuNumberAnimation {
+                targets: [styledItem.expansion.contentItem, listItemStyle.flickable, styledItem]
+                properties: "opacity, contentY, height"
+            }
+        },
+        Transition {
+            from: ""
+            to: "expandedOverContentWithFlickable"
+            reversible: true
+            enabled: listItemStyle.animatePanels
+            UbuntuNumberAnimation {
+                targets: [styledItem.contentItem, styledItem.expansion.contentItem, listItemStyle.flickable, styledItem]
+                properties: "opacity, contentY, height"
             }
         },
         Transition {
@@ -482,6 +611,26 @@
                 target: styledItem
                 property: "height"
             }
+        },
+        Transition {
+            from: ""
+            to: "expandedUnderContentNoFlickable"
+            reversible: true
+            enabled: listItemStyle.animatePanels
+            UbuntuNumberAnimation {
+                targets: [styledItem.expansion.contentItem, styledItem]
+                properties: "opacity, height"
+            }
+        },
+        Transition {
+            from: ""
+            to: "expandedOverContentNoFlickable"
+            reversible: true
+            enabled: listItemStyle.animatePanels
+            UbuntuNumberAnimation {
+                targets: [styledItem.expansion.contentItem, styledItem.contentItem, styledItem]
+                properties: "opacity, height"
+            }
         }
     ]
 }
 
=== modified file 'src/Ubuntu/Components/plugin/privates/listitemexpansion.cpp'
--- src/Ubuntu/Components/plugin/privates/listitemexpansion.cpp	2015-09-04 09:32:31 +0000
+++ src/Ubuntu/Components/plugin/privates/listitemexpansion.cpp	2015-09-09 10:37:17 +0000
@@ -16,15 +16,45 @@
 
 #include "uclistitem.h"
 #include "uclistitem_p.h"
+#include <QtQuick/private/qquickflickable_p.h>
 
 UCListItemExpansion::UCListItemExpansion(QObject *parent)
     : QObject(parent)
     , m_listItem(static_cast<UCListItem13*>(parent))
+    , m_content(Q_NULLPTR)
+    , m_contentItem(Q_NULLPTR)
     , m_height(0.0)
+    , m_overlapListItem(false)
     , m_filtering(false)
 {
 }
 
+void UCListItemExpansion::createOrUpdateContentItem()
+{
+    if (!m_contentItem && m_content && expanded()) {
+        m_contentItem = static_cast<QQuickItem*>(m_content->create(qmlContext(m_listItem)));
+        m_contentItem->setParentItem(m_listItem);
+        m_contentItem->setOpacity(0.0);
+        m_listItem->setClip(true);
+        // cal update to handle ListItem restrictions
+        updateContent(expanded());
+    }
+
+    // adjust expanded contentItem anchoring
+    if (m_contentItem) {
+        QQuickAnchors *contentAnchors = QQuickItemPrivate::get(m_contentItem)->anchors();
+        QQuickItemPrivate *contentItem = QQuickItemPrivate::get(m_listItem->contentItem());
+        if (m_overlapListItem) {
+            contentAnchors->resetTop();
+            contentAnchors->setFill(m_listItem->contentItem());
+        } else {
+            // make sure we remove the fill
+            contentAnchors->resetFill();
+            contentAnchors->setTop(contentItem->bottom());
+        }
+    }
+}
+
 bool UCListItemExpansion::expandedLocked()
 {
     UCListItemPrivate *listItem = UCListItemPrivate::get(m_listItem);
@@ -45,6 +75,21 @@
     }
 }
 
+// called when ViewItems expands/collapses the content
+void UCListItemExpansion::updateContent(bool expanded)
+{
+    if (!m_contentItem) {
+        return;
+    }
+    m_contentItem->setEnabled(expanded);
+    // if contentItem is a Flickable, lock ListItem from being highlighted
+    if (qobject_cast<QQuickFlickable*>(m_contentItem)) {
+        UCListItemPrivate *listItem = UCListItemPrivate::get(m_listItem);
+        listItem->blockHighlighting(expanded);
+    }
+}
+
+
 // event filter for external mouse presses to collapse when pressed outside
 bool UCListItemExpansion::eventFilter(QObject *target, QEvent *event)
 {
@@ -104,3 +149,30 @@
     m_height = height;
     Q_EMIT heightChanged();
 }
+
+void UCListItemExpansion::setContent(QQmlComponent *component)
+{
+    if (component == m_content) {
+        return;
+    }
+    m_content = component;
+    Q_EMIT contentChanged();
+    Q_EMIT contentItemChanged();
+}
+
+QQuickItem *UCListItemExpansion::contentItem()
+{
+    createOrUpdateContentItem();
+    return m_contentItem;
+}
+
+
+void UCListItemExpansion::setOverlapListItem(bool overlap)
+{
+    if (m_overlapListItem == overlap) {
+        return;
+    }
+    m_overlapListItem = overlap;
+    Q_EMIT overlapListItemChanged();
+    createOrUpdateContentItem();
+}
 
=== modified file 'src/Ubuntu/Components/plugin/uclistitem.cpp'
--- src/Ubuntu/Components/plugin/uclistitem.cpp	2015-09-04 09:32:31 +0000
+++ src/Ubuntu/Components/plugin/uclistitem.cpp	2015-09-09 10:37:17 +0000
@@ -186,6 +186,7 @@
     : UCStyledItemBasePrivate()
     , defaultThemeVersion(0)
     , highlighted(false)
+    , highlightBlocked(false)
     , contentMoved(false)
     , swiped(false)
     , suppressClick(false)
@@ -383,10 +384,21 @@
    return (isClickedConnected() || isPressAndHoldConnected() || mainAction || leadingActions || trailingActions);
 }
 
+// block the highlight mechanism (and swiping) on the ListItem; called when the ListItem
+// is expanded and the content specified is a Flickable
+void UCListItemPrivate::blockHighlighting(bool block)
+{
+    if (block) {
+        setHighlighted(false);
+        listenToRebind(false);
+    }
+    highlightBlocked = block;
+}
+
 // set highlighted flag and update contentItem
 void UCListItemPrivate::setHighlighted(bool highlighted)
 {
-    if (this->highlighted != highlighted) {
+    if (this->highlighted != highlighted && !highlightBlocked) {
         this->highlighted = highlighted;
         suppressClick = false;
         Q_Q(UCListItem);
@@ -1125,6 +1137,9 @@
 // swipe events; child items should no longer get mouse events
 void UCListItemPrivate::grabLeftButtonEvents(QMouseEvent *event)
 {
+    if (highlightBlocked) {
+        return;
+    }
     Q_Q(UCListItem);
     button = event->button();
     // create style instance
@@ -1239,7 +1254,7 @@
     Q_D(UCListItem);
     d->ungrabLeftButtonEvents(event);
     // make sure we ungrab the mouse!
-    ungrabMouse();
+    setKeepMouseGrab(false);
 }
 
 void UCListItem13::mouseReleaseEvent(QMouseEvent *event)
@@ -1323,7 +1338,7 @@
     } else if (type == QEvent::MouseMove) {
         QMouseEvent *mouse = static_cast<QMouseEvent*>(event);
         const QPointF localPos = mapFromItem(child, mouse->localPos());
-        if ((mouse->buttons() & Qt::LeftButton) && d->swipedOverThreshold(localPos, d->pressedPos) && !d->highlighted) {
+        if ((mouse->buttons() & Qt::LeftButton) && d->swipedOverThreshold(localPos, d->pressedPos) && !d->highlighted && !d->highlightBlocked) {
             // grab the event from the child, so the click doesn't happen anymore, and initiate swiping
             QMouseEvent pressed(QEvent::MouseButtonPress, localPos, mouse->windowPos(), mouse->screenPos(),
                                     Qt::LeftButton, mouse->buttons(), mouse->modifiers());
@@ -1331,7 +1346,7 @@
             // stop click and pressAndHold, then grab the mouse so children do not get the mouse events anymore
             d->suppressClick = true;
             d->pressAndHoldTimer.stop();
-            grabMouse();
+            setKeepMouseGrab(true);
         }
     }
     return UCStyledItemBase::childMouseEventFilter(child, event);
@@ -1761,8 +1776,57 @@
  * \qmlpropertygroup ::ListItem::expansion
  * \qmlproperty bool ListItem::expansion.expanded
  * \qmlproperty real ListItem::expansion.height
+ * \qmlproperty Component ListItem::expansion.content
+ * \qmlproperty Item ListItem::expansion.contentItem
+ * \qmlproperty bool ListItem::expansion.overlapListItem
  * \since Ubuntu.Components 1.3
- * The group drefines the expansion state of the ListItem.
+ * The group drefines the expansion state of the ListItem. \c expanded drives
+ * the expansion of the ListItem, \c height specifies the height of the expanded
+ * ListItem. By default the ListItem's content is expanded together with the
+ * ListItem. There may be use cases where the expanded content may have slightly
+ * different content. This can be achieved by specifying a component in \c content
+ * property. When content is specified, it will be anchored to the bottom of the
+ * \l ListItem::contentItem, which in turn will not resize together with the
+ * ListItem. Setting \c overlapListItem will hide the \l ListItem::contentItem
+ * and will fill the entire ListItem with the \c content. Setting \c overlapListItem
+ * without a valid \c content component will have no effect.
+ * /note Setting \e ViewItems.UnlockExpanded flag to a view of ListItems where the
+ * expanded content is a Flickable derivate will have no effect.
+ * Example:
+ * \qml
+ * import QtQuick 2.4
+ * import Ubuntu.Components 1.3
+ *
+ * UbuntuListView {
+ *     width: units.gu(40)
+ *     height: units.gu(71)
+ *     ViewItems.expansionFlags: ViewItems.CollapseOnOutsidePress
+ *
+ *     model: 50
+ *     delegate: ListItem {
+ *         id: listItem
+ *         contentItem.anchors.margins: units.gu(1.5)
+ *         Label { text: "List Item #" + modelData }
+ *         onPressAndHold: expansion.expanded = true
+ *         expansion {
+ *             height: units.gu(21)
+ *             overlapListItem: true
+ *             content: UbuntuListView {
+ *                 anchors {
+ *                     leftMargin: units.gu(2)
+ *                     rightMargin: units.gu(2)
+ *                 }
+ *                 model: 5
+ *                 delegate: ListItem {
+ *                     contentItem.anchors.margins: units.gu(1.5)
+ *                     Label { text: "Expanded item # + modelData }
+ *                     onClicked: listItem.expansion.expanded = false
+ *                 }
+ *             }
+ *         }
+ *     }
+ * }
+ * \endqml
  */
 UCListItemExpansion *UCListItem13::expansion()
 {
 
=== modified file 'src/Ubuntu/Components/plugin/uclistitem.h'
--- src/Ubuntu/Components/plugin/uclistitem.h	2015-09-04 09:32:31 +0000
+++ src/Ubuntu/Components/plugin/uclistitem.h	2015-09-09 10:37:17 +0000
@@ -241,26 +241,40 @@
     Q_OBJECT
     Q_PROPERTY(bool expanded READ expanded WRITE setExpanded NOTIFY expandedChanged)
     Q_PROPERTY(qreal height MEMBER m_height WRITE setHeight NOTIFY heightChanged)
+    Q_PROPERTY(QQmlComponent *content MEMBER m_content WRITE setContent NOTIFY contentChanged)
+    Q_PROPERTY(QQuickItem *contentItem READ contentItem NOTIFY contentItemChanged)
+    Q_PROPERTY(bool overlapListItem MEMBER m_overlapListItem WRITE setOverlapListItem NOTIFY overlapListItemChanged)
 public:
     explicit UCListItemExpansion(QObject *parent = 0);
 
     bool expandedLocked();
     void enableClickFiltering(bool enable);
+    void updateContent(bool expanded);
 
     bool expanded();
     void setExpanded(bool expanded);
     void setHeight(qreal height);
+    void setContent(QQmlComponent *component);
+    QQuickItem *contentItem();
+    void setOverlapListItem(bool overlap);
 
 Q_SIGNALS:
     void expandedChanged();
     void heightChanged();
+    void contentChanged();
+    void contentItemChanged();
+    void overlapListItemChanged();
 
 protected:
     bool eventFilter(QObject *, QEvent *);
+    void createOrUpdateContentItem();
 
 private:
     UCListItem13 *m_listItem;
+    QQmlComponent *m_content;
+    QQuickItem *m_contentItem;
     qreal m_height;
+    bool m_overlapListItem:1;
     bool m_filtering:1;
 
     friend class UCListItem;
 
=== modified file 'src/Ubuntu/Components/plugin/uclistitem_p.h'
--- src/Ubuntu/Components/plugin/uclistitem_p.h	2015-09-01 07:16:59 +0000
+++ src/Ubuntu/Components/plugin/uclistitem_p.h	2015-09-09 10:37:17 +0000
@@ -61,6 +61,7 @@
     void _q_syncDragMode();
     int index();
     bool canHighlight();
+    void blockHighlighting(bool block);
     void setHighlighted(bool pressed);
     void listenToRebind(bool listen);
     void lockContentItem(bool lock);
@@ -73,6 +74,7 @@
 
     quint16 defaultThemeVersion;
     bool highlighted:1;
+    bool highlightBlocked:1;
     bool contentMoved:1;
     bool swiped:1;
     bool suppressClick:1;
 
=== modified file 'src/Ubuntu/Components/plugin/ucviewitemsattached.cpp'
--- src/Ubuntu/Components/plugin/ucviewitemsattached.cpp	2015-09-04 08:55:29 +0000
+++ src/Ubuntu/Components/plugin/ucviewitemsattached.cpp	2015-09-09 10:37:17 +0000
@@ -666,6 +666,9 @@
     if (listItem && ((expansionFlags & UCViewItemsAttached::CollapseOnOutsidePress) == UCViewItemsAttached::CollapseOnOutsidePress)) {
         listItem->expansion()->enableClickFiltering(true);
     }
+    if (listItem) {
+        listItem->expansion()->updateContent(true);
+    }
     if (emitChangeSignal) {
         Q_EMIT static_cast<UCViewItemsAttached13*>(q_func())->expandedIndicesChanged(expansionList.keys());
     }
@@ -679,6 +682,9 @@
     if (item && ((expansionFlags & UCViewItemsAttached::CollapseOnOutsidePress) == UCViewItemsAttached::CollapseOnOutsidePress)) {
         item->expansion()->enableClickFiltering(false);
     }
+    if (item) {
+        item->expansion()->updateContent(false);
+    }
     if (emitChangeSignal && wasExpanded) {
         Q_EMIT static_cast<UCViewItemsAttached13*>(q_func())->expandedIndicesChanged(expansionList.keys());
     }
@@ -708,7 +714,8 @@
  *  \li When set, only one ListItem can be expanded at a time. \b {Set by default}.
  * \row
  *  \li ViewItems.UnlockExpanded
- *  \li When set, the ListItem's leading/trailing actions can be swiped in.
+ *  \li When set, the ListItem's leading/trailing actions can be swiped in. The
+ *      flag has no effect when the expanded content is a Flickable.
  * \row
  *  \li ViewItems.CollapseOnOutsidePress
  *  \li When set, the active expaned ListItem collapses automatically when clicked
 
=== modified file 'tests/resources/listitems/ListItemExpansion.qml'
--- tests/resources/listitems/ListItemExpansion.qml	2015-09-02 06:47:25 +0000
+++ tests/resources/listitems/ListItemExpansion.qml	2015-09-09 10:37:17 +0000
@@ -38,6 +38,7 @@
             iconName: "stock_website"
         }
     ]
+
     Page {
         title: "Expansion"
         Column {
@@ -50,18 +51,12 @@
                 height: parent.height / 2
                 clip: true
                 ViewItems.onExpandedIndicesChanged: print(ViewItems.expandedIndices)
-                ViewItems.expansionFlags: ViewItems.CollapseOnOutsidePress
+                ViewItems.expansionFlags: ViewItems.CollapseOnOutsidePress | ViewItems.UnlockExpanded
 
                 model: ListModel {
                     Component.onCompleted: {
-                        for (var i = 0; i < 3; i++) {
-                            append({label: "List item #"+i, sectionData: "Locked"});
-                        }
-                        for (i = 3; i < 11; i++) {
-                            append({label: "List item #"+i, sectionData: "Limited, live move"});
-                        }
-                        for (i = 11; i < 25; i++) {
-                            append({label: "List item #"+i, sectionData: "Unlimited, drag'n'drop"});
+                        for (var i = 0; i < 25; i++) {
+                            append({label: "List item #"+i});
                         }
                     }
                 }
@@ -75,7 +70,20 @@
                     trailingActions: ListItemActions {
                         actions: contextualActions
                     }
-                    expansion.height: units.gu(15)
+                    expansion {
+                        height: units.gu(15)
+                        overlapListItem: true
+                        content: UbuntuListView {
+                            model: 5
+                            delegate: ListItem {
+                                contentItem.anchors.margins: units.gu(1)
+                                Label { text: i18n.tr("Sub-item #%1").arg(modelData) }
+                                onClicked: {
+                                    item.expansion.expanded = false;
+                                }
+                            }
+                        }
+                    }
 
                     RowLayout {
                         anchors {
@@ -89,10 +97,6 @@
                             title.text: label
                             subtitle.text: "from index #" + index
                         }
-                        Button {
-                            text: "Enable drag mode"
-                            onClicked: listView.ViewItems.dragMode = true
-                        }
                     }
 
                     onPressAndHold: {
@@ -103,12 +107,23 @@
             }
             ListItem {
                 Label { text: "Standalone ListItem" }
-                expansion.height: units.gu(15)
+                expansion {
+                    height: units.gu(15)
+                    content: Rectangle {
+                        color: UbuntuColors.darkGrey
+                        width: parent.width
+                        height: units.gu(8)
+                        radius: units.gu(1)
+                    }
+                }
                 onPressAndHold: expansion.expanded = !expansion.expanded;
             }
             ListItem {
                 Label { text: "Other Standalone ListItem" }
-                expansion.height: units.gu(15)
+                expansion {
+                    height: units.gu(15)
+                    overlapListItem: true
+                }
                 onPressAndHold: expansion.expanded = !expansion.expanded;
             }