Merge "Add explanatory one-liners to share & embed"

MultimediaViewer.i18n.php

@@ -92,9 +92,13 @@ $messages['en'] = array(
 	'multimediaviewer-link-to-page' => 'Link to file description page',
 	'multimediaviewer-link-to-file' => 'Link to original file',
 
+	'multimediaviewer-share-explanation' => 'Copy and freely share the link',
+
 	'multimediaviewer-embed-wt' => 'Wikitext',
 	'multimediaviewer-embed-html' => 'HTML',
 
+	'multimediaviewer-embed-explanation' => 'Use this code to embed the file',
+
 	// Ridiculously complicated messages for embedding
 	'multimediaviewer-html-embed-credit-text-tbls' => '"$1" by $2. Licensed under $3 via $4.',
 	'multimediaviewer-html-embed-credit-text-tls' => '"$1". Licensed under $2 via $3.',
@@ -268,8 +272,10 @@ See also:
 	'multimediaviewer-embed-tab' => 'Tab title text for the file reuse panel - used for the section with embeddable HTML and wikitext.',
 	'multimediaviewer-link-to-page' => 'Used as alt-text to describe a URL that goes to a File: page for an image.',
 	'multimediaviewer-link-to-file' => 'Used as alt-text to describe a URL that goes to an image file.',
+	'multimediaviewer-share-explanation' => 'Used below the URL share input to explain what we expect the user to do.',
 	'multimediaviewer-embed-wt' => 'Used to represent a choice for embedding a file in a wiki page, as wikitext.',
 	'multimediaviewer-embed-html' => 'Used to represent a choice for embedding a file in an HTML document, as HTML.',
+	'multimediaviewer-embed-explanation' => 'Used below the embed textarea to explain what we expect the user to do.',
 	'multimediaviewer-html-embed-credit-text-tbls' => 'Credit text, used when generating HTML to reuse an image.
 Which one of the multimediaviewer-html-embed-credit-text-* messages is used will depend on what information about the image is available.
 * $1 - name of the work (typically the filename without an extension)

MultimediaViewer.php

@@ -454,6 +454,7 @@ call_user_func( function() {
 
 		'styles' => array(
 			'mmv.ui.reuse.share.less',
+			'mmv.ui.reuse.shareembed.less',
 		),
 
 		'dependencies' => array(
@@ -465,6 +466,7 @@ call_user_func( function() {
 		'messages' => array(
 			'multimediaviewer-reuse-loading-placeholder',
 			'multimediaviewer-share-tab',
+			'multimediaviewer-share-explanation',
 
 			'multimediaviewer-link-to-file',
 			'multimediaviewer-link-to-page',
@@ -478,6 +480,7 @@ call_user_func( function() {
 
 		'styles' => array(
 			'mmv.ui.reuse.embed.less',
+			'mmv.ui.reuse.shareembed.less',
 		),
 
 		'dependencies' => array(
@@ -493,6 +496,7 @@ call_user_func( function() {
 			'multimediaviewer-embed-tab',
 			'multimediaviewer-embed-html',
 			'multimediaviewer-embed-wt',
+			'multimediaviewer-embed-explanation',
 
 			'multimediaviewer-embed-byline',
 			'multimediaviewer-embed-license',

resources/mmv/ui/mmv.ui.reuse.embed.js

@@ -42,6 +42,12 @@
 		this.$pane.appendTo( this.$container );
 
 		this.createSnippetTextAreas( this.$pane );
+
+		this.$explanation = $( '<div>' )
+			.addClass( 'mw-mlb-shareembed-explanation mw-mlb-embed-explanation' )
+			.text( mw.message( 'multimediaviewer-embed-explanation' ).text() )
+			.appendTo( this.$pane );
+
 		this.createSnippetSelectionButtons( this.$pane );
 		this.createSizePulldownMenus( this.$pane );
 

resources/mmv/ui/mmv.ui.reuse.embed.less

@@ -14,6 +14,11 @@
 
 .mw-mlb-reuse-dialog .mw-mlb-embed-pane {
 	padding: 5px 27px;
+
+	.mw-mlb-embed-explanation {
+		padding-bottom: 10px;
+		top: 0
+	}
 }
 
 .mw-mlb-embed-switch {

resources/mmv/ui/mmv.ui.reuse.share.js

@@ -54,6 +54,11 @@
 
 		this.pageInput.$element.appendTo( this.$pane );
 
+		this.$explanation = $( '<div>' )
+			.addClass( 'mw-mlb-shareembed-explanation' )
+			.text( mw.message( 'multimediaviewer-share-explanation' ).text() )
+			.appendTo( this.$pane );
+
 		this.$pane.appendTo( this.$container );
 	};
 

resources/mmv/ui/mmv.ui.reuse.shareembed.less

@@ -0,0 +1,8 @@
+@explanation-color: #aaaaaa;
+
+.mw-mlb-shareembed-explanation {
+	color: @explanation-color;
+	font-size: 0.9em;
+	position: relative;
+	top: 8px;
+}