Changeset 57605

Timestamp:

02/12/2024 11:00:04 PM (10 months ago)

Author:

joedolson

Message:

Media: Update progress spinner position on small screens.

Move the media library progress spinner to overlay the filter controls while active. Improves design and prevents unpredictable layout.

Props afercia, kushang78, joedolson, karmatosed.
Fixes #33049.

Location:

trunk/src

Files:

• js/media/views/attachments/browser.js (modified) (2 diffs)
• js/media/views/toolbar.js (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (1 diff)

trunk/src/js/media/views/attachments/browser.js

@@ -424 +424 @@
         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 ) {
@@ -431 +432 @@
                 }
                 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();
         }
     },

trunk/src/js/media/views/toolbar.js

@@ -29 +29 @@
         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 ) {
@@ -123 +125 @@
         this.primary.unset( id, options );
         this.secondary.unset( id, options );
+        this.tertiary.unset( id, options );
 
         if ( ! options || ! options.silent ) {

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

@@ -2815 +2815 @@
         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;
+    }
 }