Media Grid: while in Bulk Edit mode, any selected attachment should have the blue border, rather than just the last clicked one.

Props ericlewis.
See #24716.

Built from https://develop.svn.wordpress.org/trunk@29081


git-svn-id: http://core.svn.wordpress.org/trunk@28867 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -903,14 +903,16 @@
 	display: block;
 }
 
-.attachment.details {
+.attachment.details,
+.media-grid-view .selected.attachment {
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 5px #1e8cbe;
 	box-shadow: 0 0 0 1px #fff,
 				0 0 0 5px #1e8cbe;
 }
 
-.attachment.details .check {
+.attachment.details .check,
+.media-grid-view .attachment .check {
 	background-color: #1e8cbe;
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 2px #1e8cbe;
@@ -918,11 +920,13 @@
 				0 0 0 2px #1e8cbe;
 }
 
-.attachment.details .check div {
+.attachment.details .check div,
+.media-grid-view .attachment .check div {
 	background-position: -21px 0;
 }
 
-.attachment.details .check:hover div {
+.attachment.details .check:hover div,
+.media-grid-view .attachment .check:hover div {
 	background-position: -60px 0;
 }
 

wp-includes/css/media-views.css

@@ -903,14 +903,16 @@
 	display: block;
 }
 
-.attachment.details {
+.attachment.details,
+.media-grid-view .selected.attachment {
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 5px #1e8cbe;
 	box-shadow: 0 0 0 1px #fff,
 				0 0 0 5px #1e8cbe;
 }
 
-.attachment.details .check {
+.attachment.details .check,
+.media-grid-view .attachment .check {
 	background-color: #1e8cbe;
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 2px #1e8cbe;
@@ -918,11 +920,13 @@
 				0 0 0 2px #1e8cbe;
 }
 
-.attachment.details .check div {
+.attachment.details .check div,
+.media-grid-view .attachment .check div {
 	background-position: -21px 0;
 }
 
-.attachment.details .check:hover div {
+.attachment.details .check:hover div,
+.media-grid-view .attachment .check:hover div {
 	background-position: -60px 0;
 }
 

wp-includes/js/media-grid.js

@@ -608,11 +608,9 @@
 			media.view.Button.prototype.click.apply( this, arguments );
 
 			if ( bulkEditActive ) {
-				this.controller.deactivateMode( 'bulk-edit' );
+				this.controller.deactivateMode( 'bulk-edit' ).activateMode( 'edit' );
-				this.controller.activateMode( 'edit' );
 			} else {
-				this.controller.deactivateMode( 'edit' );
+				this.controller.deactivateMode( 'edit' ).activateMode( 'bulk-edit' );
-				this.controller.activateMode( 'bulk-edit' );
 			}
 		},
 

wp-includes/js/media-views.js

@@ -1970,22 +1970,60 @@
 			eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
 			this.trigger( eventToTrigger );
 		},
+		/**
+		 * Activate a mode on the frame.
+		 *
+		 * @param string mode Mode ID.
+		 * @returns {this} Returns itself to allow chaining.
+		 */
 		activateMode: function( mode ) {
-			if ( this.activeModes.where( { id: mode } ).length ) {
+			// Bail if the mode is already active.
+			if ( this.isModeActive( mode ) ) {
 				return;
 			}
 			this.activeModes.add( [ { id: mode } ] );
+			// Add a css class to the frame for anything that needs to be styled
+			// for the mode.
 			this.$el.addClass( 'mode-' + mode );
+			/**
+			 * Frame mode activation event.
+			 *
+			 * @event this#{mode}:activate
+			 */
 			this.trigger( mode + ':activate' );
+
+			return this;
 		},
+		/**
+		 * Deactivate a mode on the frame.
+		 *
+		 * @param string mode Mode ID.
+		 * @returns {this} Returns itself to allow chaining.
+		 */
 		deactivateMode: function( mode ) {
 			// Bail if the mode isn't active.
-			if ( ! this.activeModes.where( { id: mode } ).length ) {
+			if ( ! this.isModeActive( mode ) ) {
 				return;
 			}
 			this.activeModes.remove( this.activeModes.where( { id: mode } ) );
 			this.$el.removeClass( 'mode-' + mode );
+			/**
+			 * Frame mode deactivation event.
+			 *
+			 * @event this#{mode}:deactivate
+			 */
 			this.trigger( mode + ':deactivate' );
+
+			return this;
+		},
+		/**
+		 * Check if a mode is enabled on the frame.
+		 *
+		 * @param  string mode Mode ID.
+		 * @return bool
+		 */
+		isModeActive: function( mode ) {
+			return Boolean( this.activeModes.where( { id: mode } ).length );
 		}
 	});
 
@@ -4825,8 +4863,12 @@
 				return;
 			}
 
-			details = selection.single();
+			// In bulk edit mode (in media grid), attachments don't open the "details"
-			this.$el.toggleClass( 'details', details === this.model );
+			// pane, so a `details` class is unnecessary on the attachment view.
+			if ( ! this.controller.isModeActive( 'bulk-edit' ) ) {
+				details = selection.single();
+				this.$el.toggleClass( 'details', details === this.model );
+			}
 		},
 		/**
 		 * @param {Object} event