Unity 8
PanelMenu.qml
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  */
16 
17 import QtQuick 2.4
18 import Ubuntu.Components 1.3
19 import Ubuntu.Gestures 0.1
20 import "../Components"
21 import "Indicators"
22 
23 Showable {
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
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  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
51 
52  signal showTapped()
53 
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  }
67 
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  }
79 
80  shown: false
81  height: minimizedPanelHeight
82 
83  onUnitProgressChanged: d.updateState()
84 
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
93 
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  }
103 
104  MenuContent {
105  id: content
106  objectName: "menuContent"
107 
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  }
119 
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
131 
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  }
147 
148  Rectangle {
149  anchors.fill: bar
150  color: panelColor
151  visible: !root.fullyClosed
152  }
153 
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  }
166 
167  PanelBar {
168  id: bar
169  objectName: "indicatorsBar"
170 
171  anchors {
172  left: parent.left
173  right: parent.right
174  }
175  expanded: false
176  enableLateralChanges: false
177  lateralPosition: -1
178  unitProgress: root.unitProgress
179 
180  height: expanded ? expandedPanelHeight : minimizedPanelHeight
181  Behavior on height { NumberAnimation { duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing } }
182  }
183 
184  ScrollCalculator {
185  id: leftScroller
186  width: units.gu(5)
187  anchors.left: bar.left
188  height: bar.height
189 
190  forceScrollingPercentage: 0.33
191  stopScrollThreshold: units.gu(0.75)
192  direction: Qt.RightToLeft
193  lateralPosition: -1
194 
195  onScroll: bar.addScrollOffset(-scrollAmount);
196  }
197 
198  ScrollCalculator {
199  id: rightScroller
200  width: units.gu(5)
201  anchors.right: bar.right
202  height: bar.height
203 
204  forceScrollingPercentage: 0.33
205  stopScrollThreshold: units.gu(0.75)
206  direction: Qt.LeftToRight
207  lateralPosition: -1
208 
209  onScroll: bar.addScrollOffset(scrollAmount);
210  }
211 
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  }
225 
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
239 
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
251 
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  }
257 
258  MouseArea {
259  anchors.fill: __hideDragHandle
260  enabled: __hideDragHandle.enabled
261  onClicked: root.hide()
262  }
263 
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
274 
275  onTouchPositionChanged: {
276  if (root.state === "locked") {
277  d.xDisplacementSinceLock += (touchPosition.x - d.lastHideTouchX)
278  d.lastHideTouchX = touchPosition.x;
279  }
280  }
281  }
282 
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
291 
292  onVelocityAboveThresholdChanged: d.updateState()
293  }
294 
295  Connections {
296  target: showAnimation
297  onRunningChanged: {
298  if (showAnimation.running) {
299  root.state = "commit";
300  }
301  }
302  }
303 
304  Connections {
305  target: hideAnimation
306  onRunningChanged: {
307  if (hideAnimation.running) {
308  root.state = "initial";
309  }
310  }
311  }
312 
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()
320 
321  property real rowMappedLateralPosition: {
322  if (!d.activeDragHandle) return -1;
323  return d.activeDragHandle.mapToItem(bar, d.activeDragHandle.touchPosition.x, 0).x;
324  }
325 
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  }
339 
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"
408 }