diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 82b6e87a65..70df4b4778 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -913,7 +913,7 @@
}
.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,13 +921,21 @@
0 0 0 2px #1e8cbe;
}
-.attachment.details .check div,
+.media-grid-view .attachment .check {
+ display: block;
+}
+
.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,7 +1059,7 @@
display: inline-block;
}
-.attachment:hover .inline-toolbar {
+.attachment-preview:hover ~ .inline-toolbar {
display: block;
}
@@ -2600,12 +2608,21 @@ video#inline-media-node {
margin-top: 0;
}
+.media-grid-view .media-toolbar select {
+ margin-top: 1px;
+ font-size: inherit;
+}
+
+.media-grid-view .attachments-browser .bulk-select {
+ display: inline-block;
+}
+
/**
* Copied styles from the Add theme toolbar.
*
* 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);
@@ -2643,7 +2660,7 @@ video#inline-media-node {
margin: 0 20px 0 0;
}
-.media-grid-view select.attachment-filters {
+.media-grid-view select {
margin: 0 10px 0 0;
}
@@ -2729,7 +2746,7 @@ video#inline-media-node {
font-weight: 300;
}
-.media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
+.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
display: none;
}
@@ -2911,9 +2928,13 @@ video#inline-media-node {
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;
}
@@ -2924,4 +2945,3 @@ video#inline-media-node {
max-width: none !important;
}
}
-
diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
index f5c8afcad8..2ccf255e97 100644
--- a/src/wp-includes/js/media-grid.js
+++ b/src/wp-includes/js/media-grid.js
@@ -184,27 +184,25 @@
},
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'
+ })
]);
},
@@ -254,7 +252,6 @@
filters: state.get('filterable'),
display: state.get('displaySettings'),
dragInfo: state.get('dragInfo'),
- bulkEdit: true,
sidebar: false,
suggestedWidth: state.get('suggestedWidth'),
@@ -606,55 +603,81 @@
}
});
- media.view.BulkSelectionToggleButton = media.view.Button.extend({
+ media.view.BulkSelection = media.View.extend({
+ className: 'bulk-select',
+
initialize: function() {
- media.view.Button.prototype.initialize.apply( this, arguments );
- this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
- },
+ this.model = new Backbone.Model({
+ currentAction: '',
- 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' );
- }
- },
+ this.views.add(
+ new media.view.BulkSelectionActionDropdown({
+ controller: this
+ })
+ );
- 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();
- }
+ this.views.add(
+ new media.view.BulkSelectionActionButton({
+ disabled: true,
+ text: l10n.apply,
+ controller: this
+ })
+ );
}
});
- media.view.BulkDeleteButton = media.view.Button.extend({
+ 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( $('').val( '' ).html( l10n.bulkActions ) )
+ .append( $('').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.$el.hide();
- this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) );
+
+ this.listenTo( this.controller.model, 'change', this.enabled, this );
+ this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
},
click: function() {
+ var selection = this.controller.controller.state().get('selection');
media.view.Button.prototype.click.apply( this, arguments );
- while (this.controller.state().get('selection').length > 0) {
- this.controller.state().get('selection').at(0).destroy();
+
+ // Currently assumes delete is the only action
+ if ( confirm( l10n.warnBulkDelete ) ) {
+ while ( selection.length > 0) {
+ selection.at(0).destroy();
+ }
}
+
+ this.enabled();
},
- visibility: function() {
- var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
- if ( bulkEditActive ) {
- this.$el.show();
- } else {
- this.$el.hide();
- }
+ 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 );
}
});
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 0f3246e1a2..0da70e809f 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -4619,7 +4619,7 @@
'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,12 +4879,8 @@
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,19 +5011,25 @@
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,17 +5659,10 @@
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;
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index a026f22cc2..c71086ee70 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -397,11 +397,6 @@ function wp_print_media_templates() {