vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Media: Update progress spinner position on small screens.

Browse Source 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@57605 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2024-02-12 23:00:04 +00:00
parent 212a8d6718
commit 1a4692f54d
3 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/media/views/attachments/browser.js
View File

@ -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();
}
},

5
src/js/media/views/toolbar.js
View File

@ -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();

28
src/wp-includes/css/media-views.css
View File

@ -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 */