Changeset 29081

Timestamp:

07/10/2014 11:02:51 PM (10 years ago)

Author:

wonderboymusic

Message:

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.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (3 diffs)
• js/media-grid.js (modified) (1 diff)
• js/media-views.js (modified) (2 diffs)

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

@@ -904 +904 @@
 }
 
-.attachment.details {
+.attachment.details,
+.media-grid-view .selected.attachment {
     -webkit-box-shadow: 0 0 0 1px #fff,
                 0 0 0 5px #1e8cbe;
@@ -911 +912 @@
 }
 
-.attachment.details .check {
+.attachment.details .check,
+.media-grid-view .attachment .check {
     background-color: #1e8cbe;
     -webkit-box-shadow: 0 0 0 1px #fff,
@@ -919 +921 @@
 }
 
-.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;
 }

trunk/src/wp-includes/js/media-grid.js

@@ -609 +609 @@
 
             if ( bulkEditActive ) {
-                this.controller.deactivateMode( 'bulk-edit' );
-                this.controller.activateMode( 'edit' );
+                this.controller.deactivateMode( 'bulk-edit' ).activateMode( 'edit' );
             } else {
-                this.controller.deactivateMode( 'edit' );
-                this.controller.activateMode( 'bulk-edit' );
+                this.controller.deactivateMode( 'edit' ).activateMode( 'bulk-edit' );
             }
         },

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

@@ -1971 +1971 @@
             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 );
         }
     });
@@ -4826 +4864 @@
             }
 
-            details = selection.single();
-            this.$el.toggleClass( 'details', details === this.model );
+            // In bulk edit mode (in media grid), attachments don't open the "details"
+            // 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 );
+            }
         },
         /**