Changeset 22332

Timestamp:

10/30/2012 09:09:45 PM (14 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 );
                 },