Media Grid: make the Uploader closable.

Props ericlewis.
See #24716.

Built from https://develop.svn.wordpress.org/trunk@29082


git-svn-id: http://core.svn.wordpress.org/trunk@28868 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -1020,6 +1020,27 @@
 	top: 0;
 }
 
+.uploader-inline .close {
+	background-color: transparent;
+	border: 0;
+	cursor: pointer;
+	height: 48px;
+	position: absolute;
+	left: 20px;
+	text-align: center;
+	top: 20px;
+	width: 50px;
+	z-index: 1;
+}
+
+.uploader-inline .close:before {
+	font: normal 30px/50px 'dashicons' !important;
+	color: #777;
+	display: inline-block;
+	content: '\f335';
+	font-weight: 300;
+}
+
 .inline-toolbar {
 	position: absolute;
 	top: 0;

wp-includes/css/media-views.css

@@ -1020,6 +1020,27 @@
 	top: 0;
 }
 
+.uploader-inline .close {
+	background-color: transparent;
+	border: 0;
+	cursor: pointer;
+	height: 48px;
+	position: absolute;
+	right: 20px;
+	text-align: center;
+	top: 20px;
+	width: 50px;
+	z-index: 1;
+}
+
+.uploader-inline .close:before {
+	font: normal 30px/50px 'dashicons' !important;
+	color: #777;
+	display: inline-block;
+	content: '\f335';
+	font-weight: 300;
+}
+
 .inline-toolbar {
 	position: absolute;
 	top: 0;

wp-includes/js/media-views.js

@@ -3654,10 +3654,15 @@
 		className: 'uploader-inline',
 		template:  media.template('uploader-inline'),
 
+		events: {
+			'click .close': 'hide'
+		},
+
 		initialize: function() {
 			_.defaults( this.options, {
 				message: '',
-				status:  true
+				status:  true,
+				canClose: false
 			});
 
 			if ( ! this.options.$browser && this.controller.uploader ) {
@@ -3677,14 +3682,16 @@
 
 		prepare: function() {
 			var suggestedWidth = this.controller.state().get('suggestedWidth'),
-				suggestedHeight = this.controller.state().get('suggestedHeight');
+				suggestedHeight = this.controller.state().get('suggestedHeight'),
+				data = {};
+
+			data.canClose = this.options.canClose;
 
 			if ( suggestedWidth && suggestedHeight ) {
-				return {
+				data.suggestedWidth = suggestedWidth;
-					suggestedWidth: suggestedWidth,
+				data.suggestedHeight = suggestedHeight;
-					suggestedHeight: suggestedHeight
-				};
 			}
+			return data;
 		},
 		/**
 		 * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
@@ -3745,7 +3752,14 @@
 
 			this.refresh();
 			return this;
+		},
+		show: function() {
+			this.$el.removeClass( 'hidden' );
+		},
+		hide: function() {
+			this.$el.addClass( 'hidden' );
 		}
+
 	});
 
 	/**
@@ -5722,7 +5736,8 @@
 			this.uploader = new media.view.UploaderInline({
 				controller: this.controller,
 				status:     false,
-				message:    l10n.noItemsFound
+				message:    l10n.noItemsFound,
+				canClose:   this.controller.isModeActive( 'grid' )
 			});
 
 			this.uploader.$el.addClass( 'hidden' );
@@ -5730,7 +5745,7 @@
 		},
 
 		showUploader: function() {
-			this.uploader.$el.removeClass( 'hidden' );
+			this.uploader.show();
 		},
 
 		createAttachments: function() {

wp-includes/media-template.php

@@ -160,6 +160,9 @@ function wp_print_media_templates() {
 
 	<script type="text/html" id="tmpl-uploader-inline">
 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
+		<# if ( data.canClose ) { #>
+		<button class="close dashicons dashicons-no"><span class="screen-reader-text">Close overlay</span></button>
+		<# } #>
 		<div class="uploader-inline-content {{ messageClass }}">
 		<# if ( data.message ) { #>
 			<h3 class="upload-message">{{ data.message }}</h3>