git.iko.soy/unity8
on xenial help sign in
Support the tutorial in desktop mode
commitee85874cdc95d603d050ae7f1e25ae8f0feb91c5 authorMichael Terry <michael.terry@canonical.com> dateThu 15 Oct 2015, 16:40 (11 years ago) parent134dd50
6 files changed+53−43
compare with xenial
unifiedsplit
qml/Shell.qml+1−1 qml/Stages/DesktopStage.qml+1 qml/Tutorial/Tutorial.qml+7−8 qml/Tutorial/TutorialContent.qml+29−29 qml/Tutorial/TutorialRight.qml+14−4 qml/Tutorial/TutorialTop.qml+1−1
qml/Shell.qml+1−1
@@ -570,7 +570,7 @@ Item {
570570 objectName: "tutorial"
571571 anchors.fill: parent
572572
573− usageScenario: usageScenario
573+ usageScenario: shell.usageScenario
574574 launcher: launcher
575575 panel: panel
576576 stage: applicationsDisplayLoader.item
qml/Stages/DesktopStage.qml+1
@@ -44,6 +44,7 @@ Rectangle {
4444 property bool suspended: false
4545 property alias background: wallpaper.source
4646 property alias altTabPressed: spread.altTabPressed
47+ property bool spreadShown: spread.state == "altTab"
4748
4849 // functions to be called from outside
4950 function updateFocusedAppOrientation() { /* TODO */ }
qml/Tutorial/Tutorial.qml+7−8
@@ -48,14 +48,7 @@ Item {
4848 id: loader
4949 anchors.fill: parent
5050 source: "TutorialContent.qml"
51−
52− // DirectionalDragAreas don't work with mice. So to avoid trapping the
53− // user, we skip the tutorial on the Desktop to avoid using them. The
54− // Desktop doesn't use the same spread design anyway. The tutorial is
55− // all a bit of a placeholder on non-phone form factors right now.
56− // When the design team gives us more guidance, we can do something
57− // more clever here.
58− active: usageScenario != "desktop" && AccountsService.demoEdges
51+ active: AccountsService.demoEdges
5952
6053 Binding {
6154 target: loader.item
@@ -75,6 +68,12 @@ Item {
7568 value: root.stage
7669 }
7770
71+ Binding {
72+ target: loader.item
73+ property: "usageScenario"
74+ value: root.usageScenario
75+ }
76+
7877 Connections {
7978 target: loader.item
8079 onFinished: AccountsService.demoEdges = false
qml/Tutorial/TutorialContent.qml+29−29
@@ -25,6 +25,7 @@ Item {
2525 property Item launcher
2626 property Item panel
2727 property Item stage
28+ property string usageScenario
2829
2930 readonly property bool launcherEnabled: !running || tutorialLeft.shown
3031 readonly property bool spreadEnabled: !running || tutorialRight.shown
@@ -49,9 +50,13 @@ Item {
4950 launcher: root.launcher
5051 hides: [launcher, panel.indicators]
5152
52− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") == -1
53+ readonly property bool skipped: (root.usageScenario !== "phone"
54+ && root.usageScenario !== "tablet")
55+ || AccountsService.demoEdgesCompleted.indexOf("left") != -1
56+ readonly property bool isReady: !skipped
5357
54− Component.onCompleted: if (tutorialLeft.isReady) show()
58+ onSkippedChanged: if (skipped && shown) hide()
59+ onIsReadyChanged: if (isReady) show()
5560 onFinished: AccountsService.markDemoEdgeCompleted("left")
5661 }
5762
@@ -62,21 +67,24 @@ Item {
6267 panel: root.panel
6368 hides: [launcher, panel.indicators]
6469
65− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") != -1 &&
66− AccountsService.demoEdgesCompleted.indexOf("top") == -1
70+ readonly property bool skipped: (root.usageScenario !== "phone"
71+ && root.usageScenario !== "tablet")
72+ || AccountsService.demoEdgesCompleted.indexOf("top") != -1
73+ readonly property bool isReady: tutorialLeft.skipped && !skipped
6774
6875 Timer {
6976 id: tutorialTopTimer
7077 interval: 60000
71− onTriggered: if (tutorialTop.isReady) tutorialTop.show()
78+ onTriggered: if (tutorialTop.isReady && !tutorialTop.shown) tutorialTop.show()
7279 }
7380
7481 Connections {
7582 target: AccountsService
76− onDemoEdgesCompletedChanged: if (tutorialTop.isReady) tutorialTopTimer.start()
83+ onDemoEdgesCompletedChanged: if (tutorialTop.isReady && !tutorialTop.shown) tutorialTopTimer.start()
7784 }
7885
79− Component.onCompleted: if (tutorialTop.isReady) tutorialTopTimer.start()
86+ onSkippedChanged: if (skipped && shown) hide()
87+ onIsReadyChanged: if (isReady) tutorialTopTimer.start()
8088 onFinished: AccountsService.markDemoEdgeCompleted("top")
8189
8290 Connections {
@@ -94,29 +102,26 @@ Item {
94102 objectName: "tutorialRight"
95103 anchors.fill: parent
96104 stage: root.stage
105+ usageScenario: root.usageScenario
97106 hides: [launcher, panel.indicators]
98107
99− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") != -1 &&
100− AccountsService.demoEdgesCompleted.indexOf("top") != -1 &&
101− AccountsService.demoEdgesCompleted.indexOf("right") == -1 &&
102− ApplicationManager.count >= 3
108+ readonly property bool skipped: AccountsService.demoEdgesCompleted.indexOf("right") != -1
109+ readonly property bool isReady: tutorialTop.skipped && !skipped
110+ && ApplicationManager.count >= 3
103111
104112 Timer {
105113 id: tutorialRightTimer
106114 interval: 3000
107− onTriggered: if (tutorialRight.isReady) tutorialRight.show()
108− }
109−
110− Connections {
111− target: AccountsService
112− onDemoEdgesCompletedChanged: if (tutorialRight.isReady) tutorialRightTimer.start()
115+ onTriggered: if (tutorialRight.isReady && !tutorialRight.shown) tutorialRight.show()
113116 }
114117
115118 Connections {
116119 target: ApplicationManager
117− onApplicationAdded: if (tutorialRight.isReady) tutorialRight.show()
120+ onApplicationAdded: if (tutorialRight.isReady && !tutorialRight.shown) tutorialRight.show()
118121 }
119122
123+ onSkippedChanged: if (skipped && shown) hide()
124+ onIsReadyChanged: if (isReady) tutorialRightTimer.start()
120125 onFinished: AccountsService.markDemoEdgeCompleted("right")
121126
122127 Connections {
@@ -135,10 +140,8 @@ Item {
135140 anchors.fill: parent
136141 hides: [launcher, panel.indicators]
137142
138− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") != -1 &&
139− AccountsService.demoEdgesCompleted.indexOf("top") != -1 &&
140− AccountsService.demoEdgesCompleted.indexOf("right") != -1 &&
141− AccountsService.demoEdgesCompleted.indexOf("bottom") == -1 &&
143+ readonly property bool skipped: AccountsService.demoEdgesCompleted.indexOf("bottom") != -1
144+ readonly property bool isReady: tutorialRight.skipped && !skipped &&
142145 // focused app is an app known to have a bottom edge
143146 (ApplicationManager.focusedApplicationId == "dialer-app" ||
144147 ApplicationManager.focusedApplicationId == "webbrowser-app" ||
@@ -149,19 +152,16 @@ Item {
149152 Timer {
150153 id: tutorialBottomTimer
151154 interval: 3000
152− onTriggered: if (tutorialBottom.isReady) tutorialBottom.show()
153− }
154−
155− Connections {
156− target: AccountsService
157− onDemoEdgesCompletedChanged: if (tutorialBottom.isReady) tutorialBottomTimer.start()
155+ onTriggered: if (tutorialBottom.isReady && !tutorialBottom.shown) tutorialBottom.show()
158156 }
159157
160158 Connections {
161159 target: ApplicationManager
162− onFocusedApplicationIdChanged: if (tutorialBottom.isReady) tutorialBottom.show()
160+ onFocusedApplicationIdChanged: if (tutorialBottom.isReady && !tutorialBottom.shown) tutorialBottom.show()
163161 }
164162
163+ onSkippedChanged: if (skipped && shown) hide()
164+ onIsReadyChanged: if (isReady) tutorialBottomTimer.start()
165165 onFinished: {
166166 AccountsService.markDemoEdgeCompleted("bottom");
167167 root.finish();
qml/Tutorial/TutorialRight.qml+14−4
@@ -22,8 +22,16 @@ TutorialPage {
2222 id: root
2323
2424 property var stage
25+ property string usageScenario
2526
26− opacityOverride: 1 - stage.dragProgress * 2
27+ // When on phone or tablet, fade out as the drag progresses
28+ opacityOverride: usageScenario === "desktop" ? 1 : 1 - stage.dragProgress * 2
29+
30+ // Else on desktop, fade out when the spread is shown
31+ Connections {
32+ target: usageScenario === "desktop" ? stage : null
33+ onSpreadShownChanged: if (stage.spreadShown && root.shown) root.hide()
34+ }
2735
2836 mouseArea {
2937 anchors.rightMargin: stage.dragAreaWidth
@@ -43,11 +51,13 @@ TutorialPage {
4351 }
4452
4553 label {
46− text: i18n.tr("Short or long swipe from the right edge to view your open apps")
54+ text: root.usageScenario === "desktop" ?
55+ i18n.tr("Hover your mouse on the right edge to view your open apps") :
56+ i18n.tr("Short or long swipe from the right edge to view your open apps")
4757 anchors.right: arrow.left
4858 anchors.rightMargin: units.gu(3)
49− anchors.left: root.left
50− anchors.leftMargin: units.gu(4)
5159 anchors.verticalCenter: arrow.verticalCenter
60+ width: Math.min(units.gu(40), arrow.x - units.gu(4))
61+ horizontalAlignment: Text.AlignRight
5262 }
5363}
qml/Tutorial/TutorialTop.qml+1−1
@@ -55,7 +55,7 @@ TutorialPage {
5555 anchors.top: arrow.bottom
5656 anchors.topMargin: units.gu(3)
5757 anchors.horizontalCenter: arrow.horizontalCenter
58− anchors.horizontalCenterOffset: (width - contentWidth) / 2
58+ anchors.horizontalCenterOffset: (label.width - label.contentWidth) / 2
5959 width: d.columnWidth - units.gu(8)
6060 }
6161}