Merge lp:~fboucault/unity-2d/proper_grid into lp:unity-2d/3.0

[Florian Boucault]

[dash] Cleaned up grid widget by introducing ListViewWithHeaders.

[lp:~fboucault/unity-2d/proper_grid]

635. By Florian Boucault on 2011-07-27

Added documentation.

636. By Florian Boucault on 2011-07-27

PlaceEntryView.qml: use bindings so that RendererGrid's properties are synced with its parents

637. By Florian Boucault on 2011-07-27

Unload the current page when closing the dash

=== modified file 'places/Home.qml'
--- places/Home.qml	2011-07-26 16:36:51 +0000
+++ places/Home.qml	2011-07-27 19:03:02 +0000
@@ -99,17 +99,28 @@
         opacity: globalSearchActive ? 1 : 0
         anchors.fill: parent
 
-        list.model: dash.places
-
-        list.delegate: UnityDefaultRenderer {
-            width: ListView.view.width
-
-            parentListView: list
-            placeEntryModel: item
-            displayName: item.name
-            iconHint: item.icon
-
-            model: item.globalResultsModel
+        model: dash.places
+
+        bodyDelegate: UnityDefaultRenderer {
+            placeEntryModel: model.item
+            displayName: model.item.name
+            iconHint: model.item.icon
+
+            group_model: model.item.globalResultsModel
+            property bool focusable: group_model != undefined && group_model.count > 0
+        }
+
+        headerDelegate: GroupHeader {
+            visible: body.needHeader && body.focusable
+            height: visible ? 32 : 0
+
+            property bool foldable: body.folded != undefined
+            availableCount: foldable && body.group_model != null ? body.group_model.count - body.cellsPerRow : 0
+            folded: foldable ? body.folded : false
+            onClicked: if(foldable) body.folded = !body.folded
+
+            icon: body.iconHint
+            label: body.displayName
         }
     }
 

=== added file 'places/ListViewWithHeaders.qml'
--- places/ListViewWithHeaders.qml	1970-01-01 00:00:00 +0000
+++ places/ListViewWithHeaders.qml	2011-07-27 19:03:02 +0000
@@ -0,0 +1,277 @@
+/*
+ * This file is part of unity-2d
+ *
+ * Copyright 2010-2011 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 1.0
+
+/*
+  List item that behaves similarly to a ListView but supports adding headers
+  before every delegate.
+  It works around the lack of flexibility in section headers positioning of
+  ListView (cf. http://bugreports.qt.nokia.com/browse/QTBUG-12880). It also
+  supports delegates that are flickable by flicking their content properly
+  depending on where you are in the list.
+
+  To use it the following properties need to be set:
+  - bodyDelegate: Component used as a template for each item of the model; it
+    must have the following properties:
+     - 'contentY': same definition as a Flickable's
+     - 'totalHeight': the total height of the content of the body
+     - 'currentItem': a reference to the item of the body (e.g. a delegate of
+                      a ListView) currently focused by the body
+  - headerDelegate: Component used as a template for the header preceding each body
+
+  Two behaviours are available for the headers positioning:
+  - normal: the headers are always positioned just before the body
+  - accordion: the headers are stacked at the top and bottom of the list
+
+  Currently, it only works in a vertical layout.
+*/
+FocusScope {
+    id: list
+
+    property alias flickable: mouse
+    property alias model: repeater.model
+    property bool accordion: false
+    /* bodyDelegate must be an item that has the following properties:
+        - 'contentY'
+        - 'totalHeight'
+        - 'currentItem'
+    */
+    property Component bodyDelegate
+    property Component headerDelegate
+    property int currentIndex: -1
+    /* FIXME: Should be read-only but it is not possible to define a read-only property from QML.
+       Ref.: https://bugreports.qt.nokia.com//browse/QTBUG-15257
+    */
+    property variant currentItem: items.childFromIndex(currentIndex)
+
+
+    clip: true
+
+    /* updateMouseContentY() needs to be called when any of the variable
+       involved in the computation of the 'y' property of the currentSubItem changes.
+
+       if accordion is false:
+       - heightFirstChildren(index)
+       - headerLoader.height
+       - list.height
+
+       if accordion is true:
+       - heightFirstChildren(index)
+       - items.availableHeight
+       - heightFirstHeaders(index)
+
+       items.contentHeight seems to depend on all of those so it's enough to
+       depend only on it.
+    */
+    function updateMouseContentY() {
+        if (currentSubItem != undefined) {
+            mouse.contentY = Math.max(currentSubItem.mapToItem(mouse.contentItem, 0, 0).y -list.height/2, 0)
+        }
+    }
+    property variant currentSubItem: currentItem != undefined ? currentItem.bodyLoader.item.currentItem : undefined
+    onCurrentSubItemChanged: updateMouseContentY()
+
+    Connections {
+        target: items
+        onContentHeightChanged: updateMouseContentY()
+    }
+
+    FocusScope {
+        id: items
+
+        property int availableHeight: list.height - heightFirstHeaders(repeater.count)
+        property int contentHeight: items.heightFirstChildren(repeater.count)
+        property real value: mouse.contentY
+
+        anchors.fill: parent
+
+        function heightFirstChildren(n) {
+            var i
+            var totalHeight = 0
+            /* items.children contains both the repeated items and the repeater
+               itself. Skip and ignore the repeater. */
+            for (i=0; i<n && i<children.length; i++) {
+                if(children[i] == repeater) {n += 1; continue}
+                totalHeight += children[i].height
+            }
+            return totalHeight
+        }
+
+        function heightFirstHeaders(n) {
+            var i
+            var totalHeight = 0
+            /* items.children contains both the repeated items and the repeater
+               itself. Skip and ignore the repeater. */
+            for (i=0; i<n && i<children.length; i++) {
+                if(children[i] == repeater) {n += 1; continue}
+                totalHeight += children[i].headerLoader.height
+            }
+            return totalHeight
+        }
+
+        function clamp(x, min, max) {
+            return Math.max(Math.min(x, max), min)
+        }
+
+
+        /* Keyboard navigation */
+        function isIndexValid(index) {
+            /* Assuming that children contains exactly one item that is not a child (repeater) */
+            return index >= 0 && index < children.length-1
+        }
+
+        focus: true
+        Keys.onPressed: if (handleKeyPress(event.key)) event.accepted = true
+        function handleKeyPress(key) {
+            switch (key) {
+            case Qt.Key_Down:
+                return selectNextEnabled()
+            case Qt.Key_Up:
+                return selectPreviousEnabled()
+            }
+        }
+
+        function childFromIndex(index) {
+            var indexInChildren = 0
+            for(var i=0; i<children.length; i++) {
+                if (children[i] != repeater) {
+                    if (indexInChildren == index) return children[i]
+                    indexInChildren++
+                }
+            }
+
+            return undefined
+        }
+
+        function selectNextEnabled() {
+            var index = currentIndex
+            do {
+                index += 1
+                if (!isIndexValid(index)) return false
+            } while(!childFromIndex(index).focusable)
+            currentIndex = index
+            return true
+        }
+
+        function selectPreviousEnabled() {
+            var index = currentIndex
+            do {
+                index -= 1
+                if (!isIndexValid(index)) return false
+            } while(!childFromIndex(index).focusable)
+            currentIndex = index
+            return true
+        }
+
+        property bool needsFocus: false
+        onChildrenChanged: {
+            /* FIXME: this workarounds the fact that list.focus is set to false
+                      when the child with focus is destroyed
+            */
+            if (needsFocus) {
+                list.focus = true
+                needsFocus = false
+            }
+            /* Assuming that children contains exactly one item that is not a child (repeater) */
+            if(children.length <= 1) {
+                list.currentIndex = -1
+            } else {
+                list.currentIndex = -1
+                selectNextEnabled()
+            }
+        }
+
+        Repeater {
+            id: repeater
+
+            FocusScope {
+                property alias bodyLoader: bodyLoader
+                property alias headerLoader: headerLoader
+
+                focus: index == list.currentIndex
+                Component.onDestruction: items.needsFocus = true
+
+                width: list.width
+                height: headerLoader.height + bodyLoader.item.totalHeight
+                property bool focusable: bodyLoader.item.focusable
+
+                property int pmin: pmax - (ymax - ymin)
+                property int pmax: items.heightFirstChildren(index) - ymin
+                property int ymin: list.accordion ? items.heightFirstHeaders(index) : -headerLoader.height
+                property int ymax: list.accordion ? ymin + items.availableHeight : list.height
+                y: items.clamp(-items.value + ymax + pmin, ymin, ymax)
+
+                Loader {
+                    id: headerLoader
+
+                    focus: visible
+                    KeyNavigation.down: bodyLoader
+                    sourceComponent: headerDelegate
+                    onLoaded: item.focus = true
+                    width: parent.width
+
+                    /* Workaround Qt bug http://bugreports.qt.nokia.com/browse/QTBUG-18857
+                       More documentation at http://bugreports.qt.nokia.com/browse/QTBUG-18011
+                    */
+                    property int index
+                    Binding { target: headerLoader; property: "index"; value: index }
+                    property variant model
+                    Binding { target: headerLoader; property: "model"; value: model }
+                    property variant body
+                    Binding { target: headerLoader; property: "body"; value: bodyLoader.item }
+                }
+
+                Loader {
+                    id: bodyLoader
+
+                    focus: !headerLoader.focus
+                    KeyNavigation.up: headerLoader
+                    sourceComponent: list.bodyDelegate
+                    onLoaded: item.focus = true
+                    width: parent.width
+                    anchors.top: headerLoader.bottom
+                    height: items.clamp(parent.ymax - parent.y, 0, item.totalHeight)
+
+                    Binding {
+                        target: bodyLoader.item
+                        property: "contentY"
+                        value: Math.max(items.value - pmax, 0)
+                    }
+
+                    /* Workaround Qt bug http://bugreports.qt.nokia.com/browse/QTBUG-18857
+                       More documentation at http://bugreports.qt.nokia.com/browse/QTBUG-18011
+                    */
+                    property int index
+                    Binding { target: bodyLoader; property: "index"; value: index }
+                    property variant model
+                    Binding { target: bodyLoader; property: "model"; value: model }
+                }
+            }
+        }
+    }
+
+    Flickable {
+        id: mouse
+
+        z: -1
+        anchors.fill: parent
+        contentWidth: parent.width
+        contentHeight: items.contentHeight
+    }
+}

=== modified file 'places/ListViewWithScrollbar.qml'
--- places/ListViewWithScrollbar.qml	2011-06-23 17:08:53 +0000
+++ places/ListViewWithScrollbar.qml	2011-07-27 19:03:02 +0000
@@ -19,10 +19,12 @@
 import QtQuick 1.0
 
 Item {
-    property alias list: list
     property alias scrollbar: scrollbar
+    property alias model: list.model
+    property alias bodyDelegate: list.bodyDelegate
+    property alias headerDelegate: list.headerDelegate
 
-    ListView {
+    ListViewWithHeaders {
         id: list
 
         anchors.top: parent.top
@@ -30,32 +32,6 @@
         anchors.left: parent.left
         anchors.right: scrollbar.left
         anchors.rightMargin: 15
-
-        clip: true
-        /* FIXME: proper spacing cannot be set because of the hack in Group.qml
-           whereby empty groups are still in the list but invisible and of
-           height 0.
-        */
-        //spacing: 31
-
-        orientation: ListView.Vertical
-
-        /* WARNING - HACK - FIXME
-           Issue:
-           User wise annoying jumps in the list are observable if cacheBuffer is
-           set to 0 (which is the default value). States such as 'folded' are
-           lost when scrolling a lot.
-
-           Explanation:
-           The height of the Group delegate depends on its content. However its
-           content is not known until the delegate is instantiated because it
-           depends on the number of results displayed by its GridView.
-
-           Resolution:
-           We set the cacheBuffer to the biggest possible int in order to make
-           sure all delegates are always instantiated.
-        */
-        cacheBuffer: 2147483647
     }
 
     Scrollbar {
@@ -67,7 +43,7 @@
         anchors.bottomMargin: 10
         anchors.right: parent.right
 
-        targetFlickable: list
+        targetFlickable: list.flickable
 
         /* Hide the scrollbar if there is less than a page of results */
         opacity: targetFlickable.visibleArea.heightRatio < 1.0 ? 1.0 : 0.0

=== modified file 'places/PlaceEntryView.qml'
--- places/PlaceEntryView.qml	2011-07-19 07:46:03 +0000
+++ places/PlaceEntryView.qml	2011-07-27 19:03:02 +0000
@@ -74,10 +74,10 @@
            If groupRenderer == 'UnityShowcaseRenderer' then it will look for
            the file 'UnityShowcaseRenderer.qml' and use it to render the group.
         */
-        list.delegate: Loader {
-            property string groupRenderer: column_0
-            property string displayName: column_1
-            property string iconHint: column_2
+        bodyDelegate: Loader {
+            property string groupRenderer: model.column_0
+            property string displayName: model.column_1
+            property string iconHint: model.column_2
             property int groupId: index
 
             source: groupRenderer ? groupRenderer+".qml" : ""
@@ -86,12 +86,8 @@
                     console.log("Failed to load renderer", groupRenderer)
             }
 
-            width: ListView.view.width
-
             /* Model that will be used by the group's delegate */
-            SortFilterProxyModel {
-                id: group_model
-
+            property variant group_model: SortFilterProxyModel {
                 model: placeEntryView.model.entryResultsModel
 
                 /* resultsModel contains data for all the groups of a given Place.
@@ -102,16 +98,35 @@
                 filterRegExp: RegExp("^%1$".arg(groupId)) /* exact match */
             }
 
-            onLoaded: {
-                item.parentListView = results.list
-                item.displayName = displayName
-                item.iconHint = iconHint
-                item.groupId = groupId
-                item.model = group_model
-                item.placeEntryModel = placeEntryView.model
-            }
-        }
-
-        list.model: placeEntryView.model != undefined ? placeEntryView.model.entryGroupsModel : undefined
+            /* Required by ListViewWithHeaders when the loaded Renderer is a Flickable.
+               In that case the list view scrolls the Flickable appropriately.
+            */
+            property int totalHeight: item.totalHeight != undefined ? item.totalHeight : 0
+            property int contentY
+            Binding { target: item; property: "contentY"; value: contentY }
+            property bool focusable: group_model.count > 0
+            property variant currentItem: item.currentItem
+
+            Binding { target: item; property: "displayName"; value: displayName }
+            Binding { target: item; property: "iconHint"; value: iconHint }
+            Binding { target: item; property: "groupId"; value: groupId }
+            Binding { target: item; property: "group_model"; value: group_model }
+            Binding { target: item; property: "placeEntryModel"; value: placeEntryView.model }
+        }
+
+        headerDelegate: GroupHeader {
+            visible: body.item.needHeader && body.focusable
+            height: visible ? 32 : 0
+
+            property bool foldable: body.item.folded != undefined
+            availableCount: foldable ? body.group_model.count - body.item.cellsPerRow : 0
+            folded: foldable ? body.item.folded : false
+            onClicked: if(foldable) body.item.folded = !body.item.folded
+
+            icon: body.iconHint
+            label: body.displayName
+        }
+
+        model: placeEntryView.model != undefined ? placeEntryView.model.entryGroupsModel : undefined
     }
 }

=== modified file 'places/Renderer.qml'
--- places/Renderer.qml	2011-06-23 17:08:53 +0000
+++ places/Renderer.qml	2011-07-27 19:03:02 +0000
@@ -30,7 +30,7 @@
     property string displayName /* Name of the group typically displayed in the header */
     property string iconHint /* Icon id of the group */
     property int groupId /* Index of the group */
-    property variant model /* List model containing the items to be displayed by the renderer */
+    property variant group_model /* List model containing the items to be displayed by the renderer */
     property variant placeEntryModel /* Reference to the place entry the group belongs to */
-    property variant parentListView /* Reference to the ListView the renderer is nested into */
+    property bool needHeader: false /* Whether or not the renderer requires a header to be displayed */
 }

=== modified file 'places/RendererGrid.qml'
--- places/RendererGrid.qml	2011-06-26 15:41:06 +0000
+++ places/RendererGrid.qml	2011-07-27 19:03:02 +0000
@@ -28,6 +28,11 @@
 Renderer {
     id: renderer
 
+    needHeader: true
+    property alias cellsPerRow: results.cellsPerRow
+    property alias contentY: results.contentY
+    property alias currentItem: results.currentItem
+
     property variant cellRenderer
     property bool folded
     folded: {
@@ -44,85 +49,23 @@
     property int horizontalSpacing: 26
     property int verticalSpacing: 26
 
-    /* Using results.contentHeight produces binding loop warnings and potential
-       rendering issues. We compute the height manually.
-    */
-    /* FIXME: tricking the system by making the delegate of height 0 and invisible
-              is no good: the item in the model still exists and some things
-              such as keyboard selection break.
-    */
-    visible: results.model.totalCount > 0
-    height: visible ? header.height + results_layout.anchors.topMargin + results.totalHeight : 0
-    //Behavior on height {NumberAnimation {duration: 200}}
-
-    GroupHeader {
-        id: header
-
-        availableCount: results.model.totalCount - results.cellsPerRow
-        folded: parent.folded
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: 32
-        icon: parent.iconHint
-        label: parent.displayName
-
-        onClicked: parent.folded = !parent.folded
-    }
+    /* FIXME: using results_layout.anchors.topMargin in the following expression
+              causes QML to think they might be an anchor loop. */
+    property int totalHeight: results.count > 0 ? results_layout.anchors.topMargin + results.totalHeight : 0
 
     Item {
         id: results_layout
 
-        anchors.top: header.bottom
-        anchors.topMargin: 22
-        anchors.left: parent.left
+        anchors.fill: parent
+        anchors.topMargin: 12
         anchors.leftMargin: 2
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
 
         CenteredGridView {
             id: results
 
-            /* FIXME: this is a gross hack compensating for the lack of sections
-               in GridView (see ListView.section).
-
-               We nest GridViews inside a ListView and add headers manually
-               (GroupHeader). The total height of each Group is computed
-               manually and given back to the ListView. However that size cannot
-               be used by the individual GridViews because it would make them
-               load all of their delegates at once using far too much memory and
-               processing power. Instead we constrain the height of the GridViews
-               and compute their position manually to compensate for the position
-               changes when flicking the ListView.
-
-               We assume that renderer.parentListView is the ListView we nest our
-               GridView into.
-            */
-            property variant flickable: renderer.parentListView.contentItem
-
-            /* flickable.contentY*0 is equal to 0 but is necessary in order to
-               have the entire expression being evaluated at the right moment.
-            */
-            property int inFlickableY: flickable.contentY*0+parent.mapToItem(flickable, 0, 0).y
-            /* note: testing for flickable.height < 0 is probably useless since it is
-               unlikely flickable.height will ever be negative.
-            */
-            property int compensateY: inFlickableY > 0 || flickable.height < 0 || totalHeight < flickable.height ? 0 : -inFlickableY
-
-            /* Synchronise the position and content's position of the GridView
-               with the current position of flickable's visibleArea */
-            function synchronisePosition() {
-                y = compensateY
-                contentY = compensateY
-            }
-
-            onCompensateYChanged: synchronisePosition()
-            /* Any change in content needs to trigger a synchronisation */
-            onCountChanged: synchronisePosition()
-            onModelChanged: synchronisePosition()
-
-            width: flickable.width
-            height: Math.min(totalHeight, flickable.height)
+            focus: true
+
+            anchors.fill: parent
 
             property int totalHeight: results.cellHeight*Math.ceil(count/cellsPerRow)
 
@@ -168,7 +111,7 @@
 
             /* Only display one line of items when folded */
             model: SortFilterProxyModel {
-                model: renderer.model != undefined ? renderer.model : null
+                model: renderer.group_model != undefined ? renderer.group_model : null
                 limit: folded ? results.cellsPerRow : -1
             }
         }

=== modified file 'places/Scrollbar.qml'
--- places/Scrollbar.qml	2011-06-26 15:16:43 +0000
+++ places/Scrollbar.qml	2011-07-27 19:03:02 +0000
@@ -83,7 +83,7 @@
             when: !dragMouseArea.drag.active
         }
 
-        height: Math.max(minimalHeight, targetFlickable.visibleArea.heightRatio * scrollbar.height)
+        height: Math.min(scrollbar.height, Math.max(minimalHeight, targetFlickable.visibleArea.heightRatio * scrollbar.height))
 
         Behavior on height {NumberAnimation {duration: 200; easing.type: Easing.InOutQuad}}
 

=== modified file 'places/UnityEmptySearchRenderer.qml'
--- places/UnityEmptySearchRenderer.qml	2011-06-23 17:08:53 +0000
+++ places/UnityEmptySearchRenderer.qml	2011-07-27 19:03:02 +0000
@@ -40,7 +40,7 @@
         boundsBehavior: ListView.StopAtBounds
         orientation: ListView.Vertical
 
-        model: renderer.model
+        model: renderer.group_model
         delegate: Button {
             property string uri: column_0
             property string iconHint: column_1

=== modified file 'places/dash.qml'
--- places/dash.qml	2011-07-05 19:01:18 +0000
+++ places/dash.qml	2011-07-27 19:03:02 +0000
@@ -30,6 +30,12 @@
         value: (currentPage && currentPage.expanded != undefined) ? currentPage.expanded : true
     }
 
+    /* Unload the current page when closing the dash */
+    Connections {
+        target: dashView
+        onActiveChanged: if (!dashView.active) pageLoader.source = ""
+    }
+
     function activatePage(page) {
         if (page == currentPage) {
             return