@@ -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
@@ -157,21 +154,41 @@ Showable {
157154 font.pixelSize: units.gu(2.5)
158155 }
159156
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.
160161 Label {
161− id: errorLabel
162− objectName: "errorLabel"
162+ id: errorTitleLabel
163+ objectName: "errorTitleLabel"
163164 anchors {
164− top: parent.verticalCenter
165− topMargin: d.verticalOffset + root.textYOffset
166− left: parent.left
167− leftMargin: d.sideMargin + d.textXOffset
165+ top: titleLabel.top
166+ left: titleLabel.left
168167 }
169− width: parent.width - d.sideMargin * 2
170− horizontalAlignment: Text.AlignLeft
171− wrapMode: Text.Wrap
172− font.weight: Font.Light
173− font.pixelSize: units.gu(3.5)
168+ width: titleLabel.width
169+ horizontalAlignment: titleLabel.horizontalAlignment
170+ wrapMode: titleLabel.wrapMode
171+ font.weight: titleLabel.font.weight
172+ font.pixelSize: titleLabel.font.pixelSize
174173 opacity: 0
174+ text: i18n.tr("You almost got it!")
175+ }
176+
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.")
175192 }
176193
177194 // A place for subclasses to add extra widgets
@@ -186,14 +203,14 @@ Showable {
186203 when: errorTimer.running
187204 PropertyChanges { target: titleLabel; opacity: 0 }
188205 PropertyChanges { target: textLabel; opacity: 0 }
189− PropertyChanges { target: errorLabel; opacity: 1 }
206+ PropertyChanges { target: errorTitleLabel; opacity: 1 }
207+ PropertyChanges { target: errorTextLabel; opacity: 1 }
190208 }
191209
192210 transitions: Transition {
193211 to: "errorState"
194212 reversible: true
195213 SequentialAnimation {
196− id: showErrorAnimation
197214 ParallelAnimation {
198215 StandardAnimation {
199216 target: titleLabel
@@ -206,10 +223,17 @@ Showable {
206223 duration: UbuntuAnimation.BriskDuration
207224 }
208225 }
209− StandardAnimation {
210− target: errorLabel
211− property: "opacity"
212− duration: UbuntuAnimation.BriskDuration
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+ }
213237 }
214238 }
215239 }