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