From 097cb6117dae558c9c8e00138008d233c9ace1d3 Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <dkoopersmith@gmail.com>
Date: Tue, 30 Oct 2012 21:09:45 +0000
Subject: [PATCH] Improve selection UI/behavior in the media modal.

* Moves handling which models are in the selection into the `Library` state.
* Adds highlight for the last-selected view in a multi-view state.
* A view must be the last-selected view before it can be deselected.

see #21390.


git-svn-id: http://core.svn.wordpress.org/trunk@22332 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/css/media-views.css | 34 +++++++++++++++++++--
 wp-includes/js/media-views.js   | 52 ++++++++++++++++++++++++---------
 2 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
index 8b1283f4ae..4b191ce1a5 100644
--- a/wp-includes/css/media-views.css
+++ b/wp-includes/css/media-views.css
@@ -216,19 +216,41 @@
 	user-select:         none;
 }
 
+.selected.attachment {
+	box-shadow:
+		0 0 0 1px #fff,
+		0 0 0 4px #777;
+}
+
+.details.attachment {
+	box-shadow:
+		0 0 0 1px #fff,
+		0 0 0 4px #1e8cbe;
+}
+
+
 .attachment.library.selected:after {
 	content: '\2713';
 	display: block;
 	height: 24px;
 	width: 24px;
 	position: absolute;
-	top: 0;
-	left: 0;
+	top: -1px;
+	right: -1px;
 	line-height: 24px;
 	font-size: 18px;
 	text-align: center;
 	color: #fff;
-	background: #21759b;
+	text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 );
+	background: #777;
+	border: 1px solid #fff;
+	/*border-width: 0 1px 1px 0;*/
+	border-width: 0 0 1px 1px;
+	box-shadow: -1px 1px 0 rgba( 0, 0, 0, 0.1 );
+}
+
+.attachment.library.details:after {
+	background: #1e8cbe;
 }
 
 .attachment-preview {
@@ -278,6 +300,12 @@
 	overflow: hidden;
 }
 
+.attachment.selected .attachment-preview:after {
+	box-shadow:
+		inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ),
+		inset 0 0 10px 5px rgba( 0, 0, 0, 0.2 );
+}
+
 .attachment .thumbnail img {
 	top: 0;
 	left: 0;
diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js
index a818097a3f..59e488b740 100644
--- a/wp-includes/js/media-views.js
+++ b/wp-includes/js/media-views.js
@@ -131,7 +131,7 @@
 				this.set( 'edge', 120 );
 
 			if ( ! this.get('gutter') )
-				this.set( 'gutter', 6 );
+				this.set( 'gutter', 8 );
 
 			this.on( 'activate', this.activate, this );
 			this.on( 'deactivate', this.deactivate, this );
@@ -147,8 +147,6 @@
 			// automatically select any uploading attachments.
 			if ( this.get('multiple') )
 				wp.Uploader.queue.on( 'add', this.selectUpload, this );
-
-			this.get('selection').on( 'add remove', this.toggleDetails, this );
 		},
 
 		deactivate: function() {
@@ -157,7 +155,6 @@
 				this.get('selection').off( 'add remove', toolbar.visibility, toolbar );
 
 			wp.Uploader.queue.off( 'add', this.selectUpload, this );
-			this.get('selection').off( 'add remove', this.toggleDetails, this );
 		},
 
 		toolbar: function() {
@@ -234,16 +231,35 @@
 			this.frame.sidebar().add( 'details', view, options );
 		},
 
-		toggleDetails: function( model ) {
+		toggleSelection: function( model ) {
 			var details = this.get('details'),
-				selection = this.get('selection');
+				selection = this.get('selection'),
+				selected = selection.has( model );
 
-			if ( selection.has( model ) )
+			if ( ! selection )
+				return;
+
+			if ( ! selected )
+				selection.add( model );
+
+			// If the model is not the same as the details model,
+			// it now becomes the details model. If the model is
+			// in the selection, it is not removed.
+			if ( details !== model ) {
 				this.set( 'details', model );
-			else if ( selection.length )
+				return;
+			}
+
+			// The model is the details model.
+			// Removed it from the selection.
+			selection.remove( model );
+
+			// Show the last selected item, or clear the details view.
+			if ( selection.length )
 				this.set( 'details', selection.last() );
 			else
 				this.unset('details');
+
 		}
 	});
 
@@ -1072,21 +1088,24 @@
 			if ( this.selected() )
 				this.select();
 
+			// Update the model's details view.
+			this.controller.state().on( 'change:details', this.details, this );
+			this.details();
+
 			return this;
 		},
 
+		destroy: function() {
+			this.controller.state().off( 'change:details', this.details, this );
+		},
+
 		progress: function() {
 			if ( this.$bar && this.$bar.length )
 				this.$bar.width( this.model.get('percent') + '%' );
 		},
 
 		toggleSelection: function( event ) {
-			var selection = this.controller.state().get('selection');
-
-			if ( ! selection )
-				return;
-
-			selection[ selection.has( this.model ) ? 'remove' : 'add' ]( this.model );
+			this.controller.state().toggleSelection( this.model );
 		},
 
 		selected: function() {
@@ -1119,6 +1138,11 @@
 			this.$el.removeClass('selected');
 		},
 
+		details: function() {
+			var details = this.controller.state().get('details');
+			this.$el.toggleClass( 'details', details === this.model );
+		},
+
 		preventDefault: function( event ) {
 			event.preventDefault();
 		},