diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 0f57613..e58d201 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -889,6 +889,10 @@
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,7 +917,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 +925,16 @@
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,7 +1058,7 @@
display: inline-block;
}
-.attachment:hover .inline-toolbar {
+.attachment-preview:hover ~ .inline-toolbar {
display: block;
}
@@ -2569,6 +2576,10 @@ video#inline-media-node {
}
+.media-grid-view .attachments-browser .bulk-select {
+ display: inline-block;
+}
+
/**
* Media Grid
*/
@@ -2606,7 +2617,7 @@ video#inline-media-node {
*
* 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,7 +2655,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;
}
@@ -2690,7 +2701,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;
}
@@ -2865,9 +2876,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;
}
@@ -2877,5 +2892,4 @@ video#inline-media-node {
width: 100%;
max-width: none !important;
}
-}
-
+}
\ No newline at end of file
diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
index 3521bbc..cd4735a 100644
--- a/src/wp-includes/js/media-grid.js
+++ b/src/wp-includes/js/media-grid.js
@@ -191,27 +191,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'
+ })
]);
},
@@ -261,7 +259,6 @@
filters: state.get('filterable'),
display: state.get('displaySettings'),
dragInfo: state.get('dragInfo'),
- bulkEdit: true,
sidebar: false,
suggestedWidth: state.get('suggestedWidth'),
@@ -638,56 +635,76 @@
}
});
- 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( $('').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.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));
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 0f3246e..0da70e8 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 40a20a4..3c82af7 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -386,11 +386,6 @@ function wp_print_media_templates() {