Lomiri
Loading...
Searching...
No Matches
PanelMenu.qml
1/*
2 * Copyright (C) 2014-2016 Canonical Ltd.
3 * Copyright (C) 2020 UBports Foundation
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; version 3.
8 *
9 * This program is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with this program. If not, see <http://www.gnu.org/licenses/>.
16 */
17
18import QtQuick 2.15
19import Lomiri.Components 1.3
20import Lomiri.Gestures 0.1
21import "../Components"
22import "Indicators"
23
24Showable {
25 id: root
26 property alias model: bar.model
27 property alias showDragHandle: __showDragHandle
28 property alias hideDragHandle: __hideDragHandle
29 property alias overFlowWidth: bar.overFlowWidth
30 property alias verticalVelocityThreshold: yVelocityCalculator.velocityThreshold
31 property int minimizedPanelHeight: units.gu(3)
32 property int expandedPanelHeight: units.gu(7)
33 property real openedHeight: units.gu(71)
34 property bool enableHint: true
35 property bool showOnClick: true
36 property color panelColor: lightMode ? "#FFFFFF" : "#000000"
37 property real menuContentX: 0
38
39 property alias alignment: bar.alignment
40 property alias hideRow: bar.hideRow
41 property alias rowItemDelegate: bar.rowItemDelegate
42 property alias pageDelegate: content.pageDelegate
43
44 property var blurSource : null
45 property rect blurRect : Qt.rect(0, 0, 0, 0)
46 property bool lightMode : false
47
48 readonly property real unitProgress: Math.max(0, (height - minimizedPanelHeight) / (openedHeight - minimizedPanelHeight))
49 readonly property bool fullyOpened: unitProgress >= 1
50 readonly property bool partiallyOpened: unitProgress > 0 && unitProgress < 1.0
51 readonly property bool fullyClosed: unitProgress == 0
52 readonly property alias expanded: bar.expanded
53 readonly property int barWidth: bar.width
54 readonly property alias currentMenuIndex: bar.currentItemIndex
55
56 // Exposes the current contentX of the PanelBar's internal ListView. This
57 // must be used to offset absolute x values against the ListView, since
58 // we commonly add or remove elements and cause the contentX to change.
59 readonly property int rowContentX: bar.rowContentX
60
61 // The user tapped the panel and did not move.
62 // Note that this does not fire on mouse events, only touch events.
63 signal showTapped()
64
65 // TODO: Perhaps we need a animation standard for showing/hiding? Each showable seems to
66 // use its own values. Need to ask design about this.
67 showAnimation: SequentialAnimation {
68 StandardAnimation {
69 target: root
70 property: "height"
71 to: openedHeight
72 duration: LomiriAnimation.BriskDuration
73 easing.type: Easing.OutCubic
74 }
75 // set binding in case units.gu changes while menu open, so height correctly adjusted to fit
76 ScriptAction { script: root.height = Qt.binding( function(){ return root.openedHeight; } ) }
77 }
78
79 hideAnimation: SequentialAnimation {
80 StandardAnimation {
81 target: root
82 property: "height"
83 to: minimizedPanelHeight
84 duration: LomiriAnimation.BriskDuration
85 easing.type: Easing.OutCubic
86 }
87 // set binding in case units.gu changes while menu closed, so menu adjusts to fit
88 ScriptAction { script: root.height = Qt.binding( function(){ return root.minimizedPanelHeight; } ) }
89 }
90
91 shown: false
92 height: minimizedPanelHeight
93
94 onUnitProgressChanged: d.updateState()
95
96 BackgroundBlur {
97 x: 0
98 y: 0
99 width: root.blurRect.width
100 height: root.blurRect.height
101 visible: root.height > root.minimizedPanelHeight
102 sourceItem: root.blurSource
103 blurRect: root.blurRect
104 occluding: false
105 }
106
107 Item {
108 anchors {
109 left: parent.left
110 right: parent.right
111 top: bar.bottom
112 bottom: parent.bottom
113 }
114 clip: root.partiallyOpened
115
116 Rectangle {
117 color: Qt.rgba(root.panelColor.r,
118 root.panelColor.g,
119 root.panelColor.b,
120 1.0)
121 opacity: 0.85
122 anchors.fill: parent
123 }
124
125 // eater
126 MouseArea {
127 anchors.fill: content
128 hoverEnabled: true
129 acceptedButtons: Qt.AllButtons
130 onWheel: wheel.accepted = true;
131 enabled: root.state != "initial"
132 visible: content.visible
133 }
134
135 MenuContent {
136 id: content
137 objectName: "menuContent"
138
139 anchors {
140 left: parent.left
141 right: parent.right
142 top: parent.top
143 }
144 height: openedHeight - bar.height - handle.height
145 model: root.model
146 visible: root.unitProgress > 0
147 currentMenuIndex: bar.currentItemIndex
148 }
149 }
150
151 Handle {
152 id: handle
153 objectName: "handle"
154 anchors {
155 left: parent.left
156 right: parent.right
157 bottom: parent.bottom
158 }
159 height: units.gu(2)
160 active: d.activeDragHandle ? true : false
161 visible: !root.fullyClosed
162 }
163
164 Rectangle {
165 anchors.fill: bar
166 color: panelColor
167 visible: !root.fullyClosed
168 }
169
170 Keys.onPressed: {
171 if (event.key === Qt.Key_Left) {
172 bar.selectPreviousItem();
173 event.accepted = true;
174 } else if (event.key === Qt.Key_Right) {
175 bar.selectNextItem();
176 event.accepted = true;
177 } else if (event.key === Qt.Key_Escape) {
178 root.hide();
179 event.accepted = true;
180 }
181 }
182
183 PanelBar {
184 id: bar
185 objectName: "indicatorsBar"
186
187 anchors {
188 left: parent.left
189 right: parent.right
190 }
191 expanded: false
192 enableLateralChanges: false
193 lateralPosition: -1
194 lightMode: root.lightMode
195 unitProgress: root.unitProgress
196
197 height: expanded ? expandedPanelHeight : minimizedPanelHeight
198 Behavior on height { NumberAnimation { duration: LomiriAnimation.SnapDuration; easing: LomiriAnimation.StandardEasing } }
199 }
200
201 ScrollCalculator {
202 id: leftScroller
203 width: units.gu(5)
204 anchors.left: bar.left
205 height: bar.height
206
207 forceScrollingPercentage: 0.33
208 stopScrollThreshold: units.gu(0.75)
209 direction: Qt.RightToLeft
210 lateralPosition: -1
211
212 onScroll: bar.addScrollOffset(-scrollAmount);
213 }
214
215 ScrollCalculator {
216 id: rightScroller
217 width: units.gu(5)
218 anchors.right: bar.right
219 height: bar.height
220
221 forceScrollingPercentage: 0.33
222 stopScrollThreshold: units.gu(0.75)
223 direction: Qt.LeftToRight
224 lateralPosition: -1
225
226 onScroll: bar.addScrollOffset(scrollAmount);
227 }
228
229 MouseArea {
230 anchors.bottom: parent.bottom
231 anchors.left: alignment == Qt.AlignLeft ? parent.left : __showDragHandle.left
232 anchors.right: alignment == Qt.AlignRight ? parent.right : __showDragHandle.right
233 height: minimizedPanelHeight
234 enabled: __showDragHandle.enabled && showOnClick
235 onClicked: {
236 var barPosition = mapToItem(bar, mouseX, mouseY);
237 bar.selectItemAt(barPosition.x)
238 root.show()
239 }
240 }
241
242 DragHandle {
243 id: __showDragHandle
244 objectName: "showDragHandle"
245 anchors.bottom: parent.bottom
246 anchors.left: alignment == Qt.AlignLeft ? parent.left : undefined
247 anchors.leftMargin: -root.menuContentX
248 anchors.right: alignment == Qt.AlignRight ? parent.right : undefined
249 width: root.overFlowWidth + root.menuContentX
250 height: minimizedPanelHeight
251 direction: Direction.Downwards
252 enabled: !root.shown && root.available && !hideAnimation.running && !showAnimation.running
253 autoCompleteDragThreshold: maxTotalDragDistance / 2
254 stretch: true
255
256 onPressedChanged: {
257 if (pressed) {
258 touchPressTime = new Date().getTime();
259 } else {
260 var touchReleaseTime = new Date().getTime();
261 if (touchReleaseTime - touchPressTime <= 300 && distance < units.gu(1)) {
262 root.showTapped();
263 }
264 }
265 }
266 property var touchPressTime
267
268 // using hint regulates minimum to hint displacement, but in fullscreen mode, we need to do it manually.
269 overrideStartValue: enableHint ? minimizedPanelHeight : expandedPanelHeight + handle.height
270 maxTotalDragDistance: openedHeight - (enableHint ? minimizedPanelHeight : expandedPanelHeight + handle.height)
271 hintDisplacement: enableHint ? expandedPanelHeight - minimizedPanelHeight + handle.height : 0
272 }
273
274 MouseArea {
275 anchors.fill: __hideDragHandle
276 enabled: __hideDragHandle.enabled
277 onClicked: root.hide()
278 }
279
280 DragHandle {
281 id: __hideDragHandle
282 objectName: "hideDragHandle"
283 anchors.fill: handle
284 direction: Direction.Upwards
285 enabled: root.shown && root.available && !hideAnimation.running && !showAnimation.running
286 hintDisplacement: units.gu(3)
287 autoCompleteDragThreshold: maxTotalDragDistance / 6
288 stretch: true
289 maxTotalDragDistance: openedHeight - expandedPanelHeight - handle.height
290
291 onTouchPositionChanged: {
292 if (root.state === "locked") {
293 d.xDisplacementSinceLock += (touchPosition.x - d.lastHideTouchX)
294 d.lastHideTouchX = touchPosition.x;
295 }
296 }
297 }
298
299 PanelVelocityCalculator {
300 id: yVelocityCalculator
301 velocityThreshold: d.hasCommitted ? 0.1 : 0.3
302 trackedValue: d.activeDragHandle ?
303 (Direction.isPositive(d.activeDragHandle.direction) ?
304 d.activeDragHandle.distance :
305 -d.activeDragHandle.distance)
306 : 0
307
308 onVelocityAboveThresholdChanged: d.updateState()
309 }
310
311 Connections {
312 target: showAnimation
313 function onRunningChanged() {
314 if (showAnimation.running) {
315 root.state = "commit";
316 }
317 }
318 }
319
320 Connections {
321 target: hideAnimation
322 function onRunningChanged() {
323 if (hideAnimation.running) {
324 root.state = "initial";
325 }
326 }
327 }
328
329 QtObject {
330 id: d
331 property var activeDragHandle: showDragHandle.dragging ? showDragHandle : hideDragHandle.dragging ? hideDragHandle : null
332 property bool hasCommitted: false
333 property real lastHideTouchX: 0
334 property real xDisplacementSinceLock: 0
335 onXDisplacementSinceLockChanged: d.updateState()
336
337 property real rowMappedLateralPosition: {
338 if (!d.activeDragHandle) return -1;
339 return d.activeDragHandle.mapToItem(bar, d.activeDragHandle.touchPosition.x, 0).x;
340 }
341
342 function updateState() {
343 if (!showAnimation.running && !hideAnimation.running && d.activeDragHandle) {
344 if (unitProgress <= 0) {
345 root.state = "initial";
346 // lock indicator if we've been committed and aren't moving too much laterally or too fast up.
347 } else if (d.hasCommitted && (Math.abs(d.xDisplacementSinceLock) < units.gu(2) || yVelocityCalculator.velocityAboveThreshold)) {
348 root.state = "locked";
349 } else {
350 root.state = "reveal";
351 }
352 }
353 }
354 }
355
356 states: [
357 State {
358 name: "initial"
359 PropertyChanges { target: d; hasCommitted: false; restoreEntryValues: false }
360 },
361 State {
362 name: "reveal"
363 StateChangeScript {
364 script: {
365 yVelocityCalculator.reset();
366 // initial item selection
367 if (!d.hasCommitted) bar.selectItemAt(d.rowMappedLateralPosition);
368 d.hasCommitted = false;
369 }
370 }
371 PropertyChanges {
372 target: bar
373 expanded: true
374 // changes to lateral touch position effect which indicator is selected
375 lateralPosition: d.rowMappedLateralPosition
376 // vertical velocity determines if changes in lateral position has an effect
377 enableLateralChanges: d.activeDragHandle &&
378 !yVelocityCalculator.velocityAboveThreshold
379 }
380 // left scroll bar handling
381 PropertyChanges {
382 target: leftScroller
383 lateralPosition: {
384 if (!d.activeDragHandle) return -1;
385 var mapped = d.activeDragHandle.mapToItem(leftScroller, d.activeDragHandle.touchPosition.x, 0);
386 return mapped.x;
387 }
388 }
389 // right scroll bar handling
390 PropertyChanges {
391 target: rightScroller
392 lateralPosition: {
393 if (!d.activeDragHandle) return -1;
394 var mapped = d.activeDragHandle.mapToItem(rightScroller, d.activeDragHandle.touchPosition.x, 0);
395 return mapped.x;
396 }
397 }
398 },
399 State {
400 name: "locked"
401 StateChangeScript {
402 script: {
403 d.xDisplacementSinceLock = 0;
404 d.lastHideTouchX = hideDragHandle.touchPosition.x;
405 }
406 }
407 PropertyChanges { target: bar; expanded: true }
408 },
409 State {
410 name: "commit"
411 extend: "locked"
412 PropertyChanges { target: root; focus: true }
413 PropertyChanges { target: bar; interactive: true }
414 PropertyChanges {
415 target: d;
416 hasCommitted: true
417 lastHideTouchX: 0
418 xDisplacementSinceLock: 0
419 restoreEntryValues: false
420 }
421 }
422 ]
423 state: "initial"
424}