From 96791886c88dff35b402b95c50300e2b865b904c Mon Sep 17 00:00:00 2001
From: Pau Giner <pau.giner@gmail.com>
Date: Thu, 15 May 2014 17:55:40 +0200
Subject: [PATCH] More prominent metadata panel invite.

The invite animation has been made more prominent and the chevron
is highlighted. this only applies until the user opens the
panel for the first time.

Change-Id: I91d1b9bffaf302890f63b741313aa47cc4beef24
---
 resources/mmv/ui/img/drag-active.svg          | 73 +++++++++++++++++++
 .../mmv/ui/mmv.ui.metadataPanelScroller.less  | 12 ++-
 2 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 resources/mmv/ui/img/drag-active.svg

diff --git a/resources/mmv/ui/img/drag-active.svg b/resources/mmv/ui/img/drag-active.svg
new file mode 100644
index 000000000..8063e5ac8
--- /dev/null
+++ b/resources/mmv/ui/img/drag-active.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="16"
+   viewBox="0 0 29.999999 16"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="drag.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1118"
+     inkscape:window-height="643"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="11.733333"
+     inkscape:cx="-0.085227273"
+     inkscape:cy="7.1903409"
+     inkscape:window-x="0"
+     inkscape:window-y="22"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <rect
+     width="14.503"
+     height="1.489"
+     rx=".25"
+     ry=".25"
+     x="15.244"
+     y="-3.474"
+     transform="rotate(30)"
+     fill="#aaa"
+     id="rect4"
+     style="fill:#347bff;fill-opacity:1" />
+  <rect
+     width="14.503"
+     height="1.489"
+     rx=".25"
+     ry=".25"
+     x="-10.736"
+     y="-13.015"
+     transform="matrix(-.866 .5 -.5 -.866 0 0)"
+     fill="#aaa"
+     id="rect6"
+     style="fill:#347bff;fill-opacity:1" />
+</svg>
diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
index bf4290663..1facb3a6d 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
+++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less
@@ -5,7 +5,7 @@
 .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 );
+		.animation( mw-mmv-invite-animation 1s ease 0s 1 normal forwards );
 	}
 }
 
@@ -41,8 +41,8 @@
 	0% {
 		margin-top: 0px;
 	}
-	50% {
-		margin-top: -15px;
+	33% {
+		margin-top: -30px;
 	}
 	100% {
 		margin-top: 0;
@@ -79,13 +79,17 @@
 	background-repeat: no-repeat;
 	background-position: center bottom;
 	margin: 0 auto;
-	opacity: 0.6;
+	opacity: 0.7;
 	transition: opacity 0.25s;
 
 	&.pointing-down {
 		background-position: center top;
 		.rotate(180deg);
 	}
+	.mw-mmv-post-image.invite & {
+		background-image: url(img/drag-active.svg);
+		opacity: 0.9;
+	}
 }
 
 .mw-mmv-post-image:hover .mw-mmv-drag-icon {