@@ -27,9 +27,6 @@ Showable {
2727 // This is the block of text displayed below the header
2828 property alias text: textLabel.text
2929
30− // This is the block of text displayed during an error
31− property alias errorText: errorLabel.text
32−
3330 // Whether animations are paused
3431 property bool paused
3532
@@ -46,7 +43,7 @@ Showable {
4643 property alias foreground: foregroundExtra
4744
4845 // The text label bottom, so you can position elements relative to it
49− property real textBottom: textLabel.y + textLabel.height
46+ readonly property real textBottom: Math.max(textLabel.y + textLabel.height, errorTextLabel.y + errorTextLabel.height)
5047
5148 // The MouseArea that eats events (so you can adjust size as you will)
5249 property alias mouseArea: mouseArea
@@ -161,21 +158,41 @@ Showable {
161158 font.pixelSize: units.gu(2.5)
162159 }
163160
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.
164165 Label {
165− id: errorLabel
166− objectName: "errorLabel"
166+ id: errorTitleLabel
167+ objectName: "errorTitleLabel"
167168 anchors {
168− top: parent.verticalCenter
169− topMargin: d.verticalOffset + root.textYOffset
170− left: parent.left
171− leftMargin: d.sideMargin + d.textXOffset
169+ top: titleLabel.top
170+ left: titleLabel.left
172171 }
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)
172+ width: titleLabel.width
173+ horizontalAlignment: titleLabel.horizontalAlignment
174+ wrapMode: titleLabel.wrapMode
175+ font.weight: titleLabel.font.weight
176+ font.pixelSize: titleLabel.font.pixelSize
178177 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.")
179196 }
180197 }
181198
@@ -191,14 +208,14 @@ Showable {
191208 when: errorTimer.running
192209 PropertyChanges { target: titleLabel; opacity: 0 }
193210 PropertyChanges { target: textLabel; opacity: 0 }
194− PropertyChanges { target: errorLabel; opacity: 1 }
211+ PropertyChanges { target: errorTitleLabel; opacity: 1 }
212+ PropertyChanges { target: errorTextLabel; opacity: 1 }
195213 }
196214
197215 transitions: Transition {
198216 to: "errorState"
199217 reversible: true
200218 SequentialAnimation {
201− id: showErrorAnimation
202219 ParallelAnimation {
203220 StandardAnimation {
204221 target: titleLabel
@@ -211,10 +228,17 @@ Showable {
211228 duration: UbuntuAnimation.BriskDuration
212229 }
213230 }
214− StandardAnimation {
215− target: errorLabel
216− property: "opacity"
217− duration: UbuntuAnimation.BriskDuration
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+ }
218242 }
219243 }
220244 }