Ticket #28842: 28842.4.diff

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

@@ -889 +889 @@
         box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
 }
 
+.media-grid-view .attachment .check {
+        display: block;
+}
+
 .attachment .check div {
         background-position: -1px 0;
         height: 15px;
@@ -913 +917 @@
 }
 
 .attachment.details .check,
-.media-grid-view .attachment .check {
+.media-grid-view .attachment.selected .check {
         background-color: #1e8cbe;
         -webkit-box-shadow: 0 0 0 1px #fff,
                                 0 0 0 2px #1e8cbe;
@@ -921 +925 @@
                                 0 0 0 2px #1e8cbe;
 }
 
-.attachment.details .check div,
 .media-grid-view .attachment .check div {
+        background-position: 21px 0;
+}
+.attachment.details .check div,
+.media-grid-view .attachment.selected .check div {
         background-position: -21px 0;
 }
 
 .attachment.details .check:hover div,
-.media-grid-view .attachment .check:hover div {
+.media-grid-view .attachment.selected .check:hover div {
         background-position: -60px 0;
 }
 
@@ -1051 +1058 @@
         display: inline-block;
 }
 
-.attachment:hover .inline-toolbar {
+.attachment-preview:hover ~ .inline-toolbar {
         display: block;
 }
 
@@ -2569 +2576 @@
 }
 
 
+.media-grid-view .attachments-browser .bulk-select {
+        display: inline-block;
+}
+
 /**
  * Media Grid
  */
@@ -2606 +2617 @@
  *
  * This should be OOCSS'd so both use a shared selector.
  */
-.media-grid-view .media-toolbar {
+.media-grid-view .attachments-browser .media-toolbar {
         background: #fff;
         -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
         box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@@ -2644 +2655 @@
         margin: 0 20px 0 0;
 }
 
-.media-grid-view select.attachment-filters {
+.media-grid-view select {
         margin: 0 10px 0 0;
 }
 
@@ -2690 +2701 @@
         font-weight: 300;
 }
 
-.media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
+.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
         display: none;
 }
 
@@ -2865 +2876 @@
         margin-top: 3px;
 }
 
+/**
+ * Media queries for media grid.
+ */
+
 @media only screen and (max-width: 1120px) {
-        .media-grid-view .media-toolbar-primary,
-        .media-grid-view .media-toolbar-secondary {
+        .media-grid-view .attachments-browser .media-toolbar-primary,
+        .media-grid-view .attachments-browser .media-toolbar-secondary {
                 float: none;
         }
 
@@ -2877 +2892 @@
                 width: 100%;
                 max-width: none !important;
         }
-}
-
+}
+ No newline at end of file

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

@@ -191 +191 @@
                 },
 
                 createStates: function() {
-                        var options = this.options,
-                                libraryState;
+                        var options = this.options;
 
                         if ( this.options.states ) {
                                 return;
                         }
 
-                        libraryState = new media.controller.Library({
-                                library:    media.query( options.library ),
-                                multiple:   options.multiple,
-                                title:      options.title,
-                                priority:   20,
-                                toolbar:    false,
-                                router:     false,
-                                content:    'browse',
-                                filterable: 'mime-types'
-                        });
-
                         // Add the default states.
                         this.states.add([
-                                libraryState
+                                new media.controller.Library({
+                                        library:    media.query( options.library ),
+                                        multiple:   options.multiple,
+                                        title:      options.title,
+                                        priority:   20,
+
+                                        router:     false,
+                                        content:    'browse',
+
+                                        filterable: 'mime-types'
+                                })
                         ]);
                 },
 
@@ -261 +259 @@
                                 filters:    state.get('filterable'),
                                 display:    state.get('displaySettings'),
                                 dragInfo:   state.get('dragInfo'),
-                                bulkEdit:   true,
                                 sidebar:    false,
 
                                 suggestedWidth:  state.get('suggestedWidth'),
@@ -638 +635 @@
                 }
         });
 
-        media.view.BulkSelectionToggleButton = media.view.Button.extend({
-                initialize: function() {
-                        media.view.Button.prototype.initialize.apply( this, arguments );
-                        this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
-                },
-
-                click: function() {
-                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-                        media.view.Button.prototype.click.apply( this, arguments );
-
-                        if ( bulkEditActive ) {
-                                this.controller.deactivateMode( 'bulk-edit' ).activateMode( 'edit' );
-                        } else {
-                                this.controller.deactivateMode( 'edit' ).activateMode( 'bulk-edit' );
-                        }
-                },
+        media.view.BulkSelection = media.View.extend({
+                className: 'bulk-select',
 
-                toggleBulkEditHandler: function() {
-                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-                        if ( bulkEditActive ) {
-                                this.$el.addClass( 'button-primary' );
-                        } else {
-                                this.$el.removeClass( 'button-primary' );
-                                this.controller.state().get('selection').reset();
-                        }
-                }
-        });
-
-        media.view.BulkDeleteButton = media.view.Button.extend({
                 initialize: function() {
-                        media.view.Button.prototype.initialize.apply( this, arguments );
-                        this.$el.hide();
-                        this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) );
-                },
+                        this.model = new Backbone.Model({
+                                currentAction: '',
 
-                click: function() {
-                        media.view.Button.prototype.click.apply( this, arguments );
-                        while (this.controller.state().get('selection').length > 0) {
-                                this.controller.state().get('selection').at(0).destroy();
-                        }
-                },
+                        });
 
-                visibility: function() {
-                        var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-                        if ( bulkEditActive ) {
-                                this.$el.show();
-                        } else {
-                                this.$el.hide();
-                        }
+                        this.views.add(
+                                new media.view.BulkSelectionActionDropdown({
+                                        controller: this
+                                })
+                        );
+
+                        this.views.add(
+                                new media.view.BulkSelectionActionButton({
+                                        disabled:   true,
+                                        text:       l10n.apply,
+                                        controller: this
+                                })
+                        );
                 }
         });
 
+        media.view.BulkSelectionActionDropdown = media.View.extend({
+                tagName:   'select',
+
+                initialize: function() {
+                        media.view.Button.prototype.initialize.apply( this, arguments );
+                        this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
+                        this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
+                                .append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
+                        this.$el.prop( 'disabled', true );
+                        this.$el.on( 'change', _.bind( this.toggleChange, this ) );
+                },
+
+                toggleChange: function() {
+                        this.controller.model.set( { 'currentAction': this.$el.val() } );
+                },
+                enabled: function() {
+                        var disabled = ! this.controller.controller.state().get('selection').length;
+                        this.$el.prop( 'disabled', disabled );
+                }
+        });
+
+        media.view.BulkSelectionActionButton = media.view.Button.extend({
+                tagName: 'button',
+
+                initialize: function() {
+                        media.view.Button.prototype.initialize.apply( this, arguments );
+
+                        this.listenTo( this.controller.model, 'change', this.enabled, this );
+                },
+
+                click: function() {
+                        var selection = this.controller.controller.state().get('selection');
+                        media.view.Button.prototype.click.apply( this, arguments );
+                        while ( selection.length > 0) {
+                                selection.at(0).destroy();
+                        }
+                        this.enabled();
+                },
+
+                enabled: function() {
+                        var currentAction = this.controller.model.get( 'currentAction' ),
+                                selection = this.controller.controller.state().get('selection'),
+                                disabled = ! currentAction || ! selection.length;
+                        this.$el.prop( 'disabled', disabled );
+                }
+        });
+
 }(jQuery, _, Backbone, wp));

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

@@ -4619 +4619 @@
                         'change [data-setting] select':   'updateSetting',
                         'change [data-setting] textarea': 'updateSetting',
                         'click .close':                   'removeFromLibrary',
-                        'click .check':                   'removeFromSelection',
+                        'click .check':                   'checkClickHandler',
                         'click a':                        'preventDefault',
                         'keydown':                        'toggleSelectionHandler'
                 },
@@ -4879 +4879 @@
                                 return;
                         }
 
-                        // 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 );
-                        }
+                        details = selection.single();
+                        this.$el.toggleClass( 'details', details === this.model );
                 },
                 /**
                  * @param {Object} event
@@ -5015 +5011 @@
 
                         this.collection.remove( this.model );
                 },
+
                 /**
-                 * @param {Object} event
+                 * Add the model if it isn't in the selection, if it is in the selection,
+                 * remove it.
+                 *
+                 * @param  {[type]} event [description]
+                 * @return {[type]}       [description]
                  */
-                removeFromSelection: function( event ) {
+                checkClickHandler: function ( event ) {
                         var selection = this.options.selection;
                         if ( ! selection ) {
                                 return;
                         }
-
-                        // Stop propagation so the model isn't selected.
                         event.stopPropagation();
-
-                        selection.remove( this.model );
+                        if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
+                                selection.remove( this.model );
+                        } else {
+                                selection.add( this.model );
+                        }
                 }
         });
 
@@ -5657 +5659 @@
                                         priority: -90
                                 }).render() );
 
-                                this.toolbar.set( 'bulkSelectionToggleButton', new media.view.BulkSelectionToggleButton({
-                                        text: 'Bulk Edit',
-                                        controller: this.controller,
-                                        priority: -70
-                                }).render() );
-
-                                this.toolbar.set( 'BulkDeleteButton', new media.view.BulkDeleteButton({
-                                        text: 'Bulk Delete',
-                                        controller: this.controller,
-                                        priority: -69
-                                }).render() );
+                                this.toolbar.set( 'BulkSelection', new media.view.BulkSelection({
+                                        controller: this.controller,
+                                        priority: -70
+                                }).render() );
                         }
 
                         filters = this.options.filters;

src/wp-includes/media-template.php

@@ -386 +386 @@
         </script>
 
         <script type="text/html" id="tmpl-attachment">
-                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
-                <div class="inline-toolbar js--select-attachment">
-                        <div class="dashicons dashicons-edit edit edit-media"></div>
-                </div>
-                <# } #>
                 <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
                         <# if ( data.uploading ) { #>
                                 <div class="media-progress-bar"><div></div></div>
@@ -413 +408 @@
                         <# if ( data.buttons.close ) { #>
                                 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
                         <# } #>
-
-                        <# if ( data.buttons.check ) { #>
-                                <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
-                        <# } #>
                 </div>
+                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
+                <div class="inline-toolbar js--select-attachment">
+                        <div class="dashicons dashicons-edit edit edit-media"></div>
+                </div>
+                <# } #>
+                <# if ( data.buttons.check ) { #>
+                        <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
+                <# } #>
                 <#
                 var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
                 if ( data.describe ) {

src/wp-includes/media.php

@@ -2896 +2896 @@
                 'uploadImagesTitle' => __( 'Upload Images' ),
 
                 // Library
-                'mediaLibraryTitle'  => __( 'Media Library' ),
-                'insertMediaTitle'   => __( 'Insert Media' ),
-                'createNewGallery'   => __( 'Create a new gallery' ),
-                'createNewPlaylist'   => __( 'Create a new playlist' ),
-                'createNewVideoPlaylist'   => __( 'Create a new video playlist' ),
-                'returnToLibrary'    => __( '← Return to library' ),
-                'allMediaItems'      => __( 'All media items' ),
-                'allMediaTypes'      => __( 'All media types' ),
-                'noItemsFound'       => __( 'No items found.' ),
-                'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
-                'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
-                'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
+                'mediaLibraryTitle'      => __( 'Media Library' ),
+                'insertMediaTitle'       => __( 'Insert Media' ),
+                'createNewGallery'       => __( 'Create a new gallery' ),
+                'createNewPlaylist'      => __( 'Create a new playlist' ),
+                'createNewVideoPlaylist' => __( 'Create a new video playlist' ),
+                'returnToLibrary'        => __( '← Return to library' ),
+                'allMediaItems'          => __( 'All media items' ),
+                'allMediaTypes'          => __( 'All media types' ),
+                'noItemsFound'           => __( 'No items found.' ),
+                'insertIntoPost'         => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
+                'uploadedToThisPost'     => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
+                'warnDelete'             => __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
+                'bulkActions'            => __( 'Bulk Actions' ),
+                'deletePermanently'      => __( 'Delete Permanently' ),
+                'apply'                  => __( 'Apply' ),
 
                 // From URL
                 'insertFromUrlTitle' => __( 'Insert from URL' ),