Feedback button

MVP implementation, just a link that opens the survey in a new tab

Change-Id: I9f2fb85cc47ce2be4cf57679bf37f0bda13084b7

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(

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"
 }

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}}."
 }

resources/mmv/ui/img/horn_grey.svg

@@ -0,0 +1,12 @@
+<?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 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
+<g>
+	<path fill="#777777" d="M16.3,443.2L118,472.3v79.9c0,28,22.8,50.8,50.8,50.8H336c28,0,50.8-22.8,50.8-50.8v-7.3l159.8,34.5V189
+		L16.3,327C-5.5,348.8-5.5,421.4,16.3,443.2z M161.6,486.8l181.6,43.6v21.8c0,4-3.3,7.3-7.3,7.3h-167c-4,0-7.3-3.3-7.3-7.3
+		L161.6,486.8L161.6,486.8z"/>
+	<path fill="#777777" d="M582.9,450.5h-14.5v-138h14.5c13.2,0,29.1,15.8,29.1,29.1v80.1C612,437.6,598.9,450.5,582.9,450.5z"/>
+</g>
+</svg>

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 ) {
+	SBP.createButton = function ( cssClass, text, popupText ) {
-		return $( '<span>' )
+		return $( '<a>' )
 			.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.

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;
@@ -50,3 +55,8 @@
 	/* @embed */
 	background-image: url(img/use-ltr.svg);
 }
+
+.mw-mmv-stripe-button-feedback:before {
+	/* @embed */
+	background-image: url(img/horn_grey.svg);
+}

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 ) {