Put the TreeView into an extra flickable

...so it becomes scrollable just like the rest.
Because the TreeView derives from ScrollView we can't just
use the regular approach of making the flickable suck less at scrolling.
Instead we expand the treeview to maximum length and wrap it in an extra
Flickable that we can then handle with the ScrollHelper.
This results in the treeview to have the same scrolling behvaiour as
everything else.

1 files changed, 103 insertions, 66 deletions

diff --git a/framework/qml/TreeView.qml b/framework/qml/TreeView.qml
index 367fd3c3..7abfe271 100644
--- a/framework/qml/TreeView.qml
+++ b/framework/qml/TreeView.qml
@@ -19,108 +19,145 @@
 
 import QtQuick 2.4
 import QtQuick.Controls 1.4
+import QtQuick.Controls 2 as Controls2
 import QtQuick.Controls.Styles 1.4
 import QtQuick.Layouts 1.1
 import QtQml.Models 2.2
 
 import org.kube.framework 1.0 as Kube
 
-TreeView {
+Flickable {
     id: root
 
-    signal dropped(QtObject drop, QtObject model)
-
-    flickableItem.boundsBehavior: Flickable.StopAtBounds
+    default property alias __columns: treeView.__columns
+    property alias model: treeView.model
+    property alias currentIndex: treeView.currentIndex
 
-    selection: ItemSelectionModel {
-        model: root.model
-        //TODO once we don't loose focus to the next view
-        // onCurrentChanged: {
-        //     root.activated(selection.currentIndex)
-        // }
+    signal dropped(QtObject drop, QtObject model)
+    signal activated(var index)
+
+    Controls2.ScrollBar.vertical: Controls2.ScrollBar {}
+    clip: true
+    contentWidth: treeView.width
+    contentHeight: treeView.implicitHeight
+    Kube.ScrollHelper {
+        id: scrollHelper
+        flickable: root
     }
 
-    onActiveFocusChanged: {
-        //Set an initially focused item when the list view receives focus
-        if (activeFocus && !selection.hasSelection) {
-            root.selection.setCurrentIndex(model.index(0, 0), ItemSelectionModel.ClearAndSelect)
-        }
-    }
+    TreeView {
+        id: treeView
 
-    Keys.onDownPressed: {
-        if (!selection.hasSelection) {
-            root.selection.setCurrentIndex(model.index(0, 0), ItemSelectionModel.ClearAndSelect)
-        } else {
-            root.selection.setCurrentIndex(model.sibling(selection.currentIndex.row + 1, 0, selection.currentIndex), ItemSelectionModel.ClearAndSelect)
+        anchors {
+            left: parent.left
+            right: parent.right
         }
-    }
+        implicitHeight: __listView.contentItem.height
+        height: __listView.contentItem.height
 
-    Keys.onUpPressed: {
-        root.selection.setCurrentIndex(model.sibling(selection.currentIndex.row - 1, 0, selection.currentIndex), ItemSelectionModel.ClearAndSelect)
-    }
+        verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
 
-    Keys.onReturnPressed: {
-        root.activated(selection.currentIndex)
-    }
+        Kube.MouseProxy {
+            anchors.fill: parent
+            target: scrollHelper
+            forwardWheelEvents: true
+        }
 
-    //Forward the signal because on a desktopsystem activated is only triggerd by double clicks
-    onClicked: root.activated(index)
+        flickableItem.boundsBehavior: Flickable.StopAtBounds
 
-    alternatingRowColors: false
-    headerVisible: false
+        selection: ItemSelectionModel {
+            model: treeView.model
+            //TODO once we don't loose focus to the next view
+            // onCurrentChanged: {
+            //     treeView.activated(selection.currentIndex)
+            // }
+        }
 
-    style: TreeViewStyle {
+        onActiveFocusChanged: {
+            //Set an initially focused item when the list view receives focus
+            if (activeFocus && !selection.hasSelection) {
+                treeView.selection.setCurrentIndex(model.index(0, 0), ItemSelectionModel.ClearAndSelect)
+            }
+        }
+
+        Keys.onDownPressed: {
+            if (!selection.hasSelection) {
+                treeView.selection.setCurrentIndex(model.index(0, 0), ItemSelectionModel.ClearAndSelect)
+            } else {
+                treeView.selection.setCurrentIndex(model.sibling(selection.currentIndex.row + 1, 0, selection.currentIndex), ItemSelectionModel.ClearAndSelect)
+            }
+        }
 
-        rowDelegate: Rectangle {
-            color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor
-            height: Kube.Units.gridUnit * 1.5
-            width: 20
+        Keys.onUpPressed: {
+            treeView.selection.setCurrentIndex(model.sibling(selection.currentIndex.row - 1, 0, selection.currentIndex), ItemSelectionModel.ClearAndSelect)
         }
 
-        frame: Rectangle {
-            color: Kube.Colors.textColor
+        Keys.onReturnPressed: {
+            treeView.activated(selection.currentIndex)
         }
 
-        branchDelegate: Item {
-            width: 16
-            height: 16
+        //Forward the signal because on a desktopsystem activated is only triggerd by double clicks
+        onClicked: treeView.activated(index)
 
-            Kube.Label  {
-                anchors.centerIn: parent
+        onActivated: root.activated(index)
 
-                color: Kube.Colors.viewBackgroundColor
-                text: styleData.isExpanded ? "-" : "+"
+        alternatingRowColors: false
+        headerVisible: false
+
+        style: TreeViewStyle {
+
+            rowDelegate: Rectangle {
+                color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor
+                height: Kube.Units.gridUnit * 1.5
+                width: 20
             }
 
-            //radius: styleData.isExpanded ? 0 : 100
-        }
+            frame: Rectangle {
+                color: Kube.Colors.textColor
+            }
 
-        itemDelegate: Rectangle {
-            color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor
+            branchDelegate: Item {
+                width: 16
+                height: 16
 
-            DropArea {
-                anchors.fill: parent
+                Kube.Label  {
+                    anchors.centerIn: parent
 
-                Rectangle {
-                    anchors.fill: parent
                     color: Kube.Colors.viewBackgroundColor
-                    opacity: 0.3
-                    visible: parent.containsDrag
+                    text: styleData.isExpanded ? "-" : "+"
                 }
-                onDropped: root.dropped(drop, model)
+
+                //radius: styleData.isExpanded ? 0 : 100
             }
 
-            Kube.Label {
-                anchors {
-                    verticalCenter: parent.verticalCenter
-                    left: parent.left
+            itemDelegate: Rectangle {
+                color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor
+
+                DropArea {
+                    anchors.fill: parent
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: Kube.Colors.viewBackgroundColor
+                        opacity: 0.3
+                        visible: parent.containsDrag
+                    }
+                    onDropped: root.dropped(drop, model)
+                }
+
+                Kube.Label {
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        left: parent.left
+                    }
+                    text: styleData.value
+                    color: Kube.Colors.viewBackgroundColor
                 }
-                text: styleData.value
-                color: Kube.Colors.viewBackgroundColor
             }
-        }
 
-        backgroundColor: Kube.Colors.textColor
-        highlightedTextColor: Kube.Colors.highlightedTextColor
+            backgroundColor: Kube.Colors.textColor
+            highlightedTextColor: Kube.Colors.highlightedTextColor
+        }
     }
 }