From e391aa228afbb8998cc2ec2f43509c3e9ae7799e Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Thu, 17 Jul 2014 20:41:40 +0000 Subject: [PATCH] Media Grid: Instead of a separate bulk selection mode, persistently show a checkbox for each item. Restores the more familiar bulk actions dropdown + action button. props ericlewis. see #28842. git-svn-id: https://develop.svn.wordpress.org/trunk@29212 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/css/media-views.css | 40 +++++++--- src/wp-includes/js/media-grid.js | 119 +++++++++++++++++----------- src/wp-includes/js/media-views.js | 43 +++++----- src/wp-includes/media-template.php | 17 ++-- src/wp-includes/media.php | 28 ++++--- 5 files changed, 144 insertions(+), 103 deletions(-) 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() {