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
|
import QtQuick 2.0
import Ubuntu.Components 0.1
import "../components"
Page {
property alias startMessagingButton: startMessaging
property alias currentIndex: slider.currentIndex
signal showSignInPage
id: page
IntroPageListModel {
id: introModel
}
Rectangle {
anchors.fill: parent
color: "#ffffff"
CrossFadeImage {
id: icon
anchors.horizontalCenter: parent.horizontalCenter
y: parent.height/8 * 2
z: 2
width: Math.min(parent.width/3, units.gu(18))
height: width
fadeDuration: 250
fillMode: Image.PreserveAspectFit
}
ListView {
id: slider
anchors.fill: parent
z: 1
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
boundsBehavior: Flickable.StopAtBounds
cacheBuffer: width
clip: true
highlightFollowsCurrentItem: true
highlightRangeMode: ListView.StrictlyEnforceRange
model: introModel
delegate: Rectangle {
id: delegateRect
width: slider.width
height: slider.height
Rectangle {
width: parent.width
height: units.gu(10)
anchors.horizontalCenter: delegateRect.horizontalCenter
y: parent.height/6 * 3
// Problem changing Label color. Hence, using Text instead.
Text {
id: titleText
anchors.top: parent.top
width: parent.width
horizontalAlignment: TextInput.AlignHCenter
font.pixelSize: FontUtils.sizeToPixels("large")
color: "#000000"
text: title
}
// Not using Ubuntu font color, because it's affected by background color.
Text {
id: bodyText
anchors {
top: titleText.bottom
topMargin: units.gu(1.5)
// Why don't these work?
leftMargin: units.gu(15)
rightMargin: units.gu(3)
}
width: parent.width
horizontalAlignment: TextInput.AlignHCenter
font.pixelSize: FontUtils.sizeToPixels("medium")
wrapMode: Text.WordWrap
// Using Ubuntu Theme color.
color: "#777777"
text: body
}
}
}
onCurrentIndexChanged: {
icon.source = "../images/intro" + currentIndex + ".png";
}
}
// TODO karni: Perhaps replace with styled Button. This doesn't work in Button, though:
// font: Qt.font({family: "Ubuntu", pixelSize: FontUtils.sizeToPixels("medium"), color: "#000000"})
TelegramButton {
id: startMessaging
anchors.horizontalCenter: parent.horizontalCenter
y: page.height/3 * 2
z: 2
text: i18n.tr("Start Messaging")
onClicked: showSignInPage()
}
Row {
id: indicator
height: units.gu(6)
spacing: units.dp(8)
anchors {
bottom: parent.bottom
horizontalCenter: parent.horizontalCenter
}
z: 2
Repeater {
model: introModel.count
delegate: Rectangle {
height: width
width: units.dp(6)
antialiasing: true
anchors.verticalCenter: parent.verticalCenter
color: slider.currentIndex == index ? "#2ca5e0" : "#bbbbbb"
Behavior on color {
ColorAnimation {
duration: UbuntuAnimation.FastDuration
}
}
}
}
}
}
}
|