Unity 8
IndicatorsMenu.qml
1 /*
2  * Copyright (C) 2014 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 indicatorsModel: bar.indicatorsModel
26  property alias showDragHandle: __showDragHandle
27  property alias hideDragHandle: __hideDragHandle
28  property alias overFlowWidth: bar.overFlowWidth
29  property alias verticalVelocityThreshold: yVelocityCalculator.velocityThreshold
30  property alias currentIndicator: bar.currentIndicator
31  property int minimizedPanelHeight: units.gu(3)
32  property int expandedPanelHeight: units.gu(7)
33  property real openedHeight: units.gu(71)
34  readonly property real unitProgress: Math.max(0, (height - minimizedPanelHeight) / (openedHeight - minimizedPanelHeight))
35  readonly property bool fullyOpened: unitProgress >= 1
36  readonly property bool partiallyOpened: unitProgress > 0 && unitProgress < 1.0
37  readonly property bool fullyClosed: unitProgress == 0
38  property bool enableHint: true
39  property bool contentEnabled: true
40  property bool showOnClick: true
41  property color panelColor: "black"
42 
43  signal showTapped(point position)
44 
45  // TODO: Perhaps we need a animation standard for showing/hiding? Each showable seems to
46  // use its own values. Need to ask design about this.
47  showAnimation: StandardAnimation {
48  property: "height"
49  to: openedHeight
50  duration: UbuntuAnimation.BriskDuration
51  easing.type: Easing.OutCubic
52  }
53 
54  hideAnimation: StandardAnimation {
55  property: "height"
56  to: minimizedPanelHeight
57  duration: UbuntuAnimation.BriskDuration
58  easing.type: Easing.OutCubic
59  }
60 
61  height: minimizedPanelHeight
62 
63  onUnitProgressChanged: d.updateState()
64  clip: root.partiallyOpened
65 
66  IndicatorsLight {
67  id: indicatorLights
68  }
69 
70  // eater
71  MouseArea {
72  anchors.fill: parent
73  hoverEnabled: true
74  }
75 
76  MenuContent {
77  id: content
78  objectName: "menuContent"
79 
80  anchors {
81  left: parent.left
82  right: parent.right
83  top: bar.bottom
84  }
85  height: openedHeight - bar.height - handle.height
86  indicatorsModel: root.indicatorsModel
87  visible: root.unitProgress > 0
88  enabled: contentEnabled
89  currentMenuIndex: bar.currentItemIndex
90  }
91 
92  Handle {
93  id: handle
94  objectName: "handle"
95  anchors {
96  left: parent.left
97  right: parent.right
98  bottom: parent.bottom
99  }
100  height: units.gu(2)
101  active: d.activeDragHandle ? true : false
102 
103  //small shadow gradient at bottom of menu
104  Rectangle {
105  anchors {
106  left: parent.left
107  right: parent.right
108  bottom: parent.top
109  }
110  height: units.gu(0.5)
111  gradient: Gradient {
112  GradientStop { position: 0.0; color: "transparent" }
113  GradientStop { position: 1.0; color: "black" }
114  }
115  opacity: 0.3
116  }
117  }
118 
119  Rectangle {
120  anchors.fill: bar
121  color: panelColor
122  }
123 
124  IndicatorsBar {
125  id: bar
126  objectName: "indicatorsBar"
127 
128  anchors {
129  left: parent.left
130  right: parent.right
131  }
132  expanded: false
133  enableLateralChanges: false
134  lateralPosition: -1
135  unitProgress: root.unitProgress
136 
137  height: expanded ? expandedPanelHeight : minimizedPanelHeight
138  Behavior on height { NumberAnimation { duration: UbuntuAnimation.SnapDuration; easing: UbuntuAnimation.StandardEasing } }
139  }
140 
141  ScrollCalculator {
142  id: leftScroller
143  width: units.gu(5)
144  anchors.left: bar.left
145  height: bar.height
146 
147  forceScrollingPercentage: 0.33
148  stopScrollThreshold: units.gu(0.75)
149  direction: Qt.RightToLeft
150  lateralPosition: -1
151 
152  onScroll: bar.addScrollOffset(-scrollAmount);
153  }
154 
155  ScrollCalculator {
156  id: rightScroller
157  width: units.gu(5)
158  anchors.right: bar.right
159  height: bar.height
160 
161  forceScrollingPercentage: 0.33
162  stopScrollThreshold: units.gu(0.75)
163  direction: Qt.LeftToRight
164  lateralPosition: -1
165 
166  onScroll: bar.addScrollOffset(scrollAmount);
167  }
168 
169  MouseArea {
170  anchors.bottom: parent.bottom
171  anchors.left: parent.left
172  anchors.right: parent.right
173  height: minimizedPanelHeight
174  enabled: __showDragHandle.enabled && showOnClick
175  onClicked: {
176  bar.selectItemAt(mouseX)
177  root.show()
178  }
179  }
180 
181  DragHandle {
182  id: __showDragHandle
183  objectName: "showDragHandle"
184  anchors.bottom: parent.bottom
185  anchors.left: parent.left
186  anchors.right: parent.right
187  height: minimizedPanelHeight
188  direction: Direction.Downwards
189  enabled: !root.shown && root.available
190  autoCompleteDragThreshold: maxTotalDragDistance / 2
191  stretch: true
192 
193  onPressedChanged: {
194  if (pressed) {
195  touchPressTime = new Date().getTime();
196  } else {
197  var touchReleaseTime = new Date().getTime();
198  if (touchReleaseTime - touchPressTime <= 300) {
199  root.showTapped(Qt.point(touchSceneX, touchSceneY));
200  }
201  }
202  }
203  property var touchPressTime
204 
205  // using hint regulates minimum to hint displacement, but in fullscreen mode, we need to do it manually.
206  overrideStartValue: enableHint ? minimizedPanelHeight : expandedPanelHeight + handle.height
207  maxTotalDragDistance: openedHeight - (enableHint ? minimizedPanelHeight : expandedPanelHeight + handle.height)
208  hintDisplacement: enableHint ? expandedPanelHeight - minimizedPanelHeight + handle.height : 0
209  }
210 
211  MouseArea {
212  anchors.fill: __hideDragHandle
213  enabled: __hideDragHandle.enabled
214  onClicked: root.hide()
215  }
216 
217  DragHandle {
218  id: __hideDragHandle
219  objectName: "hideDragHandle"
220  anchors.fill: handle
221  direction: Direction.Upwards
222  enabled: root.shown && root.available
223  hintDisplacement: units.gu(3)
224  autoCompleteDragThreshold: maxTotalDragDistance / 6
225  stretch: true
226  maxTotalDragDistance: openedHeight - expandedPanelHeight - handle.height
227 
228  onTouchSceneXChanged: {
229  if (root.state === "locked") {
230  d.xDisplacementSinceLock += (touchSceneX - d.lastHideTouchSceneX)
231  d.lastHideTouchSceneX = touchSceneX;
232  }
233  }
234  }
235 
236  PanelVelocityCalculator {
237  id: yVelocityCalculator
238  velocityThreshold: d.hasCommitted ? 0.1 : 0.3
239  trackedValue: d.activeDragHandle ? d.activeDragHandle.touchSceneY : 0
240 
241  onVelocityAboveThresholdChanged: d.updateState()
242  }
243 
244  Connections {
245  target: showAnimation
246  onRunningChanged: {
247  if (showAnimation.running) {
248  root.state = "commit";
249  }
250  }
251  }
252 
253  Connections {
254  target: hideAnimation
255  onRunningChanged: {
256  if (hideAnimation.running) {
257  root.state = "initial";
258  }
259  }
260  }
261 
262  QtObject {
263  id: d
264  property var activeDragHandle: showDragHandle.dragging ? showDragHandle : hideDragHandle.dragging ? hideDragHandle : null
265  property bool hasCommitted: false
266  property real lastHideTouchSceneX: 0
267  property real xDisplacementSinceLock: 0
268  onXDisplacementSinceLockChanged: d.updateState()
269 
270  property real rowMappedLateralPosition: {
271  if (!d.activeDragHandle) return -1;
272  return d.activeDragHandle.mapToItem(bar, d.activeDragHandle.touchX, 0).x;
273  }
274 
275  function updateState() {
276  if (!showAnimation.running && !hideAnimation.running && d.activeDragHandle) {
277  if (unitProgress <= 0) {
278  root.state = "initial";
279  // lock indicator if we've been committed and aren't moving too much laterally or too fast up.
280  } else if (d.hasCommitted && (Math.abs(d.xDisplacementSinceLock) < units.gu(2) || yVelocityCalculator.velocityAboveThreshold)) {
281  root.state = "locked";
282  } else {
283  root.state = "reveal";
284  }
285  }
286  }
287  }
288 
289  states: [
290  State {
291  name: "initial"
292  PropertyChanges { target: d; hasCommitted: false; restoreEntryValues: false }
293  },
294  State {
295  name: "reveal"
296  StateChangeScript {
297  script: {
298  yVelocityCalculator.reset();
299  // initial item selection
300  if (!d.hasCommitted) bar.selectItemAt(d.activeDragHandle ? d.activeDragHandle.touchX : -1);
301  d.hasCommitted = false;
302  }
303  }
304  PropertyChanges {
305  target: bar
306  expanded: true
307  // changes to lateral touch position effect which indicator is selected
308  lateralPosition: d.rowMappedLateralPosition
309  // vertical velocity determines if changes in lateral position has an effect
310  enableLateralChanges: d.activeDragHandle &&
311  !yVelocityCalculator.velocityAboveThreshold
312  }
313  // left scroll bar handling
314  PropertyChanges {
315  target: leftScroller
316  lateralPosition: {
317  if (!d.activeDragHandle) return -1;
318  var mapped = d.activeDragHandle.mapToItem(leftScroller, d.activeDragHandle.touchX, 0);
319  return mapped.x;
320  }
321  }
322  // right scroll bar handling
323  PropertyChanges {
324  target: rightScroller
325  lateralPosition: {
326  if (!d.activeDragHandle) return -1;
327  var mapped = d.activeDragHandle.mapToItem(rightScroller, d.activeDragHandle.touchX, 0);
328  return mapped.x;
329  }
330  }
331  },
332  State {
333  name: "locked"
334  StateChangeScript {
335  script: {
336  d.xDisplacementSinceLock = 0;
337  d.lastHideTouchSceneX = hideDragHandle.touchSceneX;
338  }
339  }
340  PropertyChanges { target: bar; expanded: true }
341  },
342  State {
343  name: "commit"
344  extend: "locked"
345  PropertyChanges { target: bar; interactive: true }
346  PropertyChanges {
347  target: d;
348  hasCommitted: true
349  lastHideTouchSceneX: 0
350  xDisplacementSinceLock: 0
351  restoreEntryValues: false
352  }
353  }
354  ]
355  state: "initial"
356 }