diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index 1f3e92cc57..a9a73b9577 100644 --- a/wp-includes/css/media-views.css +++ b/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 */ diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 4efd28c715..b2de10fb11 100644 --- a/wp-includes/js/media-views.js +++ b/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; }, diff --git a/wp-includes/media.php b/wp-includes/media.php index ba7544e27f..8ff6ce3b66 100644 --- a/wp-includes/media.php +++ b/wp-includes/media.php @@ -1309,6 +1309,13 @@ function wp_print_media_templates( $attachment ) { + +