wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-09-29 05:07:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Make description page link and reuse widget more prominent"

Browse source
This commit is contained in:
jenkins-bot 2014-07-04 06:45:34 +00:00 committed by Gerrit Code Review
parent c38cf80ec7 8d05dd8a6d
commit 06b772d92f
4 changed files with 77 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
i18n/en.json
View file

@ -103,9 +103,8 @@
"multimediaviewer-embed-dimensions": "$1 × $2 px",
"multimediaviewer-embed-dimensions-separated": "- $1",
"multimediaviewer-embed-dimensions-with-file-format": "$1 $2",
"multimediaviewer-feedback-button-text": "Your feedback about this tool",
"multimediaviewer-feedback-popup-text": "Leave feedback about this new media viewing experience",
"multimediaviewer-description-page-button-text": "More details",
"multimediaviewer-description-page-button-text": "More details about this file",
"multimediaviewer-description-page-popup-text": "More details about this file on $1",
"multimediaviewer-commons-subtitle": "The free media repository",
"multimediaviewer-view-expanded": "Expand view",

7
i18n/qqq.json
View file

@ -109,10 +109,9 @@
"multimediaviewer-embed-dimensions": "Dimensions for a given size selector option which will generate wikitext for a thumbnail.\n* $1 - width in pixels\n* $2 - height in pixels",
"multimediaviewer-embed-dimensions-separated": "Wraps the dimensions with a separator styled the same way, for the embed tab.\n* $1 - image dimensions\n\nSee also:\n* {{msg-mw|Multimediaviewer-embed-dimensions}}",
"multimediaviewer-embed-dimensions-with-file-format": "Collates image dimensions and a file format.\n* $1 - {{msg-mw|Multimediaviewer-embed-dimensions}}\n* $2 - file format extension, lowercased",
"multimediaviewer-feedback-button-text": "Text of the button on top of the metadata panel which brings up a feedback survey.\n\nSee also:\n* {{msg-mw|Multimediaviewer-feedback-popup-text}}",
"multimediaviewer-feedback-popup-text": "Additional popup text of the button on top of the metadata panel which brings up a feedback survey.\n\nSee also:\n* {{msg-mw|Multimediaviewer-feedback-button-text}}",
"multimediaviewer-description-page-button-text": "Text of the button on top of the metadata panel which links to the file description page.\n\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-popup-text}}",
"multimediaviewer-description-page-popup-text": "Additional popup text of the button on top of the metadata panel, which links to the file description page.\n\nParameters:\n* $1 - the name of the site where the file comes from (e.g. \"Wikimedia Commons\")\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-button-text}}.",
"multimediaviewer-feedback-popup-text": "Additional popup text of the button on top of the metadata panel which brings up a feedback survey.",
"multimediaviewer-description-page-button-text": "Text of the tooltip popup for the button on top of the metadata panel which links to the file description page. Used when the file was uploaded to the local wiki.\n\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-popup-text}} (for remote files)",
"multimediaviewer-description-page-popup-text": "Text of the tooltip popup for the button on top of the metadata panel, which links to the file description page.Used when the file was uploaded to a different wiki.\n\nParameters:\n* $1 - the name of the site where the file comes from (e.g. \"Wikimedia Commons\")\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-button-text}} (for local files)",
"multimediaviewer-commons-subtitle": "Additional text to display under {{msg-mw|multimediaviewer-repository}} when the image is from Commons.",
"multimediaviewer-view-expanded": "Label for a link on a file page to view the current image in the media viewer.",
"multimediaviewer-close-popup-text": "Tooltip for the button that closes the media viewer. \"Esc\" is the label of the keyboard key usually called \"[[:w:Esc key|Escape]]\".",

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

@ -24,7 +24,8 @@
* Class for buttons which are placed on the metadata stripe (the always visible part of the
* metadata panel).
* @constructor
* @param {jQuery} $container
* @param {jQuery} $container the title block (.mw-mmv-title-contain) which wraps the buttons and all
* other title elements
* @param {Object} localStorage the localStorage object, for dependency injection
*/
function StripeButtons( $container, localStorage ) {
@ -60,18 +61,25 @@
* @param {string} popupText HTML code for the popup text
*/
SBP.createButton = function ( cssClass, text, popupText ) {
var tooltipDelay = mw.config.get( 'wgMultimediaViewer' ).tooltipDelay;
var button,
tooltipDelay = mw.config.get( 'wgMultimediaViewer' ).tooltipDelay;
return $( '<a>' )
button = $( '<a>' )
.addClass( 'mw-mmv-stripe-button empty ' + cssClass )
// .text( text ) // disabled while we have 3 buttons to save space
.prop( 'title', popupText )
// elements are right-floated so we use prepend instead of append to keep the order
.prependTo( this.$buttonContainer )
.tipsy( {
.prependTo( this.$buttonContainer );
if ( text ) {
button.text( text ).addClass( 'has-label' );
}
if ( popupText ) {
button.prop( 'title', popupText ).tipsy( {
gravity: $( document.body ).hasClass( 'rtl' ) ? 'sw' : 'se',
delayIn: tooltipDelay
} );
}
return button;
};
/**
@ -81,7 +89,6 @@
SBP.initReuseButton = function() {
this.buttons.$reuse = this.createButton(
'mw-mmv-stripe-button-reuse',
mw.message( 'multimediaviewer-reuse-link' ).text(),
mw.message( 'multimediaviewer-reuse-link' ).text()
);
};
@ -91,13 +98,17 @@
* Creates a button linking to the file description page.
*/
SBP.initDescriptionPageButton = function() {
this.buttons.$descriptionPage = this.createButton(
'mw-mmv-stripe-button-commons',
mw.message( 'multimediaviewer-description-page-button-text' ).plain()
).click( function () {
mw.mmv.actionLogger.log( 'file-description-page-abovefold' );
} );
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 );
};
/**
@ -109,7 +120,7 @@
this.buttons.$feedback = this.createButton(
'mw-mmv-stripe-button-feedback',
mw.message( 'multimediaviewer-feedback-button-text' ).plain(),
null,
mw.message( 'multimediaviewer-feedback-popup-text' ).plain()
).attr( {
target: '_blank',
@ -349,14 +360,16 @@
} );
if ( repoInfo.isCommons() ) {
this.buttons.$descriptionPage.addClass( 'mw-mmv-stripe-button-commons' );
this.buttons.$descriptionPage.addClass( 'mw-mmv-repo-button-commons' );
} else {
this.buttons.$descriptionPage.addClass( 'mw-mmv-stripe-button-dynamic' );
this.buttons.$descriptionPage.addClass( 'mw-mmv-repo-button-dynamic' );
if ( repoInfo.favIcon ) {
this.setInlineStyle( 'stripe-button-description-page',
this.setInlineStyle( 'repo-button-description-page',
// needs to be more specific then the fallback rule in stripeButtons.less
'.mw-mmv-stripe-button-container .mw-mmv-stripe-button-dynamic:before {' +
'html .mw-mmv-repo-button-dynamic {' +
'background-image: url("' + repoInfo.favIcon + '");' +
// If you use a 16x16 favicon, this will look weird. You shouldn't.
'background-size: 32px 32px;' +
'}'
);
}
@ -374,9 +387,8 @@
this.buttons.$reuse.removeClass( 'open' );
this.buttons.$descriptionPage.attr( { href: null, title: null, 'original-title': null } )
.removeClass( 'mw-mmv-stripe-button-dynamic mw-mmv-stripe-button-commons' );
$( '.mw-mmv-stripe-button-dynamic-before' ).remove();
this.setInlineStyle( 'stripe-button-description-page', null );
.removeClass( 'mw-mmv-repo-button-dynamic mw-mmv-repo-button-commons' );
this.setInlineStyle( 'repo-button-description-page', null );
};
/**

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

@ -3,6 +3,7 @@
@button-vertical-padding: 15px;
@button-height: 25px;
@repo-button-width: 50px;
// The buttons need to be positioned to the bottom right corner of .mw-mmv-title-contain, and
// other text in that element must not overlap them. Their width is not known (depends on the
@ -31,6 +32,7 @@
// when the button is a link, we need more selector specificity
a&, a&:visited, a&:hover {
color: @button-text-color;
text-decoration: none;
}
&.empty {
@ -55,31 +57,46 @@
content: ' ';
vertical-align: baseline;
}
&.has-label:before {
margin-right: 0.25em;
}
&-reuse:before {
/* @embed */
background-image: url(img/use-ltr.svg);
}
&-feedback:before {
/* @embed */
background-image: url(img/horn_grey.svg);
background-size: 100%;
}
}
.mw-mmv-stripe-button-reuse:before {
.mw-mmv-title-contain {
margin-left: @repo-button-width;
padding-left: 14px;
/* @embed */
background-image: url(img/use-ltr.svg);
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;
width: @repo-button-width;
.mw-mmv-stripe-button-feedback:before {
/* @embed */
background-image: url(img/horn_grey.svg);
background-size: 100%;
}
.mw-mmv-stripe-button-commons:before {
/* @embed */
background-image: url(img/commons_gray.svg);
padding: 1px;
top: -1px;
}
// for othe repos than Wikimedia Commons we manipulate :before dynamically from JS
.mw-mmv-stripe-button-dynamic:before {
.grayscale;
width: 0.8em;
height: 0.8em;
background-image: url(img/repo.svg);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: auto 50%;
&-commons {
/* @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 {
// for repos other than Wikimedia Commons we manipulate :before dynamically from JS; this is a fallback
.grayscale();
background-image: url(img/repo.svg);
}
}