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
This commit is contained in:
Pau Giner 2014-05-15 17:55:40 +02:00 committed by Gergő Tisza
parent 4329d453ec
commit 96791886c8
2 changed files with 81 additions and 4 deletions

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -5,7 +5,7 @@
.mw-mmv-post-image { .mw-mmv-post-image {
.animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards ); .animation( mw-mmv-appear-animation 0.5s ease 0s 1 normal forwards );
&.invite { &.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% { 0% {
margin-top: 0px; margin-top: 0px;
} }
50% { 33% {
margin-top: -15px; margin-top: -30px;
} }
100% { 100% {
margin-top: 0; margin-top: 0;
@ -79,13 +79,17 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom; background-position: center bottom;
margin: 0 auto; margin: 0 auto;
opacity: 0.6; opacity: 0.7;
transition: opacity 0.25s; transition: opacity 0.25s;
&.pointing-down { &.pointing-down {
background-position: center top; background-position: center top;
.rotate(180deg); .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 { .mw-mmv-post-image:hover .mw-mmv-drag-icon {