mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 13:17:35 +00:00
Show metadata panel immediately.
Change-Id: Ie71eb1d29e3863b99687a75da69fad9a1ead552c Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/458
This commit is contained in:
parent
3ea4703c8c
commit
c304baf0ba
|
@ -57,7 +57,6 @@
|
||||||
color: #333333;
|
color: #333333;
|
||||||
background-color: @metadata-background;
|
background-color: @metadata-background;
|
||||||
min-height: (@bottom-height + 1);
|
min-height: (@bottom-height + 1);
|
||||||
opacity: 0;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -742,8 +742,6 @@
|
||||||
if ( !this.hasAnimatedMetadata ) {
|
if ( !this.hasAnimatedMetadata ) {
|
||||||
this.hasAnimatedMetadata = true;
|
this.hasAnimatedMetadata = true;
|
||||||
this.$container.addClass( 'invite' );
|
this.$container.addClass( 'invite' );
|
||||||
} else {
|
|
||||||
this.$container.addClass( 'invited' );
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -20,13 +20,66 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-mmv-post-image {
|
.mw-mmv-post-image {
|
||||||
|
.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 0.5s ease 0s 1 normal forwards );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw-mmv-appear-animation() {
|
||||||
|
0% {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
opacity: 1;
|
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 {
|
.mw-mmv-title-contain {
|
||||||
|
@ -296,34 +349,3 @@
|
||||||
.mw-mmv-about-links {
|
.mw-mmv-about-links {
|
||||||
clear: both;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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' );
|
localStorage.removeItem( 'mmv.hasOpenedMetadata' );
|
||||||
|
|
||||||
var $qf = $( '#qunit-fixture' ),
|
var $qf = $( '#qunit-fixture' ),
|
||||||
|
@ -220,8 +220,6 @@
|
||||||
|
|
||||||
assert.ok( panel.hasAnimatedMetadata,
|
assert.ok( panel.hasAnimatedMetadata,
|
||||||
'The first call to animateMetadataOnce set hasAnimatedMetadata to true' );
|
'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' ),
|
assert.ok( $qf.hasClass( 'invite' ),
|
||||||
'The first call to animateMetadataOnce led to an animation' );
|
'The first call to animateMetadataOnce led to an animation' );
|
||||||
|
|
||||||
|
@ -230,12 +228,8 @@
|
||||||
panel.animateMetadataOnce();
|
panel.animateMetadataOnce();
|
||||||
|
|
||||||
assert.strictEqual( panel.hasAnimatedMetadata, true, 'The second call to animateMetadataOnce did not change the value of hasAnimatedMetadata' );
|
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' ),
|
assert.ok( !$qf.hasClass( 'invite' ),
|
||||||
'The second call to animateMetadataOnce did not lead to an animation' );
|
'The second call to animateMetadataOnce did not lead to an animation' );
|
||||||
|
|
||||||
$qf.removeClass( 'invited' );
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
QUnit.test( 'Repo icon', 4, function ( assert ) {
|
QUnit.test( 'Repo icon', 4, function ( assert ) {
|
||||||
|
|
Loading…
Reference in a new issue