From 2e0fbe4ba93fda2f90d4ddef56c35ab6ab9c3f0e Mon Sep 17 00:00:00 2001 From: Christian Mollekopf Date: Fri, 21 Jul 2017 18:39:51 +0200 Subject: GridView based people view. This enables keyboard navigation. --- framework/qml/GridView.qml | 33 ++++++++++ framework/qml/People.qml | 155 ++++++++++++++++++++++----------------------- framework/qmldir | 1 + 3 files changed, 110 insertions(+), 79 deletions(-) create mode 100644 framework/qml/GridView.qml 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, + * + * 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 } } } diff --git a/framework/qmldir b/framework/qmldir index a23e2475..748547fb 100644 --- a/framework/qmldir +++ b/framework/qmldir @@ -33,6 +33,7 @@ AutocompleteLineEdit 1.0 AutocompleteLineEdit.qml AttachmentDelegate 1.0 AttachmentDelegate.qml ListView 1.0 ListView.qml TreeView 1.0 TreeView.qml +GridView 1.0 GridView.qml ScrollHelper 1.0 ScrollHelper.qml singleton Messages 1.0 Messages.qml singleton Colors 1.0 Colors.qml -- cgit v1.2.3