git.iko.soy/unity8
on xenial help sign in
Support the tutorial in desktop mode
ee85874Michael Terry
qml/Shell.qml+1−1
compare with xenial
unifiedsplit
@@ -570,7 +570,7 @@ Item {
570 objectName: "tutorial"
570 objectName: "tutorial"
571 anchors.fill: parent
571 anchors.fill: parent
572
572
573− usageScenario: usageScenario
573+ usageScenario: shell.usageScenario
574 launcher: launcher
574 launcher: launcher
575 panel: panel
575 panel: panel
576 stage: applicationsDisplayLoader.item
576 stage: applicationsDisplayLoader.item
qml/Stages/DesktopStage.qml+1
@@ -44,6 +44,7 @@ Rectangle {
44 property bool suspended: false
44 property bool suspended: false
45 property alias background: wallpaper.source
45 property alias background: wallpaper.source
46 property alias altTabPressed: spread.altTabPressed
46 property alias altTabPressed: spread.altTabPressed
47+ property bool spreadShown: spread.state == "altTab"
47
48
48 // functions to be called from outside
49 // functions to be called from outside
49 function updateFocusedAppOrientation() { /* TODO */ }
50 function updateFocusedAppOrientation() { /* TODO */ }
qml/Tutorial/Tutorial.qml+7−8
@@ -48,14 +48,7 @@ Item {
48 id: loader
48 id: loader
49 anchors.fill: parent
49 anchors.fill: parent
50 source: "TutorialContent.qml"
50 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
59
52
60 Binding {
53 Binding {
61 target: loader.item
54 target: loader.item
@@ -75,6 +68,12 @@ Item {
75 value: root.stage
68 value: root.stage
76 }
69 }
77
70
71+ Binding {
72+ target: loader.item
73+ property: "usageScenario"
74+ value: root.usageScenario
75+ }
76+
78 Connections {
77 Connections {
79 target: loader.item
78 target: loader.item
80 onFinished: AccountsService.demoEdges = false
79 onFinished: AccountsService.demoEdges = false
qml/Tutorial/TutorialContent.qml+29−29
@@ -25,6 +25,7 @@ Item {
25 property Item launcher
25 property Item launcher
26 property Item panel
26 property Item panel
27 property Item stage
27 property Item stage
28+ property string usageScenario
28
29
29 readonly property bool launcherEnabled: !running || tutorialLeft.shown
30 readonly property bool launcherEnabled: !running || tutorialLeft.shown
30 readonly property bool spreadEnabled: !running || tutorialRight.shown
31 readonly property bool spreadEnabled: !running || tutorialRight.shown
@@ -49,9 +50,13 @@ Item {
49 launcher: root.launcher
50 launcher: root.launcher
50 hides: [launcher, panel.indicators]
51 hides: [launcher, panel.indicators]
51
52
53+ readonly property bool skipped: (root.usageScenario !== "phone"
54+ && root.usageScenario !== "tablet")
52− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") == -1
55+ || AccountsService.demoEdgesCompleted.indexOf("left") != -1
56+ readonly property bool isReady: !skipped
53
57
54− Component.onCompleted: if (tutorialLeft.isReady) show()
58+ onSkippedChanged: if (skipped && shown) hide()
59+ onIsReadyChanged: if (isReady) show()
55 onFinished: AccountsService.markDemoEdgeCompleted("left")
60 onFinished: AccountsService.markDemoEdgeCompleted("left")
56 }
61 }
57
62
@@ -62,21 +67,24 @@ Item {
62 panel: root.panel
67 panel: root.panel
63 hides: [launcher, panel.indicators]
68 hides: [launcher, panel.indicators]
64
69
65− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") != -1 &&
70+ readonly property bool skipped: (root.usageScenario !== "phone"
71+ && root.usageScenario !== "tablet")
66− AccountsService.demoEdgesCompleted.indexOf("top") == -1
72+ || AccountsService.demoEdgesCompleted.indexOf("top") != -1
73+ readonly property bool isReady: tutorialLeft.skipped && !skipped
67
74
68 Timer {
75 Timer {
69 id: tutorialTopTimer
76 id: tutorialTopTimer
70 interval: 60000
77 interval: 60000
71− onTriggered: if (tutorialTop.isReady) tutorialTop.show()
78+ onTriggered: if (tutorialTop.isReady && !tutorialTop.shown) tutorialTop.show()
72 }
79 }
73
80
74 Connections {
81 Connections {
75 target: AccountsService
82 target: AccountsService
76− onDemoEdgesCompletedChanged: if (tutorialTop.isReady) tutorialTopTimer.start()
83+ onDemoEdgesCompletedChanged: if (tutorialTop.isReady && !tutorialTop.shown) tutorialTopTimer.start()
77 }
84 }
78
85
86+ onSkippedChanged: if (skipped && shown) hide()
79− Component.onCompleted: if (tutorialTop.isReady) tutorialTopTimer.start()
87+ onIsReadyChanged: if (isReady) tutorialTopTimer.start()
80 onFinished: AccountsService.markDemoEdgeCompleted("top")
88 onFinished: AccountsService.markDemoEdgeCompleted("top")
81
89
82 Connections {
90 Connections {
@@ -94,29 +102,26 @@ Item {
94 objectName: "tutorialRight"
102 objectName: "tutorialRight"
95 anchors.fill: parent
103 anchors.fill: parent
96 stage: root.stage
104 stage: root.stage
105+ usageScenario: root.usageScenario
97 hides: [launcher, panel.indicators]
106 hides: [launcher, panel.indicators]
98
107
99− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") != -1 &&
100− AccountsService.demoEdgesCompleted.indexOf("top") != -1 &&
101− AccountsService.demoEdgesCompleted.indexOf("right") == -1 &&
108+ readonly property bool skipped: AccountsService.demoEdgesCompleted.indexOf("right") != -1
109+ readonly property bool isReady: tutorialTop.skipped && !skipped
102− ApplicationManager.count >= 3
110+ && ApplicationManager.count >= 3
103
111
104 Timer {
112 Timer {
105 id: tutorialRightTimer
113 id: tutorialRightTimer
106 interval: 3000
114 interval: 3000
107− onTriggered: if (tutorialRight.isReady) tutorialRight.show()
115+ onTriggered: if (tutorialRight.isReady && !tutorialRight.shown) tutorialRight.show()
108− }
109−
110− Connections {
111− target: AccountsService
112− onDemoEdgesCompletedChanged: if (tutorialRight.isReady) tutorialRightTimer.start()
113 }
116 }
114
117
115 Connections {
118 Connections {
116 target: ApplicationManager
119 target: ApplicationManager
117− onApplicationAdded: if (tutorialRight.isReady) tutorialRight.show()
120+ onApplicationAdded: if (tutorialRight.isReady && !tutorialRight.shown) tutorialRight.show()
118 }
121 }
119
122
123+ onSkippedChanged: if (skipped && shown) hide()
124+ onIsReadyChanged: if (isReady) tutorialRightTimer.start()
120 onFinished: AccountsService.markDemoEdgeCompleted("right")
125 onFinished: AccountsService.markDemoEdgeCompleted("right")
121
126
122 Connections {
127 Connections {
@@ -135,10 +140,8 @@ Item {
135 anchors.fill: parent
140 anchors.fill: parent
136 hides: [launcher, panel.indicators]
141 hides: [launcher, panel.indicators]
137
142
138− readonly property bool isReady: AccountsService.demoEdgesCompleted.indexOf("left") != -1 &&
143+ readonly property bool skipped: AccountsService.demoEdgesCompleted.indexOf("bottom") != -1
139− AccountsService.demoEdgesCompleted.indexOf("top") != -1 &&
144+ readonly property bool isReady: tutorialRight.skipped && !skipped &&
140− AccountsService.demoEdgesCompleted.indexOf("right") != -1 &&
141− AccountsService.demoEdgesCompleted.indexOf("bottom") == -1 &&
142 // focused app is an app known to have a bottom edge
145 // focused app is an app known to have a bottom edge
143 (ApplicationManager.focusedApplicationId == "dialer-app" ||
146 (ApplicationManager.focusedApplicationId == "dialer-app" ||
144 ApplicationManager.focusedApplicationId == "webbrowser-app" ||
147 ApplicationManager.focusedApplicationId == "webbrowser-app" ||
@@ -149,19 +152,16 @@ Item {
149 Timer {
152 Timer {
150 id: tutorialBottomTimer
153 id: tutorialBottomTimer
151 interval: 3000
154 interval: 3000
152− onTriggered: if (tutorialBottom.isReady) tutorialBottom.show()
155+ onTriggered: if (tutorialBottom.isReady && !tutorialBottom.shown) tutorialBottom.show()
153− }
154−
155− Connections {
156− target: AccountsService
157− onDemoEdgesCompletedChanged: if (tutorialBottom.isReady) tutorialBottomTimer.start()
158 }
156 }
159
157
160 Connections {
158 Connections {
161 target: ApplicationManager
159 target: ApplicationManager
162− onFocusedApplicationIdChanged: if (tutorialBottom.isReady) tutorialBottom.show()
160+ onFocusedApplicationIdChanged: if (tutorialBottom.isReady && !tutorialBottom.shown) tutorialBottom.show()
163 }
161 }
164
162
163+ onSkippedChanged: if (skipped && shown) hide()
164+ onIsReadyChanged: if (isReady) tutorialBottomTimer.start()
165 onFinished: {
165 onFinished: {
166 AccountsService.markDemoEdgeCompleted("bottom");
166 AccountsService.markDemoEdgeCompleted("bottom");
167 root.finish();
167 root.finish();
qml/Tutorial/TutorialRight.qml+14−4
@@ -22,8 +22,16 @@ TutorialPage {
22 id: root
22 id: root
23
23
24 property var stage
24 property var stage
25+ property string usageScenario
25
26
27+ // When on phone or tablet, fade out as the drag progresses
26− opacityOverride: 1 - stage.dragProgress * 2
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+ }
27
35
28 mouseArea {
36 mouseArea {
29 anchors.rightMargin: stage.dragAreaWidth
37 anchors.rightMargin: stage.dragAreaWidth
@@ -43,11 +51,13 @@ TutorialPage {
43 }
51 }
44
52
45 label {
53 label {
54+ text: root.usageScenario === "desktop" ?
55+ i18n.tr("Hover your mouse on the right edge to view your open apps") :
46− text: i18n.tr("Short or long swipe from the right edge to view your open apps")
56+ i18n.tr("Short or long swipe from the right edge to view your open apps")
47 anchors.right: arrow.left
57 anchors.right: arrow.left
48 anchors.rightMargin: units.gu(3)
58 anchors.rightMargin: units.gu(3)
49− anchors.left: root.left
50− anchors.leftMargin: units.gu(4)
51 anchors.verticalCenter: arrow.verticalCenter
59 anchors.verticalCenter: arrow.verticalCenter
60+ width: Math.min(units.gu(40), arrow.x - units.gu(4))
61+ horizontalAlignment: Text.AlignRight
52 }
62 }
53}
63}
qml/Tutorial/TutorialTop.qml+1−1
@@ -55,7 +55,7 @@ TutorialPage {
55 anchors.top: arrow.bottom
55 anchors.top: arrow.bottom
56 anchors.topMargin: units.gu(3)
56 anchors.topMargin: units.gu(3)
57 anchors.horizontalCenter: arrow.horizontalCenter
57 anchors.horizontalCenter: arrow.horizontalCenter
58− anchors.horizontalCenterOffset: (width - contentWidth) / 2
58+ anchors.horizontalCenterOffset: (label.width - label.contentWidth) / 2
59 width: d.columnWidth - units.gu(8)
59 width: d.columnWidth - units.gu(8)
60 }
60 }
61}
61}