on aa2feff help sign in
unity8/qml/Tutorial/TutorialPage.qml
221 lines 6.6 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 // This is the block of text displayed during an error
31 property alias errorText: errorLabel.text
33 // Whether animations are paused
34 property bool paused
36 // Whether to give the text the full width that the title has
37 property bool fullTextWidth
39 // Whether whole page (background + foreground) or just the foreground fades in
40 property bool backgroundFadesIn: false
42 // Whether whole page (background + foreground) or just the foreground fades out
43 property bool backgroundFadesOut: false
45 // The foreground Item, add children to it that you want to fade in
46 property alias foreground: foregroundExtra
48 // The text label bottom, so you can position elements relative to it
49 property real textBottom: textLabel.y + textLabel.height
51 // The MouseArea that eats events (so you can adjust size as you will)
52 property alias mouseArea: mouseArea
54 // X/Y offsets for text
55 property real textXOffset: 0
56 property real textYOffset: 0
58 // Foreground text opacity
59 property real textOpacity: 1
61 signal finished()
63 function showError() {
64 errorTimer.start();
65 }
67 ////
69 visible: false
70 shown: false
72 property real _foregroundHideOpacity
74 showAnimation: StandardAnimation {
75 property: root.backgroundFadesIn ? "opacity" : "_foregroundHideOpacity"
76 from: 0
77 to: 1
78 duration: root.backgroundFadesIn ? UbuntuAnimation.SleepyDuration : UbuntuAnimation.BriskDuration
79 onStarted: root.visible = true
80 }
82 hideAnimation: StandardAnimation {
83 property: root.backgroundFadesOut ? "opacity" : "_foregroundHideOpacity"
84 to: 0
85 duration: UbuntuAnimation.BriskDuration
86 onStopped: {
87 root.visible = false;
88 root.finished();
89 }
90 }
92 QtObject {
93 id: d
95 readonly property real sideMargin: units.gu(5.5)
96 readonly property real verticalOffset: -units.gu(9)
97 readonly property real textXOffset: Math.max(0, root.textXOffset - sideMargin + units.gu(2))
99 property real fadeInOffset: {
100 if (showAnimation.running) {
101 var opacity = root[root.showAnimation.property]
102 return (1 - opacity) * units.gu(3);
103 } else {
104 return 0;
105 }
106 }
107 }
109 Timer {
110 id: errorTimer
111 interval: 3500
112 }
114 MouseArea { // eat any errant presses
115 id: mouseArea
116 anchors.fill: parent
117 }
119 Rectangle {
120 anchors.fill: parent
121 color: "black"
122 opacity: 0.82
123 }
125 Item {
126 id: foreground
127 anchors.fill: parent
128 opacity: root._foregroundHideOpacity
130 Item {
131 anchors.fill: parent
132 opacity: root.textOpacity
134 Label {
135 id: titleLabel
136 anchors {
137 top: parent.verticalCenter
138 topMargin: d.verticalOffset + root.textYOffset
139 left: parent.left
140 leftMargin: d.sideMargin + d.textXOffset
141 }
142 width: parent.width - d.sideMargin * 2
143 horizontalAlignment: Text.AlignLeft
144 wrapMode: Text.Wrap
145 font.weight: Font.Light
146 font.pixelSize: units.gu(3.5)
147 }
149 Label {
150 id: textLabel
151 anchors {
152 top: titleLabel.bottom
153 topMargin: units.gu(2)
154 left: parent.left
155 leftMargin: d.sideMargin + d.textXOffset
156 }
157 width: (parent.width - d.sideMargin * 2) * (fullTextWidth ? 1 : 0.66)
158 horizontalAlignment: Text.AlignLeft
159 wrapMode: Text.Wrap
160 font.weight: Font.Light
161 font.pixelSize: units.gu(2.5)
162 }
164 Label {
165 id: errorLabel
166 objectName: "errorLabel"
167 anchors {
168 top: parent.verticalCenter
169 topMargin: d.verticalOffset + root.textYOffset
170 left: parent.left
171 leftMargin: d.sideMargin + d.textXOffset
172 }
173 width: parent.width - d.sideMargin * 2
174 horizontalAlignment: Text.AlignLeft
175 wrapMode: Text.Wrap
176 font.weight: Font.Light
177 font.pixelSize: units.gu(3.5)
178 opacity: 0
179 }
180 }
182 // A place for subclasses to add extra widgets
183 Item {
184 id: foregroundExtra
185 anchors.fill: parent
186 }
187 }
189 states: State {
190 name: "errorState"
191 when: errorTimer.running
192 PropertyChanges { target: titleLabel; opacity: 0 }
193 PropertyChanges { target: textLabel; opacity: 0 }
194 PropertyChanges { target: errorLabel; opacity: 1 }
195 }
197 transitions: Transition {
198 to: "errorState"
199 reversible: true
200 SequentialAnimation {
201 id: showErrorAnimation
202 ParallelAnimation {
203 StandardAnimation {
204 target: titleLabel
205 property: "opacity"
206 duration: UbuntuAnimation.BriskDuration
207 }
208 StandardAnimation {
209 target: textLabel
210 property: "opacity"
211 duration: UbuntuAnimation.BriskDuration
212 }
213 }
214 StandardAnimation {
215 target: errorLabel
216 property: "opacity"
217 duration: UbuntuAnimation.BriskDuration
218 }
219 }
220 }