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