Ticket #33049: 33049.diff

src/js/media/views/button/select-mode-toggle.js

@@ -55 +55 @@
                                 size: 'large',
                                 text: l10n.cancel
                         } );
-                        children.not( '.spinner, .media-button' ).hide();
+                        children.not( '.spinner, .media-button, .media-bg-overlay' ).hide();
                         this.$el.show();
                         toolbar.$el.addClass( 'media-toolbar-mode-select' );
                         toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );

src/js/media/views/toolbar.js

@@ -28 +28 @@
                 // The toolbar is composed of two `PriorityList` views.
                 this.primary   = new wp.media.view.PriorityList();
                 this.secondary = new wp.media.view.PriorityList();
+                this.third     = new wp.media.view.PriorityList();
                 this.primary.$el.addClass('media-toolbar-primary search-form');
                 this.secondary.$el.addClass('media-toolbar-secondary');
+                this.third.$el.addClass('media-bg-overlay');
 
-                this.views.set([ this.secondary, this.primary ]);
+                this.views.set([ this.secondary, this.primary, this.third ]);
 
                 if ( this.options.items ) {
                         this.set( this.options.items, { silent: true });
@@ -122 +124 @@
                 delete this._views[ id ];
                 this.primary.unset( id, options );
                 this.secondary.unset( id, options );
+                this.third.unset( id, options );
 
                 if ( ! options || ! options.silent ) {
                         this.refresh();

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

@@ -2815 +2815 @@
                 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 {
+                visibility: hidden;
+                content: '';
+                background: #ffffff;
+                width: 100%;
+                height: 100%;
+                display: block;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                opacity: 0.6;
+        }
 }
 
 /* Responsive on portrait and landscape */