git.iko.soy/unity8
on 455dd39 help sign in
unity8/qml/Panel/PanelMenu.qml
408 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 signal showTapped()
54 // TODO: Perhaps we need a animation standard for showing/hiding? Each showable seems to
55 // use its own values. Need to ask design about this.
56 showAnimation: SequentialAnimation {
57 StandardAnimation {
58 target: root
59 property: "height"
60 to: openedHeight
61 duration: UbuntuAnimation.BriskDuration
62 easing.type: Easing.OutCubic
63 }
64 // set binding in case units.gu changes while menu open, so height correctly adjusted to fit
65 ScriptAction { script: root.height = Qt.binding( function(){ return root.openedHeight; } ) }
66 }
68 hideAnimation: SequentialAnimation {
69 StandardAnimation {
70 target: root
71 property: "height"
72 to: minimizedPanelHeight
73 duration: UbuntuAnimation.BriskDuration
74 easing.type: Easing.OutCubic
75 }
76 // set binding in case units.gu changes while menu closed, so menu adjusts to fit
77 ScriptAction { script: root.height = Qt.binding( function(){ return root.minimizedPanelHeight; } ) }
78 }
80 shown: false
81 height: minimizedPanelHeight
83 onUnitProgressChanged: d.updateState()
85 Item {
86 anchors {
87 left: parent.left
88 right: parent.right
89 top: bar.bottom
90 bottom: parent.bottom
91 }
92 clip: root.partiallyOpened
94 // eater
95 MouseArea {
96 anchors.fill: content
97 hoverEnabled: true
98 acceptedButtons: Qt.AllButtons
99 onWheel: wheel.accepted = true;
100 enabled: root.state != "initial"
101 visible: content.visible
102 }
104 MenuContent {
105 id: content
106 objectName: "menuContent"
108 anchors {
109 left: parent.left
110 right: parent.right
111 top: parent.top
112 }
113 height: openedHeight - bar.height - handle.height
114 model: root.model
115 visible: root.unitProgress > 0
116 currentMenuIndex: bar.currentItemIndex
117 }
118 }
120 Handle {
121 id: handle
122 objectName: "handle"
123 anchors {
124 left: parent.left
125 right: parent.right
126 bottom: parent.bottom
127 }
128 height: units.gu(2)
129 active: d.activeDragHandle ? true : false
130 visible: !root.fullyClosed
132 //small shadow gradient at bottom of menu
133 Rectangle {
134 anchors {
135 left: parent.left
136 right: parent.right
137 bottom: parent.top
138 }
139 height: units.gu(0.5)
140 gradient: Gradient {
141 GradientStop { position: 0.0; color: "transparent" }
142 GradientStop { position: 1.0; color: theme.palette.normal.background }
143 }
144 opacity: 0.3
145 }
146 }
148 Rectangle {
149 anchors.fill: bar
150 color: panelColor
151 visible: !root.fullyClosed
152 }
154 Keys.onPressed: {
155 if (event.key === Qt.Key_Left) {
156 bar.selectPreviousItem();
157 event.accepted = true;
158 } else if (event.key === Qt.Key_Right) {
159 bar.selectNextItem();
160 event.accepted = true;
161 } else if (event.key === Qt.Key_Escape) {
162 root.hide();
163 event.accepted = true;
164 }
165 }
167 PanelBar {
168 id: bar
169 objectName: "indicatorsBar"
171 anchors {
172 left: parent.left
173 right: parent.right
174 }
175 expanded: false
176 enableLateralChanges: false
177 lateralPosition: -1
178 unitProgress: root.unitProgress
180 height: expanded ? expandedPanelHeight : minimizedPanelHeight
181 Behavior on height { NumberAnimation { duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing } }
182 }
184 ScrollCalculator {
185 id: leftScroller
186 width: units.gu(5)
187 anchors.left: bar.left
188 height: bar.height
190 forceScrollingPercentage: 0.33
191 stopScrollThreshold: units.gu(0.75)
192 direction: Qt.RightToLeft
193 lateralPosition: -1
195 onScroll: bar.addScrollOffset(-scrollAmount);
196 }
198 ScrollCalculator {
199 id: rightScroller
200 width: units.gu(5)
201 anchors.right: bar.right
202 height: bar.height
204 forceScrollingPercentage: 0.33
205 stopScrollThreshold: units.gu(0.75)
206 direction: Qt.LeftToRight
207 lateralPosition: -1
209 onScroll: bar.addScrollOffset(scrollAmount);
210 }
212 MouseArea {
213 anchors.bottom: parent.bottom
214 anchors.left: alignment == Qt.AlignLeft ? parent.left : undefined
215 anchors.right: alignment == Qt.AlignRight ? parent.right : undefined
216 width: root.barWidth // show handle should only cover panel items.
217 height: minimizedPanelHeight
218 enabled: __showDragHandle.enabled && showOnClick
219 onClicked: {
220 var barPosition = mapToItem(bar, mouseX, mouseY);
221 bar.selectItemAt(barPosition.x)
222 root.show()
223 }
224 }
226 DragHandle {
227 id: __showDragHandle
228 objectName: "showDragHandle"
229 anchors.bottom: parent.bottom
230 anchors.left: alignment == Qt.AlignLeft ? parent.left : undefined
231 anchors.leftMargin: -root.menuContentX
232 anchors.right: alignment == Qt.AlignRight ? parent.right : undefined
233 width: root.barWidth + root.menuContentX // show handle should only cover panel items.
234 height: minimizedPanelHeight
235 direction: Direction.Downwards
236 enabled: !root.shown && root.available
237 autoCompleteDragThreshold: maxTotalDragDistance / 2
238 stretch: true
240 onPressedChanged: {
241 if (pressed) {
242 touchPressTime = new Date().getTime();
243 } else {
244 var touchReleaseTime = new Date().getTime();
245 if (touchReleaseTime - touchPressTime <= 300) {
246 root.showTapped();
247 }
248 }
249 }
250 property var touchPressTime
252 // using hint regulates minimum to hint displacement, but in fullscreen mode, we need to do it manually.
253 overrideStartValue: enableHint ? minimizedPanelHeight : expandedPanelHeight + handle.height
254 maxTotalDragDistance: openedHeight - (enableHint ? minimizedPanelHeight : expandedPanelHeight + handle.height)
255 hintDisplacement: enableHint ? expandedPanelHeight - minimizedPanelHeight + handle.height : 0
256 }
258 MouseArea {
259 anchors.fill: __hideDragHandle
260 enabled: __hideDragHandle.enabled
261 onClicked: root.hide()
262 }
264 DragHandle {
265 id: __hideDragHandle
266 objectName: "hideDragHandle"
267 anchors.fill: handle
268 direction: Direction.Upwards
269 enabled: root.shown && root.available
270 hintDisplacement: units.gu(3)
271 autoCompleteDragThreshold: maxTotalDragDistance / 6
272 stretch: true
273 maxTotalDragDistance: openedHeight - expandedPanelHeight - handle.height
275 onTouchPositionChanged: {
276 if (root.state === "locked") {
277 d.xDisplacementSinceLock += (touchPosition.x - d.lastHideTouchX)
278 d.lastHideTouchX = touchPosition.x;
279 }
280 }
281 }
283 PanelVelocityCalculator {
284 id: yVelocityCalculator
285 velocityThreshold: d.hasCommitted ? 0.1 : 0.3
286 trackedValue: d.activeDragHandle ?
287 (Direction.isPositive(d.activeDragHandle.direction) ?
288 d.activeDragHandle.distance :
289 -d.activeDragHandle.distance)
290 : 0
292 onVelocityAboveThresholdChanged: d.updateState()
293 }
295 Connections {
296 target: showAnimation
297 onRunningChanged: {
298 if (showAnimation.running) {
299 root.state = "commit";
300 }
301 }
302 }
304 Connections {
305 target: hideAnimation
306 onRunningChanged: {
307 if (hideAnimation.running) {
308 root.state = "initial";
309 }
310 }
311 }
313 QtObject {
314 id: d
315 property var activeDragHandle: showDragHandle.dragging ? showDragHandle : hideDragHandle.dragging ? hideDragHandle : null
316 property bool hasCommitted: false
317 property real lastHideTouchX: 0
318 property real xDisplacementSinceLock: 0
319 onXDisplacementSinceLockChanged: d.updateState()
321 property real rowMappedLateralPosition: {
322 if (!d.activeDragHandle) return -1;
323 return d.activeDragHandle.mapToItem(bar, d.activeDragHandle.touchPosition.x, 0).x;
324 }
326 function updateState() {
327 if (!showAnimation.running && !hideAnimation.running && d.activeDragHandle) {
328 if (unitProgress <= 0) {
329 root.state = "initial";
330 // lock indicator if we've been committed and aren't moving too much laterally or too fast up.
331 } else if (d.hasCommitted && (Math.abs(d.xDisplacementSinceLock) < units.gu(2) || yVelocityCalculator.velocityAboveThreshold)) {
332 root.state = "locked";
333 } else {
334 root.state = "reveal";
335 }
336 }
337 }
338 }
340 states: [
341 State {
342 name: "initial"
343 PropertyChanges { target: d; hasCommitted: false; restoreEntryValues: false }
344 },
345 State {
346 name: "reveal"
347 StateChangeScript {
348 script: {
349 yVelocityCalculator.reset();
350 // initial item selection
351 if (!d.hasCommitted) bar.selectItemAt(d.rowMappedLateralPosition);
352 d.hasCommitted = false;
353 }
354 }
355 PropertyChanges {
356 target: bar
357 expanded: true
358 // changes to lateral touch position effect which indicator is selected
359 lateralPosition: d.rowMappedLateralPosition
360 // vertical velocity determines if changes in lateral position has an effect
361 enableLateralChanges: d.activeDragHandle &&
362 !yVelocityCalculator.velocityAboveThreshold
363 }
364 // left scroll bar handling
365 PropertyChanges {
366 target: leftScroller
367 lateralPosition: {
368 if (!d.activeDragHandle) return -1;
369 var mapped = d.activeDragHandle.mapToItem(leftScroller, d.activeDragHandle.touchPosition.x, 0);
370 return mapped.x;
371 }
372 }
373 // right scroll bar handling
374 PropertyChanges {
375 target: rightScroller
376 lateralPosition: {
377 if (!d.activeDragHandle) return -1;
378 var mapped = d.activeDragHandle.mapToItem(rightScroller, d.activeDragHandle.touchPosition.x, 0);
379 return mapped.x;
380 }
381 }
382 },
383 State {
384 name: "locked"
385 StateChangeScript {
386 script: {
387 d.xDisplacementSinceLock = 0;
388 d.lastHideTouchX = hideDragHandle.touchPosition.x;
389 }
390 }
391 PropertyChanges { target: bar; expanded: true }
392 },
393 State {
394 name: "commit"
395 extend: "locked"
396 PropertyChanges { target: root; focus: true }
397 PropertyChanges { target: bar; interactive: true }
398 PropertyChanges {
399 target: d;
400 hasCommitted: true
401 lastHideTouchX: 0
402 xDisplacementSinceLock: 0
403 restoreEntryValues: false
404 }
405 }
406 ]
407 state: "initial"