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