Add inline uploader UI to media modal sidebar. see #21390.

git-svn-id: https://develop.svn.wordpress.org/trunk@22322 602fd350-edb4-49c9-b593-d223f7449a82

wp-includes/css/media-views.css

@@ -133,6 +133,7 @@
 
 .media-sidebar .sidebar-content {
 	padding: 0 10px;
+	margin-bottom: 130px;
 }
 
 .media-sidebar .search {
@@ -485,7 +486,7 @@
 	max-width: 300px;
 	background: transparent;
 	border-color: #fff;
-	/*display: none;*/
+	display: none;
 }
 
 .uploader-window .media-progress-bar div {
@@ -496,6 +497,37 @@
 	display: block;
 }
 
+.uploader-inline {
+	display: none;
+}
+
+.uploader-inline .media-progress-bar {
+	display: none;
+}
+
+.uploading.uploader-inline .media-progress-bar {
+	display: block;
+}
+
+.media-sidebar .uploader-inline {
+	display: block;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 100px;
+	margin: 10px;
+	padding-top: 10px;
+	text-align: center;
+	border: 1px dashed #aaa;
+}
+
+.media-sidebar .uploader-inline h3 {
+	font-weight: 200;
+	font-size: 16px;
+	margin: 10px 0;
+}
+
 /**
  * Selection Preview
  */

wp-includes/js/media-views.js

@@ -499,17 +499,20 @@
 			var uploader;
 
 			this.controller = this.options.controller;
+			this.inline = new media.view.UploaderInline({
+				controller:     this.controller,
+				uploaderWindow: this
+			}).render();
+
+			this.inline.$el.appendTo('body');
 
 			uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
-				container: this.$el,
+				container: this.inline.$el,
 				dropzone:  this.$el,
-				browser:   this.$('.upload-attachments a'),
+				browser:   this.inline.$('.browser'),
 				params:    {}
 			});
 
-			// Track uploading attachments.
-			wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
-
 			if ( uploader.dropzone ) {
 				// Ensure the dropzone is a jQuery collection.
 				if ( ! (uploader.dropzone instanceof $) )
@@ -522,12 +525,15 @@
 
 		render: function() {
 			this.maybeInitUploader();
-			this.renderUploadProgress();
 			this.$el.html( this.template( this.options ) );
-			this.$bar = this.$('.upload-attachments .media-progress-bar div');
 			return this;
 		},
 
+		refresh: function() {
+			if ( this.uploader )
+				this.uploader.refresh();
+		},
+
 		maybeInitUploader: function() {
 			var $id, dropzone;
 
@@ -565,6 +571,30 @@
 				if ( '0' === $el.css('opacity') )
 					$el.hide();
 			});
+		}
+	});
+
+	media.view.UploaderInline = Backbone.View.extend({
+		tagName:   'div',
+		className: 'uploader-inline',
+		template:  media.template('uploader-inline'),
+
+		initialize: function() {
+			this.controller = this.options.controller;
+
+			// Track uploading attachments.
+			wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
+		},
+
+		destroy: function() {
+			wp.Uploader.queue.off( 'add remove reset change:percent', this.renderUploadProgress, this );
+		},
+
+		render: function() {
+			this.renderUploadProgress();
+			this.$el.html( this.template( this.options ) );
+			this.$bar = this.$('.media-progress-bar div');
+			return this;
 		},
 
 		renderUploadProgress: function() {
@@ -910,6 +940,11 @@
 
 			this.$('.sidebar-content').html( els );
 
+			if ( this.controller.uploader ) {
+				this.$el.append( this.controller.uploader.inline.$el );
+				this.controller.uploader.refresh();
+			}
+
 			return this;
 		},
 

wp-includes/media.php

@@ -1309,6 +1309,13 @@ function wp_print_media_templates( $attachment ) {
 		</div>
 	</script>
 
+	<script type="text/html" id="tmpl-uploader-inline">
+		<h3><?php _e( 'Drop files here' ); ?></h3>
+		<!--<span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>-->
+		<a href="#" class="browser button-secondary"><?php _e( 'Select Files' ); ?></a>
+		<div class="media-progress-bar"><div></div></div>
+	</script>
+
 	<script type="text/html" id="tmpl-sidebar">
 		<h2 class="sidebar-title"><%- title %></h2>
 		<div class="sidebar-content"></div>