1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
/*
* Copyright 2015, 2016 Nekhelesh Ramananthan (UCS)
*
* This file is part of Ubuntu Calculator App
*
* Ubuntu Calculator App is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as
* published by the Free Software Foundation.
*
* Ubuntu Calculator App is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.4
import Ubuntu.Components 1.3
Page {
id: walkthrough
// Property to set the app name used in the walkthrough
property string appName
// Property to check if this is the first run or not
property bool isFirstRun: true
// Property to store the slides shown in the walkthrough (Each slide is a component defined in a separate file for simplicity)
property list<Component> model
// Property to get device orientation
property bool isLandscape: width > height
// Property to set the color of bottom cirle to indicate the user's progress
property color completeColor: UbuntuColors.orange
// Property to set the color of the bottom circle to indicate the slide still left to cover
property color inCompleteColor: "lightgrey"
// Property to set the color of the skip welcome wizard text
property color skipTextColor: "grey"
// Property to signal walkthrough completion
signal finished
// Hide page header
head.locked: true
head.visible: false
// ListView to show the slides
ListView {
id: listView
anchors {
left: parent.left
right: parent.right
top: skipLabel.bottom
bottom: slideIndicator.top
}
cacheBuffer: listView.width
model: walkthrough.model
snapMode: ListView.SnapOneItem
orientation: Qt.Horizontal
highlightMoveDuration: UbuntuAnimation.BriskDuration
highlightRangeMode: ListView.StrictlyEnforceRange
highlightFollowsCurrentItem: true
delegate: Item {
width: listView.width
height: listView.height
Loader {
anchors {
fill: parent
margins: units.gu(2)
}
sourceComponent: modelData
}
}
}
// Label to skip the walkthrough. Only visible on the first slide
Label {
id: skipLabel
objectName: "skipLabel"
visible: enabled
enabled: listView.currentIndex !== listView.count-1
color: skipTextColor
fontSize: "small"
wrapMode: Text.WordWrap
text: i18n.tr("Skip")
horizontalAlignment: Text.AlignRight
anchors {
top: parent.top
left: parent.left
right: parent.right
margins: units.gu(2)
}
MouseArea {
anchors.fill: parent
onClicked: walkthrough.finished()
}
}
// Indicator element to represent the current slide of the walkthrough
Row {
id: slideIndicator
height: units.gu(6)
spacing: 0
anchors {
left: leftchevron.right
right: rightchevron.left
bottom: parent.bottom
}
Repeater {
model: walkthrough.model.length
delegate: Rectangle {
width: slideIndicator.width/walkthrough.model.length
height: 4
anchors.verticalCenter: parent.verticalCenter
color: listView.currentIndex >= index ? completeColor
: inCompleteColor
}
}
}
ActionButton {
id: rightchevron
width: units.gu(6)
height: units.gu(6)
anchors {
bottom: parent.bottom
right: parent.right
}
iconName: "chevron"
visible: enabled
enabled: listView.currentIndex !== listView.count-1
onClicked: listView.currentIndex++
}
ActionButton {
id: leftchevron
width: units.gu(6)
height: units.gu(6)
anchors {
bottom: parent.bottom
left: parent.left
}
iconName: "chevron"
rotation: 180
visible: enabled
enabled: listView.currentIndex !== 0
onClicked: listView.currentIndex--
}
}
|