← Back to branch summary

~cibersheep/unav/systemcolors

« back to all changes in this revision

Viewing changes to qml/tuto/components/Walkthrough.qml

  • Committer: costales
  • Date: 2016-03-26 18:53:17 UTC
  • Revision ID: costales.marcos@gmail.com-20160326185317-4iau3yhe8986h5pg
Init team

Show diffs side-by-side

added added

removed removed

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