GridView based people view.

This enables keyboard navigation.

2 files changed, 109 insertions, 79 deletions

diff --git a/framework/qml/GridView.qml b/framework/qml/GridView.qml
new file mode 100644
index 00000000..ed21ac78
--- /dev/null
+++ b/framework/qml/GridView.qml
@@ -0,0 +1,33 @@
+/*
+ *  Copyright (C) 2017 Christian Mollekopf, <mollekopf@kolabsystems.com>
+ *
+ *  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; either version 2 of the License, or
+ *  (at your option) any later version.
+ *
+ *  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, write to the Free Software Foundation, Inc.,
+ *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.7
+import QtQuick.Controls 2
+import org.kube.framework 1.0 as Kube
+
+GridView {
+    id: root
+    Component.onCompleted: currentIndex = -1
+    keyNavigationEnabled: true
+    Kube.ScrollHelper {
+        id: scrollHelper
+        flickable: root
+        anchors.fill: root
+    }
+}
+
diff --git a/framework/qml/People.qml b/framework/qml/People.qml
index c2c6c9ef..472ba968 100644
--- a/framework/qml/People.qml
+++ b/framework/qml/People.qml
@@ -94,103 +94,100 @@ FocusScope {
             id: peoplePageRoot
             color: Kube.Colors.viewBackgroundColor
 
-            Flickable {
-                id: peopleFlickable
+            Kube.GridView {
+                id: gridView
+                anchors {
+                    fill: parent
+                    margins: Kube.Units.largeSpacing
+                }
 
-                anchors.fill: parent
+                activeFocusOnTab: true
 
-                ScrollBar.vertical: ScrollBar { }
-                contentHeight: content.height
-                clip: true
-                Kube.ScrollHelper {
-                    flickable: peopleFlickable
-                    anchors.fill: parent
+                model: Kube.PeopleModel {
+                    filter: searchBar.text
                 }
 
-                Item {
-                    id: content
+                cellWidth: Kube.Units.gridUnit * 10
+                cellHeight: Kube.Units.gridUnit * 3
 
-                    anchors {
-                        left: parent.left
-                        right: parent.right
+                onActiveFocusChanged: {
+                    if (currentIndex < 0) {
+                        currentIndex = 0
                     }
-                    height: childrenRect.height
+                }
 
-                    Flow {
+                function selectObject(domainObject) {
+                    root.currentContact = domainObject
+                    stack.push(personPage)
+                }
+
+                delegate: Item {
+                    id: delegateRoot
 
-                        anchors {
-                            top: parent.top
-                            topMargin: Kube.Units.largeSpacing
-                            left: parent.left
-                            leftMargin: Kube.Units.largeSpacing
+                    height: gridView.cellHeight - Kube.Units.smallSpacing * 2
+                    width: gridView.cellWidth - Kube.Units.smallSpacing * 2
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            parent.GridView.view.currentIndex = index
+                            parent.GridView.view.selectObject(model.domainObject)
                         }
+                    }
+                    Keys.onReturnPressed: {
+                        GridView.view.currentIndex = index
+                        GridView.view.selectObject(model.domainObject)
+                    }
 
-                        spacing: Kube.Units.largeSpacing
-                        width: peoplePageRoot.width - Kube.Units.largeSpacing * 2
+                    Rectangle {
+                        anchors.fill: parent
 
-                        Repeater {
+                        border.width: parent.GridView.view.currentIndex == index ? 2 : 1
+                        border.color: parent.GridView.view.currentIndex == index ? Kube.Colors.highlightColor : Kube.Colors.buttonColor
 
-                            model: Kube.PeopleModel {
-                                filter: searchBar.text
+                        Rectangle {
+                            id: avatarPlaceholder
+                            color: Kube.Colors.buttonColor
+                            anchors {
+                                top: parent.top
+                                left: parent.left
+                                bottom: parent.bottom
                             }
+                            clip: true
 
-                            delegate: Kube.AbstractButton {
-                                id: delegateRoot
+                            width: height
+                            Kube.KubeImage {
+                                anchors.fill: parent
+                                visible: model.imageData != ""
+                                imageData: model.imageData
+                            }
+                            Kube.Icon {
+                                anchors.fill: parent
+                                visible: model.imageData == ""
+                                iconName: Kube.Icons.user
+                            }
+                        }
 
-                                height: Kube.Units.gridUnit * 3
-                                width: Kube.Units.gridUnit * 10
+                        Column {
+                            width: parent.width
+                            anchors {
+                                left: avatarPlaceholder.right
+                                margins: Kube.Units.smallSpacing
+                                verticalCenter: parent.verticalCenter
+                            }
 
-                                activeFocusOnTab: true
+                            Kube.Label {
+                                width: delegateRoot.width - avatarPlaceholder.width - Kube.Units.smallSpacing * 2
 
-                                onClicked: {
-                                    root.currentContact = model.domainObject
-                                    stack.push(personPage)
-                                }
+                                text: model.firstName
+                                elide: Text.ElideRight
+                            }
 
-                                contentItem: Item {
-                                    anchors.fill: parent
-                                    Item {
-                                        id: avatarPlaceholder
-
-                                        height: parent.height
-                                        width: height
-                                        Kube.KubeImage {
-                                            anchors.fill: parent
-                                            visible: model.imageData != ""
-                                            imageData: model.imageData
-                                        }
-                                        Kube.Icon {
-                                            anchors.fill: parent
-                                            visible: model.imageData == ""
-                                            iconName: Kube.Icons.user
-                                        }
-                                    }
-
-                                    Column {
-
-                                        width: parent.width
-
-                                        anchors {
-                                            left: avatarPlaceholder.right
-                                            margins: Kube.Units.smallSpacing
-                                            verticalCenter: parent.verticalCenter
-                                        }
-
-                                        Kube.Label {
-                                            width: delegateRoot.width - avatarPlaceholder.width - Kube.Units.smallSpacing * 2
-
-                                            text: model.firstName
-                                            elide: Text.ElideRight
-                                        }
-
-                                        Kube.Label {
-                                            width: delegateRoot.width - avatarPlaceholder.width - Kube.Units.smallSpacing * 2
-
-                                            text: model.lastName
-                                            elide: Text.ElideRight
-                                        }
-                                    }
-                                }
+                            Kube.Label {
+                                width: delegateRoot.width - avatarPlaceholder.width - Kube.Units.smallSpacing * 2
+
+                                text: model.lastName
+                                elide: Text.ElideRight
                             }
                         }
                     }