Changeset 29086

Timestamp:

07/11/2014 05:33:29 AM (11 years ago)

Author:

wonderboymusic

Message:

Media Grid:

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

See #24716.

Location:

trunk/src

Files:

• wp-admin/js/common.js (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (2 diffs)
• wp-includes/js/media-grid.js (modified) (2 diffs)

trunk/src/wp-admin/js/common.js

@@ -151 +151 @@
             link.addClass('screen-meta-active').attr('aria-expanded', true);
         });
+
+        $( document ).trigger( 'screen:options:open' );
     },
 
@@ -159 +161 @@
             panel.parent().hide();
         });
+
+        $( document ).trigger( 'screen:options:close' );
     }
 };

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

@@ -2581 +2581 @@
 }
 
-.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;
 }
 
@@ -2608 +2599 @@
     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 {

trunk/src/wp-includes/js/media-grid.js

@@ -103 +103 @@
 
             $(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');
@@ -151 +154 @@
 
             _.delay( _.bind( this.createRouter, this ), 1000 );
+        },
+
+        screenOptionsOpen: function() {
+            this.$el.addClass( 'media-grid-view-options' );
+        },
+
+        screenOptionsClose: function() {
+            this.$el.removeClass( 'media-grid-view-options' );
         },