wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-24 16:23:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move repo icon back to the right-hand side

Browse source 
Also makes the grayscale filter work in Firefox.

Change-Id: I7dbeeb55502bc1ff0e1c969fb68310485c562765
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/792
This commit is contained in:
Gilles Dubuc 2014-07-16 10:42:17 -04:00
parent 3e2759cd7b
commit e17024549f
3 changed files with 11 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/mmv/mmv.mixins.less
View file

@ -58,6 +58,7 @@
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%);
filter: gray; // IE 6-9
}

22
resources/mmv/ui/mmv.ui.stripeButtons.js
View file

@ -98,17 +98,13 @@
* Creates a button linking to the file description page.
*/
SBP.initDescriptionPageButton = function() {
var tooltipDelay = mw.config.get( 'wgMultimediaViewer' ).tooltipDelay;
this.buttons.$descriptionPage = $( '<a>' )
.addClass( 'mw-mmv-repo-button empty ' )
.prependTo( this.$container )
.tipsy( {
gravity: $( document.body ).hasClass( 'rtl' ) ? 'se' : 'sw',
delayIn: tooltipDelay
} ).click( function () {
mw.mmv.actionLogger.log( 'file-description-page-abovefold' );
} ).prependTo( this.$container );
this.buttons.$descriptionPage = this.createButton(
'empty',
null,
mw.message( 'multimediaviewer-description-page-button-text' ).plain()
).click( function () {
mw.mmv.actionLogger.log( 'file-description-page-abovefold' );
} );
};
/**
@ -366,10 +362,8 @@
if ( repoInfo.favIcon ) {
this.setInlineStyle( 'repo-button-description-page',
// needs to be more specific then the fallback rule in stripeButtons.less
'html .mw-mmv-repo-button-dynamic {' +
'html .mw-mmv-repo-button-dynamic:before {' +
'background-image: url("' + repoInfo.favIcon + '");' +
// If you use a 16x16 favicon, this will look weird. You shouldn't.
'background-size: 32px 32px;' +
'}'
);
}

27
resources/mmv/ui/mmv.ui.stripeButtons.less
View file

@ -71,36 +71,13 @@
}
}
.mw-mmv-title-contain {
margin-left: @repo-button-width;
padding-left: 14px;
/* @embed */
background-image: url(img/angle-separator.svg);
background-repeat: no-repeat;
}
.mw-mmv-repo-button {
position: absolute;
top: 0;
bottom: 0;
left: -( @repo-button-width - 2 );
width: @repo-button-width;
opacity: 0.8;
transition: opacity 0.25s;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: auto 50%;
&:hover {
opacity: 1;
}
&-commons {
&-commons:before {
/* @embed */
background-image: url(img/commons_gray.svg);
background-position: 50% 40%; // visually it looks much better when the middle of the circle is centered
}
&-dynamic {
&-dynamic:before {
// for repos other than Wikimedia Commons we manipulate :before dynamically from JS; this is a fallback
.grayscale();
background-image: url(img/repo.svg);