From 871b49dff20510304d8eaacd6b31593ca08f57c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20Tisza?= Date: Tue, 1 Apr 2014 19:02:33 +0000 Subject: [PATCH] Feedback button MVP implementation, just a link that opens the survey in a new tab Change-Id: I9f2fb85cc47ce2be4cf57679bf37f0bda13084b7 --- MultimediaViewer.php | 5 +++++ i18n/en.json | 4 +++- i18n/qqq.json | 4 +++- resources/mmv/ui/img/horn_grey.svg | 12 ++++++++++ resources/mmv/ui/mmv.ui.stripeButtons.js | 22 +++++++++++++++++-- resources/mmv/ui/mmv.ui.stripeButtons.less | 12 +++++++++- .../qunit/mmv/ui/mmv.ui.stripeButtons.test.js | 3 ++- 7 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 resources/mmv/ui/img/horn_grey.svg diff --git a/MultimediaViewer.php b/MultimediaViewer.php index cafc4b228..2fb06be83 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -313,6 +313,11 @@ call_user_func( function() { 'mmv.ui', 'oojs', ), + + 'messages' => array( + 'multimediaviewer-feedback-button-text', + 'multimediaviewer-feedback-popup-text', + ), ), $moduleInfo( 'mmv/ui' ) ); $wgResourceModules['mmv.ui.description'] = array_merge( array( diff --git a/i18n/en.json b/i18n/en.json index fcf980f4c..1acc91d27 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -87,5 +87,7 @@ "multimediaviewer-small-embed-dimensions": "Small $1", "multimediaviewer-embed-dimensions": "$1 × $2 px", "multimediaviewer-embed-dimensions-separated": "- $1", - "multimediaviewer-embed-dimensions-with-file-format": "$1 $2" + "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 diff --git a/i18n/qqq.json b/i18n/qqq.json index 9c7c9fe52..e7078e94a 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -90,5 +90,7 @@ "multimediaviewer-small-embed-dimensions": "Text of size selector option which will generate wikitext for a thumbnail with large size.\n* $1 - thumbnail dimensions, defined by the following message:\n** {{msg-mw|Multimediaviewer-embed-dimensions}}\n\n{{Identical|Small}}", "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 - image dimensions\n* $2 - file format extension, lowercased\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}}." } diff --git a/resources/mmv/ui/img/horn_grey.svg b/resources/mmv/ui/img/horn_grey.svg new file mode 100644 index 000000000..7fd30622f --- /dev/null +++ b/resources/mmv/ui/img/horn_grey.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.js b/resources/mmv/ui/mmv.ui.stripeButtons.js index e36080e60..c38505644 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.js +++ b/resources/mmv/ui/mmv.ui.stripeButtons.js @@ -39,6 +39,7 @@ */ this.buttons = {}; + this.initFeedbackButton(); this.initReuseButton(); } oo.inheritClass( StripeButtons, mw.mmv.ui.Element ); @@ -49,11 +50,13 @@ * Creates a new button on the metadata stripe. * @param {string} cssClass CSS class name for the button * @param {string} text HTML code for the button text + * @param {string} popupText HTML code for the popup text */ - SBP.createButton = function ( cssClass, text ) { - return $( '' ) + SBP.createButton = function ( cssClass, text, popupText ) { + return $( '' ) .addClass( 'mw-mmv-stripe-button empty ' + cssClass ) .text( text ) + .prop( 'title', popupText ) // elements are right-floated so we use prepend instead of append to keep the order .prependTo( this.$buttonContainer ); }; @@ -69,6 +72,21 @@ ); }; + /** + * @protected + * Creates the feedback button. + */ + SBP.initFeedbackButton = function() { + this.buttons.$feedback = this.createButton( + 'mw-mmv-stripe-button-feedback', + mw.message( 'multimediaviewer-feedback-button-text' ).plain(), + mw.message( 'multimediaviewer-feedback-popup-text' ).plain() + ).prop( { + target: '_blank', + href: 'https://www.surveymonkey.com/s/media-viewer-1?c=mediaviewer' + } ); + }; + /** * @protected * Runs code for each button, similarly to $.each. diff --git a/resources/mmv/ui/mmv.ui.stripeButtons.less b/resources/mmv/ui/mmv.ui.stripeButtons.less index 16e561da2..b63e0af12 100644 --- a/resources/mmv/ui/mmv.ui.stripeButtons.less +++ b/resources/mmv/ui/mmv.ui.stripeButtons.less @@ -25,6 +25,11 @@ opacity: 0.8; transition: opacity 0.25s; + // when the button is a link, we need more selector specificity + a&, a&:visited, a&:hover { + color: @button-text-color; + } + &.open, &:hover { opacity: 1; @@ -49,4 +54,9 @@ .mw-mmv-stripe-button-reuse:before { /* @embed */ background-image: url(img/use-ltr.svg); -} \ No newline at end of file +} + +.mw-mmv-stripe-button-feedback:before { + /* @embed */ + background-image: url(img/horn_grey.svg); +} diff --git a/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js b/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js index 5fbc0e766..442638f85 100644 --- a/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.stripeButtons.test.js @@ -18,11 +18,12 @@ ( function( mw, $ ) { QUnit.module( 'mmv.ui.StripeButtons', QUnit.newMwEnvironment() ); - QUnit.test( 'Sanity test, object creation and UI construction', 2, function ( assert ) { + QUnit.test( 'Sanity test, object creation and UI construction', 3, 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.' ); } ); QUnit.test( 'set()/empty() sanity test:', 1, function ( assert ) {