Gitiles
Code Review Sign In
review.jami.net / jami-client-qt / 214d9add5870b78302bb73c7a3bbdee9f1f1fc8c / . / src / settingsview / components / KeyBoardShortcutTable.qml
blob: d21789ca09cb8e3885cf362dbce9eee37ad38fbd [file] [log] [blame]
Sébastien Blin214d9ad2020-08-13 13:05:17 -0400[diff] [blame^]1/*
2 * Copyright (C) 2019-2020 by Savoir-faire Linux
3 * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
4 *
5 * This program is free software; you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation; either version 3 of the License, or
8 * (at your option) any later version.
9 *
10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with this program. If not, see <http://www.gnu.org/licenses/>.
17 */
18import QtQuick 2.9
19import QtQuick.Controls 2.2
20import QtQuick.Controls 1.4
21import QtQuick.Controls.Styles 1.4
22import QtQuick.Layouts 1.3
23
24Dialog {
25 id: root
26 modal: true
27
28 width: rectangle.width + 24
29 height: rectangle.height + 24
30
31 Rectangle {
32 id: rectangle
33
34 property int minWidth: 1200
35 property int minHeight: 500
36
37 implicitWidth: minWidth
38 implicitHeight: minHeight
39 color: "white"
40 radius: 30
41
42 Rectangle {
43 width: 500
44 height: t_metrics_title.tightBoundingRect.height + 15
45 color: "#e0e0e0"
46 radius: 8
47 anchors.top: parent.top
48 anchors.topMargin: 10
49 anchors.horizontalCenter: parent.horizontalCenter
50 Text {
51 id : titleText
52 anchors.centerIn: parent
53 anchors.leftMargin: 10
54 font.family: "Arial"
55 font.pointSize: 12
56 font.bold: true
57 text: "Shortcuts"
58 color: "black"
59 }
60 TextMetrics {
61 id: t_metrics_title
62 font: titleText.font
63 text: titleText.text
64 }
65 }
66
67 ListModel {
68 id: keyboardGeneralShortcutsModel
69 ListElement {
70 Shortcut: "Ctrl+J"
71 Description: qsTr("Open account list")
72 KeyLength: 2
73 }
74 ListElement {
75 Shortcut: "Ctrl+L"
76 Description: qsTr("Focus conversations list")
77 KeyLength: 2
78 }
79 ListElement {
80 Shortcut: "Ctrl+R"
81 Description: qsTr("Focus requests list")
82 KeyLength: 2
83 }
84 ListElement {
85 Shortcut: "Ctrl+↑"
86 Description: qsTr("Focus the previous conversation")
87 KeyLength: 2
88 }
89 ListElement {
90 Shortcut: "Ctrl+↓"
91 Description: qsTr("Focus the next conversation")
92 KeyLength: 2
93 }
94 ListElement {
95 Shortcut: "Ctrl+F"
96 Description: qsTr("Focus search bar")
97 KeyLength: 2
98 }
99 ListElement {
100 Shortcut: "F11"
101 Description: qsTr("Toggle fullscreen")
102 KeyLength: 1
103 }
104 }
105 ListModel {
106 id: keyboardConversationShortcutsModel
107 ListElement {
108 Shortcut: "Shift+Ctrl+C"
109 Description: qsTr("Start an audio call")
110 KeyLength: 3
111 }
112 ListElement {
113 Shortcut: "Shift+Ctrl+X"
114 Description: qsTr("Start an video call")
115 KeyLength: 3
116 }
117 ListElement {
118 Shortcut: "Shift+Ctrl+L"
119 Description: qsTr("Clear history")
120 KeyLength: 3
121 }
122 ListElement {
123 Shortcut: "Shift+Ctrl+B"
124 Description: qsTr("Block contact")
125 KeyLength: 3
126 }
127 ListElement {
128 Shortcut: "Shift+Ctrl+A"
129 Description: qsTr("Accept contact request")
130 KeyLength: 3
131 }
132 }
133 ListModel {
134 id: keyboardSettingsShortcutsModel
135 ListElement {
136 Shortcut: "Ctrl+M"
137 Description: qsTr("Toggle media settings")
138 KeyLength: 2
139 }
140 ListElement {
141 Shortcut: "Ctrl+G"
142 Description: qsTr("Toggle general settings")
143 KeyLength: 2
144 }
145 ListElement {
146 Shortcut: "Ctrl+I"
147 Description: qsTr("Toggle account settings")
148 KeyLength: 2
149 }
150 ListElement {
151 Shortcut: "Ctrl+Shift+N"
152 Description: qsTr("Open account creation's wizard")
153 KeyLength: 3
154 }
155 ListElement {
156 Shortcut: "F10"
157 Description: qsTr("Open this window")
158 KeyLength: 1
159 }
160 }
161 ListModel {
162 id: keyboardCallsShortcutsModel
163 ListElement {
164 Shortcut: "Ctrl+Y"
165 Description: qsTr("Answer an incoming call")
166 KeyLength: 2
167 }
168 ListElement {
169 Shortcut: "Ctrl+D"
170 Description: qsTr("Hangup current call")
171 KeyLength: 2
172 }
173 ListElement {
174 Shortcut: "Ctrl+Shift+D"
175 Description: qsTr("Decline the call request")
176 KeyLength: 2
177 }
178 }
179 Component {
180 id: shortcutDelegateWithThreeKeys
181
182 Rectangle {
183 id: cellRectWithThreeKeys
184
185 implicitWidth: minWidth /2
186 implicitHeight: 50
187 anchors.left: parent.left
188 anchors.leftMargin: 50
189 color: "white"
190 border.color: "white"
191 Rectangle {
192 id: containerRectWithThreeKeys
193
194 implicitWidth: parent.width - 10
195 implicitHeight: 50
196 anchors.horizontalCenter: parent.horizontalCenter
197 anchors.verticalCenter: parent.verticalCenter
198
199 Component.onCompleted: {
200 var componentKeyOne = Qt.createComponent("KeyBoardShortcutKey.qml")
201 if (componentKeyOne.status === Component.Ready) {
202 var objectKeyOne = componentKeyOne.createObject(containerRectWithThreeKeys)
203 objectKeyOne.anchors.verticalCenter = containerRectWithThreeKeys.verticalCenter
204 objectKeyOne.anchors.left = containerRectWithThreeKeys.left
205 objectKeyOne.text = Qt.binding(function() { return modelData.Shortcut.split("+")[0] })
206 }
207 if (modelData.Shortcut.split("+").length === 1)
208 return
209 var componentPlusSign = Qt.createQmlObject('import QtQuick 2.0;' +
210 'Text {anchors.verticalCenter: containerRectWithThreeKeys.verticalCenter;' +
211 'anchors.verticalCenterOffset: -2;' +
212 'anchors.left: containerRectWithThreeKeys.left;' +
213 'anchors.leftMargin: 30;' +
214 'color: "#525252";' +
215 'font.bold: true;' +
216 'font.pointSize : 12;' +
217 'text: "+"}',
218 containerRectWithThreeKeys)
219
220 var componentKeyTwo = Qt.createComponent("KeyBoardShortcutKey.qml")
221 if (componentKeyTwo.status === Component.Ready) {
222 var objectKeyTwo = componentKeyTwo.createObject(containerRectWithThreeKeys)
223 objectKeyTwo.anchors.verticalCenter = containerRectWithThreeKeys.verticalCenter
224 objectKeyTwo.anchors.left = containerRectWithThreeKeys.left
225 objectKeyTwo.anchors.leftMargin = componentPlusSign.anchors.leftMargin + 42
226 objectKeyTwo.text = Qt.binding(function() { return modelData.Shortcut.split("+")[1] })
227 }
228
229 if (modelData.Shortcut.split("+").length === 2)
230 return
231 var componentPlusSignTwo = Qt.createQmlObject('import QtQuick 2.0;' +
232 'Text {anchors.verticalCenter: containerRectWithThreeKeys.verticalCenter;' +
233 'anchors.verticalCenterOffset: -2;' +
234 'anchors.left: containerRectWithThreeKeys.left;' +
235 'anchors.leftMargin: 97;' +
236 'color: "#525252";' +
237 'font.bold: true;' +
238 'font.pointSize : 12;' +
239 'text: "+"}',
240 containerRectWithThreeKeys)
241
242 var componentKeyThree = Qt.createComponent("KeyBoardShortcutKey.qml")
243 if (componentKeyThree.status === Component.Ready) {
244 var objectKeyThree = componentKeyThree.createObject(containerRectWithThreeKeys)
245 objectKeyThree.anchors.verticalCenter = containerRectWithThreeKeys.verticalCenter
246 objectKeyThree.anchors.left = containerRectWithThreeKeys.left
247 objectKeyThree.anchors.leftMargin = componentPlusSignTwo.anchors.leftMargin + 35
248 objectKeyThree.text = Qt.binding(function() { return modelData.Shortcut.split("+")[2] })
249 }
250 }
251 }
252 }
253 }
254 Component {
255 id: descriptionDelegate
256
257 Rectangle {
258 implicitWidth: minWidth /2
259 implicitHeight: 50
260
261 color: "white"
262 border.color: "white"
263 Text {
264 id : descriptionText
265 anchors.verticalCenter: parent.verticalCenter
266 anchors.left: parent.left
267 anchors.leftMargin: 10
268 font.family: "Arial"
269 font.pointSize: 10
270 text: styleData.value
271 }
272 }
273 }
274
275 Column {
276 spacing: 2
277 id: columnAll
278 anchors.rightMargin: 20
279 anchors.leftMargin: 20
280 anchors.bottomMargin: 20
281 anchors.topMargin: 50
282
283 width: minWidth
284 height: minHeight - 100
285 anchors.fill: parent
286
287 StackLayout {
288 // pages
289 implicitWidth: parent.width
290 implicitHeight: parent.height - tabBar.height
291 currentIndex: tabBar.currentIndex
292 Item {
293 id: tabOne
294 Rectangle {
295 implicitWidth: parent.width / 2
296 implicitHeight: parent.height
297 anchors.left: parent.left
298 TableView {
299 id: generalTableView
300 anchors.fill: parent
301 horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
302 TableViewColumn {
303 role: "Description"
304 width: generalTableView.width / 2
305 delegate: descriptionDelegate
306 }
307 TableViewColumn {
308 role: "Shortcut"
309 width: generalTableView.width / 2
310 delegate: Component{
311 Loader {
312 property variant modelData: model
313 sourceComponent: shortcutDelegateWithThreeKeys
314 }
315 }
316 }
317 model: keyboardGeneralShortcutsModel
318 rowDelegate: Rectangle {
319 height: 50
320 color: "white"
321 }
322 style: TableViewStyle {
323 alternateBackgroundColor: "white"
324 frame: Rectangle {
325 border{
326 color: "transparent" // color of the border
327 }
328 }
329 headerDelegate: Rectangle {
330 // Only first column's header is shown
331 height: [t_metrics_general.tightBoundingRect.height + 10, 0][styleData.column % 2]
332 width: [parent.width, 0][styleData.column % 2]
333 color: "white"
334 radius: 10
335 anchors.top: parent.top
336 anchors.topMargin: 5
337 Text {
338 id : generalShortcutText
339 anchors.verticalCenter: parent.verticalCenter
340 anchors.left: parent.left
341 anchors.leftMargin: 10
342 font.family: "Arial"
343 font.pointSize: 12
344 text: styleData.column % 2 ? "" : "General"
345 color: "black"
346 }
347 TextMetrics {
348 id: t_metrics_general
349 font: generalShortcutText.font
350 text: generalShortcutText.text
351 }
352 }
353 }
354 }
355 }
356 Rectangle {
357 implicitWidth: parent.width / 2
358 implicitHeight: parent.height
359 anchors.right: parent.right
360
361 TableView {
362 id: conversationsTableView
363 anchors.fill: parent
364 horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
365 TableViewColumn {
366 role: "Description"
367 width: conversationsTableView.width / 2
368 delegate: descriptionDelegate
369 }
370 TableViewColumn {
371 role: "Shortcut"
372 width: conversationsTableView.width / 2
373 delegate: Component{
374 Loader {
375 property variant modelData: model
376 sourceComponent: shortcutDelegateWithThreeKeys
377 }
378 }
379 }
380 model: keyboardConversationShortcutsModel
381 rowDelegate: Rectangle {
382 height: 50
383 color: "white"
384 }
385 style: TableViewStyle {
386 alternateBackgroundColor: "white"
387 frame: Rectangle {
388 border{
389 color: "transparent" // color of the border
390 }
391 }
392 headerDelegate: Rectangle {
393 // Only first column's header is shown
394 height: [t_metrics_conversations.tightBoundingRect.height + 10, 0][styleData.column % 2]
395 width: [parent.width, 0][styleData.column % 2]
396 color: "white"
397 radius: 10
398 anchors.top: parent.top
399 anchors.topMargin: 5
400 Text {
401 id : conversationsShortcutText
402 anchors.verticalCenter: parent.verticalCenter
403 anchors.left: parent.left
404 anchors.leftMargin: 10
405 font.family: "Arial"
406 font.pointSize: 12
407 text: styleData.column % 2 ? "" : "Conversations"
408 color: "black"
409 }
410 TextMetrics {
411 id: t_metrics_conversations
412 font: conversationsShortcutText.font
413 text: conversationsShortcutText.text
414 }
415 }
416 }
417 }
418 }
419 }
420 Item {
421 id: tabTwo
422 Rectangle {
423 implicitWidth: parent.width / 2
424 implicitHeight: parent.height
425 anchors.left: parent.left
426 TableView {
427 id: callsTableView
428 anchors.fill: parent
429 horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
430 TableViewColumn {
431 role: "Description"
432 width: callsTableView.width / 2
433 delegate: descriptionDelegate
434 }
435 TableViewColumn {
436 role: "Shortcut"
437 width: callsTableView.width / 2
438 delegate: Component{
439 Loader {
440 property variant modelData: model
441 sourceComponent: shortcutDelegateWithThreeKeys
442 }
443 }
444 }
445 model: keyboardCallsShortcutsModel
446 rowDelegate: Rectangle {
447 height: 50
448 color: "white"
449 }
450 style: TableViewStyle {
451 alternateBackgroundColor: "white"
452 frame: Rectangle {
453 border{
454 color: "transparent" // color of the border
455 }
456 }
457 headerDelegate: Rectangle {
458 // Only first column's header is shown
459 height: [t_metrics_calls.tightBoundingRect.height + 10, 0][styleData.column % 2]
460 width: [parent.width, 0][styleData.column % 2]
461 color: "white"
462 radius: 10
463 anchors.top: parent.top
464 anchors.topMargin: 5
465 Text {
466 id : callsShortcutText
467 anchors.verticalCenter: parent.verticalCenter
468 anchors.left: parent.left
469 anchors.leftMargin: 10
470 font.family: "Arial"
471 font.pointSize: 12
472 text: styleData.column % 2 ? "" : "Calls"
473 color: "black"
474 }
475 // make sure that calls and settings header are parallel
476 TextMetrics {
477 id: t_metrics_calls
478 font: callsShortcutText.font
479 text: "Settings"
480 }
481 }
482 }
483 }
484 }
485 Rectangle {
486 implicitWidth: parent.width / 2
487 implicitHeight: parent.height
488 anchors.right: parent.right
489 TableView {
490 id: settingsTableView
491 anchors.fill: parent
492 horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
493 TableViewColumn {
494 role: "Description"
495 width: settingsTableView.width / 2
496 delegate: descriptionDelegate
497 }
498 TableViewColumn {
499 role: "Shortcut"
500 width: settingsTableView.width / 2
501 delegate: Component{
502 Loader {
503 property variant modelData: model
504 sourceComponent: shortcutDelegateWithThreeKeys
505 }
506 }
507 }
508 model: keyboardSettingsShortcutsModel
509 rowDelegate: Rectangle {
510 height: 50
511 color: "white"
512 }
513 style: TableViewStyle {
514 alternateBackgroundColor: "white"
515 frame: Rectangle {
516 border{
517 color: "transparent" // color of the border
518 }
519 }
520 headerDelegate: Rectangle {
521 // Only first column's header is shown
522 height: [t_metrics_settings.tightBoundingRect.height + 10, 0][styleData.column % 2]
523 width: [parent.width, 0][styleData.column % 2]
524 color: "white"
525 radius: 10
526 anchors.top: parent.top
527 anchors.topMargin: 5
528 Text {
529 id : settingsShortcutText
530 anchors.verticalCenter: parent.verticalCenter
531 anchors.left: parent.left
532 anchors.leftMargin: 10
533 font.family: "Arial"
534 font.pointSize: 12
535 text: styleData.column % 2 ? "" : "Settings"
536 color: "black"
537 }
538 TextMetrics {
539 id: t_metrics_settings
540 font: settingsShortcutText.font
541 text: settingsShortcutText.text
542 }
543 }
544 }
545 }
546 }
547 }
548 }
549 }
550 TabBar {
551 id: tabBar
552 anchors.horizontalCenter: parent.horizontalCenter
553 anchors.bottom: parent.bottom
554 anchors.bottomMargin: 15
555 width: 240
556 currentIndex: 0
557 TabButton {
558 id: pageOne
559 width: tabBar.width / 2
560 text: qsTr("1")
561 down: true
562 // customize tab button
563 contentItem: Text {
564 text: pageOne.text
565 font: pageOne.font
566 opacity: enabled ? 1.0 : 0.3
567 horizontalAlignment: Text.AlignHCenter
568 verticalAlignment: Text.AlignVCenter
569 elide: Text.ElideRight
570 }
571 // customize tab button
572 background: Rectangle {
573 id: buttonRectOne
574 implicitWidth: tabBar.width / 2
575 implicitHeight: tabBar.height
576 radius: 10
577 color: pageOne.down ? "#e0e0e0" :"#fdfdfd"
578 MouseArea {
579 anchors.fill: parent
580 hoverEnabled: true
581 onPressed: { buttonRectOne.color = "#c0c0c0"; tabBar.currentIndex = 0; pageOne.down = true; pageTwo.down = false;}
582 onReleased: { buttonRectOne.color = "#e0e0e0"; }
583 onEntered: { buttonRectOne.color = "#c7c7c7"; }
584 onExited: { buttonRectOne.color = Qt.binding(function() { return pageOne.down ? "#e0e0e0" :"#fdfdfd" }); }
585 }
586 }
587 }
588 TabButton {
589 id: pageTwo
590 text: qsTr("2")
591 width: tabBar.width / 2
592 contentItem: Text {
593 text: pageTwo.text
594 font: pageTwo.font
595 opacity: enabled ? 1.0 : 0.3
596 horizontalAlignment: Text.AlignHCenter
597 verticalAlignment: Text.AlignVCenter
598 elide: Text.ElideRight
599 }
600
601 background: Rectangle {
602 id: buttonRectTwo
603 implicitWidth: tabBar.width / 2
604 implicitHeight: tabBar.height
605 radius: 10
606 color: pageTwo.down ? "#e0e0e0" :"#fdfdfd"
607 MouseArea {
608 anchors.fill: parent
609 hoverEnabled: true
610 onPressed: { buttonRectTwo.color = "#c0c0c0"; tabBar.currentIndex = 1; pageTwo.down = true; pageOne.down = false;}
611 onReleased: { buttonRectTwo.color = "#e0e0e0"; }
612 onEntered: { buttonRectTwo.color = "#c7c7c7"; }
613 onExited: { buttonRectTwo.color = Qt.binding(function() { return pageTwo.down ? "#e0e0e0" :"#fdfdfd" }); }
614 }
615 }
616 }
617 }
618 }
619}