@@ -204,6 +204,7 @@ Item {
204 leftMargin: contentHolder.animatedMargin
204 leftMargin: contentHolder.animatedMargin
205 rightMargin: -contentHolder.animatedMargin
205 rightMargin: -contentHolder.animatedMargin
207+ visible: opacity > 0
209 // button bar
210 // button bar
@@ -252,10 +253,9 @@ Item {
254 // transitions
255 // transitions
256 function aboutToShow(duration, direction) {
256 function aboutToShow(duration, direction) {
257 startContentAnimation(duration, direction)
257 startContentAnimation(duration, direction)
258− startShowing(duration)
258+ startControlsAnimation(duration)
261 function startContentAnimation(duration, direction) {
261 function startContentAnimation(duration, direction) {
@@ -264,12 +264,12 @@ Item {
264 contentAnimation.restart()
264 contentAnimation.restart()
267− function startShowing(showDuration) {
267+ function startControlsAnimation(showDuration) {
268 actionsShowAnimation.showDuration = showDuration
268 actionsShowAnimation.showDuration = showDuration
269 actionsShowAnimation.restart()
269 actionsShowAnimation.restart()
272− SequentialAnimation {
272+ SequentialAnimation { // animation for the button bar
273 id: actionsShowAnimation
273 id: actionsShowAnimation
274 property int showDuration: 0
274 property int showDuration: 0
275 PropertyAction {
275 PropertyAction {
@@ -286,12 +286,12 @@ Item {
289− SequentialAnimation {
289+ SequentialAnimation { // animations for the content
290 id: contentAnimation
290 id: contentAnimation
291 property int animationDurationBase: UbuntuAnimation.BriskDuration
291 property int animationDurationBase: UbuntuAnimation.BriskDuration
292 readonly property int additionalDuration: 200
292 readonly property int additionalDuration: 200
293 property int direction: Qt.LeftToRight
293 property int direction: Qt.LeftToRight
294− ScriptAction {
294+ ScriptAction { // direction of the effect
295 script: {
295 script: {
296 if (contentAnimation.direction === Qt.LeftToRight) {
296 if (contentAnimation.direction === Qt.LeftToRight) {
297 titleLabel.animatedMargin = -titleRect.width;
297 titleLabel.animatedMargin = -titleRect.width;
@@ -303,14 +303,14 @@ Item {
305 ParallelAnimation {
305 ParallelAnimation {
306− NumberAnimation {
306+ NumberAnimation { // the slide-in animation
307 targets: [titleLabel, content]
307 targets: [titleLabel, content]
308 property: 'animatedMargin'
308 property: 'animatedMargin'
310 duration: contentAnimation.animationDurationBase + contentAnimation.additionalDuration
310 duration: contentAnimation.animationDurationBase + contentAnimation.additionalDuration
311 easing.type: Easing.OutCubic
311 easing.type: Easing.OutCubic
313− NumberAnimation {
313+ NumberAnimation { // opacity animation
314 targets: [titleLabel,content]
314 targets: [titleLabel,content]
315 property: 'opacity'
315 property: 'opacity'