1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQml
import QtQuick
Rectangle {
id: window
width: 800
height: 640
color: "#3E606F"
FocusScope {
id: mainView
width: parent.width
height: parent.height
focus: true
TabMenu {
id: tabMenu
y: 160
width: parent.width
height: 160
keyUpTarget: listMenu
keyDownTarget: gridMenu
focus: true
activeFocusOnTab: true
onActiveFocusChanged: {
if (activeFocus)
mainView.state = "showTabViews"
}
}
GridMenu {
id: gridMenu
y: 320
width: parent.width
height: 320
activeFocusOnTab: true
keyUpTarget: tabMenu
keyDownTarget: listMenu
keyLeftTarget: contextMenu
onActiveFocusChanged: {
if (activeFocus)
mainView.state = "showGridViews"
}
}
ListMenu {
id: listMenu
y: 640
width: parent.width
height: 320
activeFocusOnTab: true
keyUpTarget: gridMenu
keyLeftTarget: contextMenu
onActiveFocusChanged: {
if (activeFocus)
mainView.state = "showListViews"
}
}
Rectangle {
id: shade
anchors.fill: parent
color: "black"
opacity: 0
}
states: [
State {
name: "showTabViews"
PropertyChanges {
tabMenu.y: 160
gridMenu.y: 320
listMenu.y: 640
}
},
State {
name: "showGridViews"
PropertyChanges {
tabMenu.y: 0
gridMenu.y: 160
listMenu.y: 480
}
},
State {
name: "showListViews"
PropertyChanges {
tabMenu.y: -160
gridMenu.y: 0
listMenu.y: 320
}
}
]
transitions: Transition {
NumberAnimation {
properties: "y"
duration: 600
easing.type: Easing.OutQuint
}
}
}
Image {
source: "images/arrow.png"
rotation: 90
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
anchors.margins: -10
onClicked: contextMenu.focus = true
}
}
ContextMenu {
keyRightTarget: mainView
id: contextMenu
x: -265
width: 260
height: parent.height
}
states: State {
name: "contextMenuOpen"
when: !mainView.activeFocus
PropertyChanges {
contextMenu {
x: 0
open: true
}
mainView.x: 130
shade.opacity: 0.25
}
}
transitions: Transition {
NumberAnimation {
properties: "x,opacity"
duration: 600
easing.type: Easing.OutQuint
}
}
}
|
