diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 00852a3999..f0bdc326da 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -423,6 +423,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro if ( ! this.collection.length ) { this.toolbar.get( 'spinner' ).show(); + this.toolbar.$( '.media-bg-overlay' ).show(); this.dfd = this.collection.more().done( function() { if ( ! view.collection.length ) { noItemsView.$el.removeClass( 'hidden' ); @@ -430,10 +431,12 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro noItemsView.$el.addClass( 'hidden' ); } view.toolbar.get( 'spinner' ).hide(); + view.toolbar.$( '.media-bg-overlay' ).hide(); } ); } else { noItemsView.$el.addClass( 'hidden' ); view.toolbar.get( 'spinner' ).hide(); + this.toolbar.$( '.media-bg-overlay' ).hide(); } }, diff --git a/src/js/media/views/toolbar.js b/src/js/media/views/toolbar.js index 1beb428fe6..ed40dcdfda 100644 --- a/src/js/media/views/toolbar.js +++ b/src/js/media/views/toolbar.js @@ -28,10 +28,12 @@ Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{ // The toolbar is composed of two `PriorityList` views. this.primary = new wp.media.view.PriorityList(); this.secondary = new wp.media.view.PriorityList(); + this.tertiary = new wp.media.view.PriorityList(); this.primary.$el.addClass('media-toolbar-primary search-form'); this.secondary.$el.addClass('media-toolbar-secondary'); + this.tertiary.$el.addClass('media-bg-overlay'); - this.views.set([ this.secondary, this.primary ]); + this.views.set([ this.secondary, this.primary, this.tertiary ]); if ( this.options.items ) { this.set( this.options.items, { silent: true }); @@ -122,6 +124,7 @@ Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{ delete this._views[ id ]; this.primary.unset( id, options ); this.secondary.unset( id, options ); + this.tertiary.unset( id, options ); if ( ! options || ! options.silent ) { this.refresh(); diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index ab392ef890..de1ae1bdae 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -2814,6 +2814,34 @@ font-size: 14px; line-height: 2.71428571; } + + .media-frame .wp-filter .media-toolbar-secondary { + position: unset; + } + + .media-frame .media-toolbar-secondary .spinner { + position: absolute; + top: 0; + bottom: 0; + margin: auto; + left: 0; + right: 0; + z-index: 9; + } + + .media-bg-overlay { + content: ''; + background: #ffffff; + width: 100%; + height: 100%; + display: hidden; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0.6; + } } /* Responsive on portrait and landscape */