diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 0f57613..e6583f0 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; } @@ -2581,7 +2588,6 @@ video#inline-media-node { /* Regions we don't use at all */ .media-grid-view .media-frame-title, -.media-grid-view .media-frame-toolbar, .media-grid-view .media-frame-menu { display: none; } @@ -2601,13 +2607,15 @@ video#inline-media-node { margin-top: 0; } +.media-grid-view .media-toolbar { + background: #fff; +} /** * Copied styles from the Add theme toolbar. * * This should be OOCSS'd so both use a shared selector. */ -.media-grid-view .media-toolbar { - background: #fff; +.media-grid-view .attachments-browser .media-toolbar { -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); -webkit-box-sizing: border-box; @@ -2624,6 +2632,21 @@ video#inline-media-node { border: none; } + +.media-grid-view .media-frame-toolbar { + border-top: 1px solid #ddd; + bottom: 0; + position: fixed; +} + +.media-grid-view.hide-menu .media-frame-toolbar { + left: 160px; +} + +.folded .media-grid-view .media-frame-toolbar { + left: 36px; +} + .media-grid-view input[type="search"] { margin: 1px; padding: 3px 5px; @@ -2690,7 +2713,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 +2888,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; } @@ -2879,3 +2906,14 @@ video#inline-media-node { } } +@media only screen and (max-width: 900px) { + .auto-fold .media-grid-view .media-frame-toolbar { + left: 36px; + } +} + +@media screen and (max-width: 782px) { + .auto-fold .media-grid-view .media-frame-toolbar { + left: 0; + } +} \ 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..5262be2 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -70,6 +70,29 @@ }); /** + * Library state with bulk selection. + * + * @constructor + * @augments wp.media.controller.Library + * @augments wp.media.controller.State + * @augments Backbone.Model + */ + media.controller.LibraryWithBulkSelect = media.controller.Library.extend({ + activate: function() { + wp.media.controller.Library.prototype.activate.apply( this, arguments ); + this.get( 'selection' ).on( 'add remove reset', this.maybeBulkSelect, this ); + }, + + maybeBulkSelect: function() { + if ( this.get( 'selection' ).length ) { + this.frame.toolbar.mode( 'bulk-select' ); + } else { + this.frame.toolbar.mode( 'hide' ); + } + } + }); + + /** * wp.media.view.MediaFrame.Manage * * A generic management frame workflow. @@ -191,27 +214,26 @@ }, 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.LibraryWithBulkSelect({ + library: media.query( options.library ), + multiple: options.multiple, + title: options.title, + priority: 20, + + toolbar: 'hide', + router: false, + content: 'browse', + + filterable: 'mime-types' + }) ]); }, @@ -219,6 +241,10 @@ this.on( 'content:create:browse', this.browseContent, this ); this.on( 'content:render:edit-image', this.editImageContent, this ); + this.on( 'toolbar:create:bulk-select', this.createToolbar, this ); + this.on( 'toolbar:render:bulk-select', this.toolbarRenderBulkSelect, this ); + this.on( 'toolbar:render:hide', this.toolbarRenderHide, this ); + // Handle a frame-level event for editing an attachment. this.on( 'edit:attachment', this.editAttachment, this ); }, @@ -261,7 +287,6 @@ filters: state.get('filterable'), display: state.get('displaySettings'), dragInfo: state.get('dragInfo'), - bulkEdit: true, sidebar: false, suggestedWidth: state.get('suggestedWidth'), @@ -280,6 +305,39 @@ // after creating the wrapper view, load the actual editor via an ajax call view.loadEditor(); + }, + + setToolbarState: function() { + debugger; + }, + + toolbarRenderBulkSelect: function( view ) { + this.$el.removeClass( 'hide-toolbar' ); + + var controller = this; + + view.set( 'bulkDelete', { + style: 'primary', + priority: 80, + text: l10n.bulkDelete, + requires: { selection: true }, + + /** + * @fires wp.media.controller.State#insert + */ + click: function() { + var state = controller.state(), + selection = state.get('selection'); + + while ( selection.length > 0 ) { + selection.at(0).destroy(); + } + } + }); + }, + + toolbarRenderHide: function() { + this.$el.addClass( 'hide-toolbar' ); } }); @@ -638,56 +696,4 @@ } }); - 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' ); - } - }, - - 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 ) ); - }, - - 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(); - } - } - }); - }(jQuery, _, Backbone, wp)); diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 0f3246e..10a8385 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 ); + } } }); @@ -5656,18 +5658,6 @@ controller: this.controller, 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() ); } filters = this.options.filters; diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index 8764219..1ed1f1b 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -386,11 +386,6 @@ function wp_print_media_templates() {