git.iko.soy/unity8
on xenial help sign in
First pass at tutorial redesign
f9a34a7Michael Terry
qml/Greeter/Greeter.qml+1
compare with xenial
unifiedsplit
@@ -171,6 +171,7 @@ Showable {
171 onForcedUnlockChanged: {
171 onForcedUnlockChanged: {
172 if (forcedUnlock && shown) {
172 if (forcedUnlock && shown) {
173 // pretend we were just authenticated
173 // pretend we were just authenticated
174+ loader.item.hide();
174 loader.item.notifyAuthenticationSucceeded();
175 loader.item.notifyAuthenticationSucceeded();
175 }
176 }
176 }
177 }
qml/Shell.qml−2
@@ -383,10 +383,8 @@ Item {
383 // more clever here.
383 // more clever here.
384 active: usageScenario != "desktop" && AccountsService.demoEdges
384 active: usageScenario != "desktop" && AccountsService.demoEdges
385
385
386− paused: LightDM.Greeter.active
387 launcher: launcher
386 launcher: launcher
388 panel: panel
387 panel: panel
389− edgeSize: shell.edgeSize
390
388
391 onFinished: {
389 onFinished: {
392 AccountsService.demoEdges = false;
390 AccountsService.demoEdges = false;
qml/Tutorial/Arrow.qmldeleted−56
@@ -1,56 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−
20−Item {
21− id: root
22−
23− property alias color: circle.color
24−
25− // Will make whole arrow darker
26− property real darkenBy: 0
27−
28− property alias chevronOpacity: chevron.opacity
29−
30− ////
31−
32− Rectangle {
33− id: circle
34− anchors.fill: parent
35− radius: width / 2
36− }
37−
38− Image {
39− id: chevron
40− anchors.centerIn: parent
41− source: Qt.resolvedUrl("graphics/chevron.png")
42− fillMode: Image.PreserveAspectFit
43− sourceSize.width: 152
44− sourceSize.height: 152
45− width: parent.width / 2
46− height: parent.height / 2
47− }
48−
49− Rectangle {
50− id: darkCircle
51− anchors.fill: parent
52− radius: width / 2
53− color: "black"
54− opacity: root.darkenBy
55− }
56−}
qml/Tutorial/Slider.qmldeleted−123
@@ -1,123 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−
20−Item {
21− id: root
22−
23− // Whether this slider is short or long
24− property bool shortSwipe
25−
26− // How far the user has slid
27− property real offset
28−
29− // Set to true when slider is being used
30− property bool active
31−
32− // How far in percentage terms
33− readonly property real percent: d.slideOffset / target.x
34−
35− QtObject {
36− id: d
37− readonly property color trayColor: "#424141"
38− readonly property real margin: units.gu(0.5)
39− readonly property real arrowSize: root.height - margin * 2
40− readonly property real dotSize: units.dp(1)
41− readonly property real slideOffset: MathUtils.clamp(root.offset - offscreenOffset, -offscreenOffset, target.x)
42− readonly property real offscreenOffset: units.gu(2)
43− }
44−
45− implicitWidth: shortSwipe ? units.gu(15) : units.gu(27.5)
46− implicitHeight: units.gu(6.5)
47−
48− Rectangle {
49− color: d.trayColor
50− anchors.fill: parent
51− anchors.rightMargin: clipBox.width - 1
52− }
53−
54− // We want to have a circular border around the target. But we can't just
55− // do a radius on two of a rectangle's corners. So we clip a full circle.
56− Item {
57− id: clipBox
58−
59− clip: true
60− anchors.top: parent.top
61− anchors.bottom: parent.bottom
62− anchors.right: parent.right
63− width: parent.height / 2
64−
65− Rectangle {
66− color: d.trayColor
67− anchors.top: parent.top
68− anchors.bottom: parent.bottom
69− anchors.right: parent.right
70− width: parent.width * 2
71− radius: parent.width
72− }
73− }
74−
75− Arrow {
76− id: target
77− width: d.arrowSize
78− height: d.arrowSize
79− color: "#73000000"
80− chevronOpacity: 0.52
81− anchors.right: parent.right
82− anchors.rightMargin: d.margin
83− anchors.verticalCenter: parent.verticalCenter
84− }
85−
86− Row {
87− anchors.left: handle.horizontalCenter
88− anchors.right: target.horizontalCenter
89− anchors.verticalCenter: parent.verticalCenter
90−
91− layoutDirection: Qt.RightToLeft
92− spacing: d.dotSize * 2
93−
94− Repeater {
95− model: parent.width / (parent.spacing + d.dotSize)
96− Rectangle {
97− anchors.verticalCenter: parent ? parent.verticalCenter : undefined
98− height: d.dotSize
99− width: height
100− radius: width
101− color: "white"
102− opacity: 0.2
103− }
104− }
105− }
106−
107− Arrow {
108− id: handle
109− width: d.arrowSize
110− height: d.arrowSize
111− color: UbuntuColors.orange
112− darkenBy: root.active ? 0.5 : 0
113− anchors.left: parent.left
114− // We use a Translate transform rather than anchors.leftMargin because
115− // the latter has weird performance problems on the TutorialRight page.
116− transform: [
117− Translate {
118− x: d.slideOffset
119− }
120− ]
121− anchors.verticalCenter: parent.verticalCenter
122− }
123−}
qml/Tutorial/Tick.qmldeleted−29
@@ -1,29 +0,0 @@
1−/*
2− * Copyright (C) 2015 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−
20−MouseArea {
21− implicitHeight: tick.height
22− implicitWidth: tick.width
23− Image {
24− id: tick
25− source: Qt.resolvedUrl("graphics/tick.png")
26− height: units.gu(6.5)
27− width: units.gu(6.5)
28− }
29−}
qml/Tutorial/Tutorial.qml−14
@@ -21,8 +21,6 @@ Item {
21 id: root
21 id: root
22
22
23 property alias active: loader.active
23 property alias active: loader.active
24− property bool paused
25− property real edgeSize
26
24
27 property Item launcher
25 property Item launcher
28 property Item panel
26 property Item panel
@@ -46,18 +44,6 @@ Item {
46 anchors.fill: parent
44 anchors.fill: parent
47 source: "TutorialContent.qml"
45 source: "TutorialContent.qml"
48
46
49− Binding {
50− target: loader.item
51− property: "paused"
52− value: root.paused
53− }
54−
55− Binding {
56− target: loader.item
57− property: "edgeSize"
58− value: root.edgeSize
59− }
60−
61 Binding {
47 Binding {
62 target: loader.item
48 target: loader.item
63 property: "launcher"
49 property: "launcher"
qml/Tutorial/TutorialBottom.qmldeleted−104
@@ -1,104 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−import Ubuntu.Gestures 0.1
20−import "../Components"
21−import "." as LocalComponents
22−
23−TutorialPage {
24− id: root
25−
26− property alias edgeSize: dragArea.height
27−
28− title: i18n.tr("Open special menus")
29− text: i18n.tr("Swipe up from the bottom edge.")
30− fullTextWidth: true
31−
32− SequentialAnimation {
33− id: teaseAnimation
34− paused: running && root.paused
35− running: !dragArea.useTouchY && slider.dragOffset === 0
36− loops: Animation.Infinite
37−
38− UbuntuNumberAnimation {
39− target: slider
40− property: "teaseOffset"
41− to: units.gu(1)
42− duration: UbuntuAnimation.SleepyDuration
43− }
44− UbuntuNumberAnimation {
45− target: slider
46− property: "teaseOffset"
47− to: 0
48− duration: UbuntuAnimation.SleepyDuration
49− }
50− }
51−
52− foreground {
53− children: [
54− LocalComponents.Slider {
55− id: slider
56− anchors {
57− bottom: parent.bottom
58− bottomMargin: width / 2 - height / 2
59− horizontalCenter: parent.horizontalCenter
60− }
61− rotation: -90
62− offset: teaseOffset + dragOffset
63− active: dragArea.dragging
64−
65− property real teaseOffset
66− property real dragOffset: dragArea.useTouchY ? -dragArea.touchY : 0
67−
68− Behavior on dragOffset {
69− id: offsetAnimation
70− UbuntuNumberAnimation {}
71− }
72− }
73− ]
74− }
75−
76− DirectionalDragArea {
77− id: dragArea
78− direction: Direction.Upwards
79− anchors {
80− bottom: parent.bottom
81− left: parent.left
82− right: parent.right
83− }
84−
85− property bool useTouchY
86−
87− onDraggingChanged: {
88− if (!dragging) {
89− if (slider.percent >= 0.85) {
90− root.hide();
91− } else if (slider.percent >= 0.15) {
92− root.showError();
93− }
94− }
95−
96− // We use a separate vars here rather than just directly looking at
97− // 'dragging' because we want to preserve our 'slider.offset'
98− // value during the above percent check. Now that we made it,
99− // we can have 'slider.offset' go back to zero.
100− offsetAnimation.enabled = !dragging;
101− useTouchY = dragging;
102− }
103− }
104−}
qml/Tutorial/TutorialBottomFinish.qmldeleted−41
@@ -1,41 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−import "." as LocalComponents
20−
21−TutorialPage {
22− id: root
23−
24− title: i18n.tr("This action does different things for different apps")
25− text: i18n.tr("Tap here to finish.")
26− fullTextWidth: true
27−
28− foreground {
29− children: [
30− LocalComponents.Tick {
31− objectName: "tick"
32− anchors {
33− horizontalCenter: parent.horizontalCenter
34− top: parent.top
35− topMargin: root.textBottom + units.gu(3)
36− }
37− onClicked: root.hide()
38− }
39− ]
40− }
41−}
qml/Tutorial/TutorialContent.qml+2−51
@@ -23,16 +23,12 @@ Item {
23 property Item launcher
23 property Item launcher
24 property Item panel
24 property Item panel
25
25
26− readonly property bool launcherEnabled: !running ||
26+ readonly property bool launcherEnabled: !running || tutorialLeft.shown
27− (!paused && tutorialLeft.shown)
28 readonly property bool spreadEnabled: !running
27 readonly property bool spreadEnabled: !running
29 readonly property bool panelEnabled: !running
28 readonly property bool panelEnabled: !running
30 readonly property bool panelContentEnabled: !running
29 readonly property bool panelContentEnabled: !running
31 readonly property alias running: d.running
30 readonly property alias running: d.running
32
31
33− property bool paused: false
34− property real edgeSize
35−
36 signal finished()
32 signal finished()
37
33
38 function finish() {
34 function finish() {
@@ -64,54 +60,9 @@ Item {
64 TutorialLeft {
60 TutorialLeft {
65 id: tutorialLeft
61 id: tutorialLeft
66 objectName: "tutorialLeft"
62 objectName: "tutorialLeft"
63+ parent: root.panel
67 anchors.fill: parent
64 anchors.fill: parent
68 launcher: root.launcher
65 launcher: root.launcher
69− paused: !shown || root.paused
70−
71− onFinished: tutorialLeftFinish.show()
72− }
73−
74− TutorialLeftFinish {
75− id: tutorialLeftFinish
76− objectName: "tutorialLeftFinish"
77− anchors.fill: parent
78− textXOffset: root.launcher.panelWidth
79− paused: !shown || root.paused
80− text: i18n.tr("Tap here to continue.")
81−
82− onFinished: {
83− root.launcher.hide();
84− tutorialRight.show();
85− }
86− }
87−
88− TutorialRight {
89− id: tutorialRight
90− objectName: "tutorialRight"
91− anchors.fill: parent
92− edgeSize: root.edgeSize
93− panel: root.panel
94− paused: !shown || root.paused
95−
96− onFinished: tutorialBottom.show()
97− }
98−
99− TutorialBottom {
100− id: tutorialBottom
101− objectName: "tutorialBottom"
102− anchors.fill: parent
103− edgeSize: root.edgeSize
104− paused: !shown || root.paused
105−
106− onFinished: tutorialBottomFinish.show()
107− }
108−
109− TutorialBottomFinish {
110− id: tutorialBottomFinish
111− objectName: "tutorialBottomFinish"
112− anchors.fill: parent
113− backgroundFadesOut: true
114− paused: !shown || root.paused
115
66
116 onFinished: root.finish()
67 onFinished: root.finish()
117 }
68 }
qml/Tutorial/TutorialLeft.qml+9−63
@@ -23,79 +23,25 @@ TutorialPage {
23
23
24 property var launcher
24 property var launcher
25
25
26− title: i18n.tr("Open the launcher")
27− text: i18n.tr("Short swipe from the left edge.")
28−
29− textXOffset: root.launcher.x + root.launcher.visibleWidth
30−
31 Connections {
26 Connections {
32 target: root.launcher
27 target: root.launcher
33
28
34 onStateChanged: {
29 onStateChanged: {
35 if (root.launcher.state === "visible") {
30 if (root.launcher.state === "visible") {
36− finishTimer.start();
31+ root.hide();
37 }
32 }
38 }
33 }
39−
40− onDash: {
41− finishTimer.stop();
42− root.showError();
43− root.launcher.hide();
44− }
45− }
46−
47− SequentialAnimation {
48− id: teaseAnimation
49− objectName: "teaseAnimation"
50− paused: running && root.paused
51− running: !slider.active && root.launcher.visibleWidth === 0 && root.shown
52− loops: Animation.Infinite
53− property real bounce: 0
54− readonly property real maxBounce: units.gu(2)
55−
56− UbuntuNumberAnimation {
57− target: teaseAnimation
58− property: "bounce"
59− to: teaseAnimation.maxBounce
60− duration: UbuntuAnimation.SleepyDuration
61− }
62− UbuntuNumberAnimation {
63− target: teaseAnimation
64− property: "bounce"
65− to: 0
66− duration: UbuntuAnimation.SleepyDuration
67− }
68 }
34 }
69
35
70− Binding {
36+ arrow {
71− target: root.launcher
37+ anchors.left: root.left
72− when: root.shown
38+ anchors.verticalCenter: root.verticalCenter
73− property: "x"
74− value: Math.min(root.launcher.panelWidth - root.launcher.visibleWidth, teaseAnimation.bounce)
75 }
39 }
76
40
77− Timer {
41+ label {
78− id: finishTimer
42+ text: i18n.tr("Short swipe from the left edge to open the launcher")
79− interval: 1
80− onTriggered: {
81− root.hide();
82− root.launcher.x = 0; // make sure to reset launcher before we go
83− }
84− }
85−
86− foreground {
87− children: [
88− LocalComponents.Slider {
89− id: slider
90− anchors {
43+ anchors.left: arrow.right
91− left: parent.left
44+ anchors.right: root.right
92− top: parent.top
45+ anchors.verticalCenter: arrow.verticalCenter
93− topMargin: root.textBottom + units.gu(3)
94− }
95− offset: root.launcher.x + root.launcher.visibleWidth + root.launcher.progress
96− active: root.launcher.dragging
97− shortSwipe: true
98− }
99− ]
100 }
46 }
101}
47}
qml/Tutorial/TutorialLeftFinish.qmldeleted−41
@@ -1,41 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−import "." as LocalComponents
20−
21−TutorialPage {
22− id: root
23−
24− title: i18n.tr("These are the shortcuts to favorite apps")
25− text: i18n.tr("Tap here to continue.")
26− fullTextWidth: true
27−
28− foreground {
29− children: [
30− LocalComponents.Tick {
31− objectName: "tick"
32− anchors {
33− horizontalCenter: parent.horizontalCenter
34− top: parent.top
35− topMargin: root.textBottom + units.gu(3)
36− }
37− onClicked: root.hide()
38− }
39− ]
40− }
41−}
qml/Tutorial/TutorialPage.qml+32−188
@@ -21,63 +21,27 @@ import "../Components"
21Showable {
21Showable {
22 id: root
22 id: root
23
23
24− // This is the header displayed, like "Right edge"
25− property alias title: titleLabel.text
24+ property alias arrow: arrow
26−
27− // This is the block of text displayed below the header
28− property alias text: textLabel.text
25+ property alias label: label
29−
26+ readonly property real margin: units.gu(2)
30− // Whether animations are paused
31− property bool paused
32−
33− // Whether to give the text the full width that the title has
34− property bool fullTextWidth
35−
36− // Whether whole page (background + foreground) or just the foreground fades in
37− property bool backgroundFadesIn: false
38−
39− // Whether whole page (background + foreground) or just the foreground fades out
40− property bool backgroundFadesOut: false
41−
42− // The foreground Item, add children to it that you want to fade in
43− property alias foreground: foregroundExtra
44−
45− // The text label bottom, so you can position elements relative to it
46− readonly property real textBottom: Math.max(textLabel.y + textLabel.height, errorTextLabel.y + errorTextLabel.height)
47−
48− // The MouseArea that eats events (so you can adjust size as you will)
49− property alias mouseArea: mouseArea
50−
51− // X/Y offsets for text
52− property real textXOffset: 0
53− property real textYOffset: 0
54−
55− // Foreground text opacity
56− property real textOpacity: 1
57
27
58 signal finished()
28 signal finished()
59
29
60− function showError() {
61− errorTimer.start();
62− }
63−
64 ////
30 ////
65
31
66 visible: false
32 visible: false
67 shown: false
33 shown: false
68
34
69− property real _foregroundHideOpacity
70−
71 showAnimation: StandardAnimation {
35 showAnimation: StandardAnimation {
72− property: root.backgroundFadesIn ? "opacity" : "_foregroundHideOpacity"
36+ property: "opacity"
73 from: 0
37 from: 0
74 to: 1
38 to: 1
75− duration: root.backgroundFadesIn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.BriskDuration
39+ duration: UbuntuAnimation.SleepyDuration
76 onStarted: root.visible = true
40 onStarted: root.visible = true
77 }
41 }
78
42
79 hideAnimation: StandardAnimation {
43 hideAnimation: StandardAnimation {
80− property: root.backgroundFadesOut ? "opacity" : "_foregroundHideOpacity"
44+ property: "opacity"
81 to: 0
45 to: 0
82 duration: UbuntuAnimation.BriskDuration
46 duration: UbuntuAnimation.BriskDuration
83 onStopped: {
47 onStopped: {
@@ -86,160 +50,40 @@ Showable {
86 }
50 }
87 }
51 }
88
52
89− QtObject {
90− id: d
91−
92− readonly property real sideMargin: units.gu(5.5)
93− readonly property real verticalOffset: -units.gu(9)
94− readonly property real textXOffset: Math.max(0, root.textXOffset - sideMargin + units.gu(2))
95−
96− property real fadeInOffset: {
97− if (showAnimation.running) {
98− var opacity = root[root.showAnimation.property]
99− return (1 - opacity) * units.gu(3);
100− } else {
101− return 0;
102− }
103− }
104− }
105−
106− Timer {
107− id: errorTimer
108− interval: 3500
109− }
110−
111 MouseArea { // eat any errant presses
53 MouseArea { // eat any errant presses
112 id: mouseArea
54 id: mouseArea
113 anchors.fill: parent
55 anchors.fill: parent
114 }
56 }
115
57
116− Rectangle {
58+ Image {
117− anchors.fill: parent
59+ // Use x/y/height/width instead of anchors so that we don't adjust
118− color: "black"
60+ // the image if the OSK appears.
119− opacity: 0.82
61+ x: 0
120− }
62+ y: 0
121−
63+ height: root.height
122− Item {
123− id: foreground
124− anchors.fill: parent
125− opacity: root._foregroundHideOpacity
126−
127− Item {
128− anchors.fill: parent
129− opacity: root.textOpacity
130−
131− Label {
132− id: titleLabel
133− anchors {
134− top: parent.verticalCenter
135− topMargin: d.verticalOffset + root.textYOffset
136− left: parent.left
137− leftMargin: d.sideMargin + d.textXOffset
138− }
139− width: parent.width - d.sideMargin * 2
140− horizontalAlignment: Text.AlignLeft
141− wrapMode: Text.Wrap
142− font.weight: Font.Light
143− font.pixelSize: units.gu(3.5)
144− }
145−
146− Label {
147− id: textLabel
148− anchors {
149− top: titleLabel.bottom
150− topMargin: units.gu(2)
151− left: parent.left
152− leftMargin: d.sideMargin + d.textXOffset
153− }
154− width: (parent.width - d.sideMargin * 2) * (fullTextWidth ? 1 : 0.66)
155− horizontalAlignment: Text.AlignLeft
156− wrapMode: Text.Wrap
157− font.weight: Font.Light
158− font.pixelSize: units.gu(2.5)
159− }
160−
161− // We use two separate labels like this rather than just changing
162− // the text of the above labels because we want to know where to place
163− // sliders (via root.textBottom) without having that place change
164− // as the text changes length.
165− Label {
166− id: errorTitleLabel
167− objectName: "errorTitleLabel"
168− anchors {
169− top: titleLabel.top
170− left: titleLabel.left
171− }
172− width: titleLabel.width
173− horizontalAlignment: titleLabel.horizontalAlignment
174− wrapMode: titleLabel.wrapMode
175− font.weight: titleLabel.font.weight
176− font.pixelSize: titleLabel.font.pixelSize
177− opacity: 0
178− text: i18n.tr("You almost got it!")
179− }
180−
181− Label {
182− id: errorTextLabel
183− objectName: "errorTextLabel"
184− anchors {
185− top: errorTitleLabel.bottom
186− topMargin: textLabel.anchors.topMargin
187− left: textLabel.left
188− }
189− width: textLabel.width
64+ width: root.width
190− horizontalAlignment: textLabel.horizontalAlignment
65+ sourceSize.height: 1080
191− wrapMode: textLabel.wrapMode
66+ sourceSize.width: 1916
192− font.weight: textLabel.font.weight
67+ source: Qt.resolvedUrl("graphics/background.png")
193− font.pixelSize: textLabel.font.pixelSize
68+ fillMode: Image.PreserveAspectCrop
194− opacity: 0
195− text: i18n.tr("Try again.")
196− }
197− }
198−
199− // A place for subclasses to add extra widgets
200− Item {
201− id: foregroundExtra
202− anchors.fill: parent
203− }
204 }
69 }
205
70
206− states: State {
71+ Image {
207− name: "errorState"
72+ id: arrow
208− when: errorTimer.running
73+ anchors.margins: root.margin
209− PropertyChanges { target: titleLabel; opacity: 0 }
74+ width: units.gu(1)
210− PropertyChanges { target: textLabel; opacity: 0 }
75+ sourceSize.height: 106
211− PropertyChanges { target: errorTitleLabel; opacity: 1 }
76+ sourceSize.width: 34
212− PropertyChanges { target: errorTextLabel; opacity: 1 }
77+ source: Qt.resolvedUrl("graphics/arrow.png")
78+ fillMode: Image.PreserveAspectFit
213 }
79 }
214
80
215− transitions: Transition {
81+ Label {
216− to: "errorState"
82+ id: label
217− reversible: true
83+ anchors.margins: root.margin
218− SequentialAnimation {
84+ fontSize: "large"
219− ParallelAnimation {
85+ font.weight: Font.Light
220− StandardAnimation {
86+ color: "#333333"
221− target: titleLabel
87+ wrapMode: Text.Wrap
222− property: "opacity"
223− duration: UbuntuAnimation.BriskDuration
224− }
225− StandardAnimation {
226− target: textLabel
227− property: "opacity"
228− duration: UbuntuAnimation.BriskDuration
229− }
230− }
231− ParallelAnimation {
232− StandardAnimation {
233− target: errorTitleLabel
234− property: "opacity"
235− duration: UbuntuAnimation.BriskDuration
236− }
237− StandardAnimation {
238− target: errorTextLabel
239− property: "opacity"
240− duration: UbuntuAnimation.BriskDuration
241− }
242− }
243− }
244 }
88 }
245}
89}
qml/Tutorial/TutorialRight.qmldeleted−223
@@ -1,223 +0,0 @@
1−/*
2− * Copyright (C) 2014 Canonical, Ltd.
3− *
4− * This program is free software; you can redistribute it and/or modify
5− * it under the terms of the GNU General Public License as published by
6− * the Free Software Foundation; version 3.
7− *
8− * This program is distributed in the hope that it will be useful,
9− * but WITHOUT ANY WARRANTY; without even the implied warranty of
10− * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11− * GNU General Public License for more details.
12− *
13− * You should have received a copy of the GNU General Public License
14− * along with this program. If not, see <http://www.gnu.org/licenses/>.
15− */
16−
17−import QtQuick 2.3
18−import Ubuntu.Components 1.1
19−import Ubuntu.Gestures 0.1
20−import Unity.Application 0.1
21−import "../Components"
22−import "../Stages"
23−import "." as LocalComponents
24−
25−TutorialPage {
26− id: root
27−
28− property var panel
29− property alias edgeSize: stage.dragAreaWidth
30−
31− title: i18n.tr("To view open apps")
32− text: i18n.tr("Long swipe from the right edge.")
33−
34− textOpacity: 1 - slider.percent
35−
36− SequentialAnimation {
37− id: teaseAnimation
38− paused: running && root.paused
39− running: !stage.dragging && stage.dragProgress === 0
40− loops: Animation.Infinite
41−
42− UbuntuNumberAnimation {
43− target: stage
44− property: "x"
45− to: -units.gu(2)
46− duration: UbuntuAnimation.SleepyDuration
47− }
48− UbuntuNumberAnimation {
49− target: stage
50− property: "x"
51− to: 0
52− duration: UbuntuAnimation.SleepyDuration
53− }
54− }
55−
56− foreground {
57− children: [
58− LocalComponents.Slider {
59− id: slider
60− anchors {
61− right: parent.right
62− top: parent.top
63− topMargin: root.textBottom + units.gu(3)
64− }
65− rotation: 180
66− offset: stage.dragProgress - stage.x
67− active: stage.dragging
68− },
69−
70− // Just assume PhoneStage for now. The tablet version of the right-edge
71− // tutorial is still being spec'd by the design team.
72− PhoneStage {
73− id: stage
74− objectName: "stage"
75− anchors.top: parent.top
76− width: parent.width
77− height: parent.height
78− applicationManager: fakeAppManager
79− color: "transparent"
80− interactive: false
81− altTabEnabled: false
82− focusFirstApp: false
83− startScale: 0.8
84− endScale: 0.6
85− dragAreaOverlap: -x
86−
87− onOpened: {
88− overlay.show();
89− root.textOpacity = 0;
90− slider.visible = false;
91− }
92−
93− onDraggingChanged: {
94− if (!dragging) {
95− if (!overlay.shown) {
96− root.showError();
97− }
98− teaseAnimation.complete();
99− }
100− }
101− },
102−
103− Showable {
104− id: overlay
105− objectName: "overlay"
106− anchors.fill: parent
107−
108− opacity: 0
109− shown: false
110− showAnimation: UbuntuNumberAnimation { property: "opacity"; to: 1 }
111−
112− Label {
113− anchors.top: parent.top
114− anchors.topMargin: root.panel.panelHeight + units.gu(2)
115− anchors.left: parent.left
116− anchors.leftMargin: units.gu(2)
117− anchors.right: parent.right
118− anchors.rightMargin: units.gu(2)
119− wrapMode: Text.Wrap
120− horizontalAlignment: Text.AlignHCenter
121− fontSize: "large"
122− text: i18n.tr("View all your running tasks.")
123− }
124−
125− LocalComponents.Tick {
126− objectName: "tick"
127− anchors.bottom: bottomOverlayText.top
128− anchors.bottomMargin: units.gu(1)
129− anchors.horizontalCenter: bottomOverlayText.horizontalCenter
130− onClicked: root.hide()
131− }
132−
133− Label {
134− id: bottomOverlayText
135− anchors.bottom: parent.bottom
136− anchors.bottomMargin: units.gu(2)
137− anchors.left: parent.left
138− anchors.leftMargin: units.gu(2)
139− anchors.right: parent.right
140− anchors.rightMargin: units.gu(2)
141− wrapMode: Text.Wrap
142− horizontalAlignment: Text.AlignHCenter
143− fontSize: "small"
144− text: i18n.tr("Tap here to continue.")
145− }
146− }
147− ]
148− }
149−
150− ListModel {
151− id: fakeAppManager
152−
153− readonly property string focusedApplicationId: "facebook"
154−
155− function focusApplication(appId) {}
156− function requestFocusApplication(appId) {}
157− function findApplication(appId) {return null;}
158−
159− signal applicationAdded(string appId)
160− signal applicationRemoved(string appId)
161− signal focusRequested(string appId)
162−
163− ListElement {
164− appId: "facebook"
165− fullscreen: false
166− name: ""
167− icon: ""
168− state: ApplicationInfoInterface.Stopped
169− splashTitle: ""
170− splashImage: ""
171− splashShowHeader: false
172− splashColor: "transparent"
173− splashColorHeader: "transparent"
174− splashColorFooter: "transparent"
175− defaultScreenshot: "../Tutorial/graphics/facebook.png"
176− }
177−
178− ListElement {
179− appId: "camera"
180− fullscreen: false
181− name: ""
182− icon: ""
183− state: ApplicationInfoInterface.Stopped
184− splashTitle: ""
185− splashImage: ""
186− splashShowHeader: false
187− splashColor: "transparent"
188− splashColorHeader: "transparent"
189− splashColorFooter: "transparent"
190− defaultScreenshot: "../Tutorial/graphics/camera.png"
191− }
192−
193− ListElement {
194− appId: "gallery"
195− fullscreen: false
196− name: ""
197− icon: ""
198− state: ApplicationInfoInterface.Stopped
199− splashTitle: ""
200− splashImage: ""
201− splashShowHeader: false
202− splashColor: "transparent"
203− splashColorHeader: "transparent"
204− splashColorFooter: "transparent"
205− defaultScreenshot: "../Tutorial/graphics/gallery.png"
206− }
207−
208− ListElement {
209− appId: "dialer"
210− fullscreen: false
211− name: ""
212− icon: ""
213− state: ApplicationInfoInterface.Stopped
214− splashTitle: ""
215− splashImage: ""
216− splashShowHeader: false
217− splashColor: "transparent"
218− splashColorHeader: "transparent"
219− splashColorFooter: "transparent"
220− defaultScreenshot: "../Tutorial/graphics/dialer.png"
221− }
222− }
223−}
qml/Tutorial/graphics/arrow.pngnew file

Binary file not shown.

qml/Tutorial/graphics/background.pngnew file

Binary file not shown.

qml/Tutorial/graphics/camera.pngdeleted

Binary file not shown.

qml/Tutorial/graphics/chevron.pngdeleted

Binary file not shown.

qml/Tutorial/graphics/dialer.pngdeleted

Binary file not shown.

qml/Tutorial/graphics/facebook.pngdeleted

Binary file not shown.

qml/Tutorial/graphics/gallery.pngdeleted

Binary file not shown.

qml/Tutorial/graphics/tick.pngdeleted

Binary file not shown.