diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css index a5464b3992..d71e9b9104 100644 --- a/wp-includes/css/media-views.css +++ b/wp-includes/css/media-views.css @@ -721,7 +721,8 @@ a.media-modal-close { margin-top: 10px; } -.attachments-browser .attachments { +.attachments-browser .attachments, +.attachments-browser .uploader-inline { position: absolute; top: 50px; left: 0; @@ -926,7 +927,7 @@ a.media-modal-close { display: block; } -.region-content.uploader-inline { +.media-frame .uploader-inline { margin: 20px; padding: 20px; text-align: center; @@ -1368,6 +1369,7 @@ a.media-modal-close { } .attachments-browser .attachments, + .attachments-browser .uploader-inline, .attachments-browser .media-toolbar { right: 180px; } diff --git a/wp-includes/images/uploader-icons-2x.png b/wp-includes/images/uploader-icons-2x.png new file mode 100644 index 0000000000..69345ae189 Binary files /dev/null and b/wp-includes/images/uploader-icons-2x.png differ diff --git a/wp-includes/images/uploader-icons.png b/wp-includes/images/uploader-icons.png new file mode 100644 index 0000000000..e6892ba6d4 Binary files /dev/null and b/wp-includes/images/uploader-icons.png differ diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index e694c476c7..99607cc2cf 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -262,6 +262,7 @@ describe: false, toolbar: 'main-attachments', sidebar: 'settings', + content: 'browse', searchable: true, filterable: false, uploads: true @@ -304,19 +305,11 @@ selection.on( 'add remove reset', this.refreshSelection, this ); - this._updateEmpty(); - library.on( 'add remove reset', this._updateEmpty, this ); - this.on( 'change:empty', this.refresh, this ); this.refresh(); - - this.on( 'insert', this._insertDisplaySettings, this ); }, deactivate: function() { - this.off( 'change:empty', this.refresh, this ); - this.get('library').off( 'add remove reset', this._updateEmpty, this ); - // Unbind all event handlers that use this state as the context // from the selection. this.get('selection').off( null, null, this ); @@ -334,23 +327,7 @@ this.resetDisplays(); }, - content: function() { - var frame = this.frame; - - if ( this.get('empty') ) { - // Attempt to fetch any Attachments we don't already have. - this.get('library').more(); - - // In the meantime, render an inline uploader. - frame.content.mode('upload'); - } else { - // Browse our library of attachments. - frame.content.mode('browse'); - } - }, - refresh: function() { - this.frame.$el.toggleClass( 'hide-toolbar', this.get('empty') ); this.content(); this.refreshSelection(); }, @@ -389,17 +366,6 @@ setUserSetting( 'urlbutton', display.link ); }, - _updateEmpty: function() { - var library = this.get('library'), - props = library.props; - - // If we're filtering the library, bail. - if ( this.get('filterable') && ( props.get('type') || props.get('parent') ) ) - return; - - this.set( 'empty', ! library.length && ! library.props.get('search') ); - }, - refreshSelection: function() { var selection = this.get('selection'), mode = this.frame.content.mode(); @@ -1302,6 +1268,8 @@ browseContent: function() { var state = this.state(); + this.$el.removeClass('hide-toolbar'); + // Browse our library of attachments. this.content.view( new media.view.AttachmentsBrowser({ controller: this, @@ -3010,8 +2978,10 @@ }); this.createToolbar(); - this.createAttachments(); + this.updateContent(); this.createSidebar(); + + this.collection.on( 'add remove reset', this.updateContent, this ); }, dispose: function() { @@ -3059,7 +3029,39 @@ } }, + updateContent: function() { + var view = this; + + if( ! this.attachments ) + this.createAttachments(); + + if ( ! this.collection.length ) { + this.collection.more().done( function() { + if ( ! view.collection.length ) + view.createUploader(); + }); + } + }, + + createUploader: function() { + if ( this.attachments ) { + this.attachments.remove(); + delete this.attachments; + } + + this.uploader = new media.view.UploaderInline({ + controller: this.controller + }); + + this.views.add( this.uploader ); + }, + createAttachments: function() { + if ( this.uploader ) { + this.uploader.remove(); + delete this.uploader; + } + this.attachments = new media.view.Attachments({ controller: this.controller, collection: this.collection,