on xenial help sign in
Further fixes for right-edge tutorial page; still not quite as performant as I want
commitaa2feff6fb7e9178d6f4d77349c78d2162fd5f70 authorMichael Terry <michael.terry@canonical.com> dateTue 6 Jan 2015, 14:13 (12 years ago) parenta4e9166
4 files changed+73−110
qml/Stages/PhoneStage.qml+7−2 qml/Tutorial/TutorialContent.qml+51−97 qml/Tutorial/TutorialPage.qml+5−5 qml/Tutorial/TutorialRight.qml+10−6
qml/Stages/PhoneStage.qml+7−2
@@ -43,6 +43,9 @@ Rectangle {
4343
4444 readonly property alias dragging: spreadDragArea.dragging
4545
46+ // Only used by the tutorial right now, when it is teasing the right edge
47+ property real dragAreaOverlap
48+
4649 signal opened()
4750
4851 color: "#111111"
@@ -118,7 +121,7 @@ Rectangle {
118121 property var focusedAppDelegate: null
119122
120123 property real oldInverseProgress: 0
121− property bool animateX: true
124+ property bool animateX: false
122125
123126 onFocusedAppIdChanged: focusedAppDelegate = spreadRepeater.itemAt(0);
124127
@@ -239,6 +242,8 @@ Rectangle {
239242 // Make sure we end up in the same state
240243 Component.onCompleted: {
241244 spreadView.contentX = -spreadView.shift
245+ priv.animateX = true;
246+ snapAnimation.complete();
242247 }
243248
244249 SequentialAnimation {
@@ -445,7 +450,7 @@ Rectangle {
445450 direction: Direction.Leftwards
446451 enabled: (spreadView.phase != 2 && root.spreadEnabled) || dragging
447452
448− anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
453+ anchors { top: parent.top; right: parent.right; bottom: parent.bottom; rightMargin: -root.dragAreaOverlap }
449454 width: root.dragAreaWidth
450455
451456 property var gesturePoints: new Array()
qml/Tutorial/TutorialContent.qml+51−97
@@ -26,11 +26,11 @@ Item {
2626 property Item overlay
2727
2828 readonly property bool launcherEnabled: !running ||
29− (!paused && loader.target === leftComponent)
29+ (!paused && tutorialLeft.shown)
3030 readonly property bool spreadEnabled: !running
3131 readonly property bool panelEnabled: !running
3232 readonly property bool panelContentEnabled: !running
33− readonly property bool running: loader.sourceComponent !== null
33+ readonly property alias running: d.running
3434
3535 property bool paused: false
3636 property real edgeSize
@@ -51,120 +51,74 @@ Item {
5151 QtObject {
5252 id: d
5353
54+ property bool running
55+
5456 function stop() {
55− loader.sourceComponent = null;
57+ running = false;
5658 }
5759
5860 function start() {
59− loader.load(leftComponent);
61+ running = true;
62+ tutorialLeft.show();
6063 }
6164 }
6265
63− Loader {
64− id: loader
65− objectName: "tutorialLoader"
66−
67− property Component target: {
68− if (next) {
69− return next;
70− } else if (loader.item && loader.item.shown) {
71− return sourceComponent;
72− } else {
73− return null;
74− }
75− }
76−
77− property Component next: null
78−
79− function load(comp) {
80− if (loader.item) {
81− next = comp;
82− loader.item.hide();
83− } else {
84− loader.sourceComponent = comp;
85− }
86− }
87−
88− Connections {
89− target: loader.item
90− onFinished: {
91− loader.sourceComponent = loader.next;
92− if (loader.next != null) {
93− loader.next = null;
94− } else {
95− root.finished();
96− }
97− }
98− }
66+ TutorialLeft {
67+ id: tutorialLeft
68+ objectName: "tutorialLeft"
69+ parent: root.stages
70+ anchors.fill: parent
71+ launcher: root.launcher
72+ paused: !shown || root.paused
9973
100− Binding {
101− target: loader.item
102− property: "paused"
103− value: root.paused
104− }
74+ onFinished: tutorialLeftFinish.show()
10575 }
10676
107− Component {
108− id: leftComponent
109− TutorialLeft {
110− objectName: "tutorialLeft"
111− parent: root.stages
112− anchors.fill: parent
113− launcher: root.launcher
114−
115− onFinished: loader.load(leftFinishComponent)
116− }
117− }
118−
119− Component {
120− id: leftFinishComponent
121− TutorialLeftFinish {
122− objectName: "tutorialLeftFinish"
123− parent: root.stages
124− anchors.fill: parent
125− textXOffset: root.launcher.panelWidth
126−
127− onFinished: {
128− root.launcher.hide();
129− loader.load(rightComponent);
130− }
77+ TutorialLeftFinish {
78+ id: tutorialLeftFinish
79+ objectName: "tutorialLeftFinish"
80+ parent: root.stages
81+ anchors.fill: parent
82+ textXOffset: root.launcher.panelWidth
83+ paused: !shown || root.paused
84+
85+ onFinished: {
86+ root.launcher.hide();
87+ tutorialRight.show();
13188 }
13289 }
13390
134− Component {
135− id: rightComponent
136− TutorialRight {
137− objectName: "tutorialRight"
138− parent: root.stages
139− anchors.fill: parent
140− edgeSize: root.edgeSize
141− panel: root.panel
91+ TutorialRight {
92+ id: tutorialRight
93+ objectName: "tutorialRight"
94+ parent: root.stages
95+ anchors.fill: parent
96+ edgeSize: root.edgeSize
97+ panel: root.panel
98+ paused: !shown || root.paused
14299
143− onFinished: loader.load(bottomComponent)
144− }
100+ onFinished: tutorialBottom.show()
145101 }
146102
147− Component {
148− id: bottomComponent
149− TutorialBottom {
150− objectName: "tutorialBottom"
151− parent: root.stages
152− anchors.fill: parent
153− edgeSize: root.edgeSize
103+ TutorialBottom {
104+ id: tutorialBottom
105+ objectName: "tutorialBottom"
106+ parent: root.stages
107+ anchors.fill: parent
108+ edgeSize: root.edgeSize
109+ paused: !shown || root.paused
154110
155− onFinished: loader.load(bottomFinishComponent)
156− }
111+ onFinished: tutorialBottomFinish.show()
157112 }
158113
159− Component {
160− id: bottomFinishComponent
161− TutorialBottomFinish {
162− objectName: "tutorialBottomFinish"
163− parent: root.stages
164− anchors.fill: parent
165− backgroundFadesOut: true
114+ TutorialBottomFinish {
115+ id: tutorialBottomFinish
116+ objectName: "tutorialBottomFinish"
117+ parent: root.stages
118+ anchors.fill: parent
119+ backgroundFadesOut: true
120+ paused: !shown || root.paused
166121
167− onFinished: root.finish()
168− }
122+ onFinished: root.finish()
169123 }
170124}
qml/Tutorial/TutorialPage.qml+5−5
@@ -66,8 +66,8 @@ Showable {
6666
6767 ////
6868
69+ visible: false
6970 shown: false
70− Component.onCompleted: show()
7171
7272 property real _foregroundHideOpacity
7373
@@ -76,16 +76,16 @@ Showable {
7676 from: 0
7777 to: 1
7878 duration: root.backgroundFadesIn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.BriskDuration
79+ onStarted: root.visible = true
7980 }
8081
8182 hideAnimation: StandardAnimation {
8283 property: root.backgroundFadesOut ? "opacity" : "_foregroundHideOpacity"
8384 to: 0
8485 duration: UbuntuAnimation.BriskDuration
85− onRunningChanged: {
86− if (!running) {
87− root.finished();
88− }
86+ onStopped: {
87+ root.visible = false;
88+ root.finished();
8989 }
9090 }
9191
qml/Tutorial/TutorialRight.qml+10−6
@@ -35,14 +35,15 @@ TutorialPage {
3535 textOpacity: 1 - slider.percent
3636
3737 SequentialAnimation {
38− paused: root.paused
39− running: false // !slider.active
38+ id: teaseAnimation
39+ paused: running && root.paused
40+ running: !stage.dragging && stage.dragProgress === 0
4041 loops: Animation.Infinite
4142
4243 UbuntuNumberAnimation {
4344 target: stage
4445 property: "x"
45− to: -units.gu(2)
46+ to: -stage.dragAreaOverlap
4647 duration: UbuntuAnimation.SleepyDuration
4748 }
4849 UbuntuNumberAnimation {
@@ -72,7 +73,6 @@ TutorialPage {
7273 PhoneStage {
7374 id: stage
7475 anchors.top: parent.top
75− x: 0
7676 width: parent.width
7777 height: parent.height
7878 applicationManager: fakeAppManager
@@ -82,6 +82,7 @@ TutorialPage {
8282 focusFirstApp: false
8383 startScale: 0.9
8484 endScale: 0.6
85+ dragAreaOverlap: units.gu(2)
8586
8687 onOpened: {
8788 overlay.show();
@@ -90,8 +91,11 @@ TutorialPage {
9091 }
9192
9293 onDraggingChanged: {
93− if (!dragging && !overlay.shown) {
94− root.showError();
94+ if (!dragging) {
95+ if (!overlay.shown) {
96+ root.showError();
97+ }
98+ teaseAnimation.complete();
9599 }
96100 }
97101 },