Media Grid:

* Move the grid down via CSS transition when the Screen Options slide open.
* Remove some unused CSS for grid options.

See #24716.


git-svn-id: https://develop.svn.wordpress.org/trunk@29086 602fd350-edb4-49c9-b593-d223f7449a82

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' );
 	}
 };
 

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;

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