jenkins-bot has submitted this change and it was merged. Change subject: Add metadata button to go to file description page directly ......................................................................
Add metadata button to go to file description page directly Change-Id: I0f2c2b24aece3b806d572a0ed41dce8031e6ae6b Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/226 --- M MultimediaViewer.php M i18n/en.json M i18n/qqq.json M resources/mmv/mmv.mixins.less A resources/mmv/ui/img/commons_gray.svg A resources/mmv/ui/img/grayscale.svg M resources/mmv/ui/mmv.ui.js M resources/mmv/ui/mmv.ui.metadataPanel.js M resources/mmv/ui/mmv.ui.stripeButtons.js M resources/mmv/ui/mmv.ui.stripeButtons.less M tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js M tests/qunit/mmv/ui/mmv.ui.test.js 12 files changed, 171 insertions(+), 19 deletions(-) Approvals: Gilles: Looks good to me, approved jenkins-bot: Verified diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 7025634..8757acd 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -317,6 +317,9 @@ 'messages' => array( 'multimediaviewer-feedback-button-text', 'multimediaviewer-feedback-popup-text', + 'multimediaviewer-description-page-button-text', + 'multimediaviewer-description-page-popup-text', + 'multimediaviewer-description-page-popup-text-local', ), ), $moduleInfo( 'mmv/ui' ) ); diff --git a/i18n/en.json b/i18n/en.json index 1acc91d..e02ab21 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -89,5 +89,8 @@ "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" -} \ No newline at end of file + "multimediaviewer-feedback-popup-text": "Leave feedback about this new media viewing experience", + "multimediaviewer-description-page-button-text": "More details", + "multimediaviewer-description-page-popup-text": "More details on $1", + "multimediaviewer-description-page-popup-text-local": "More details" +} diff --git a/i18n/qqq.json b/i18n/qqq.json index e7078e9..3134b74 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -92,5 +92,8 @@ "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 - image dimensions\n* $2 - file format extension, lowercased\n\nSee also:\n* {{msg-mw|Multimediaviewer-embed-dimensions}}", "multimediaviewer-feedback-button-text": "Text of the button on top of the metadata panel which brings up a feedback survey. See also {{mw-msg|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. See also {{mw-msg|multimediaviewer-feedback-button-text}}." + "multimediaviewer-feedback-popup-text": "Additional popup text of the button on top of the metadata panel which brings up a feedback survey. See also {{mw-msg|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. See also {{mw-msg|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. See also {{mw-msg|multimediaviewer-description-page-button-text}}. $1 is the name of the site where the file comes from (e.g. \"Wikimedia Commons\").", + "multimediaviewer-description-page-popup-text-local": "Same as {{mw-msg|multimediaviewer-description-page-popup-text-local}}, but for local files." } diff --git a/resources/mmv/mmv.mixins.less b/resources/mmv/mmv.mixins.less index f7e9a8a..3b1b995 100644 --- a/resources/mmv/mmv.mixins.less +++ b/resources/mmv/mmv.mixins.less @@ -38,4 +38,14 @@ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=(@degrees / 90.0)); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=(@degrees / 90.0))"; +} + +// from http://pixelhunter.me/post/25782670606/css3-grayscale +.grayscale() { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(100%); + -o-filter: grayscale(100%); + filter: grayscale(100%); + filter: gray; // IE 6-9 } \ No newline at end of file diff --git a/resources/mmv/ui/img/commons_gray.svg b/resources/mmv/ui/img/commons_gray.svg new file mode 100644 index 0000000..958c687 --- /dev/null +++ b/resources/mmv/ui/img/commons_gray.svg @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" + viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve"> +<g id="g4939_2_" transform="matrix(1.052195,0,0,1.052195,-7.7556,-16.09329)"> + <path id="path4653_2_" fill="#777777" d="M44.6,85.1c-6.6-0.2-12.7-3.2-17-8.2c-3.6-4.2-5.5-9.5-5.5-15.1c0-5.6,1.9-10.9,5.6-15.2 + c0.5-0.6,1.7-1.8,1.8-1.8c0,0,1.4,1.4,3.1,3.1l3.1,3.1l0.9-0.8c0.5-0.5,0.9-0.8,0.9-0.8c0,0,0.6,1.9,1.8,6.4c0,0,0,0.1-0.1,0.1 + c0,0-5.9-1.6-6.3-1.7c0,0-0.1,0-0.1,0c0,0,0.4-0.4,0.8-0.9c0.5-0.5,0.8-0.9,0.8-0.9c0-0.1-1.5-1.6-1.5-1.6c0,0-0.4,0.5-0.8,0.9 + c-1.9,2.4-3.1,5.4-3.4,8.4c-0.1,0.8-0.1,0.9,0,1c0.1,0,2.1,0,2.2,0c0,0,0-0.3,0-1.2c0-1.2,0-1.2,0.1-1.2c0.1,0,5.7,3.3,5.7,3.3 + c0,0,0,0.1-0.1,0.1C36.5,62,31,65.1,31,65.1c0,0,0-0.5,0-1.2l0-1.2h-1.1h-1.1l0,0.3c0,0.6,0.2,1.7,0.4,2.5c0.5,2.4,1.6,4.6,3.1,6.5 + c0.3,0.3,0.8,1,0.8,1c0,0,1.6-1.5,1.6-1.6c0,0-0.4-0.4-0.8-0.9c-0.5-0.5-0.8-0.9-0.8-0.9c0-0.1,6.4-1.8,6.4-1.7 + c0,0-1.7,6.4-1.7,6.4c0,0-0.3-0.3-0.9-0.8c-0.5-0.5-0.9-0.9-0.9-0.9c-0.1,0-1.6,1.5-1.5,1.6c0,0.1,0.6,0.6,1.1,0.9 + c1.9,1.4,4.1,2.5,6.5,3c0.8,0.2,1.9,0.3,2.5,0.4l0.3,0v-1.1v-1.1l-1.2,0c-0.8,0-1.2,0-1.2,0c0-0.1,3.3-5.8,3.3-5.8 + c0,0,3.3,5.7,3.3,5.8c0,0-0.4,0-1.2,0l-1.2,0v1.1v1.1l0.3,0c0.6,0,1.7-0.2,2.5-0.4c2.4-0.5,4.6-1.6,6.5-3c0.4-0.3,1-0.8,1.1-0.9 + s-1.5-1.6-1.5-1.6c0,0-0.4,0.4-0.9,0.9c-0.5,0.5-0.9,0.8-0.9,0.8c0-0.1-1.7-6.4-1.7-6.4c0,0,6.4,1.7,6.4,1.7c0,0-0.3,0.3-0.8,0.9 + c-0.5,0.5-0.8,0.9-0.8,0.9c0,0.1,1.5,1.6,1.6,1.6c0.1,0,0.6-0.6,0.8-1c1.5-1.9,2.5-4.2,3.1-6.5c0.2-0.8,0.3-1.9,0.3-2.5l0-0.3H61 + h-1.1l0,1.2c0,0.7,0,1.2,0,1.2c0,0-5.5-3.1-5.7-3.3c0,0-0.1-0.1-0.1-0.1c0,0,5.6-3.3,5.7-3.3c0.1,0,0.1,0,0.1,1.2 + c0,0.9,0,1.2,0,1.2c0,0,2.1,0.1,2.2,0c0,0,0-0.1,0-1c-0.3-3-1.5-6-3.4-8.4c-0.4-0.5-0.8-0.9-0.8-0.9c0,0-1.5,1.5-1.5,1.5 + c0,0,0.4,0.4,0.8,0.9c0.5,0.5,0.8,0.9,0.8,0.9c0,0,0,0-0.1,0.1c-0.4,0.1-6.3,1.7-6.3,1.7c0,0-0.1,0,0-0.1c1.2-4.4,1.7-6.3,1.8-6.4 + c0,0,0.4,0.3,0.9,0.8l0.9,0.8l0.8-0.8c0.4-0.4,0.8-0.8,0.8-0.8c0,0-0.5-0.4-0.9-0.7c-0.9-0.6-1.5-0.8-4.4-2c-2-0.8-3-1.3-4.2-2.1 + c-2.6-1.8-4.3-4.1-5.4-7.4c-0.1-0.4-0.5-1.6-0.5-1.6c0-0.1-0.2,0-1.6,0.5C38,36.7,37.3,37,37.1,37c-0.3,0-0.4-0.1-0.2-0.3 + c0.1-0.2,0.2-0.3,0.5-0.7c0.7-0.9,1.3-1.7,2-3.1c1.2-2.2,2.4-5.2,3.4-8.6c0.3-1,0.7-2.3,0.8-2.6c0-0.1,0-0.2,0.1-0.2 + c0,0,2.9,4.9,4.3,7.2c2.7,4.8,3.9,7.3,3.6,7.5c-0.1,0.1-0.2,0-0.7-0.5c-0.7-0.7-1.1-0.9-1.8-1.2c-0.3-0.1-0.8-0.2-1.1-0.2 + c-0.3,0-0.3,0-0.2,0.4c0.4,1.6,1.1,2.8,2,3.6c0.9,0.9,2,1.5,4.8,2.6c2.2,0.9,3.6,1.6,4.8,2.4c1,0.7,1.8,1.3,2.6,2.2 + c5,5.1,7.3,12,6.5,19.1c-0.7,6.2-4,11.8-8.9,15.6c-2.8,2.1-5.9,3.6-9.3,4.3C48.5,84.9,46.4,85.1,44.6,85.1z"/> + <path id="path4697_2_" fill="#777777" d="M44.9,69.6c-1.2-0.1-2-0.3-2.9-0.8c-0.9-0.4-1.5-0.9-2.2-1.6c-1.1-1.2-1.9-2.6-2.1-4.3 + c-0.1-0.6-0.1-1.7,0-2.2c0.1-0.8,0.3-1.5,0.6-2.1c1.1-2.4,3.3-4.1,6-4.5c0.3,0,0.5-0.1,1.1-0.1c0.6,0,0.9,0,1.1,0.1 + c2.7,0.4,4.9,2.1,6,4.5c0.3,0.7,0.5,1.3,0.6,2.1c0.1,0.5,0.1,1.7,0,2.2c-0.1,0.8-0.3,1.5-0.7,2.2C52,66,51.6,66.6,51,67.2 + c-0.7,0.7-1.3,1.2-2.2,1.6c-1.1,0.5-2.1,0.8-3.3,0.8C45.3,69.6,45,69.6,44.9,69.6z"/> +</g> +</svg> diff --git a/resources/mmv/ui/img/grayscale.svg b/resources/mmv/ui/img/grayscale.svg new file mode 100644 index 0000000..80a4cfe --- /dev/null +++ b/resources/mmv/ui/img/grayscale.svg @@ -0,0 +1,8 @@ +<svg version="1.1" 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> diff --git a/resources/mmv/ui/mmv.ui.js b/resources/mmv/ui/mmv.ui.js index 2b92d6d..82f348f 100644 --- a/resources/mmv/ui/mmv.ui.js +++ b/resources/mmv/ui/mmv.ui.js @@ -31,6 +31,12 @@ /** @property {Object.<string, string[]>} eventsRegistered Events that this element has registered with the DOM. */ this.eventsRegistered = {}; + + /** + * @property {Object.<string, jQuery>} $inlineStyles a list of `<style>` elements in the head + * which we use to manipulate pseudo-classes and pseudo-elements. + */ + this.$inlineStyles = []; } EP = Element.prototype; @@ -93,6 +99,28 @@ } }; + /** + * Manipulate CSS directly. This is needed to set styles for pseudo-classes and pseudo-elements. + * @param {string} key some name to identify the style + * @param {string|null} style a CSS snippet (set to null to delete the given style) + */ + EP.setRepoInlineStyle = function ( key, style ) { + + if ( !this.$inlineStyles ) { + this.$inlineStyles = []; + } + + if ( !this.$inlineStyles[key] ) { + if ( !style ) { + return; + } + + this.$inlineStyles[key] = $( '<style type="text/css" />' ).appendTo( 'head' ); + } + + this.$inlineStyles[key].html( style || '' ); + }; + mw.mmv.ui = {}; mw.mmv.ui.reuse = {}; mw.mmv.ui.Element = Element; diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index 3cbefe2..e92b151 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -420,17 +420,13 @@ // This horror exists because the CSS uses a :before pseudo-class to // define the repo icon. This is the only way to override it. if ( favIcon ) { - if ( !this.$repoLiInlineStyle ) { - this.$repoLiInlineStyle = $( '<style type="text/css" />' ).appendTo( 'head' ); - } - - this.$repoLiInlineStyle.html( '.mw-mmv-image-links li.mw-mmv-repo-li:before ' - + '{ background-image: url("' - + favIcon - + '"); }' + this.setRepoInlineStyle( 'repoDisplay', + '.mw-mmv-image-links li.mw-mmv-repo-li:before {' + + 'background-image: url("' + favIcon + '");' + + '}' ); - } else if ( this.$repoLiInlineStyle ) { - this.$repoLiInlineStyle.html( '' ); + } else { + this.setRepoInlineStyle( 'repoDisplay', null ); } this.$repoLi.removeClass( 'empty' ); @@ -667,7 +663,7 @@ this.consolidateCredit( !!imageData.source, !!imageData.author ); - this.buttons.set(); + this.buttons.set( imageData, repoData ); this.description.set( imageData.description, image.caption ); this.categories.set( repoData.getArticlePath(), imageData.categories ); diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.js b/resources/mmv/ui/mmv.ui.stripeButtons.js index 072c8ec..f29c882 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.js +++ b/resources/mmv/ui/mmv.ui.stripeButtons.js @@ -41,6 +41,7 @@ this.initFeedbackButton(); this.initReuseButton(); + this.initDescriptionPageButton(); } oo.inheritClass( StripeButtons, mw.mmv.ui.Element ); SBP = StripeButtons.prototype; @@ -69,6 +70,13 @@ this.buttons.$reuse = this.createButton( 'mw-mmv-stripe-button-reuse', mw.message( 'multimediaviewer-reuse-link' ).text() + ); + }; + + SBP.initDescriptionPageButton = function() { + this.buttons.$descriptionPage = this.createButton( + 'mw-mmv-stripe-button-commons', + mw.message( 'multimediaviewer-description-page-button-text' ).plain() ); }; @@ -151,11 +159,35 @@ /** * @inheritdoc + * @param {mw.mmv.model.Image} imageInfo + * @param {mw.mmv.model.Repo} repoInfo */ - SBP.set = function () { + SBP.set = function ( imageInfo, repoInfo ) { + var descPagePopupMessage; + this.eachButton( function ( $button ) { $button.removeClass( 'empty' ); } ); + + descPagePopupMessage = repoInfo.isLocal + ? 'multimediaviewer-description-page-popup-text-local' + : 'multimediaviewer-description-page-popup-text'; + + this.buttons.$descriptionPage.prop( { + href: imageInfo.descriptionUrl, + title: mw.message( descPagePopupMessage, repoInfo.displayName ).plain() + } ); + + if ( imageInfo.repo === 'wikimediacommons' ) { + this.buttons.$descriptionPage.addClass( 'mw-mmv-stripe-button-commons' ); + } else { + this.buttons.$descriptionPage.addClass( 'mw-mmv-stripe-button-dynamic' ); + this.setRepoInlineStyle( 'stripe-button-description-page', + '.mw-mmv-stripe-button-dynamic:before {' + + 'background-image: url("' + repoInfo.favIcon + '");' + + '}' + ); + } }; /** @@ -163,8 +195,14 @@ */ SBP.empty = function () { this.eachButton( function ( $button ) { - $button.addClass( 'empty' ).removeClass( 'open' ); + $button.addClass( 'empty' ); } ); + + this.buttons.$reuse.removeClass( 'open' ); + this.buttons.$descriptionPage.prop( 'href', undefined ) + .removeClass( 'mw-mmv-stripe-button-dynamic mw-mmv-stripe-button-commons' ); + $( '.mw-mmv-stripe-button-dynamic-before' ).remove(); + this.setRepoInlineStyle( 'stripe-button-description-page', null ); }; /** diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.less b/resources/mmv/ui/mmv.ui.stripeButtons.less index 8928bf8..326af11 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.less +++ b/resources/mmv/ui/mmv.ui.stripeButtons.less @@ -61,3 +61,16 @@ background-image: url(img/horn_grey.svg); background-size: 100%; } + +.mw-mmv-stripe-button-commons:before { + /* @embed */ + background-image: url(img/commons_gray.svg); +} + +// 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; +} diff --git a/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js b/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js index 442638f..354bc18 100644 --- a/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js @@ -18,18 +18,21 @@ ( function( mw, $ ) { QUnit.module( 'mmv.ui.StripeButtons', QUnit.newMwEnvironment() ); - QUnit.test( 'Sanity test, object creation and UI construction', 3, function ( assert ) { + QUnit.test( 'Sanity test, object creation and UI construction', 4, function ( assert ) { var buttons = new mw.mmv.ui.StripeButtons( $( '#qunit-fixture' ) ); assert.ok( buttons, 'UI element is created.' ); assert.strictEqual( buttons.buttons.$reuse.length, 1, 'Reuse button created.' ); assert.strictEqual( buttons.buttons.$feedback.length, 1, 'Feedback button created.' ); + assert.strictEqual( buttons.buttons.$descriptionPage.length, 1, 'Feedback button created.' ); } ); QUnit.test( 'set()/empty() sanity test:', 1, function ( assert ) { - var buttons = new mw.mmv.ui.StripeButtons( $( '#qunit-fixture' ) ); + var buttons = new mw.mmv.ui.StripeButtons( $( '#qunit-fixture' ) ), + fakeImageInfo = { descriptionUrl: '//commons.wikimedia.org/wiki/File:Foo.jpg' }, + fakeRepoInfo = { displayName: 'Wikimedia Commons' }; - buttons.set(); + buttons.set( fakeImageInfo, fakeRepoInfo ); buttons.empty(); assert.ok( true, 'No error on set()/empty().' ); diff --git a/tests/qunit/mmv/ui/mmv.ui.test.js b/tests/qunit/mmv/ui/mmv.ui.test.js index b9a3af8..a195881 100755 --- a/tests/qunit/mmv/ui/mmv.ui.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.test.js @@ -14,4 +14,19 @@ $( document ).trigger( new $.Event( 'mmv-foo' ) ); } ); + + QUnit.test( 'setRepoInlineStyle()', 3, function ( assert ) { + var element = new mw.mmv.ui.Element( $( '<div>' ) ), + $testDiv = $( '<div id="mmv-testdiv">!!!</div>' ).appendTo( '#qunit-fixture' ); + + assert.ok( $testDiv.is( ':visible' ), 'Test div is visible' ); + + element.setRepoInlineStyle( 'test', '#mmv-testdiv { display: none; }' ); + + assert.ok( !$testDiv.is( ':visible' ), 'Test div is hidden by inline style' ); + + element.setRepoInlineStyle( 'test', null ); + + assert.ok( $testDiv.is( ':visible' ), 'Test div is visible again' ); + } ); }( mediaWiki, jQuery ) ); -- To view, visit https://gerrit.wikimedia.org/r/123141 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I0f2c2b24aece3b806d572a0ed41dce8031e6ae6b Gerrit-PatchSet: 8 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <gti...@wikimedia.org> Gerrit-Reviewer: Aarcos <aarcos.w...@gmail.com> Gerrit-Reviewer: Gergő Tisza <gti...@wikimedia.org> Gerrit-Reviewer: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: Siebrand <siebr...@kitano.nl> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
