Changeset 29489

Timestamp:

08/14/2014 07:17:27 AM (12 years ago)

Author:

helen

Message:

Media grid bulk selection styling:

• Fade content within each attachment item so that focus styling is still clear.
• Less jarring toolbar pinning.
• Tighten up the fade in/out transition.

see #28842.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (6 diffs)
• js/media-grid.js (modified) (3 diffs)

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

@@ -730 +730 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    opacity: 1;
-    -webkit-transition: opacity 250ms;
-    transition: opacity 250ms;
-}
-
-.media-frame.mode-select .attachment {
-    opacity: 0.65;
-}
-
-.media-frame.mode-select .attachment.selected {
-    opacity: 1;
 }
 
@@ -755 +744 @@
 .media-frame.mode-grid .attachment:focus {
     -webkit-box-shadow:
-        inset 0 0 0 6px #f1f1f1,
+        inset 0 0 0 5px #f1f1f1,
         inset 0 0 1px 7px #5b9dd9;
     box-shadow:
-        inset 0 0 0 6px #f1f1f1,
+        inset 0 0 0 5px #f1f1f1,
         inset 0 0 1px 7px #5b9dd9;
 }
@@ -773 +762 @@
 .media-frame.mode-grid .selected.attachment {
     -webkit-box-shadow:
-        inset 0 0 0 6px #f1f1f1,
+        inset 0 0 0 5px #f1f1f1,
         inset 0 0 0 7px #ccc;
     box-shadow:
-        inset 0 0 0 6px #f1f1f1,
+        inset 0 0 0 5px #f1f1f1,
         inset 0 0 0 7px #ccc;
 }
@@ -810 +799 @@
     bottom: 0;
     left: 0;
+    opacity: 1;
+    -webkit-transition: opacity .1s;
+    transition: opacity .1s;
+}
+
+.media-frame.mode-select .attachment .thumbnail {
+    opacity: 0.65;
+}
+
+.media-frame.mode-select .attachment.selected .thumbnail {
+    opacity: 1;
 }
 
@@ -2519 +2519 @@
 .media-frame.mode-select .attachments {
     padding: 2px;
+}
+
+.media-frame.mode-select .attachments-browser.fixed .attachments {
+    position: relative;
+    top: 80px; /* prevent jumping up when the toolbar becomes fixed */
+    padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
 }
 
@@ -2544 +2550 @@
 }
 
-.media-frame.mode-select .attachments-browser .media-toolbar.fixed {
+.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
     position: fixed;
-    top: 28px;
-    left: 182px;
+    top: 12px;
+    left: auto;
     right: 20px;
-    width: auto;
 }
 

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

@@ -152 +152 @@
 
         fixPosition: function() {
-            var $browser;
+            var $browser, $toolbar;
             if ( ! this.isModeActive( 'select' ) ) {
                 return;
@@ -158 +158 @@
 
             $browser = this.$('.attachments-browser');
+            $toolbar = $browser.find('.media-toolbar')
 
             if ( $browser.offset().top < this.$window.scrollTop() + this.$adminBar.height() ) {
-                $browser.find('.media-toolbar').addClass( 'fixed' );
+                $browser.addClass( 'fixed' );
+                $toolbar.css('width', $browser.width() + 'px');
             } else {
-                $browser.find('.media-toolbar').removeClass( 'fixed' );
+                $browser.removeClass( 'fixed' );
+                $toolbar.css('width', '');
             }
         },
@@ -595 +598 @@
             } else {
                 this.model.set( 'text', l10n.bulkSelect );
+                this.controller.content.get().$el.removeClass('fixed');
+                toolbar.$el.css('width', '');
                 toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
                 children.not( '.spinner, .delete-selected-button' ).show();