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