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