git.iko.soy/unity8
on af1f8ef help sign in
unity8/qml/Tutorial/TutorialPage.qml
240 lines 7.5 kB history raw
1/*
2 * Copyright (C) 2013,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 */
17import QtQuick 2.3
18import Ubuntu.Components 1.1
19import "../Components"
21Showable {
22 id: root
24 // This is the header displayed, like "Right edge"
25 property alias title: titleLabel.text
27 // This is the block of text displayed below the header
28 property alias text: textLabel.text
30 // Whether animations are paused
31 property bool paused
33 // Whether to give the text the full width that the title has
34 property bool fullTextWidth
36 // Whether whole page (background + foreground) or just the foreground fades in
37 property bool backgroundFadesIn: false
39 // Whether whole page (background + foreground) or just the foreground fades out
40 property bool backgroundFadesOut: false
42 // The foreground Item, add children to it that you want to fade in
43 property alias foreground: foregroundExtra
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)
48 // The MouseArea that eats events (so you can adjust size as you will)
49 property alias mouseArea: mouseArea
51 // X/Y offsets for text
52 property real textXOffset: 0
53 property real textYOffset: 0
55 // Foreground opacity
56 property real foregroundOpacity: 1
58 signal finished()
60 function showError() {
61 errorTimer.start();
62 }
64 ////
66 shown: false
67 Component.onCompleted: show()
69 property real _foregroundHideOpacity
71 showAnimation: StandardAnimation {
72 property: root.backgroundFadesIn ? "opacity" : "_foregroundHideOpacity"
73 from: 0
74 to: 1
75 duration: root.backgroundFadesIn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.BriskDuration
76 }
78 hideAnimation: StandardAnimation {
79 property: root.backgroundFadesOut ? "opacity" : "_foregroundHideOpacity"
80 to: 0
81 duration: UbuntuAnimation.BriskDuration
82 onRunningChanged: {
83 if (!running) {
84 root.finished();
85 }
86 }
87 }
89 QtObject {
90 id: d
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))
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 }
106 Timer {
107 id: errorTimer
108 interval: 3500
109 }
111 MouseArea { // eat any errant presses
112 id: mouseArea
113 anchors.fill: parent
114 }
116 Rectangle {
117 anchors.fill: parent
118 color: "black"
119 opacity: 0.82
120 }
122 Item {
123 id: foreground
124 anchors.fill: parent
125 opacity: root.foregroundOpacity < 1 ? root.foregroundOpacity : root._foregroundHideOpacity
127 Label {
128 id: titleLabel
129 anchors {
130 top: parent.verticalCenter
131 topMargin: d.verticalOffset + root.textYOffset
132 left: parent.left
133 leftMargin: d.sideMargin + d.textXOffset
134 }
135 width: parent.width - d.sideMargin * 2
136 horizontalAlignment: Text.AlignLeft
137 wrapMode: Text.Wrap
138 font.weight: Font.Light
139 font.pixelSize: units.gu(3.5)
140 }
142 Label {
143 id: textLabel
144 anchors {
145 top: titleLabel.bottom
146 topMargin: units.gu(2)
147 left: parent.left
148 leftMargin: d.sideMargin + d.textXOffset
149 }
150 width: (parent.width - d.sideMargin * 2) * (fullTextWidth ? 1 : 0.66)
151 horizontalAlignment: Text.AlignLeft
152 wrapMode: Text.Wrap
153 font.weight: Font.Light
154 font.pixelSize: units.gu(2.5)
155 }
157 // We use two separate labels like this rather than just changing
158 // the text of the above labels because we want to know where to place
159 // sliders (via root.textBottom) without having that place change
160 // as the text changes length.
161 Label {
162 id: errorTitleLabel
163 objectName: "errorTitleLabel"
164 anchors {
165 top: titleLabel.top
166 left: titleLabel.left
167 }
168 width: titleLabel.width
169 horizontalAlignment: titleLabel.horizontalAlignment
170 wrapMode: titleLabel.wrapMode
171 font.weight: titleLabel.font.weight
172 font.pixelSize: titleLabel.font.pixelSize
173 opacity: 0
174 text: i18n.tr("You almost got it!")
175 }
177 Label {
178 id: errorTextLabel
179 objectName: "errorTextLabel"
180 anchors {
181 top: errorTitleLabel.bottom
182 topMargin: textLabel.anchors.topMargin
183 left: textLabel.left
184 }
185 width: textLabel.width
186 horizontalAlignment: textLabel.horizontalAlignment
187 wrapMode: textLabel.wrapMode
188 font.weight: textLabel.font.weight
189 font.pixelSize: textLabel.font.pixelSize
190 opacity: 0
191 text: i18n.tr("Try again.")
192 }
194 // A place for subclasses to add extra widgets
195 Item {
196 id: foregroundExtra
197 anchors.fill: parent
198 }
199 }
201 states: State {
202 name: "errorState"
203 when: errorTimer.running
204 PropertyChanges { target: titleLabel; opacity: 0 }
205 PropertyChanges { target: textLabel; opacity: 0 }
206 PropertyChanges { target: errorTitleLabel; opacity: 1 }
207 PropertyChanges { target: errorTextLabel; opacity: 1 }
208 }
210 transitions: Transition {
211 to: "errorState"
212 reversible: true
213 SequentialAnimation {
214 ParallelAnimation {
215 StandardAnimation {
216 target: titleLabel
217 property: "opacity"
218 duration: UbuntuAnimation.BriskDuration
219 }
220 StandardAnimation {
221 target: textLabel
222 property: "opacity"
223 duration: UbuntuAnimation.BriskDuration
224 }
225 }
226 ParallelAnimation {
227 StandardAnimation {
228 target: errorTitleLabel
229 property: "opacity"
230 duration: UbuntuAnimation.BriskDuration
231 }
232 StandardAnimation {
233 target: errorTextLabel
234 property: "opacity"
235 duration: UbuntuAnimation.BriskDuration
236 }
237 }
238 }
239 }