From c304baf0ba968aded67655217d406e7782b9baeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerg=C5=91=20Tisza?= <tgr.huwiki@gmail.com>
Date: Fri, 18 Apr 2014 23:28:41 +0000
Subject: [PATCH] Show metadata panel immediately.

Change-Id: Ie71eb1d29e3863b99687a75da69fad9a1ead552c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/458
---
 resources/mmv/mmv.lightboxinterface.less      |  1 -
 resources/mmv/ui/mmv.ui.metadataPanel.js      |  2 -
 resources/mmv/ui/mmv.ui.metadataPanel.less    | 88 ++++++++++++-------
 .../qunit/mmv/ui/mmv.ui.metadataPanel.test.js |  8 +-
 4 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less
index d4d07fbb2..9d6450a50 100644
--- a/resources/mmv/mmv.lightboxinterface.less
+++ b/resources/mmv/mmv.lightboxinterface.less
@@ -57,7 +57,6 @@
 	color: #333333;
 	background-color: @metadata-background;
 	min-height: (@bottom-height + 1);
-	opacity: 0;
 	z-index: 2;
 }
 
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js
index 414eb729a..efc975236 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -742,8 +742,6 @@
 		if ( !this.hasAnimatedMetadata ) {
 			this.hasAnimatedMetadata = true;
 			this.$container.addClass( 'invite' );
-		} else {
-			this.$container.addClass( 'invited' );
 		}
 	};
 
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less
index 853f608ce..f892f8ddf 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.less
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.less
@@ -20,13 +20,66 @@
 }
 
 .mw-mmv-post-image {
+	.animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards );
 	&.invite {
 		.animation( mw-mmv-invite-animation 0.5s ease 0s 1 normal forwards );
+	}
+}
+
+.mw-mmv-appear-animation() {
+	0% {
+		opacity: 0.6;
+	}
+	50% {
+		opacity: 0.9;
+	}
+	100% {
 		opacity: 1;
 	}
-	&.invited {
-		opacity: 1;
+}
+
+@-webkit-keyframes mw-mmv-appear-animation {
+	.mw-mmv-appear-animation;
+}
+
+@-moz-keyframes mw-mmv-appear-animation {
+	.mw-mmv-appear-animation;
+}
+
+@-o-keyframes mw-mmv-appear-animation {
+	.mw-mmv-appear-animation;
+}
+
+@keyframes mw-mmv-appear-animation {
+	.mw-mmv-appear-animation;
+}
+
+.mw-mmv-invite-animation() {
+	0% {
+		margin-top: 5px;
 	}
+	50% {
+		margin-top: -3px;
+	}
+	100% {
+		margin-top: 0;
+	}
+}
+
+@-webkit-keyframes mw-mmv-invite-animation {
+	.mw-mmv-invite-animation;
+}
+
+@-moz-keyframes mw-mmv-invite-animation {
+	.mw-mmv-invite-animation;
+}
+
+@-o-keyframes mw-mmv-invite-animation {
+	.mw-mmv-invite-animation;
+}
+
+@keyframes mw-mmv-invite-animation {
+	.mw-mmv-invite-animation;
 }
 
 .mw-mmv-title-contain {
@@ -296,34 +349,3 @@
 .mw-mmv-about-links {
 	clear: both;
 }
-
-.mw-mmv-invite-animation() {
-	0% {
-		opacity: 0.6;
-		margin-top: 5px;
-	}
-	50% {
-		opacity: 0.9;
-		margin-top: -3px;
-	}
-	100% {
-		opacity: 1;
-		margin-top: 0;
-	}
-}
-
-@-webkit-keyframes mw-mmv-invite-animation {
-	.mw-mmv-invite-animation;
-}
-
-@-moz-keyframes mw-mmv-invite-animation {
-	.mw-mmv-invite-animation;
-}
-
-@-o-keyframes mw-mmv-invite-animation {
-	.mw-mmv-invite-animation;
-}
-
-@keyframes mw-mmv-invite-animation {
-	.mw-mmv-invite-animation;
-}
diff --git a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
index a1b738bd3..6915ab769 100644
--- a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
+++ b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
@@ -210,7 +210,7 @@
 	} );
 
 
-	QUnit.test( 'Metadata div is only animated once', 6, function ( assert ) {
+	QUnit.test( 'Metadata div is only animated once', 4, function ( assert ) {
 		localStorage.removeItem( 'mmv.hasOpenedMetadata' );
 
 		var $qf = $( '#qunit-fixture' ),
@@ -220,8 +220,6 @@
 
 		assert.ok( panel.hasAnimatedMetadata,
 			'The first call to animateMetadataOnce set hasAnimatedMetadata to true' );
-		assert.ok( !$qf.hasClass( 'invited' ),
-			'After the first call to animateMetadataOnce led to an animation' );
 		assert.ok( $qf.hasClass( 'invite' ),
 			'The first call to animateMetadataOnce led to an animation' );
 
@@ -230,12 +228,8 @@
 		panel.animateMetadataOnce();
 
 		assert.strictEqual( panel.hasAnimatedMetadata, true, 'The second call to animateMetadataOnce did not change the value of hasAnimatedMetadata' );
-		assert.ok( $qf.hasClass( 'invited' ),
-			'After the second call to animateMetadataOnce the div is shown right away' );
 		assert.ok( !$qf.hasClass( 'invite' ),
 			'The second call to animateMetadataOnce did not lead to an animation' );
-
-		$qf.removeClass( 'invited' );
 	} );
 
 	QUnit.test( 'Repo icon', 4, function ( assert ) {