Ticket #24716: 24716.34.diff

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

@@ -996 +996 @@
         bottom: 0;
         overflow: auto;
         outline: none;
+        -webkit-transition: 1s ease-in-out;
+    -moz-transition: 1s ease-in-out;
+    -o-transition: 1s ease-in-out;
+    transition: 1s ease-in-out;
+}
+
+.attachments-browser .uploader-inline:not(.hidden) + .attachments {
+        -webkit-transform: translateY( 300px );
+        -ms-transform: translateY( 300px );
+        transform: translateY( 300px );
+}
+
+.attachments-browser .uploader-inline.hidden {
+        display: block;
+        -webkit-transform: translateY( -100% );
+        -ms-transform: translateY( -100% );
+        transform: translateY( -100% );
+}
+
+.attachments-browser .uploader-inline-content {
+        top: 0;
 }
 
 .inline-toolbar {

src/wp-includes/js/media-grid.js

@@ -131 +131 @@
                                 mode:      [ 'grid', 'edit' ]
                         });
 
+                        $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
                         // Ensure core and media grid view UI is enabled.
                         this.$el.addClass('wp-core-ui media-grid-view');
 
@@ -192 +193 @@
                                 return;
                         }
 
+                        var libraryState = new media.controller.Library({
+                                library:    media.query( options.library ),
+                                multiple:   options.multiple,
+                                title:      options.title,
+                                priority:   20,
+                                toolbar:    false,
+                                router:     false,
+                                content:    'browse',
+                                filterable: 'mime-types'
+                        });
+
+                        libraryState._renderTitle = function( view ) {
+                                var text = this.get('title') || '';
+                                view.$el.addClass( 'wrap' );
+                                text += '<a class="add-new-h2">Add New</a>';
+                                view.$el.html( text );
+                        };
                         // Add the default states.
                         this.states.add([
-                                new media.controller.Library({
-                                        library:    media.query( options.library ),
-                                        multiple:   options.multiple,
-                                        title:      options.title,
-                                        priority:   20,
-                                        toolbar:    false,
-                                        router:     false,
-                                        content:    'browse',
-                                        filterable: 'mime-types'
-                                })
+                                libraryState
                         ]);
                 },
 
@@ -217 +226 @@
                         this.on( 'edit:attachment:previous', this.editPreviousAttachment, this );
                 },
 
+                addNewClickHandler: function() {
+                        this.trigger( 'show:upload:attachment' );
+                },
+
                 editPreviousAttachment: function( currentModel ) {
                         var library = this.state().get('library'),
                                 currentModelIndex = library.indexOf( currentModel );

src/wp-includes/js/media-views.js

@@ -5531 +5531 @@
                                 AttachmentView: media.view.Attachment.Library
                         });
 
+                        this.listenTo( this.controller, 'show:upload:attachment', _.bind( this.showUploader, this ) );
                         this.createToolbar();
+                        this.createUploader();
+                        this.createAttachments();
                         this.updateContent();
                         if ( this.options.sidebar ) {
                                 this.createSidebar();
@@ -5635 +5638 @@
 
                 updateContent: function() {
                         var view = this;
-
-                        if( ! this.attachments ) {
-                                this.createAttachments();
-                        }
-
                         if ( ! this.collection.length ) {
                                 this.toolbar.get( 'spinner' ).show();
                                 this.collection.more().done(function() {
                                         if ( ! view.collection.length ) {
-                                                view.createUploader();
+                                                view.attachmentsNoResults.$el.removeClass( 'hidden' );
+                                        } else {
+                                                view.attachmentsNoResults.$el.addClass( 'hidden' );
                                         }
                                         view.toolbar.get( 'spinner' ).hide();
                                 });
                         } else {
+                                this.attachmentsNoResults.$el.addClass( 'hidden' );
                                 view.toolbar.get( 'spinner' ).hide();
                         }
                 },
 
-                removeContent: function() {
-                        _.each(['attachments','uploader'], function( key ) {
-                                if ( this[ key ] ) {
-                                        this[ key ].remove();
-                                        delete this[ key ];
-                                }
-                        }, this );
-                },
-
                 createUploader: function() {
-                        this.removeContent();
-
                         this.uploader = new media.view.UploaderInline({
                                 controller: this.controller,
                                 status:     false,
                                 message:    l10n.noItemsFound
                         });
 
+                        this.uploader.$el.addClass( 'hidden' );
                         this.views.add( this.uploader );
                 },
 
-                createAttachments: function() {
-                        this.removeContent();
+                showUploader: function() {
+                        this.uploader.$el.removeClass( 'hidden' );
+                },
 
+                createAttachments: function() {
                         this.attachments = new media.view.Attachments({
                                 controller:           this.controller,
                                 collection:           this.collection,
@@ -5690 +5683 @@
                         });
 
                         this.views.add( this.attachments );
+
+                        this.attachmentsNoResults = new media.View({
+                                controller: this.controller
+                        });
+
+                        this.attachmentsNoResults.$el.addClass( 'hidden' );
+                        this.attachmentsNoResults.$el.html( 'No media found.' );
+
+                        this.views.add( this.attachmentsNoResults );
+
+
                 },
 
                 createSidebar: function() {