From c510985f0c51854b6310b33ec5aa59ad188f4cfc Mon Sep 17 00:00:00 2001 From: Christian Mollekopf Date: Tue, 25 Apr 2017 17:47:37 +0200 Subject: Keyboard focus for toolbar and folder list --- framework/qml/FolderListView.qml | 209 +++++++++++++++++--------------- framework/qml/InlineAccountSwitcher.qml | 27 ++--- framework/qml/MailListView.qml | 1 - framework/qml/Popup.qml | 1 - 4 files changed, 124 insertions(+), 114 deletions(-) (limited to 'framework/qml') diff --git a/framework/qml/FolderListView.qml b/framework/qml/FolderListView.qml index c2e7f052..bda3683c 100644 --- a/framework/qml/FolderListView.qml +++ b/framework/qml/FolderListView.qml @@ -20,141 +20,156 @@ import QtQuick 2.4 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Layouts 1.1 +import QtQml.Models 2.2 import org.kube.framework 1.0 as Kube -Rectangle { - id: root - +TreeView { + id: treeView property variant accountId + visible: true - color: Kube.Colors.textColor + TableViewColumn { + title: "Name" + role: "name" + } - TreeView { - id: treeView + model: Kube.FolderListModel { + id: folderListModel + accountId: treeView.accountId + } + selection: ItemSelectionModel { + model: treeView.model + //TODO once we don't loose focus to the next view + // onCurrentChanged: { + // treeView.activated(selection.currentIndex) + // } + } - anchors { - top: parent.top - left: parent.left - right: parent.right + 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) } + } - height: parent.height - - TableViewColumn { - title: "Name" - role: "name" + 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) } + } + Keys.onUpPressed: { + treeView.selection.setCurrentIndex(model.sibling(selection.currentIndex.row - 1, 0, selection.currentIndex), ItemSelectionModel.ClearAndSelect) + } + Keys.onReturnPressed: { + treeView.activated(selection.currentIndex) + } - model: Kube.FolderListModel { - id: folderListModel - accountId: root.accountId - } + onActivated: { + //TODO do some event compression in case of double clicks + model.fetchMore(currentIndex); + Kube.Fabric.postMessage(Kube.Messages.folderSelection, {"folder": model.data(index, Kube.FolderListModel.DomainObject), + "trash": model.data(index, Kube.FolderListModel.Trash)}); + Kube.Fabric.postMessage(Kube.Messages.synchronize, {"folder": model.data(index, Kube.FolderListModel.DomainObject)}); + } + //Forward the signal because on a desktopsystem activated is only triggerd by double clicks + onClicked: treeView.activated(index) - onActivated: { - //TODO do some event compression in case of double clicks - model.fetchMore(currentIndex); - Kube.Fabric.postMessage(Kube.Messages.folderSelection, {"folder": model.data(index, Kube.FolderListModel.DomainObject), - "trash": model.data(index, Kube.FolderListModel.Trash)}); - Kube.Fabric.postMessage(Kube.Messages.synchronize, {"folder": model.data(index, Kube.FolderListModel.DomainObject)}); - } - //Forward the signal because on a desktopsystem activated is only triggerd by double clicks - onClicked: treeView.activated(index) + alternatingRowColors: false + headerVisible: false - alternatingRowColors: false - headerVisible: false + style: TreeViewStyle { - style: TreeViewStyle { + rowDelegate: Rectangle { + color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor - rowDelegate: Rectangle { - color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor + height: Kube.Units.gridUnit * 1.5 + width: 20 - height: Kube.Units.gridUnit * 1.5 - width: 20 + } - } + frame: Rectangle { + color: Kube.Colors.textColor + } - frame: Rectangle { - color: Kube.Colors.textColor - } + branchDelegate: Item { - branchDelegate: Item { + width: 16; height: 16 - width: 16; height: 16 + Kube.Label { + anchors.centerIn: parent - Kube.Label { - anchors.centerIn: parent + color: Kube.Colors.viewBackgroundColor + text: styleData.isExpanded ? "-" : "+" + } - color: Kube.Colors.viewBackgroundColor - text: styleData.isExpanded ? "-" : "+" - } + //radius: styleData.isExpanded ? 0 : 100 + } - //radius: styleData.isExpanded ? 0 : 100 - } + itemDelegate: Rectangle { - itemDelegate: Rectangle { + color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor - color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor + DropArea { + anchors.fill: parent - DropArea { + Rectangle { anchors.fill: parent + color: Kube.Colors.viewBackgroundColor - Rectangle { - anchors.fill: parent - color: Kube.Colors.viewBackgroundColor - - opacity: 0.3 + opacity: 0.3 - visible: parent.containsDrag - } - onDropped: { - Kube.Fabric.postMessage(Kube.Messages.moveToFolder, {"mail": drop.source.mail, "folder":model.domainObject}) - drop.accept(Qt.MoveAction) - drop.source.visible = false - } + visible: parent.containsDrag } + onDropped: { + Kube.Fabric.postMessage(Kube.Messages.moveToFolder, {"mail": drop.source.mail, "folder":model.domainObject}) + drop.accept(Qt.MoveAction) + drop.source.visible = false + } + } - Row { + Row { + anchors { + verticalCenter: parent.verticalCenter + left: parent.left + } + Kube.Label { anchors { verticalCenter: parent.verticalCenter - left: parent.left + leftMargin: Kube.Units.smallSpacing } - Kube.Label { - anchors { - verticalCenter: parent.verticalCenter - leftMargin: Kube.Units.smallSpacing - } - text: styleData.value + text: styleData.value - color: Kube.Colors.viewBackgroundColor - } - Kube.Icon { - id: statusIcon - visible: false - iconName: "" - states: [ - State { - name: "busy"; when: model.status == Kube.FolderListModel.InProgressStatus - PropertyChanges { target: statusIcon; iconName: Kube.Icons.busy_inverted ; visible: styleData.selected } - }, - State { - name: "error"; when: model.status == Kube.FolderListModel.ErrorStatus - //The error status should only be visible for a moment, otherwise we'll eventually always show errors everywhere. - PropertyChanges { target: statusIcon; iconName: Kube.Icons.error_inverted; visible: styleData.selected } - }, - State { - name: "checkmark"; when: model.status == Kube.FolderListModel.SuccessStatus - //The success status should only be visible for a moment, otherwise we'll eventually always show checkmarks everywhere. - PropertyChanges { target: statusIcon; iconName: Kube.Icons.success_inverted; visible: styleData.selected} - } - ] - } + color: Kube.Colors.viewBackgroundColor + } + Kube.Icon { + id: statusIcon + visible: false + iconName: "" + states: [ + State { + name: "busy"; when: model.status == Kube.FolderListModel.InProgressStatus + PropertyChanges { target: statusIcon; iconName: Kube.Icons.busy_inverted ; visible: styleData.selected } + }, + State { + name: "error"; when: model.status == Kube.FolderListModel.ErrorStatus + //The error status should only be visible for a moment, otherwise we'll eventually always show errors everywhere. + PropertyChanges { target: statusIcon; iconName: Kube.Icons.error_inverted; visible: styleData.selected } + }, + State { + name: "checkmark"; when: model.status == Kube.FolderListModel.SuccessStatus + //The success status should only be visible for a moment, otherwise we'll eventually always show checkmarks everywhere. + PropertyChanges { target: statusIcon; iconName: Kube.Icons.success_inverted; visible: styleData.selected} + } + ] } } - - backgroundColor: Kube.Colors.textColor - highlightedTextColor: Kube.Colors.highlightedTextColor } + + backgroundColor: Kube.Colors.textColor + highlightedTextColor: Kube.Colors.highlightedTextColor } } diff --git a/framework/qml/InlineAccountSwitcher.qml b/framework/qml/InlineAccountSwitcher.qml index d87dac9a..4131b971 100644 --- a/framework/qml/InlineAccountSwitcher.qml +++ b/framework/qml/InlineAccountSwitcher.qml @@ -20,23 +20,15 @@ import QtQuick 2.4 import QtQuick.Layouts 1.1 import org.kube.framework 1.0 as Kube -Rectangle { +FocusScope { id: root - property string currentAccount: null - Kube.AccountsModel { - id: accountsModel - } - - color: Kube.Colors.textColor - clip: true - ColumnLayout { anchors.fill: parent Repeater { - model: accountsModel + model: Kube.AccountsModel {} onItemAdded: { //Autoselect the first account to appear if (!currentAccount) { @@ -45,12 +37,13 @@ Rectangle { } delegate: Item { - id: accountDelagte + id: accountDelegate property variant currentData: model + property bool isCurrent: (model.accountId == root.currentAccount) height: Kube.Units.gridUnit width: root.width - Layout.fillHeight: model.accountId == root.currentAccount + Layout.fillHeight: isCurrent Rectangle { id: accountLabel @@ -59,6 +52,10 @@ Rectangle { width: parent.width color: Kube.Colors.textColor + activeFocusOnTab: !isCurrent + Keys.onReturnPressed: { + root.currentAccount = model.accountId + } MouseArea { anchors.fill: parent @@ -111,10 +108,10 @@ Rectangle { right: parent.right bottom: parent.bottom } + activeFocusOnTab: true - accountId: model.accountId - visible: model.accountId == root.currentAccount - + accountId: currentData.accountId + visible: isCurrent } } } diff --git a/framework/qml/MailListView.qml b/framework/qml/MailListView.qml index 80d18256..b7b09d61 100644 --- a/framework/qml/MailListView.qml +++ b/framework/qml/MailListView.qml @@ -67,7 +67,6 @@ Item { id: listView anchors.fill: parent - focus: true clip: true ScrollBar.vertical: ScrollBar{ diff --git a/framework/qml/Popup.qml b/framework/qml/Popup.qml index baba4933..dc3bd349 100644 --- a/framework/qml/Popup.qml +++ b/framework/qml/Popup.qml @@ -29,6 +29,5 @@ T.Popup { background: Rectangle { color: Colors.backgroundColor } - focus: true modal: true } -- cgit v1.2.3