on xenial help sign in
Simplify launcher tease logic while also implementing better easing like design wants
fcbe197Michael Terry
qml/Launcher/Launcher.qml+8−13
@@ -70,12 +70,8 @@ Item {
70 animateTimer.start();
70 animateTimer.start();
71 }
71 }
72
72
73− function tease(interval) {
73+ function tease() {
74− if (available && root.state == "" && !dragArea.dragging) {
74+ if (available && !dragArea.dragging) {
75− if (interval === undefined) {
76− interval = 200;
77− }
78− teaseTimer.interval = interval;
79 teaseTimer.mode = "teasing"
75 teaseTimer.mode = "teasing"
80 teaseTimer.start();
76 teaseTimer.start();
81 }
77 }
@@ -83,7 +79,6 @@ Item {
83
79
84 function hint() {
80 function hint() {
85 if (available && root.state == "") {
81 if (available && root.state == "") {
86− teaseTimer.interval = 300;
87 teaseTimer.mode = "hinting"
82 teaseTimer.mode = "hinting"
88 teaseTimer.start();
83 teaseTimer.start();
89 }
84 }
@@ -91,7 +86,8 @@ Item {
91
86
92 Timer {
87 Timer {
93 id: teaseTimer
88 id: teaseTimer
89+ interval: mode == "teasing" ? 200 : 300
94− property string mode
90+ property string mode: "teasing"
95 }
91 }
96
92
97 Timer {
93 Timer {
@@ -214,7 +210,7 @@ Item {
214 bottom: parent.bottom
210 bottom: parent.bottom
215 }
211 }
216 x: -width
212 x: -width
217− visible: x > -width || dragArea.status === DirectionalDragArea.Undecided
213+ visible: root.x > 0 || x > -width || dragArea.status === DirectionalDragArea.Undecided
218 model: LauncherModel
214 model: LauncherModel
219
215
220 property bool animate: true
216 property bool animate: true
@@ -256,6 +252,7 @@ Item {
256 direction: Direction.Rightwards
252 direction: Direction.Rightwards
257
253
258 enabled: root.available
254 enabled: root.available
255+ x: -root.x // so if launcher is adjusted relative to screen, we stay put (like tutorial does when teasing)
259 width: root.dragAreaWidth
256 width: root.dragAreaWidth
260 height: root.height
257 height: root.height
261
258
@@ -269,7 +266,7 @@ Item {
269 // would appear right next to the user's finger out of nowhere.
266 // would appear right next to the user's finger out of nowhere.
270 // Instead, we make the panel go towards the user's finger in several
267 // Instead, we make the panel go towards the user's finger in several
271 // steps. ie., in an animated way.
268 // steps. ie., in an animated way.
272− var targetPanelX = Math.min(0, touchX - panel.width)
269+ var targetPanelX = Math.min(0, touchX - panel.width) - root.x
273 var delta = targetPanelX - panel.x
270 var delta = targetPanelX - panel.x
274 // the trick is not to go all the way (1.0) as it would cause a sudden jump
271 // the trick is not to go all the way (1.0) as it would cause a sudden jump
275 panel.x += 0.4 * delta
272 panel.x += 0.4 * delta
@@ -285,8 +282,6 @@ Item {
285 } else {
282 } else {
286 root.switchToNextState("")
283 root.switchToNextState("")
287 }
284 }
288− } else {
289− teaseTimer.stop();
290 }
285 }
291 }
286 }
292 }
287 }
@@ -303,7 +298,7 @@ Item {
303 name: "visible"
298 name: "visible"
304 PropertyChanges {
299 PropertyChanges {
305 target: panel
300 target: panel
306− x: 0
301+ x: -root.x // so we never go past panelWidth, even when teased by tutorial
307 }
302 }
308 },
303 },
309 State {
304 State {
qml/Tutorial/TutorialLeft.qml+21−7
@@ -45,12 +45,25 @@ TutorialPage {
45 }
45 }
46 }
46 }
47
47
48− Timer {
48+ SequentialAnimation {
49− id: teaseTimer
49+ id: teaseAnimation
50− interval: UbuntuAnimation.SleepyDuration
50+ paused: running && root.paused
51− repeat: true
51+ running: !slider.active && root.launcher.visibleWidth === 0
52− running: !root.paused && !root.launcher.dragging
52+ loops: Animation.Infinite
53− onTriggered: root.launcher.tease(UbuntuAnimation.SleepyDuration)
53+ alwaysRunToEnd: true
54+
55+ UbuntuNumberAnimation {
56+ target: root.launcher
57+ property: "x"
58+ to: units.gu(2)
59+ duration: UbuntuAnimation.SleepyDuration
60+ }
61+ UbuntuNumberAnimation {
62+ target: root.launcher
63+ property: "x"
64+ to: 0
65+ duration: UbuntuAnimation.SleepyDuration
66+ }
54 }
67 }
55
68
56 Timer {
69 Timer {
@@ -62,12 +75,13 @@ TutorialPage {
62 foreground {
75 foreground {
63 children: [
76 children: [
64 LocalComponents.Slider {
77 LocalComponents.Slider {
78+ id: slider
65 anchors {
79 anchors {
66 left: parent.left
80 left: parent.left
67 top: parent.top
81 top: parent.top
68 topMargin: root.textBottom + units.gu(3)
82 topMargin: root.textBottom + units.gu(3)
69 }
83 }
70− offset: root.launcher.visibleWidth + root.launcher.progress
84+ offset: root.launcher.x + root.launcher.visibleWidth + root.launcher.progress
71 active: root.launcher.dragging
85 active: root.launcher.dragging
72 shortSwipe: true
86 shortSwipe: true
73 }
87 }