on xenial help sign in
shift flickable contents to avoid scrolling back to the beginning
commitb5ffd72f5ebd2510ba5383eede9cc7469d51e715 authorMichael Zanetti <michael.zanetti@canonical.com> dateMon 3 Feb 2014, 18:06 (13 years ago) parentfc96ca3
2 files changed+37−24
qml/Stages/PhoneStage.qml+33−22 qml/Stages/TransformedSpreadDelegate.qml+4−2
qml/Stages/PhoneStage.qml+33−22
@@ -192,11 +192,12 @@ Item {
192192 priv.requestNewScreenshot();
193193 spreadView.stage = 0;
194194 attachedToView = true;
195+ spreadView.contentX = -spreadView.shift;
195196 }
196197 if (dragging && !priv.waitingForScreenshot && attachedToView) {
197− spreadView.contentX = -touchX
198+ spreadView.contentX = -touchX - spreadView.shift
198199 }
199− if (attachedToView && spreadView.contentX >= spreadView.width * spreadView.positionMarker3) {
200+ if (attachedToView && spreadView.shiftedContentX >= spreadView.width * spreadView.positionMarker3) {
200201 attachedToView = false;
201202 spreadView.snap();
202203 }
@@ -240,8 +241,17 @@ Item {
240241 Flickable {
241242 id: spreadView
242243 anchors.fill: parent
243− visible: contentX > 0
244− contentWidth: spreadRow.width
244+ visible: spreadDragArea.dragging || stage > 0 || snapAnimation.running
245+ contentWidth: spreadRow.width - shift
246+ contentX: -shift
247+
248+ // The flickable needs to fill the screen in order to get touch events all over.
249+ // However, we don't want to the user to be able to scroll back all the way. For
250+ // that, the beginning of the gesture starts with a negative value for contentX
251+ // so the flickable wants to pull it into the view already. "shift" tunes the
252+ // distance where to "lock" the content.
253+ property real shift: width / 2
254+ property real shiftedContentX: contentX + shift
245255
246256 property int tileDistance: width / 4
247257
@@ -266,46 +276,46 @@ Item {
266276 onContentXChanged: {
267277 switch (stage) {
268278 case 0:
269− if (contentX > width * positionMarker2) {
279+ if (shiftedContentX > width * positionMarker2) {
270280 stage = 1;
271281 }
272282 break;
273283 case 1:
274− if (contentX < width * positionMarker2) {
284+ if (shiftedContentX < width * positionMarker2) {
275285 stage = 0;
276− } else if (contentX >= width * positionMarker4) {
286+ } else if (shiftedContentX >= width * positionMarker4) {
277287 stage = 2;
278288 }
279289 }
280290 }
281291
282292 function snap() {
283− if (contentX < positionMarker1 * width) {
284− snapAnimation.targetContentX = 0;
293+ if (shiftedContentX < positionMarker1 * width) {
294+ snapAnimation.targetContentX = -shift;
285295 snapAnimation.start();
286− } else if (contentX < positionMarker2 * width) {
296+ } else if (shiftedContentX < positionMarker2 * width) {
287297 print("selecting tile 1")
288298 snapTo(1)
289− } else if (contentX < positionMarker3 * width) {
299+ } else if (shiftedContentX < positionMarker3 * width) {
290300 print("snappoing to stage1")
291301 snapTo(1)
292302 } else if (stage < 2){
293303 print("snappoing to stage2")
294304 // Add 1 pixel to make sure we definitely hit positionMarker4 even with rounding errors of the animation.
295− snapAnimation.targetContentX = width * positionMarker4 + 1;
305+ snapAnimation.targetContentX = width * positionMarker4 + 1 - shift;
296306 snapAnimation.start();
297307 }
298308 }
299309 function snapTo(index) {
300310 spreadView.selectedIndex = index;
301311
302− snapAnimation.targetContentX = 0;
312+ snapAnimation.targetContentX = -shift;
303313 snapAnimation.start();
304314 }
305315
306316 SequentialAnimation {
307317 id: snapAnimation
308− property int targetContentX: 0
318+ property int targetContentX: -shift
309319
310320 UbuntuNumberAnimation {
311321 target: spreadView
@@ -316,17 +326,18 @@ Item {
316326 }
317327 ScriptAction {
318328 script: {
319− print("animation finished: stage", spreadView.stage, "contentX", spreadView.contentX, "focused app", ApplicationManager.get(0).appId, ApplicationManager.get(1).appId)
329+// print("animation finished: stage", spreadView.stage, "contentX", spreadView.contentX, "focused app", ApplicationManager.get(0).appId, ApplicationManager.get(1).appId)
320330 if (spreadView.selectedIndex >= 0) {
321331 print("switching to app", snapAnimation.toIndex, ApplicationManager.get(spreadView.selectedIndex).name)
322332 ApplicationManager.focusApplication(ApplicationManager.get(spreadView.selectedIndex).appId);
323333 spreadView.selectedIndex = -1
324− spreadView.contentX = 0;
334+ spreadView.stage = 0;
335+ spreadView.contentX = -spreadView.shift;
325336 }
326− if (spreadView.contentX == spreadView.width * spreadView.positionMarker2) {
337+ if (spreadView.shiftedContentX == spreadView.width * spreadView.positionMarker2) {
327338 spreadView.stage = 4;
328339 spreadView.stage = 0;
329− spreadView.contentX = 0;
340+ spreadView.contentX = -spreadView.shift;
330341 }
331342 print("snapping done. stage:", spreadView.stage)
332343 }
@@ -362,18 +373,18 @@ Item {
362373 progress: {
363374 switch (index) {
364375 case 0:
365− return spreadView.contentX / spreadView.width;
376+ return spreadView.shiftedContentX / spreadView.width;
366377 case 1:
367− var progress = spreadView.contentX / spreadView.width;
378+ var progress = spreadView.shiftedContentX / spreadView.width;
368379 if (spreadView.stage == 2) {
369380 progress -= spreadView.tileDistance / spreadView.width;
370381 }
371− return Math.max(0, progress);
382+ return progress;
372383 }
373384 // This delays the progress for all tiles > 1 for the duration of stage 1
374385 var stage1Distance = spreadView.positionMarker2 * spreadView.width;
375386 var tileDistance = (index - 2) * spreadView.tileDistance;
376− return (spreadView.contentX - stage1Distance - tileDistance) / spreadView.width;
387+ return (spreadView.shiftedContentX - stage1Distance - tileDistance) / spreadView.width;
377388 }
378389
379390 animatedProgress: {
qml/Stages/TransformedSpreadDelegate.qml+4−2
@@ -28,7 +28,6 @@ SpreadDelegate {
2828 if (selected) {
2929 priv.snapshot();
3030 }
31− print("setting selected to", selected)
3231 priv.isSelected = selected;
3332 }
3433
@@ -88,8 +87,11 @@ SpreadDelegate {
8887 }
8988
9089 property real negativeProgress: {
91− if (index < 2) {
90+ switch (index) {
91+ case 0:
9292 return 0;
93+ case 1:
94+ return -spreadView.tileDistance / spreadView.width
9395 }
9496 return -spreadView.positionMarker2 -(index - 2) * (spreadView.tileDistance / spreadView.width);
9597 }