@@ -121,20 +121,22 @@ Item {
121121 right: parent.right
122122 }
123123 source: customTitle ? "" : "Pages/data/Phone header bkg.png"
124− height: customTitle ? customMargin + titleLabel.height + customMargin : units.gu(16)
124+ height: units.gu(16)
125125 clip: true
126126
127127 // page title
128128 Label {
129129 id: titleLabel
130130 property real animatedMargin: 0
131+ property real animatedTopMargin: titleRect.height - customMargin - titleLabel.height
131132 anchors {
132133 left: parent.left
133134 right: parent.right
134− bottom: parent.bottom
135+ top: parent.top
135136 bottomMargin: bottomMargin
136137 leftMargin: leftMargin + titleLabel.animatedMargin
137138 rightMargin: rightMargin
139+ topMargin: titleLabel.animatedTopMargin
138140 }
139141 text: title
140142 color: customTitle ? textColor : backgroundColor
@@ -196,13 +198,15 @@ Item {
196198 Item {
197199 id: contentHolder
198200 property real animatedMargin: 0
201+ property real animatedTopMargin: 0
199202 anchors {
200203 top: titleRect.bottom
201204 left: parent.left
202205 right: parent.right
203206 bottom: buttonBarVisible ? buttonRect.top : parent.top
204− leftMargin: contentHolder.animatedMargin
205− rightMargin: -contentHolder.animatedMargin
207+ leftMargin: content.animatedMargin
208+ rightMargin: -content.animatedMargin
209+ topMargin: content.animatedTopMargin
206210 }
207211 visible: opacity > 0
208212 }
@@ -258,6 +262,11 @@ Item {
258262 startControlsAnimation(duration)
259263 }
260264
265+ function aboutToShowSecondary(duration) {
266+ secondaryAnimation.restart()
267+ startControlsAnimation(duration)
268+ }
269+
261270 function startContentAnimation(duration, direction) {
262271 contentAnimation.animationDurationBase = duration
263272 contentAnimation.direction = direction
@@ -294,10 +303,10 @@ Item {
294303 ScriptAction { // direction of the effect
295304 script: {
296305 if (contentAnimation.direction === Qt.LeftToRight) {
297− titleLabel.animatedMargin = -titleRect.width;
306+ titleLabel.animatedMargin = -content.width;
298307 content.animatedMargin = -content.width;
299308 } else {
300− titleLabel.animatedMargin = titleRect.width;
309+ titleLabel.animatedMargin = content.width;
301310 content.animatedMargin = content.width;
302311 }
303312 }
@@ -319,4 +328,32 @@ Item {
319328 }
320329 }
321330 }
331+
332+ ParallelAnimation { // animation for the secondary pages
333+ id: secondaryAnimation
334+
335+ NumberAnimation { // the slide-up animation
336+ target: titleLabel
337+ property: 'animatedTopMargin'
338+ from: content.height
339+ to: titleRect.height - customMargin - titleLabel.height
340+ duration: UbuntuAnimation.BriskDuration
341+ easing: UbuntuAnimation.StandardEasing
342+ }
343+ NumberAnimation {
344+ target: content
345+ property: 'animatedTopMargin'
346+ from: content.height
347+ to: 0
348+ duration: UbuntuAnimation.BriskDuration
349+ easing: UbuntuAnimation.StandardEasing
350+ }
351+ NumberAnimation { // opacity animation
352+ targets: [titleLabel,content]
353+ property: 'opacity'
354+ from: 0
355+ to: 1
356+ duration: UbuntuAnimation.FastDuration
357+ }
358+ }
322359}