diff options
author | Christian Mollekopf <chrigi_1@fastmail.fm> | 2017-04-25 17:47:37 +0200 |
---|---|---|
committer | Christian Mollekopf <chrigi_1@fastmail.fm> | 2017-04-25 17:47:37 +0200 |
commit | c510985f0c51854b6310b33ec5aa59ad188f4cfc (patch) | |
tree | f0bbdc7a79f57547c79dfd8da9b49ba5aeffda61 /framework/qml/FolderListView.qml | |
parent | cf7cc1d9707399c3cc270f4b3c6987175d7baf49 (diff) | |
download | kube-c510985f0c51854b6310b33ec5aa59ad188f4cfc.tar.gz kube-c510985f0c51854b6310b33ec5aa59ad188f4cfc.zip |
Keyboard focus for toolbar and folder list
Diffstat (limited to 'framework/qml/FolderListView.qml')
-rw-r--r-- | framework/qml/FolderListView.qml | 209 |
1 files changed, 112 insertions, 97 deletions
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 | |||
20 | import QtQuick.Controls 1.4 | 20 | import QtQuick.Controls 1.4 |
21 | import QtQuick.Controls.Styles 1.4 | 21 | import QtQuick.Controls.Styles 1.4 |
22 | import QtQuick.Layouts 1.1 | 22 | import QtQuick.Layouts 1.1 |
23 | import QtQml.Models 2.2 | ||
23 | 24 | ||
24 | import org.kube.framework 1.0 as Kube | 25 | import org.kube.framework 1.0 as Kube |
25 | 26 | ||
26 | Rectangle { | 27 | TreeView { |
27 | id: root | 28 | id: treeView |
28 | |||
29 | property variant accountId | 29 | property variant accountId |
30 | visible: true | ||
30 | 31 | ||
31 | color: Kube.Colors.textColor | 32 | TableViewColumn { |
33 | title: "Name" | ||
34 | role: "name" | ||
35 | } | ||
32 | 36 | ||
33 | TreeView { | 37 | model: Kube.FolderListModel { |
34 | id: treeView | 38 | id: folderListModel |
39 | accountId: treeView.accountId | ||
40 | } | ||
41 | selection: ItemSelectionModel { | ||
42 | model: treeView.model | ||
43 | //TODO once we don't loose focus to the next view | ||
44 | // onCurrentChanged: { | ||
45 | // treeView.activated(selection.currentIndex) | ||
46 | // } | ||
47 | } | ||
35 | 48 | ||
36 | anchors { | 49 | onActiveFocusChanged: { |
37 | top: parent.top | 50 | //Set an initially focused item when the list view receives focus |
38 | left: parent.left | 51 | if (activeFocus && !selection.hasSelection) { |
39 | right: parent.right | 52 | treeView.selection.setCurrentIndex(model.index(0, 0), ItemSelectionModel.ClearAndSelect) |
40 | } | 53 | } |
54 | } | ||
41 | 55 | ||
42 | height: parent.height | 56 | Keys.onDownPressed: { |
43 | 57 | if (!selection.hasSelection) { | |
44 | TableViewColumn { | 58 | treeView.selection.setCurrentIndex(model.index(0, 0), ItemSelectionModel.ClearAndSelect) |
45 | title: "Name" | 59 | } else { |
46 | role: "name" | 60 | treeView.selection.setCurrentIndex(model.sibling(selection.currentIndex.row + 1, 0, selection.currentIndex), ItemSelectionModel.ClearAndSelect) |
47 | } | 61 | } |
62 | } | ||
63 | Keys.onUpPressed: { | ||
64 | treeView.selection.setCurrentIndex(model.sibling(selection.currentIndex.row - 1, 0, selection.currentIndex), ItemSelectionModel.ClearAndSelect) | ||
65 | } | ||
66 | Keys.onReturnPressed: { | ||
67 | treeView.activated(selection.currentIndex) | ||
68 | } | ||
48 | 69 | ||
49 | model: Kube.FolderListModel { | 70 | onActivated: { |
50 | id: folderListModel | 71 | //TODO do some event compression in case of double clicks |
51 | accountId: root.accountId | 72 | model.fetchMore(currentIndex); |
52 | } | 73 | Kube.Fabric.postMessage(Kube.Messages.folderSelection, {"folder": model.data(index, Kube.FolderListModel.DomainObject), |
74 | "trash": model.data(index, Kube.FolderListModel.Trash)}); | ||
75 | Kube.Fabric.postMessage(Kube.Messages.synchronize, {"folder": model.data(index, Kube.FolderListModel.DomainObject)}); | ||
76 | } | ||
77 | //Forward the signal because on a desktopsystem activated is only triggerd by double clicks | ||
78 | onClicked: treeView.activated(index) | ||
53 | 79 | ||
54 | onActivated: { | 80 | alternatingRowColors: false |
55 | //TODO do some event compression in case of double clicks | 81 | headerVisible: false |
56 | model.fetchMore(currentIndex); | ||
57 | Kube.Fabric.postMessage(Kube.Messages.folderSelection, {"folder": model.data(index, Kube.FolderListModel.DomainObject), | ||
58 | "trash": model.data(index, Kube.FolderListModel.Trash)}); | ||
59 | Kube.Fabric.postMessage(Kube.Messages.synchronize, {"folder": model.data(index, Kube.FolderListModel.DomainObject)}); | ||
60 | } | ||
61 | //Forward the signal because on a desktopsystem activated is only triggerd by double clicks | ||
62 | onClicked: treeView.activated(index) | ||
63 | 82 | ||
64 | alternatingRowColors: false | 83 | style: TreeViewStyle { |
65 | headerVisible: false | ||
66 | 84 | ||
67 | style: TreeViewStyle { | 85 | rowDelegate: Rectangle { |
86 | color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor | ||
68 | 87 | ||
69 | rowDelegate: Rectangle { | 88 | height: Kube.Units.gridUnit * 1.5 |
70 | color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor | 89 | width: 20 |
71 | 90 | ||
72 | height: Kube.Units.gridUnit * 1.5 | 91 | } |
73 | width: 20 | ||
74 | 92 | ||
75 | } | 93 | frame: Rectangle { |
94 | color: Kube.Colors.textColor | ||
95 | } | ||
76 | 96 | ||
77 | frame: Rectangle { | 97 | branchDelegate: Item { |
78 | color: Kube.Colors.textColor | ||
79 | } | ||
80 | 98 | ||
81 | branchDelegate: Item { | 99 | width: 16; height: 16 |
82 | 100 | ||
83 | width: 16; height: 16 | 101 | Kube.Label { |
102 | anchors.centerIn: parent | ||
84 | 103 | ||
85 | Kube.Label { | 104 | color: Kube.Colors.viewBackgroundColor |
86 | anchors.centerIn: parent | 105 | text: styleData.isExpanded ? "-" : "+" |
106 | } | ||
87 | 107 | ||
88 | color: Kube.Colors.viewBackgroundColor | 108 | //radius: styleData.isExpanded ? 0 : 100 |
89 | text: styleData.isExpanded ? "-" : "+" | 109 | } |
90 | } | ||
91 | 110 | ||
92 | //radius: styleData.isExpanded ? 0 : 100 | 111 | itemDelegate: Rectangle { |
93 | } | ||
94 | 112 | ||
95 | itemDelegate: Rectangle { | 113 | color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor |
96 | 114 | ||
97 | color: styleData.selected ? Kube.Colors.highlightColor : Kube.Colors.textColor | 115 | DropArea { |
116 | anchors.fill: parent | ||
98 | 117 | ||
99 | DropArea { | 118 | Rectangle { |
100 | anchors.fill: parent | 119 | anchors.fill: parent |
120 | color: Kube.Colors.viewBackgroundColor | ||
101 | 121 | ||
102 | Rectangle { | 122 | opacity: 0.3 |
103 | anchors.fill: parent | ||
104 | color: Kube.Colors.viewBackgroundColor | ||
105 | |||
106 | opacity: 0.3 | ||
107 | 123 | ||
108 | visible: parent.containsDrag | 124 | visible: parent.containsDrag |
109 | } | ||
110 | onDropped: { | ||
111 | Kube.Fabric.postMessage(Kube.Messages.moveToFolder, {"mail": drop.source.mail, "folder":model.domainObject}) | ||
112 | drop.accept(Qt.MoveAction) | ||
113 | drop.source.visible = false | ||
114 | } | ||
115 | } | 125 | } |
126 | onDropped: { | ||
127 | Kube.Fabric.postMessage(Kube.Messages.moveToFolder, {"mail": drop.source.mail, "folder":model.domainObject}) | ||
128 | drop.accept(Qt.MoveAction) | ||
129 | drop.source.visible = false | ||
130 | } | ||
131 | } | ||
116 | 132 | ||
117 | Row { | 133 | Row { |
134 | anchors { | ||
135 | verticalCenter: parent.verticalCenter | ||
136 | left: parent.left | ||
137 | } | ||
138 | Kube.Label { | ||
118 | anchors { | 139 | anchors { |
119 | verticalCenter: parent.verticalCenter | 140 | verticalCenter: parent.verticalCenter |
120 | left: parent.left | 141 | leftMargin: Kube.Units.smallSpacing |
121 | } | 142 | } |
122 | Kube.Label { | ||
123 | anchors { | ||
124 | verticalCenter: parent.verticalCenter | ||
125 | leftMargin: Kube.Units.smallSpacing | ||
126 | } | ||
127 | 143 | ||
128 | text: styleData.value | 144 | text: styleData.value |
129 | 145 | ||
130 | color: Kube.Colors.viewBackgroundColor | 146 | color: Kube.Colors.viewBackgroundColor |
131 | } | 147 | } |
132 | Kube.Icon { | 148 | Kube.Icon { |
133 | id: statusIcon | 149 | id: statusIcon |
134 | visible: false | 150 | visible: false |
135 | iconName: "" | 151 | iconName: "" |
136 | states: [ | 152 | states: [ |
137 | State { | 153 | State { |
138 | name: "busy"; when: model.status == Kube.FolderListModel.InProgressStatus | 154 | name: "busy"; when: model.status == Kube.FolderListModel.InProgressStatus |
139 | PropertyChanges { target: statusIcon; iconName: Kube.Icons.busy_inverted ; visible: styleData.selected } | 155 | PropertyChanges { target: statusIcon; iconName: Kube.Icons.busy_inverted ; visible: styleData.selected } |
140 | }, | 156 | }, |
141 | State { | 157 | State { |
142 | name: "error"; when: model.status == Kube.FolderListModel.ErrorStatus | 158 | name: "error"; when: model.status == Kube.FolderListModel.ErrorStatus |
143 | //The error status should only be visible for a moment, otherwise we'll eventually always show errors everywhere. | 159 | //The error status should only be visible for a moment, otherwise we'll eventually always show errors everywhere. |
144 | PropertyChanges { target: statusIcon; iconName: Kube.Icons.error_inverted; visible: styleData.selected } | 160 | PropertyChanges { target: statusIcon; iconName: Kube.Icons.error_inverted; visible: styleData.selected } |
145 | }, | 161 | }, |
146 | State { | 162 | State { |
147 | name: "checkmark"; when: model.status == Kube.FolderListModel.SuccessStatus | 163 | name: "checkmark"; when: model.status == Kube.FolderListModel.SuccessStatus |
148 | //The success status should only be visible for a moment, otherwise we'll eventually always show checkmarks everywhere. | 164 | //The success status should only be visible for a moment, otherwise we'll eventually always show checkmarks everywhere. |
149 | PropertyChanges { target: statusIcon; iconName: Kube.Icons.success_inverted; visible: styleData.selected} | 165 | PropertyChanges { target: statusIcon; iconName: Kube.Icons.success_inverted; visible: styleData.selected} |
150 | } | 166 | } |
151 | ] | 167 | ] |
152 | } | ||
153 | } | 168 | } |
154 | } | 169 | } |
155 | |||
156 | backgroundColor: Kube.Colors.textColor | ||
157 | highlightedTextColor: Kube.Colors.highlightedTextColor | ||
158 | } | 170 | } |
171 | |||
172 | backgroundColor: Kube.Colors.textColor | ||
173 | highlightedTextColor: Kube.Colors.highlightedTextColor | ||
159 | } | 174 | } |
160 | } | 175 | } |