Ubuntu UI Toolkit

components.api (+3/-0)
examples/ubuntu-ui-toolkit-gallery/ListItems.qml (+51/-0)
modules/Ubuntu/Components/ListItems/Expandable.qml (+30/-7)
modules/Ubuntu/Components/UbuntuListView.qml (+121/-0)
modules/Ubuntu/Components/qmldir (+1/-0)
modules/Ubuntu/Test/UbuntuTestCase.qml (+35/-0)
tests/unit_x11/tst_components/tst_ubuntulistview.qml (+198/-0)

To merge this branch:

bzr merge lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview

High

Fix Released

Link a bug report

Reviewer	Review Type	Date Requested	Status
Zsombor Egri		2014-02-13	Approve on 2014-02-26
PS Jenkins bot	continuous-integration		Approve on 2014-02-26
Review via email: mp+206161@code.launchpad.net

Commit message

Introduce the almighty UbuntuListView. So far not /that/ mighty tho. Can only deal with Expandables.

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

941. By Michael Zanetti on 2014-02-13: merge prerequisite branch
942. By Michael Zanetti on 2014-02-13: add UbuntuListView to the gallery

Revision history for this message

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

FAILED: Continuous integration, rev:942
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1728/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3201
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/2882/console
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/676
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/676
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/676/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2814
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3203
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3203/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/2884
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/2884/artifact/work/output/*zip*/output.zip
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-mako/5289/console
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/3915

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

review: Needs Fixing (continuous-integration)

Revision history for this message

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

"can only deal with Expandables" - I guess it can also deal with other elements in between, right?

Revision history for this message

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

I see you still have the item-based property/function. We agreed that this is not good as when scrolled out of the cacheBuffer, ListView will re-create the item when scrolled back and will no longer be the same instance as the previous one...
Or are you still working on that?

Revision history for this message

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

yep... didn't get to it yet... Had to do unity8 stuff for MWC. Will get to this now.

Revision history for this message

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

> "can only deal with Expandables" - I guess it can also deal with other
> elements in between, right?

Yes, it can. However, in terms of "mightyness" it adds only the Expandables compared with the standard ListView.

lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview updated on 2014-02-24

943. By Michael Zanetti on 2014-02-24: change UbuntuListView to work with expandedIndex instead of expandedItem
944. By Michael Zanetti on 2014-02-24: merge trunk
945. By Michael Zanetti on 2014-02-24: fix docs
946. By Michael Zanetti on 2014-02-24: merge prerequisite
947. By Michael Zanetti on 2014-02-24: remove preliminary from docstring

Revision history for this message

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

FAILED: Continuous integration, rev:943
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1768/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3459/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/3100/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/716/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/716/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3462/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/3102/console

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

review: Needs Fixing (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview updated on 2014-02-24

948. By Michael Zanetti on 2014-02-24: readd tests for UbuntuListView

Revision history for this message

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

Ok. Changed the UbuntuListView to operate on an expandedIndex instead of an expandedItem. Definitely makes more sense this way.

This also touches the ExpandableItem a bit to add support for a parent Column and a parent ListView to it.

Revision history for this message

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

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

review: Approve (continuous-integration)

Revision history for this message

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

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

review: Approve (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview updated on 2014-02-25

949. By Michael Zanetti on 2014-02-25: merge prerequistite branch

Revision history for this message

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

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

review: Approve (continuous-integration)

Revision history for this message

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

96 + Gives information whether this item is inside an item based container supporting Expandable items, such as ExpandablesColumn
97 + */
98 + readonly property bool isInExpandableColumn: view && view !== undefined && view.hasOwnProperty("expandItem") && view.hasOwnProperty("collapse")

"expandedItem" does no longer exist for the UbuntuListView... Same everywhere.

review: Needs Fixing

Revision history for this message

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

> 96 + Gives information whether this item is inside an item based
> container supporting Expandable items, such as ExpandablesColumn
> 97 + */
> 98 + readonly property bool isInExpandableColumn: view && view !==
> undefined && view.hasOwnProperty("expandItem") &&
> view.hasOwnProperty("collapse")
>
> "expandedItem" does no longer exist for the UbuntuListView... Same everywhere.

Aaaah, forget about this :)

lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview updated on 2014-02-25

950. By Michael Zanetti on 2014-02-25

added a test for moving expanded item out of the view and bringing it back in.

fix issue with originY not being taken into account which was breaking logic in some circumstances

951. By Michael Zanetti on 2014-02-25

change UbuntuTestCase::tryCompareFunction to provide an optional timeout parameter

Revision history for this message

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

Excellent stuff! Thanks again!

review: Approve

Revision history for this message

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

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

review: Approve (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview updated on 2014-02-25

952. By Michael Zanetti on 2014-02-25: fix year in test header

Revision history for this message

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

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

review: Approve (continuous-integration)

Revision history for this message

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

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

review: Approve (continuous-integration)

lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview updated on 2014-02-26

953. By Michael Zanetti on 2014-02-26: fix className reference in gallery
954. By Michael Zanetti on 2014-02-26: merge prerequisite

Revision history for this message

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

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

review: Approve (continuous-integration)

Revision history for this message

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

CI@home is all green.

review: Approve

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-26 09:47:24 +0000
 +++ components.api	2014-02-26 09:47:24 +0000
@@ -567,6 +567,9 @@
      property Item pageStack
      property bool opened
      property bool locked
++modules/Ubuntu/Components/UbuntuListView.qml
++ListView
++    property int expandedIndex
  modules/Ubuntu/Components/UbuntuNumberAnimation.qml
  NumberAnimation
  modules/Ubuntu/Components/UbuntuShape.qml
 === modified file 'examples/ubuntu-ui-toolkit-gallery/ListItems.qml'
 --- examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2014-02-26 09:47:24 +0000
 +++ examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2014-02-26 09:47:24 +0000
@@ -224,6 +224,57 @@
+     }
      TemplateSection {
++        title: i18n.tr("UbuntuListView")
++        className: "UbuntuListView"
++
++        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" }
++        }
++
++        Toolkit.UbuntuListView {
++            id: ubuntuListView
++            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: {
++                    ubuntuListView.expandedIndex = index;
++                }
++
++                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: "ExpandablesColumn"
 === modified file 'modules/Ubuntu/Components/ListItems/Expandable.qml'
 --- modules/Ubuntu/Components/ListItems/Expandable.qml	2014-02-26 09:47:24 +0000
 +++ modules/Ubuntu/Components/ListItems/Expandable.qml	2014-02-26 09:47:24 +0000
@@ -25,7 +25,7 @@
      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 UbuntuListView or \l ExpandablesColumn it
++    When used together with an \l UbuntuListView 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
@@ -110,19 +110,25 @@
          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")
++          Gives information whether this item is inside an item based container supporting Expandable items, such as ExpandablesColumn
++         */
++        readonly property bool isInExpandableColumn: view && view !== undefined && view.hasOwnProperty("expandItem") && view.hasOwnProperty("collapse")
++
++        /*! \internal
++          Gives information whether this item is inside an index based container supporting Expandable items, such as UbuntuListView
++         */
++        readonly property bool isInExpandableListView: view && view !== undefined && view.hasOwnProperty("expandedIndex")
          /*! \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
++        readonly property bool otherExpanded: (isInExpandableColumn && view.expandedItem !== null && view.expandedItem !== undefined && view.expandedItem !== root)
++                                              || (isInExpandableListView && view.expandedIndex !== -1 && view.expandedIndex !== index)
          /*! \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
++        readonly property real maxExpandedHeight: (isInExpandableColumn || isInExpandableListView) ? Math.min(view.height - collapsedHeight, expandedHeight) : expandedHeight
+     }
      states: [
@@ -140,13 +146,30 @@
+         }
+     ]
++    Component.onCompleted: {
++        if (priv.isInExpandableListView && priv.view.expandedIndex == index) {
++            root.expanded = true;
++        }
++    }
++
++    Connections {
++        target: priv.isInExpandableListView ? priv.view : null
++        onExpandedIndexChanged: {
++            if (priv.view.expandedIndex == index) {
++                root.expanded = true;
++            } else if (root.expanded = true) {
++                root.expanded = false;
++            }
++        }
++    }
++
      /*! \internal */
      onExpandedChanged: {
          if (!expanded) {
              contentFlickable.contentY = 0;
+         }
--        if (priv.isInExpandableList) {
++        if (priv.isInExpandableColumn) {
              if (expanded) {
                  priv.view.expandItem(root);
              } else {
 === added file 'modules/Ubuntu/Components/UbuntuListView.qml'
 --- modules/Ubuntu/Components/UbuntuListView.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/UbuntuListView.qml	2014-02-26 09:47:24 +0000
@@ -0,0 +1,121 @@
++/*
++ * 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 as Toolkit
++
++/*!
++    \qmltype UbuntuListView
++    \inqmlmodule Ubuntu.Components 0.1
++    \ingroup ubuntu
++    \brief A ListView with special features tailored for a look and feel fitting the
++    Ubuntu Touch platform.
++    The UbuntuListView works just like a regular ListView, but it adds special features
++    such as expanding/collapsing items (when used together with the Expandable item).
++    It provides 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
++            }
++
++            UbuntuListView {
++                id: ubuntuListView
++                anchors { left: parent.left; right: parent.right }
++                height: units.gu(24)
++                model: listModel
++
++                delegate: ListItem.Expandable {
++                    id: expandingItem
++
++                    expandedHeight: units.gu(30)
++
++                    onClicked: {
++                        ubuntuListView.expandedIndex = index;
++                    }
++                }
++            }
++        }
++    \endqml
++
++    \b{This component is under heavy development.}
++*/
++
++ListView {
++    id: root
++
++    /*!
++      The index of the currently expanded item. -1 if no item is expanded.
++     */
++    property int expandedIndex: -1
++
++    QtObject {
++        id: priv
++
++        function positionViewAtIndexAnimated(expandedIndex) {
++            animation.from = root.contentY;
++            root.currentIndex = expandedIndex;
++            if (expandedIndex == root.count - 1) {
++                root.positionViewAtIndex(expandedIndex, ListView.End);
++            } else {
++                root.positionViewAtIndex(expandedIndex + 1, ListView.End);
++            }
++
++            var effectiveExpandedHeight = Math.min(root.currentItem.expandedHeight, root.height - root.currentItem.collapsedHeight);
++            if (root.contentY - root.originY == 0) {
++                if (((root.currentIndex + 1) * root.currentItem.collapsedHeight) + effectiveExpandedHeight > root.height) {
++                    animation.to = ((root.currentIndex + 1) * root.currentItem.collapsedHeight + effectiveExpandedHeight) - root.height + root.originY
++                } else {
++                    animation.to = root.originY
++                }
++            } else {
++                animation.to = root.contentY + (effectiveExpandedHeight - root.currentItem.collapsedHeight);
++            }
++            animation.start();
++        }
++    }
++
++    /*!
++      \preliminary
++      Expand the item at the given index.
++     */
++    onExpandedIndexChanged: {
++        if (expandedIndex < 0) {
++            return;
++        }
++        priv.positionViewAtIndexAnimated(expandedIndex, ListView.End)
++    }
++
++    UbuntuNumberAnimation {
++        id: animation
++        target: root
++        property: "contentY"
++    }
++
++    MouseArea {
++        parent: contentItem
++        anchors.fill: parent
++        z: 2
++        enabled: root.expandedIndex != -1
++        onClicked: root.expandedIndex = -1;
++    }
++}
 === modified file 'modules/Ubuntu/Components/qmldir'
 --- modules/Ubuntu/Components/qmldir	2014-01-21 18:27:23 +0000
 +++ modules/Ubuntu/Components/qmldir	2014-02-26 09:47:24 +0000
@@ -43,6 +43,7 @@
  StyledItem 0.1 StyledItem.qml
  ColorUtils 0.1 colorUtils.js
  DateUtils 0.1 dateUtils.js
++UbuntuListView 0.1 UbuntuListView.qml
  internal TextCursor TextCursor.qml
  internal TextInputPopover TextInputPopover.qml
 === modified file 'modules/Ubuntu/Test/UbuntuTestCase.qml'
 --- modules/Ubuntu/Test/UbuntuTestCase.qml	2014-02-19 10:49:07 +0000
 +++ modules/Ubuntu/Test/UbuntuTestCase.qml	2014-02-26 09:47:24 +0000
@@ -29,6 +29,9 @@
      This class extends the default QML TestCase class which is available in QtTest 1.0.
  */
  TestCase {
++	TestUtil {
++		id:util
++	}
  	/*!
  		Find a child from the item based on the objectName.
@@ -83,5 +86,37 @@
  			mouseMove(item,x + ix,y + iy,stepdelay);
+ 		}
+ 	}
++
++	/*!
++		Keeps executing a given parameter-less function until it returns the given
++		expected result or the timemout is reached (in which case a test failure
++		is generated)
++	*/
++
++	function tryCompareFunction(func, expectedResult, timeout) {
++		var timeSpent = 0
++		var success = false
++		var actualResult
++		if (timeout == undefined) {
++                    timeout = 5000;
++                }
++		while (timeSpent < timeout && !success) {
++			actualResult = func()
++			success = qtest_compareInternal(actualResult, expectedResult)
++			if (success === false) {
++				wait(50)
++				timeSpent += 50
++			}
++		}
++
++		var act = qtest_results.stringify(actualResult)
++		var exp = qtest_results.stringify(expectedResult)
++		if (!qtest_results.compare(success,
++				"function returned unexpected result",
++				act, exp,
++				util.callerFile(), util.callerLine())) {
++			throw new Error("QtQuickTest::fail")
++		}
++	}
+ }
 === added file 'tests/unit_x11/tst_components/tst_ubuntulistview.qml'
 --- tests/unit_x11/tst_components/tst_ubuntulistview.qml	1970-01-01 00:00:00 +0000
 +++ tests/unit_x11/tst_components/tst_ubuntulistview.qml	2014-02-26 09:47:24 +0000
@@ -0,0 +1,198 @@
++/*
++ * 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 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});
++            }
++        }
++    }
++
++    UbuntuListView {
++        id: ubuntuListView
++        anchors { left: parent.left; top: parent.top; right: parent.right }
++        height: units.gu(20)
++        clip: true
++        model: dummyModel
++
++        delegate: Expandable {
++            id: expandable
++            objectName: "expandable" + index
++            expandedHeight: contentColumn.height
++
++            onClicked: ubuntuListView.expandedIndex = index
++
++            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: "UbuntuListView"
++        when: windowShown
++
++        function initTestCase() {
++            tryCompare(dummyModel, "count", 20);
++        }
++
++        function init() {
++            waitForRendering(ubuntuListView);
++        }
++
++        function expandItem(item) {
++            var index = ubuntuListView.indexAt(item.x, item.y);
++            ubuntuListView.expandedIndex = index;
++            var targetHeight = Math.min(item.expandedHeight, ubuntuListView.height - item.collapsedHeight);
++            tryCompare(item, "height", targetHeight);
++        }
++
++        function collapse() {
++            if (ubuntuListView.expandedIndex == -1) {
++                return;
++            }
++
++            var expandedItem = findChild(ubuntuListView, "expandable" + ubuntuListView.expandedIndex);
++            ubuntuListView.expandedIndex = -1;
++            tryCompare(expandedItem, "height", expandedItem.collapsedHeight);
++        }
++
++        function test_expandedItem() {
++            var item = findChild(ubuntuListView, "expandable1");
++            expandItem(item);
++
++            // expandedItem needs to point to the expanded item
++            compare(ubuntuListView.expandedIndex, 1);
++            // item must be expanded now
++            compare(item.expanded, true);
++
++            collapse();
++
++            // expandedItem must be unset after collapsing
++            compare(ubuntuListView.expandedIndex, -1);
++        }
++
++        function test_noScrollingNeeded() {
++            var item = findChild(ubuntuListView, "expandable1");
++            fuzzyCompare(ubuntuListView.mapFromItem(item).y, item.collapsedHeight, .5);
++
++            expandItem(item);
++            waitForRendering(ubuntuListView);
++
++            fuzzyCompare(ubuntuListView.mapFromItem(item).y, item.collapsedHeight, .5);
++        }
++
++        function test_scrollToTop() {
++            ubuntuListView.height = units.gu(30);
++            ubuntuListView.positionViewAtIndex(0, ListView.Beginning)
++
++            var item = findChild(ubuntuListView, "expandable1");
++            fuzzyCompare(ubuntuListView.mapFromItem(item).y, item.collapsedHeight, 1);
++
++            expandItem(item);
++
++            fuzzyCompare(ubuntuListView.mapFromItem(item).y, 0, .5);
++        }
++
++        function test_scrollIntoView() {
++            var item = findChild(ubuntuListView, "expandable9");
++            expandItem(item);
++            waitForRendering(ubuntuListView);
++
++            // The item must be scrolled upwards, leaving space for one other item at the bottom
++            fuzzyCompare(ubuntuListView.mapFromItem(item).y, ubuntuListView.height - item.collapsedHeight - item.expandedHeight, 1);
++        }
++
++        function test_collapseByClickingOutside() {
++            // expand item 0
++            var item = findChild(ubuntuListView, "expandable0");
++            expandItem(item);
++
++            // click on item 1
++            var item1 = findChild(ubuntuListView, "expandable1");
++            mouseClick(item1, item1.width / 2, item1.height / 2);
++
++            // make sure item1 is collapsed
++            tryCompare(item, "expanded", false);
++        }
++
++        function test_dimOthers() {
++            var item = findChild(ubuntuListView, "expandable1");
++            expandItem(item);
++
++            for (var i = 0; i < ubuntuListView.contentItem.children.length; ++i) {
++                var childItem = ubuntuListView.contentItem.children[i];
++                if (childItem.hasOwnProperty("expanded")) {
++                    compare(childItem.opacity, childItem.expanded ? 1 : .5)
++                }
++
++            }
++        }
++
++        function test_destroyAndRecreateExpanded() {
++            var item = findChild(ubuntuListView, "expandable1");
++            expandItem(item);
++
++            // scroll the list to the bottom
++            ubuntuListView.currentIndex = 0;
++            ubuntuListView.positionViewAtIndex(ubuntuListView.count -1, ListView.End);
++
++            // make sure the item is eventually destroyed
++            tryCompareFunction(function() { return findChild(ubuntuListView, "expandable1") == null;}, true)
++
++            // scroll the list back up
++            ubuntuListView.positionViewAtIndex(0, ListView.Beginning)
++
++            // wait until the item is recreated.
++            tryCompareFunction(function() { return findChild(ubuntuListView, "expandable1") != null; }, true);
++            item = findChild(ubuntuListView, "expandable1");
++            compare(item.expanded, true);
++
++        }
++
++        function cleanup() {
++            // Restore listview height
++            ubuntuListView.height = units.gu(60);
++            collapse();
++            // scroll the ListView back to top
++            ubuntuListView.positionViewAtIndex(0, ListView.Beginning);
++        }
++    }
++}

Ubuntu UI Toolkit

Merge lp:~mzanetti/ubuntu-ui-toolkit/ubuntulistview into lp:ubuntu-ui-toolkit

Commit message

Description of the change

Preview Diff

Subscribers