diff --git a/i18n/en.json b/i18n/en.json index 40c8e9093..79628f4ed 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -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", diff --git a/i18n/qqq.json b/i18n/qqq.json index 108d18fe9..3d3310e5a 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -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]]\".", diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.js b/resources/mmv/ui/mmv.ui.stripeButtons.js index 7bd51c806..4a40ea0da 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.js +++ b/resources/mmv/ui/mmv.ui.stripeButtons.js @@ -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 $( '' ) + button = $( '' ) .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 = $( '' ) + .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 ); }; /** diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.less b/resources/mmv/ui/mmv.ui.stripeButtons.less index c8a9795fa..0f7f27580 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.less +++ b/resources/mmv/ui/mmv.ui.stripeButtons.less @@ -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); + } }