Changeset 22332

Timestamp:

10/30/2012 09:09:45 PM (12 years ago)

Author:

koopersmith

Message:

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.

Location:

trunk/wp-includes

Files:

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

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

@@ -217 +217 @@
 }
 
+.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';
@@ -223 +236 @@
     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;
 }
 
@@ -277 +299 @@
     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
     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 );
 }
 

trunk/wp-includes/js/media-views.js

@@ -132 +132 @@
 
             if ( ! this.get('gutter') )
-                this.set( 'gutter', 6 );
+                this.set( 'gutter', 8 );
 
             this.on( 'activate', this.activate, this );
@@ -148 +148 @@
             if ( this.get('multiple') )
                 wp.Uploader.queue.on( 'add', this.selectUpload, this );
-
-            this.get('selection').on( 'add remove', this.toggleDetails, this );
         },
 
@@ -158 +156 @@
 
             wp.Uploader.queue.off( 'add', this.selectUpload, this );
-            this.get('selection').off( 'add remove', this.toggleDetails, this );
         },
 
@@ -235 +232 @@
         },
 
-        toggleDetails: function( model ) {
+        toggleSelection: function( model ) {
             var details = this.get('details'),
-                selection = this.get('selection');
-
-            if ( selection.has( model ) )
+                selection = this.get('selection'),
+                selected = 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');
+
         }
     });
@@ -1073 +1089 @@
                 this.select();
 
-            return this;
+            // 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 );
         },
 
@@ -1082 +1106 @@
 
         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 );
         },
 
@@ -1118 +1137 @@
 
             this.$el.removeClass('selected');
+        },
+
+        details: function() {
+            var details = this.controller.state().get('details');
+            this.$el.toggleClass( 'details', details === this.model );
         },