Changeset 29212

Timestamp:

07/17/2014 08:41:40 PM (12 years ago)

Author:

helen

Message:

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.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (9 diffs)
• js/media-grid.js (modified) (4 diffs)
• js/media-views.js (modified) (4 diffs)
• media-template.php (modified) (2 diffs)
• media.php (modified) (1 diff)

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

@@ -914 +914 @@
 
 .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,
@@ -922 +922 @@
 }
 
+.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 .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;
 }
@@ -1052 +1060 @@
 }
 
-.attachment:hover .inline-toolbar {
+.attachment-preview:hover ~ .inline-toolbar {
         display: block;
 }
@@ -2601 +2609 @@
 }
 
+.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.
@@ -2606 +2623 @@
  * 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);
@@ -2644 +2661 @@
 }
 
-.media-grid-view select.attachment-filters {
+.media-grid-view select {
         margin: 0 10px 0 0;
 }
@@ -2730 +2747 @@
 }
 
-.media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
+.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
         display: none;
 }
@@ -2912 +2929 @@
 }
 
+/**
+ * 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;
         }
@@ -2925 +2946 @@
         }
 }
-

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

@@ -185 +185 @@
 
                 createStates: function() {
-                        var options = this.options,
-                                libraryState;
+                        var options = this.options;
 
                         if ( this.options.states ) {
@@ -192 +191 @@
                         }
 
-                        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'
+                                })
                         ]);
                 },
@@ -255 +253 @@
                                 display:    state.get('displaySettings'),
                                 dragInfo:   state.get('dragInfo'),
-                                bulkEdit:   true,
                                 sidebar:    false,
 
@@ -607 +604 @@
         });
 
-        media.view.BulkSelectionToggleButton = media.view.Button.extend({
+        media.view.BulkSelection = media.View.extend({
+                className: 'bulk-select',
+
+                initialize: function() {
+                        this.model = new Backbone.Model({
+                                currentAction: '',
+
+                        });
+
+                        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, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, 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 bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
+                        var selection = this.controller.controller.state().get('selection');
                         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();
-                        }
+                        // Currently assumes delete is the only action
+                        if ( confirm( l10n.warnBulkDelete ) ) {
+                                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 );
                 }
         });
 
-        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));

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

@@ -4620 +4620 @@
                         'change [data-setting] textarea': 'updateSetting',
                         'click .close':                   'removeFromLibrary',
-                        'click .check':                   'removeFromSelection',
+                        'click .check':                   'checkClickHandler',
                         'click a':                        'preventDefault',
                         'keydown':                        'toggleSelectionHandler'
@@ -4880 +4880 @@
                         }
 
-                        // 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 );
                 },
                 /**
@@ -5016 +5012 @@
                         this.collection.remove( this.model );
                 },
-                /**
-                 * @param {Object} event
-                 */
-                removeFromSelection: function( 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]
+                 */
+                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 );
+                        }
                 }
         });
@@ -5658 +5660 @@
                                 }).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() );
                         }
 

trunk/src/wp-includes/media-template.php

@@ -398 +398 @@
 
         <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 ) { #>
@@ -425 +420 @@
                                 <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>
+                </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';

trunk/src/wp-includes/media.php

@@ -2897 +2897 @@
 
                 // 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." ),
+                'warnBulkDelete'         => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
+                'bulkActions'            => __( 'Bulk Actions' ),
+                'deletePermanently'      => __( 'Delete Permanently' ),
+                'apply'                  => __( 'Apply' ),
 
                 // Library Details