From e7fc5857de253d781ed7f80cce43c973897348c8 Mon Sep 17 00:00:00 2001
From: Pau Giner <pau.giner@gmail.com>
Date: Mon, 30 Jun 2014 14:35:33 +0200
Subject: [PATCH] Adjustments for invite animation

The invite animation has been adjusted to:
- Make the panel movement more subtle (reduced distance and length)
- Add an animation for the chevron and coordinate it whith th panel movement.

Change-Id: I8fbd01d23fd9bf74fc272c40acd2663f5907326a
---
 .../mmv/ui/mmv.ui.metadataPanelScroller.less  | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
index 58825cdba..3e547d7ec 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
+++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
@@ -10,7 +10,7 @@
 .mw-mmv-post-image {
 	.animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards );
 	&.invite {
-		.animation( mw-mmv-invite-animation 1s ease 0s 1 normal forwards );
+		.animation( mw-mmv-invite-animation 0.9s ease 0.2s 1 normal forwards );
 	}
 
 	.jq-fullscreened & {
@@ -50,10 +50,10 @@
 	0% {
 		margin-top: 0px;
 	}
-	33% {
-		margin-top: -30px;
+	30% {
+		margin-top: -15px;
 	}
-	100% {
+	85% {
 		margin-top: 0;
 	}
 }
@@ -131,9 +131,40 @@
 		background-image: url(img/drag-active.svg);
 		background-color: @drag-icon-invite-color;
 		.opacity(1);
+		.animation( mw-mmv-appear-chevron-animation 1.4s ease 0s 1 normal forwards );
 	}
 
 	.jq-fullscreened & {
 		display: none;
 	}
 }
+
+.mw-mmv-appear-chevron-animation() {
+	0% {
+		opacity: 0;
+	}
+	85% {
+		opacity: 0;
+		bottom: -5px;
+	}
+	100% {
+		opacity: 1;
+		bottom: 0px;
+	}
+}
+
+@-webkit-keyframes mw-mmv-appear-chevron-animation {
+	.mw-mmv-appear-chevron-animation;
+}
+
+@-moz-keyframes mw-mmv-appear-chevron-animation {
+	.mw-mmv-appear-chevron-animation;
+}
+
+@-o-keyframes mw-mmv-appear-chevron-animation {
+	.mw-mmv-appear-chevron-animation;
+}
+
+@keyframes mw-mmv-appear-chevron-animation {
+	.mw-mmv-appear-chevron-animation;
+}