From 1ab750d0d235ddc8c97fa79e96c84ccadea32640 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Thu, 14 Aug 2014 07:17:27 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@29489 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/media-views.css | 43 ++++++++++++++++-------------
 src/wp-includes/js/media-grid.js    | 11 ++++++--
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 5c0ddbcf70..67e8ded8f5 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -729,17 +729,6 @@
 	-webkit-box-sizing: border-box;
 	-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;
 }
 
 .attachment:focus {
@@ -754,10 +743,10 @@
 
 .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;
 }
 
@@ -772,10 +761,10 @@
 
 .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;
 }
 
@@ -809,6 +798,17 @@
 	right: 0;
 	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;
 }
 
 .attachment .portrait img {
@@ -2520,6 +2520,12 @@
 	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 */
+}
+
 /**
  * Copied styles from the Add theme toolbar.
  *
@@ -2543,12 +2549,11 @@
 	border: none;
 }
 
-.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;
 }
 
 .media-frame.mode-grid input[type="search"] {
diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
index 4ba364dd97..7c6a9238cc 100644
--- a/src/wp-includes/js/media-grid.js
+++ b/src/wp-includes/js/media-grid.js
@@ -151,17 +151,20 @@
 		},
 
 		fixPosition: function() {
-			var $browser;
+			var $browser, $toolbar;
 			if ( ! this.isModeActive( 'select' ) ) {
 				return;
 			}
 
 			$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', '');
 			}
 		},
 
@@ -594,6 +597,8 @@
 				toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
 			} 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();
 				this.controller.state().get( 'selection' ).reset();