diff --git a/src/wp-admin/js/common.js b/src/wp-admin/js/common.js index 80f910574c..9041d82791 100644 --- a/src/wp-admin/js/common.js +++ b/src/wp-admin/js/common.js @@ -150,6 +150,8 @@ screenMeta = { panel.focus(); link.addClass('screen-meta-active').attr('aria-expanded', true); }); + + $( document ).trigger( 'screen:options:open' ); }, close: function( panel, link ) { @@ -158,6 +160,8 @@ screenMeta = { $('.screen-meta-toggle').css('visibility', ''); panel.parent().hide(); }); + + $( document ).trigger( 'screen:options:close' ); } }; diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index a705451ae6..de769b6057 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -2580,22 +2580,13 @@ video#inline-media-node { line-height: 29px; } -.media-grid-view .view-switch, -.media-grid-field-options { +.media-grid-view .view-switch { display: inline-block; float: none; margin-top: 13px; vertical-align: middle; } -.media-grid-field-options span { - padding-right: 5px; -} - -.media-grid-field-options label { - margin-right: 10px; -} - /** * Position both the frame and the uploader window into the content * area of the screen. @@ -2607,7 +2598,14 @@ video#inline-media-node { left: 160px; right: 0; top: 32px; + -webkit-transition: 200ms ease-in-out; + transition: 200ms ease-in-out; } + +.media-grid-view-options { + top: 120px; +} + @media screen and (max-width: 900px) { .auto-fold .media-grid-view { left: 36px; diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index c23d1350f1..e5a69640ba 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -102,6 +102,9 @@ }); $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) ); + $(document).on( 'screen:options:open', _.bind( this.screenOptionsOpen, this ) ); + $(document).on( 'screen:options:close', _.bind( this.screenOptionsClose, this ) ); + // Ensure core and media grid view UI is enabled. this.$el.addClass('wp-core-ui media-grid-view'); @@ -152,6 +155,14 @@ _.delay( _.bind( this.createRouter, this ), 1000 ); }, + screenOptionsOpen: function() { + this.$el.addClass( 'media-grid-view-options' ); + }, + + screenOptionsClose: function() { + this.$el.removeClass( 'media-grid-view-options' ); + }, + createRouter: function() { this.gridRouter = new media.view.MediaFrame.Manage.Router();