Ubuntu UI Toolkit

Merge lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem into lp:ubuntu-ui-toolkit

expanding-listitem
Merge into trunk

Proposed by Michael Zanetti on 2013-11-18

Status:

Rejected

Rejected by:

Zsombor Egri on 2014-02-25

Proposed branch:

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem

Merge into:

lp:ubuntu-ui-toolkit

Diff against target:

1200 lines (+1077/-12)

13 files modified

components.api (+17/-0)
examples/ubuntu-ui-toolkit-gallery/ListItems.qml (+135/-0)
modules/Ubuntu/Components/ListItems/Base.qml (+1/-1)
modules/Ubuntu/Components/ListItems/Expandable.qml (+196/-0)
modules/Ubuntu/Components/ListItems/ExpandablesColumn.qml (+136/-0)
modules/Ubuntu/Components/ListItems/ExpandablesListView.qml (+126/-0)
modules/Ubuntu/Components/ListItems/qmldir (+3/-0)
modules/Ubuntu/Test/UbuntuTestCase.qml (+14/-9)
tests/unit_x11/tst_components/tst_Expandable.qml (+119/-0)
tests/unit_x11/tst_components/tst_ExpandablesColumn.qml (+157/-0)
tests/unit_x11/tst_components/tst_ExpandablesListView.qml (+170/-0)
tests/unit_x11/tst_components/tst_pickerpanel.qml (+1/-0)
tests/unit_x11/tst_test/tst_ubuntutestcase.qml (+2/-2)

To merge this branch:

bzr merge lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem

High

Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
Michael Zanetti (community)			Disapprove on 2014-02-19
PS Jenkins bot	continuous-integration		Needs Fixing on 2014-02-13
Zsombor Egri		2013-11-18	Needs Fixing on 2014-02-13
Michał Sawicz			Needs Fixing on 2013-11-25
Florian Boucault			Pending
Review via email: mp+195602@code.launchpad.net

Commit message

Add ExpandablesListView, ExpandablesColumn and the matching Expandable list item.

Description of the change

This adds an ExpandablesListView, ExpandablesColumn and the matching Expandable list item. They are intended to be used together (well, the item can also be standalone) and simplify the implementation of the expansion pattern as specced in https://docs.google.com/a/canonical.com/document/d/1_c4029C6Jwll_ng8gqp3SRnF4DgXRA3tR_LL3J-zOD8/edit

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2013-11-21

846. By Michael Zanetti on 2013-11-21: fix typo in docs
847. By Michael Zanetti on 2013-11-21: fix one more typo
848. By Michael Zanetti on 2013-11-21: more fixes to the doc
849. By Michael Zanetti on 2013-11-21: change dimmed opacity to 0.5 as requested by design

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-21:

FAILED: Continuous integration, rev:845
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1265/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/960/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/943/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/213/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/213/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/960/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/943/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1265/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2013-11-21

850. By Michael Zanetti on 2013-11-21: update components.api

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-21:

FAILED: Continuous integration, rev:849
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1266/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/964/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/948/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/214/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/214/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/964/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/948/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1266/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-21:

FAILED: Continuous integration, rev:850
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1267/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/967/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/951/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/215/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/215/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/967/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/951/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1267/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-21:

FAILED: Continuous integration, rev:850
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1268/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/982/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/966/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/216/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/216/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/982/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/966/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1268/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2013-11-22

851. By Michael Zanetti on 2013-11-22: fix issues in docs as found by jenkins

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-22:

FAILED: Continuous integration, rev:851
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1274/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/1005/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/989/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/222/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/222/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1005/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/989/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1274/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2013-11-22

852. By Michael Zanetti on 2013-11-22: added tests that check for not expanded items to dim when there is an expanded item
853. By Michael Zanetti on 2013-11-22: fix another link issue in docs

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-22:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1275/rebuild

review: Approve (continuous-integration)

Revision history for this message

Michał Sawicz (saviq) wrote on 2013-11-25:

Hey, some functional issues:
- There seem to be two thin dividers visible, and they get out of sync when dragging the view slowly (http://ubuntuone.com/5Rgpeq2ZpYCP8brP9Xc6lS)
- Did you confirm the dragging behaviours with UX design? Are you supposed to be able to drag when an item is expanded at all? Shouldn't it collapse as soon as you touch outside?
- Scrollable expanded items overlay the divider (http://ubuntuone.com/4DKYhOoTb5H2XwNHYPVEhp)

Wonder if it'd make sense to have a more real-life example in the gallery, where you'd have one ExpandablesColumn or ExpandablesListView covering the whole view - would be easier to see the behaviours.

Also, One thing that happened for me repeatedly - when tapping on one of the faded-out items, I expected it to expand straight away, not only collapse the current item - something worth exploring with UX design.

review: Needs Fixing

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2013-11-25

854. By Michael Zanetti on 2013-11-25: fix content overlapping with bottom divider

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-11-25:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1294/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Florian Boucault (fboucault) wrote on 2013-12-09:

Corresponding bug report: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1169258

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-01-27:

Hey guys, can we get a review of this?

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2014-02-11

855. By Michael Zanetti on 2014-02-11: merge trunk

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-11:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1705/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2014-02-11

856. By Michael Zanetti on 2014-02-11: get rid of the workaround to set ListView.view in case of a column. Use a more elegant workaround.
857. By Michael Zanetti on 2014-02-11: fix copyright header year

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-11:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1708/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Cris Dywan (kalikiana) wrote on 2014-02-12:

Your change to modules/Ubuntu/Test/UbuntuTestCase.qml is wrong, I thought you were hitting a bug in unit test in trunk and then realized it's this change that breaks it.

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2014-02-12

858. By Michael Zanetti on 2014-02-12: take divider.height into account when calculating if we should be flickable or not
859. By Michael Zanetti on 2014-02-12: change findChild to do a breadth first instad of a depth first search to avoid running out of memory

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-12:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1713/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2014-02-12

860. By Michael Zanetti on 2014-02-12: change the test_findChild to check for null instead of undefined as that's more correct

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-12:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1714/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2014-02-12

861. By Michael Zanetti on 2014-02-12: fix error message on test_findChild
862. By Michael Zanetti on 2014-02-12: wait for it to be fully set up and rendered before running the test

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-12:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1715/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-12:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1716/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2014-02-12

863. By Michael Zanetti on 2014-02-12: waitForRendering on the PickerPanel too

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-12:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1717/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-02-13:

So to summarize what we discussed in hangout (+ some additional things to check with design):
For ListItems.Expandable:
- provide property which configures the possibility to collapse the Expandable while clicked on its "header"
- make sure design does not want a down/up pointing chevron to be shown which would indicate there is something more to be shown (as in OptionSelector's case)

ExpandablesColumn name can stay... Not the nicest name however...

ExpandablesListView to be renamed onto UbuntuListView giving room for other enhancements on ListView, and should be moved under Ubuntu.Components.

Additional comments:
====================
36 +
please remove this empty line.

Expandable:
287 + /*!
288 + \internal
289 + Reparent any content to inside the Flickable
290 + */
291 + property alias children: flickableContent.data

Shouldn't this be a default property? It should also be a public one.

ExpandablesListView:
593 + readonly property alias expandedItem: priv.expandedItem

We should have expandedIndex property as well to keep the API in sync with ListView API.

599 + function expandItem(item) {

As ListView creates the items dynamically, we cannot really rely on instance parameters. This function assumes the instance to be expanded is in visible area). What if the instance is re-created due to flicking? The function should take index instead of instance, and should have an option to set the currentIndex as well.
function expandAtIndex(index, moveCurrent, animate), where index is the expandable index, moveCurrent if defined will move the currentIndex/currentItem, and animate drives whether the move should be animated (currentIndex property set) or not (use ListView function to position the list). The last two parameters are optional.

Also there is no example in documentation on how the function should be used.

624 + function collapse() {
A better name for this would be collapseExpanded()

tst_ExpandablesColumn:
Please add a test case where the column has other list items included.

Beside these, I'd recommend to split the MR in 3: Expandable, ExpandablesColumn and for UbuntuListView. Also, thanks for fixing the UbuntuTestCase, but that fix should also come in a separate MR, maybe the base one for all 3 others. This one could also contain the PickerPanel test fix :)

ExpandablesColumn name can stay... Not the nicest name however...

ExpandablesListView to be renamed onto UbuntuListView giving room for other enhancements on ListView, and should be moved under Ubuntu.Components.

Additional comments:
====================
36	+
please remove this empty line.

Expandable:
287	+    /*!
288	+      \internal
289	+      Reparent any content to inside the Flickable
290	+     */
291	+    property alias children: flickableContent.data

Shouldn't this be a default property? It should also be a public one.

ExpandablesListView:
593	+    readonly property alias expandedItem: priv.expandedItem

We should have expandedIndex property as well to keep the API in sync with ListView API.

599	+    function expandItem(item) {

Also there is no example in documentation on how the function should be used.

624	+    function collapse() {
A better name for this would be collapseExpanded()

tst_ExpandablesColumn:
Please add a test case where the column has other list items included.

review: Needs Fixing

lp:~mzanetti/ubuntu-ui-toolkit/expanding-listitem updated on 2014-02-13

864. By Michael Zanetti on 2014-02-13: added property collapseOnClick (defaulting to false) to easily add a collapse mechanism

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-02-13:

FAILED: Continuous integration, rev:864
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1723/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3195/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/2876/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/671/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/671/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3197/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/2878/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1723/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Michael Zanetti (mzanetti) wrote on 2014-02-19:

This has been split into 3 other merges

review: Disapprove

Unmerged revisions

864. By Michael Zanetti on 2014-02-13: added property collapseOnClick (defaulting to false) to easily add a collapse mechanism
863. By Michael Zanetti on 2014-02-12: waitForRendering on the PickerPanel too
862. By Michael Zanetti on 2014-02-12: wait for it to be fully set up and rendered before running the test
861. By Michael Zanetti on 2014-02-12: fix error message on test_findChild
860. By Michael Zanetti on 2014-02-12: change the test_findChild to check for null instead of undefined as that's more correct
859. By Michael Zanetti on 2014-02-12: change findChild to do a breadth first instad of a depth first search to avoid running out of memory
858. By Michael Zanetti on 2014-02-12: take divider.height into account when calculating if we should be flickable or not
856. By Michael Zanetti on 2014-02-11: get rid of the workaround to set ListView.view in case of a column. Use a more elegant workaround.
855. By Michael Zanetti on 2014-02-11: merge trunk

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Brian Blevins

Caco V. Topia

Jaroslavas Karmazinas

Michael Zanetti

Ubuntu SDK team

to status/vote changes:

william

 === modified file 'components.api'
 --- components.api	2014-02-11 17:51:15 +0000
 +++ components.api	2014-02-13 10:10:25 +0000
@@ -106,6 +106,23 @@
      property ThinDivider divider
      property real __contentsMargins
      function cancelItemRemoval()
++modules/Ubuntu/Components/ListItems/Expandable.qml
++Empty
++    property bool expanded
++    property real collapsedHeight
++    property real expandedHeight
++    property internal children
++modules/Ubuntu/Components/ListItems/ExpandablesColumn.qml
++Flickable
++    readonly property Item expandedItem
++    function expandItem(item)
++    function collapse()
++    default property internal children
++modules/Ubuntu/Components/ListItems/ExpandablesListView.qml
++ListView
++    readonly property Item expandedItem
++    function expandItem(item)
++    function collapse()
  modules/Ubuntu/Components/ListItems/Header.qml
  Item
      property string text
 === modified file 'examples/ubuntu-ui-toolkit-gallery/ListItems.qml'
 --- examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2013-11-22 14:49:12 +0000
 +++ examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2014-02-13 10:10:25 +0000
@@ -19,6 +19,7 @@
  import Ubuntu.Components.ListItems 0.1 as ListItem
  Template {
++
      ListItemsSection {
          title: i18n.tr("Standard")
          className: "Standard"
@@ -222,4 +223,138 @@
+             }
+         }
+     }
++
++    TemplateSection {
++        title: i18n.tr("ExpandablesListView")
++        className: "Header"
++
++        ListModel {
++            id: fruitModel
++            ListElement { name: "Orange"; details: "The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae. The fruit of the Citrus sinensis is called sweet orange to distinguish it from that of the Citrus aurantium, the bitter orange. The orange is a hybrid, possibly between pomelo (Citrus maxima) and mandarin (Citrus reticulata), cultivated since ancient times.\n-\nWikipedia"}
++            ListElement { name: "Apple"; details: "Fruit" }
++            ListElement { name: "Tomato"; details: "The tomato is the edible, often red fruit of the plant Solanum lycopersicum, commonly known as a tomato plant. Both the species and its use as a food originated in Mexico, and spread throughout the world following the Spanish colonization of the Americas. Its many varieties are now widely grown, sometimes in greenhouses in cooler climates. The tomato is consumed in diverse ways, including raw, as an ingredient in many dishes, sauces, salads, and drinks. While it is botanically a fruit, it is considered a vegetable for culinary purposes (as well as under U.S. customs regulations, see Nix v. Hedden), which has caused some confusion. The fruit is rich in lycopene, which may have beneficial health effects. The tomato belongs to the nightshade family (Solanaceae). The plants typically grow to 1–3 meters (3–10 ft) in height and have a weak stem that often sprawls over the ground and vines over other plants. It is a perennial in its native habitat, although often grown outdoors in temperate climates as an annual. An average common tomato weighs approximately 100 grams (4 oz).\n-\nWikipedia" }
++            ListElement { name: "Carrot"; details: "Vegetable" }
++            ListElement { name: "Potato"; details: "Vegetable" }
++        }
++
++        ListItem.ExpandablesListView {
++            anchors { left: parent.left; right: parent.right }
++            height: units.gu(24)
++            model: fruitModel
++            clip: true
++
++            delegate: ListItem.Expandable {
++                id: expandingItem
++
++                expandedHeight: contentColumn.height + units.gu(1)
++
++                onClicked: {
++                    expanded = true;
++                }
++
++                Column {
++                    id: contentColumn
++                    anchors { left: parent.left; right: parent.right }
++                    Item {
++                        anchors { left: parent.left; right: parent.right}
++                        height: expandingItem.collapsedHeight
++                        Toolkit.Label {
++                            anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter}
++                            text: model.name
++                        }
++                    }
++
++                    Toolkit.Label {
++                        anchors { left: parent.left; right: parent.right }
++                        text: model.details
++                        wrapMode: Text.WordWrap
++                    }
++                }
++            }
++        }
++    }
++
++    TemplateSection {
++        title: i18n.tr("ExpandablesColumn")
++        className: "Header"
++
++        ListItem.ExpandablesColumn {
++            anchors { left: parent.left; right: parent.right }
++            clip: true
++            height: units.gu(24)
++
++            Repeater {
++                model: 8
++                ListItem.Expandable {
++                    id: expandingColumnItem
++                    expandedHeight: contentColumn1.height + units.gu(1)
++                    collapseOnClick: index % 2 == 0
++
++                    onClicked: {
++                        expanded = true;
++                    }
++
++                    Column {
++                        id: contentColumn1
++                        anchors { left: parent.left; right: parent.right }
++                        Item {
++                            anchors { left: parent.left; right: parent.right}
++                            height: expandingColumnItem.collapsedHeight
++                            Toolkit.Label {
++                                anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter}
++                                text: "Item " + index + (expandingColumnItem.collapseOnClick ? " (with collapseOnClick)" : "")
++                            }
++                        }
++
++                        Toolkit.UbuntuShape {
++                            anchors { left: parent.left; right: parent.right }
++                            height: index % 2 == 0 ? units.gu(6) : units.gu(18)
++                            color: "khaki"
++                        }
++                    }
++                }
++            }
++        }
++    }
++
++    TemplateSection {
++        title: i18n.tr("Expandable")
++        className: "Header"
++
++        Column {
++            anchors { left: parent.left; right: parent.right }
++            clip: true
++
++            Repeater {
++                model: 2
++                ListItem.Expandable {
++                    id: expandingItem1
++                    expandedHeight: contentCol1.height + units.gu(1)
++
++                    onClicked: {
++                        expanded = !expanded;
++                    }
++
++                    Column {
++                        id: contentCol1
++                        anchors { left: parent.left; right: parent.right }
++                        Item {
++                            anchors { left: parent.left; right: parent.right}
++                            height: expandingItem1.collapsedHeight
++                            Toolkit.Label {
++                                anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter}
++                                text: "Item " + index
++                            }
++                        }
++
++                        Toolkit.UbuntuShape {
++                            anchors { left: parent.left; right: parent.right }
++                            height: index % 2 == 0 ? units.gu(6) : units.gu(18)
++                            color: "khaki"
++                        }
++                    }
++                }
++            }
++        }
++    }
+ }
 === modified file 'modules/Ubuntu/Components/ListItems/Base.qml'
 --- modules/Ubuntu/Components/ListItems/Base.qml	2013-11-07 19:45:58 +0000
 +++ modules/Ubuntu/Components/ListItems/Base.qml	2014-02-13 10:10:25 +0000
@@ -185,7 +185,7 @@
      /*!
        \internal
       */
--    property alias children: middle.children
++    property alias children: middle.data
      Item {
          id: middle
          property bool anchorToIconHelper: !__iconIsItem && iconHelper.source != ""
 === added file 'modules/Ubuntu/Components/ListItems/Expandable.qml'
 --- modules/Ubuntu/Components/ListItems/Expandable.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/ListItems/Expandable.qml	2014-02-13 10:10:25 +0000
@@ -0,0 +1,196 @@
++/*
++ * Copyright 2014 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++import QtQuick 2.0
++import Ubuntu.Components 0.1
++
++/*!
++    \qmltype Expandable
++    \inqmlmodule Ubuntu.Components.ListItems 0.1
++    \ingroup ubuntu-listitems
++    \brief An expandable list item with no contents.
++    The Expandable class can be used for generic list items containing other
++    components such as buttons. It subclasses \l Empty and thus brings all that
++    functionality, but additionally provides means to expand and collapse the item.
++
++    When used together with an \l ExpandablesListView or \l ExpandablesColumn it
++    can coordinate with other items in the list to make sure it is scrolled while
++    expanding to be fully visible in the view. Additionally it is made sure that
++    only one Expandable item is expanded at a time and it is collapsed when the
++    user clicks outside the item.
++
++    You can set \l expanded to true/false to expand/collapse the item.
++
++    Examples:
++    \qml
++        import Ubuntu.Components 0.1
++        import Ubuntu.Components.ListItems 0.1 as ListItem
++
++        Item {
++            ListModel {
++                id: listModel
++            }
++
++            ListItem.ExpandablesListView {
++                anchors { left: parent.left; right: parent.right }
++                height: units.gu(24)
++                model: listModel
++
++                delegate: ListItem.Expandable {
++                    id: expandingItem
++
++                    expandedHeight: units.gu(30)
++
++                    onClicked: {
++                        expanded = true;
++                    }
++                }
++            }
++        }
++    \endqml
++
++    \b{This component is under heavy development.}
++*/
++
++Empty {
++    id: root
++    implicitHeight: expanded ? priv.maxExpandedHeight : collapsedHeight
++
++    /*!
++      \preliminary
++      Reflects the expanded state. Set this to true/false to expand/collapse the item.
++     */
++    property bool expanded: false
++
++    /*!
++      \preliminary
++      The collapsed (normal) height of the item. Defaults to the standard height for list items.
++     */
++    property real collapsedHeight: __height
++
++    /*!
++      \preliminary
++      The expanded height of the item's content. Defaults to the same as collapsedHeight which
++      disables the expanding feature. In order for the item to be expandable, set this to the
++      expanded size. Note that the actual expanded size can be smaller if there is not enough
++      space in the containing list. In that case the item becomes flickable automatically.
++     */
++    property real expandedHeight: collapsedHeight
++
++    /*!
++      If set to true, the item will collapse again when the user clicks somewhere in the always
++      visible (when collapsed) area.
++     */
++    property bool collapseOnClick: false
++
++    /*!
++      \internal
++      Reparent any content to inside the Flickable
++     */
++    property alias children: flickableContent.data
++
++    /*! \internal */
++    QtObject {
++        id: priv
++
++        /*!
++          \internal
++          Points to the containing ExpandablesListView or ExpandablesColumn
++         */
++        property Item view: root.ListView.view ? root.ListView.view : (root.parent.parent.parent.hasOwnProperty("expandItem") ? root.parent.parent.parent : null)
++
++        /*! \internal
++          Gives information whether this item is inside a ExpandablesListView or ExpandablesColumn
++         */
++        readonly property bool isInExpandableList: view && view !== undefined && view.hasOwnProperty("expandItem") && view.hasOwnProperty("collapse")
++
++        /*! \internal
++          Gives information if there is another item expanded in the containing ExpandablesListView or ExpandablesColumn
++         */
++        readonly property bool otherExpanded: isInExpandableList && view.expandedItem !== null && view.expandedItem !== undefined && view.expandedItem !== root
++
++        /*! \internal
++          Gives information about the maximum expanded height, in case that is limited by the containing ExpandablesListView or ExpandablesColumn
++         */
++        readonly property real maxExpandedHeight: isInExpandableList ? Math.min(view.height - collapsedHeight, expandedHeight) : expandedHeight
++    }
++
++    states: [
++        State {
++            name: ""
++            PropertyChanges { target: root; opacity: 1 }
++        },
++        State {
++            name: "otherExpanded"; when: priv.otherExpanded
++            PropertyChanges { target: root; opacity: .5 }
++        },
++        State {
++            name: "expanded"; when: expanded
++            PropertyChanges { target: root; z: 3 }
++        }
++    ]
++
++    /*! \internal */
++    onExpandedChanged: {
++        if (!expanded) {
++            contentFlickable.contentY = 0;
++        }
++
++        if (priv.isInExpandableList) {
++            if (expanded) {
++                priv.view.expandItem(root);
++            } else {
++                priv.view.collapse();
++            }
++        }
++    }
++
++    Behavior on height {
++        UbuntuNumberAnimation {}
++    }
++    Behavior on opacity {
++        UbuntuNumberAnimation {}
++    }
++
++    Flickable {
++        id: contentFlickable
++        objectName: "__expandableContentFlickable"
++        anchors { fill: parent; leftMargin: root.__contentsMargins; rightMargin: __contentsMargins; bottomMargin: divider.height }
++        interactive: root.expanded && contentHeight > height + root.divider.height
++        contentHeight: root.expandedHeight
++        flickableDirection: Flickable.VerticalFlick
++        clip: true
++
++        Behavior on contentY {
++            UbuntuNumberAnimation {}
++        }
++
++        Item {
++            id: flickableContent
++            anchors {
++                left: parent.left
++                right: parent.right
++            }
++            height: childrenRect.height
++        }
++    }
++
++    MouseArea {
++        anchors { left: parent.left; top: parent.top; right: parent.right }
++        enabled: root.collapseOnClick && root.expanded
++        height: root.collapsedHeight
++        onClicked: root.expanded = false;
++    }
++}
 === added file 'modules/Ubuntu/Components/ListItems/ExpandablesColumn.qml'
 --- modules/Ubuntu/Components/ListItems/ExpandablesColumn.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/ListItems/ExpandablesColumn.qml	2014-02-13 10:10:25 +0000
@@ -0,0 +1,136 @@
++/*
++ * Copyright 2014 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import Ubuntu.Components 0.1
++
++/*!
++    \qmltype ExpandablesColumn
++    \inqmlmodule Ubuntu.Components.ListItems 0.1
++    \ingroup ubuntu-listitems
++    \brief A column to be used together with the \l Expandable item.
++    This lays out its content just like a regular Column inside a Flickable but
++    when used together with items of type \l Expandable it provides additional features
++    like automatically positioning the expanding item when it expands and collapsing
++    it again when the user taps outside of it.
++
++    Examples:
++    \qml
++        import Ubuntu.Components 0.1
++        import Ubuntu.Components.ListItems 0.1 as ListItem
++
++        ListItem.ExpandablesColumn {
++            anchors { left: parent.left; right: parent.right }
++            height: units.gu(24)
++
++            Repeater {
++                model: 8
++                ListItem.Expandable {
++                    expandedHeight: units.gu(30)
++
++                    onClicked: {
++                        expanded = true;
++                    }
++                }
++            }
++        }
++    \endqml
++
++    \b{This component is under heavy development.}
++*/
++
++Flickable {
++    id: root
++    contentHeight: column.height
++
++    /*!
++      \preliminary
++      Points to the currently expanded item. Null if no item is expanded.
++      \qmlproperty Item expandedItem
++     */
++    readonly property alias expandedItem: priv.expandedItem
++
++    /*!
++      \preliminary
++      Expand the given item. The item must be a child of this ListView.
++     */
++    function expandItem(item) {
++        if (!item.hasOwnProperty("expandedHeight") || !item.hasOwnProperty("collapsedHeight")) {
++            return;
++        }
++
++        if (priv.expandedItem != null) {
++            priv.expandedItem.expanded = false;
++        }
++        priv.expandedItem = item;
++
++        var maxExpandedHeight = root.height - item.collapsedHeight;
++        var expandedItemHeight = Math.min(item.expandedHeight, maxExpandedHeight);
++        var bottomIntersect = root.mapFromItem(item).y + expandedItemHeight - maxExpandedHeight;
++        if (bottomIntersect > 0) {
++            contentY += bottomIntersect;
++        }
++    }
++
++    /*!
++      \preliminary
++      Collapse the currently expanded item. If there isn't any item expanded, this function does nothing.
++     */
++    function collapse() {
++        priv.expandedItem.expanded = false;
++        priv.expandedItem = null;
++    }
++
++    /*!
++      \internal
++      Reparent any content to inside the Column.
++     */
++    default property alias children: column.data
++
++    /*! \internal */
++    QtObject {
++        id: priv
++
++        /*! \internal
++          Points to the currently expanded item. Null if no item is expanded.
++         */
++        property var expandedItem: null
++    }
++
++    Behavior on contentY {
++        UbuntuNumberAnimation { }
++    }
++
++    Column {
++        id: column
++        anchors { left: parent.left; right: parent.right }
++
++    }
++
++    MouseArea {
++        anchors {left: parent.left; right: parent.right; top: parent.top }
++        height: root.mapFromItem(priv.expandedItem).y + root.contentY
++        enabled: priv.expandedItem != null
++        onClicked: root.collapse();
++    }
++
++    MouseArea {
++        anchors {left: parent.left; right: parent.right; bottom: parent.bottom }
++        height: priv.expandedItem != null ? root.contentHeight - (root.mapFromItem(priv.expandedItem).y + root.contentY + priv.expandedItem.height) : 0
++        enabled: priv.expandedItem != null
++        onClicked: root.collapse();
++    }
++}
 === added file 'modules/Ubuntu/Components/ListItems/ExpandablesListView.qml'
 --- modules/Ubuntu/Components/ListItems/ExpandablesListView.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/ListItems/ExpandablesListView.qml	2014-02-13 10:10:25 +0000
@@ -0,0 +1,126 @@
++/*
++ * Copyright 2014 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import Ubuntu.Components 0.1
++
++/*!
++    \qmltype ExpandablesListView
++    \inqmlmodule Ubuntu.Components.ListItems 0.1
++    \ingroup ubuntu-listitems
++    \brief A ListView to be used together with the \l Expandable item.
++    The ExpandablesListView works just like a regular ListView, but is intended
++    to be used with together with \l Expandable items as delegates.
++    It provides additional features like automatically positioning the expanding
++    item when it expands and collapsing it again when the user taps outside of it.
++
++    Examples:
++    \qml
++        import Ubuntu.Components 0.1
++        import Ubuntu.Components.ListItems 0.1 as ListItem
++
++        Item {
++            ListModel {
++                id: listModel
++            }
++
++            ListItem.ExpandablesListView {
++                anchors { left: parent.left; right: parent.right }
++                height: units.gu(24)
++                model: listModel
++
++                delegate: ListItem.Expandable {
++                    id: expandingItem
++
++                    expandedHeight: units.gu(30)
++
++                    onClicked: {
++                        expanded = true;
++                    }
++                }
++            }
++        }
++    \endqml
++
++    \b{This component is under heavy development.}
++*/
++
++ListView {
++    id: root
++
++    /*!
++      \preliminary
++      Points to the currently expanded item. Null if no item is expanded.
++      \qmlproperty Item expandedItem
++     */
++    readonly property alias expandedItem: priv.expandedItem
++
++    /*!
++      \preliminary
++      Expand the given item. The item must be a child of this ListView.
++     */
++    function expandItem(item) {
++        if (!item.hasOwnProperty("expandedHeight") || !item.hasOwnProperty("collapsedHeight")) {
++            return;
++        }
++
++        if (priv.expandedItem != null) {
++            priv.expandedItem.expanded = false;
++        }
++        item.expanded = true;
++        priv.expandedItem = item;
++
++        var itemY = contentItem.mapFromItem(item).y;
++        var itemHeight = item.expandedHeight;
++        var itemIndex = indexAt(item.x, item.y);
++
++        var bottomSpacing = itemIndex == model.count - 1 ? 0 : item.collapsedHeight;
++        if (itemY + itemHeight > height + contentY - bottomSpacing) {
++            contentY = Math.min(itemY, itemY + itemHeight - height + bottomSpacing);
++        }
++    }
++
++    /*!
++      \preliminary
++      Collapse the currently expanded item. If there isn't any item expanded, this function does nothing.
++     */
++    function collapse() {
++        priv.expandedItem.expanded = false;
++        priv.expandedItem = null;
++    }
++
++    /*! \internal */
++    QtObject {
++        id: priv
++
++        /*! \internal
++          Points to the currently expanded item. Null if no item is expanded.
++         */
++        property Item expandedItem: null
++    }
++
++    Behavior on contentY {
++        UbuntuNumberAnimation {}
++    }
++
++    MouseArea {
++        parent: contentItem
++        anchors.fill: parent
++        z: 2
++        enabled: priv.expandedItem != null
++        onClicked: root.collapse();
++    }
++}
 === modified file 'modules/Ubuntu/Components/ListItems/qmldir'
 --- modules/Ubuntu/Components/ListItems/qmldir	2013-11-29 14:15:51 +0000
 +++ modules/Ubuntu/Components/ListItems/qmldir	2014-02-13 10:10:25 +0000
@@ -14,3 +14,6 @@
  Subtitled 0.1 Subtitled.qml
  SingleControl 0.1 SingleControl.qml
  ThinDivider 0.1 ThinDivider.qml
++ExpandablesListView 0.1 ExpandablesListView.qml
++ExpandablesColumn 0.1 ExpandablesColumn.qml
++Expandable 0.1 Expandable.qml
 === modified file 'modules/Ubuntu/Test/UbuntuTestCase.qml'
 --- modules/Ubuntu/Test/UbuntuTestCase.qml	2013-12-02 17:36:20 +0000
 +++ modules/Ubuntu/Test/UbuntuTestCase.qml	2014-02-13 10:10:25 +0000
@@ -33,15 +33,20 @@
  	/*!
  		Find a child from the item based on the objectName.
  	*/
--    function findChild(obj,objectName) {
--        for (var i in obj.children) {
--            var child = obj.children[i];
--            if (child.objectName === objectName) return child;
--            var subChild = findChild(child,objectName);
--            if (subChild !== undefined) return subChild;
--        }
--        return undefined;
--    }
++	function findChild(obj,objectName) {
++		var childs = new Array(0);
++		childs.push(obj)
++		while (childs.length > 0) {
++			if (childs[0].objectName == objectName) {
++				return childs[0]
++			}
++			for (var i in childs[0].data) {
++				childs.push(childs[0].data[i])
++			}
++			childs.splice(0, 1);
++		}
++		return null;
++	}
  	/*!
  		Move Mouse from x,y to distance of dx, dy divided to steps with a stepdelay (ms).
 === added file 'tests/unit_x11/tst_components/tst_Expandable.qml'
 --- tests/unit_x11/tst_components/tst_Expandable.qml	1970-01-01 00:00:00 +0000
 +++ tests/unit_x11/tst_components/tst_Expandable.qml	2014-02-13 10:10:25 +0000
@@ -0,0 +1,119 @@
++/*
++ * Copyright 2012 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import QtTest 1.0
++import Ubuntu.Test 0.1
++import Ubuntu.Components 0.1
++import Ubuntu.Components.ListItems 0.1
++
++Item {
++    width: units.gu(40)
++    height: units.gu(60)
++
++    ExpandablesColumn {
++        id: expandablesColumn
++        anchors { left: parent.left; top: parent.top; right: parent.right }
++        height: units.gu(60)
++
++        Expandable {
++            id: expandable
++            expandedHeight: contentColumn.height
++
++            onClicked: expanded = !expanded
++
++            Column {
++                id: contentColumn
++                anchors { left: parent.left; right: parent.right; top: parent.top }
++                Rectangle {
++                    anchors { left: parent.left; right: parent.right}
++                    id: collapsedRect
++                    color: "khaki"
++                    height: expandable.collapsedHeight
++                }
++                Rectangle {
++                    anchors { left: parent.left; right: parent.right }
++                    height: units.gu(40)
++                    color: "orange"
++                }
++            }
++        }
++    }
++
++    UbuntuTestCase {
++        name: "Expandable"
++        when: windowShown
++
++        function test_expanding_collapsing() {
++            waitForRendering(expandable);
++            // expand it and make sure it eventually reaches the expandedHeight
++            expandable.expanded = true;
++            tryCompare(expandable, "height", contentColumn.height);
++
++            // Item's flickable must not be interactive when the full expandedHeight fits
++            var flickable = findChild(expandable, "__expandableContentFlickable");
++            compare(flickable.interactive, false);
++
++            // collapse it and make sure it eventually reaches the collapsedHeight
++            expandable.expanded = false;
++            tryCompare(expandable, "height", expandable.collapsedHeight);
++        }
++
++        function test_maxExpandingHeight() {
++            // resize the column to something smaller
++            expandablesColumn.height = units.gu(30);
++
++            // Item's flickable must not be interactive when collapsed
++            var flickable = findChild(expandable, "__expandableContentFlickable");
++            compare(flickable.interactive, false);
++
++            expandable.expanded = true;
++            tryCompare(expandable, "height", expandablesColumn.height - expandable.collapsedHeight);
++
++            // Now that we're expanded and don't fit into the parent, flicking must be enabled
++            compare(flickable.interactive, true);
++        }
++
++        function test_restoreCollapsingFlickable() {
++            // resize the column to something smaller
++            expandablesColumn.height = units.gu(30);
++
++            expandable.expanded = true;
++            tryCompare(expandable, "height", expandablesColumn.height - expandable.collapsedHeight);
++
++            var flickable = findChild(expandable, "__expandableContentFlickable");
++            flickable.flick(0, -units.gu(500))
++            tryCompare(flickable, "flicking", false);
++
++            // contentY should be off the grid now
++            verify(flickable.contentY != 0);
++
++            // Now collapse and make sure that the contentY ends up again at 0
++            expandable.expanded = false;
++            tryCompare(expandable, "height", expandable.collapsedHeight);
++            compare(flickable.contentY, 0);
++        }
++
++        function cleanup() {
++            // Restore listview height
++            expandablesColumn.height = units.gu(60);
++
++            // restore collapsed state
++            expandable.expanded = false;
++            tryCompare(expandable, "height", expandable.collapsedHeight);
++        }
++    }
++}
 === added file 'tests/unit_x11/tst_components/tst_ExpandablesColumn.qml'
 --- tests/unit_x11/tst_components/tst_ExpandablesColumn.qml	1970-01-01 00:00:00 +0000
 +++ tests/unit_x11/tst_components/tst_ExpandablesColumn.qml	2014-02-13 10:10:25 +0000
@@ -0,0 +1,157 @@
++/*
++ * Copyright 2012 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import QtTest 1.0
++import Ubuntu.Test 0.1
++import Ubuntu.Components 0.1
++import Ubuntu.Components.ListItems 0.1
++
++Item {
++    width: units.gu(40)
++    height: units.gu(60)
++
++    ExpandablesColumn {
++        id: expandablesColumn
++        anchors { left: parent.left; top: parent.top; right: parent.right }
++        height: units.gu(60)
++        clip: true
++
++        Repeater {
++            id: repeater
++            model: 20
++            delegate: Expandable {
++                id: expandable
++                objectName: "expandable" + index
++                expandedHeight: contentColumn.height
++
++                onClicked: expanded = !expanded
++
++                Column {
++                    id: contentColumn
++                    anchors { left: parent.left; right: parent.right; top: parent.top }
++                    Rectangle {
++                        anchors { left: parent.left; right: parent.right}
++                        id: collapsedRect
++                        color: index % 2 == 0 ? "khaki" : "blue"
++                        height: expandable.collapsedHeight
++                    }
++                    Rectangle {
++                        anchors { left: parent.left; right: parent.right }
++                        height: units.gu(40)
++                        color: "orange"
++                    }
++                }
++            }
++        }
++    }
++
++    UbuntuTestCase {
++        name: "ExpandablesColumn"
++        when: windowShown
++
++        function init() {
++            waitForRendering(expandablesColumn);
++        }
++
++        function expandItem(item) {
++            item.expanded = true;
++            var targetHeight = Math.min(item.expandedHeight, expandablesColumn.height - item.collapsedHeight);
++            tryCompare(item, "height", targetHeight);
++        }
++
++        function collapse() {
++            var expandedItem = expandablesColumn.expandedItem;
++            if (expandedItem != undefined) {
++                expandedItem.expanded = false;
++                tryCompare(expandedItem, "height", expandedItem.collapsedHeight);
++            }
++        }
++
++        function test_expandedItem() {
++            var item = findChild(expandablesColumn, "expandable1");
++            expandItem(item);
++
++            // expandedItem needs to point to the expanded item
++            compare(expandablesColumn.expandedItem, item);
++
++            collapse();
++
++            // expandedItem must be unset after collapsing
++            compare(expandablesColumn.expandedItem, undefined);
++        }
++
++        function test_noScrollingNeeded() {
++            var item = findChild(expandablesColumn, "expandable1");
++            compare(expandablesColumn.mapFromItem(item).y, item.collapsedHeight);
++
++            expandItem(item);
++
++            compare(expandablesColumn.mapFromItem(item).y, item.collapsedHeight);
++        }
++
++        function test_scrollToTop() {
++            expandablesColumn.height = units.gu(30);
++
++            var item = findChild(expandablesColumn, "expandable1");
++            compare(expandablesColumn.mapFromItem(item).y, item.collapsedHeight);
++
++            expandItem(item);
++
++            compare(expandablesColumn.mapFromItem(item).y, 0);
++        }
++
++        function test_scrollIntoView() {
++            var item = findChild(expandablesColumn, "expandable9");
++            expandItem(item);
++
++            // The item must be scrolled upwards, leaving space for one other item at the bottom
++            compare(expandablesColumn.mapFromItem(item).y, expandablesColumn.height - item.collapsedHeight - item.expandedHeight);
++        }
++
++        function test_collapseByClickingOutside() {
++            // expand item 0
++            var item = findChild(expandablesColumn, "expandable0");
++            expandItem(item);
++
++            // click on item 1
++            var item1 = findChild(expandablesColumn, "expandable1");
++            mouseClick(item1, item1.width / 2, item1.height / 2);
++
++            // make sure item1 is collapsed
++            tryCompare(item, "expanded", false);
++        }
++
++        function test_dimOthers() {
++            var item = findChild(expandablesColumn, "expandable1");
++            expandItem(item);
++
++            for (var i = 0; i < repeater.count; ++i) {
++                var isCurrent = (repeater.itemAt(i) === expandablesColumn.expandedItem)
++                compare(repeater.itemAt(i).opacity, isCurrent ? 1 : .5)
++            }
++        }
++
++        function cleanup() {
++            // Restore listview height
++            expandablesColumn.height = units.gu(60);
++            collapse();
++            // scroll the column back to top
++            expandablesColumn.flick(0, units.gu(500));
++            tryCompare(expandablesColumn, "flicking", false);
++        }
++    }
++}
 === added file 'tests/unit_x11/tst_components/tst_ExpandablesListView.qml'
 --- tests/unit_x11/tst_components/tst_ExpandablesListView.qml	1970-01-01 00:00:00 +0000
 +++ tests/unit_x11/tst_components/tst_ExpandablesListView.qml	2014-02-13 10:10:25 +0000
@@ -0,0 +1,170 @@
++/*
++ * Copyright 2012 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import QtTest 1.0
++import Ubuntu.Test 0.1
++import Ubuntu.Components 0.1
++import Ubuntu.Components.ListItems 0.1
++
++Item {
++    width: units.gu(40)
++    height: units.gu(60)
++
++    ListModel {
++        id: dummyModel
++        Component.onCompleted: {
++            for (var i = 0; i < 20; ++i) {
++                dummyModel.append({idx: i});
++            }
++        }
++    }
++
++    ExpandablesListView {
++        id: expandablesListView
++        anchors { left: parent.left; top: parent.top; right: parent.right }
++        height: units.gu(60)
++        clip: true
++        model: dummyModel
++
++        delegate: Expandable {
++            id: expandable
++            objectName: "expandable" + index
++            expandedHeight: contentColumn.height
++
++            onClicked: expanded = !expanded
++
++            Column {
++                id: contentColumn
++                anchors { left: parent.left; right: parent.right; top: parent.top }
++                Rectangle {
++                    anchors { left: parent.left; right: parent.right}
++                    id: collapsedRect
++                    color: index % 2 == 0 ? "khaki" : "blue"
++                    height: expandable.collapsedHeight
++                }
++                Rectangle {
++                    anchors { left: parent.left; right: parent.right }
++                    height: units.gu(40)
++                    color: "orange"
++                }
++            }
++        }
++    }
++
++    UbuntuTestCase {
++        name: "ExpandablesListView"
++        when: windowShown
++
++        function initTestCase() {
++            tryCompare(dummyModel, "count", 20);
++        }
++
++        function init() {
++            waitForRendering(expandablesListView);
++        }
++
++        function expandItem(item) {
++            item.expanded = true;
++            var targetHeight = Math.min(item.expandedHeight, expandablesListView.height - item.collapsedHeight);
++            tryCompare(item, "height", targetHeight);
++        }
++
++        function collapse() {
++            var expandedItem = expandablesListView.expandedItem;
++            if (expandedItem != undefined && expandedItem != null) {
++                expandedItem.expanded = false;
++                tryCompare(expandedItem, "height", expandedItem.collapsedHeight);
++            }
++        }
++
++        function test_expandedItem() {
++            var item = findChild(expandablesListView, "expandable1");
++            expandItem(item);
++
++            // expandedItem needs to point to the expanded item
++            compare(expandablesListView.expandedItem, item);
++
++            collapse();
++
++            // expandedItem must be unset after collapsing
++            compare(expandablesListView.expandedItem, null);
++        }
++
++        function test_noScrollingNeeded() {
++            var item = findChild(expandablesListView, "expandable1");
++            fuzzyCompare(expandablesListView.mapFromItem(item).y, item.collapsedHeight, .5);
++
++            expandItem(item);
++
++            fuzzyCompare(expandablesListView.mapFromItem(item).y, item.collapsedHeight, .5);
++        }
++
++        function test_scrollToTop() {
++            expandablesListView.height = units.gu(30);
++
++            var item = findChild(expandablesListView, "expandable1");
++            fuzzyCompare(expandablesListView.mapFromItem(item).y, item.collapsedHeight, .5);
++
++            expandItem(item);
++
++            fuzzyCompare(expandablesListView.mapFromItem(item).y, 0, .5);
++        }
++
++        function test_scrollIntoView() {
++            var item = findChild(expandablesListView, "expandable9");
++            expandItem(item);
++
++            // The item must be scrolled upwards, leaving space for one other item at the bottom
++            fuzzyCompare(expandablesListView.mapFromItem(item).y, expandablesListView.height - item.collapsedHeight - item.expandedHeight, .5);
++        }
++
++        function test_collapseByClickingOutside() {
++            // expand item 0
++            var item = findChild(expandablesListView, "expandable0");
++            expandItem(item);
++
++            // click on item 1
++            var item1 = findChild(expandablesListView, "expandable1");
++            mouseClick(item1, item1.width / 2, item1.height / 2);
++
++            // make sure item1 is collapsed
++            tryCompare(item, "expanded", false);
++        }
++
++        function test_dimOthers() {
++            var item = findChild(expandablesListView, "expandable1");
++            expandItem(item);
++
++            for (var i = 0; i < expandablesListView.contentItem.children.length; ++i) {
++                var childItem = expandablesListView.contentItem.children[i];
++                if (childItem.hasOwnProperty("expanded")) {
++                    compare(childItem.opacity, childItem.expanded ? 1 : .5)
++                }
++
++            }
++        }
++
++        function cleanup() {
++            // Restore listview height
++            expandablesListView.height = units.gu(60);
++            collapse();
++            // scroll the ListView back to top
++            expandablesListView.flick(0, units.gu(500));
++            tryCompare(expandablesListView, "flicking", false);
++        }
++    }
++}
 === modified file 'tests/unit_x11/tst_components/tst_pickerpanel.qml'
 --- tests/unit_x11/tst_components/tst_pickerpanel.qml	2014-01-20 07:41:16 +0000
 +++ tests/unit_x11/tst_components/tst_pickerpanel.qml	2014-02-13 10:10:25 +0000
@@ -152,6 +152,7 @@
          // forced panel tests
          // these should be executed as last ones
          function test_2_clickOndefaultMode() {
++            waitForRendering(PickerPanel);
              // force panel - this is private specific!!!
              var privates = findChild(PickerPanel, "PickerPanel_Internals");
              privates.isPhone = true;
 === modified file 'tests/unit_x11/tst_test/tst_ubuntutestcase.qml'
 --- tests/unit_x11/tst_test/tst_ubuntutestcase.qml	2013-07-24 14:05:48 +0000
 +++ tests/unit_x11/tst_test/tst_ubuntutestcase.qml	2014-02-13 10:10:25 +0000
@@ -52,11 +52,11 @@
      function test_findChild() {
          var child = findChild(root,"myMouseArea");
--        compare(child!==undefined,true, "When a child is found, it is returned");
++        compare(child!==null,true, "When a child is found, it is returned");
          compare(child.objectName,"myMouseArea");
          child = findChild(root,"NoSuchChildHere");
--        compare(child===undefined,true,"When there is no child, function should return undefined");
++        compare(child===null,true,"When there is no child, function should return null");
+     }
+  }
+ }