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