WordPress.org
Get WordPress

Make WordPress Core

Changeset 29212


Ignore:
Timestamp:
07/17/2014 08:41:40 PM (11 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:
5 edited

Legend:

Unmodified
Added
Removed

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

    r29204 r29212  
    914914
    915915.attachment.details .check,
    916 .media-grid-view .attachment .check {
     916.media-grid-view .attachment.selected .check {
    917917    background-color: #1e8cbe;
    918918    -webkit-box-shadow: 0 0 0 1px #fff,
    … …  
    922922}
    923923
     924.media-grid-view .attachment .check {
     925    display: block;
     926}
     927
     928.media-grid-view .attachment .check div {
     929    background-position: 21px 0;
     930}
     931
    924932.attachment.details .check div,
    925 .media-grid-view .attachment .check div {
     933.media-grid-view .attachment.selected .check div {
    926934    background-position: -21px 0;
    927935}
    928936
    929937.attachment.details .check:hover div,
    930 .media-grid-view .attachment .check:hover div {
     938.media-grid-view .attachment.selected .check:hover div {
    931939    background-position: -60px 0;
    932940}
    … …  
    10521060}
    10531061
    1054 .attachment:hover .inline-toolbar {
     1062.attachment-preview:hover ~ .inline-toolbar {
    10551063    display: block;
    10561064}
    … …  
    26012609}
    26022610
     2611.media-grid-view .media-toolbar select {
     2612    margin-top: 1px;
     2613    font-size: inherit;
     2614}
     2615
     2616.media-grid-view .attachments-browser .bulk-select {
     2617    display: inline-block;
     2618}
     2619
    26032620/**
    26042621 * Copied styles from the Add theme toolbar.
    … …  
    26062623 * This should be OOCSS'd so both use a shared selector.
    26072624 */
    2608 .media-grid-view .media-toolbar {
     2625.media-grid-view .attachments-browser .media-toolbar {
    26092626    background: #fff;
    26102627    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    … …  
    26442661}
    26452662
    2646 .media-grid-view select.attachment-filters {
     2663.media-grid-view select {
    26472664    margin: 0 10px 0 0;
    26482665}
    … …  
    27302747}
    27312748
    2732 .media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
     2749.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
    27332750    display: none;
    27342751}
    … …  
    29122929}
    29132930
     2931/**
     2932 * Media queries for media grid.
     2933 */
     2934
    29142935@media only screen and (max-width: 1120px) {
    2915     .media-grid-view .media-toolbar-primary,
    2916     .media-grid-view .media-toolbar-secondary {
     2936    .media-grid-view .attachments-browser .media-toolbar-primary,
     2937    .media-grid-view .attachments-browser .media-toolbar-secondary {
    29172938        float: none;
    29182939    }
    … …  
    29252946    }
    29262947}
    2927 

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

    r29204 r29212  
    185185
    186186        createStates: function() {
    187             var options = this.options,
    188                 libraryState;
     187            var options = this.options;
    189188
    190189            if ( this.options.states ) {
    … …  
    192191            }
    193192
    194             libraryState = new media.controller.Library({
    195                 library:    media.query( options.library ),
    196                 multiple:   options.multiple,
    197                 title:      options.title,
    198                 priority:   20,
    199                 toolbar:    false,
    200                 router:     false,
    201                 content:    'browse',
    202                 filterable: 'mime-types'
    203             });
    204 
    205193            // Add the default states.
    206194            this.states.add([
    207                 libraryState
     195                new media.controller.Library({
     196                    library:    media.query( options.library ),
     197                    multiple:   options.multiple,
     198                    title:      options.title,
     199                    priority:   20,
     200
     201                    router:     false,
     202                    content:    'browse',
     203
     204                    filterable: 'mime-types'
     205                })
    208206            ]);
    209207        },
    … …  
    255253                display:    state.get('displaySettings'),
    256254                dragInfo:   state.get('dragInfo'),
    257                 bulkEdit:   true,
    258255                sidebar:    false,
    259256
    … …  
    607604    });
    608605
    609     media.view.BulkSelectionToggleButton = media.view.Button.extend({
     606    media.view.BulkSelection = media.View.extend({
     607        className: 'bulk-select',
     608
     609        initialize: function() {
     610            this.model = new Backbone.Model({
     611                currentAction: '',
     612
     613            });
     614
     615            this.views.add(
     616                new media.view.BulkSelectionActionDropdown({
     617                    controller: this
     618                })
     619            );
     620
     621            this.views.add(
     622                new media.view.BulkSelectionActionButton({
     623                    disabled:   true,
     624                    text:       l10n.apply,
     625                    controller: this
     626                })
     627            );
     628        }
     629    });
     630
     631    media.view.BulkSelectionActionDropdown = media.View.extend({
     632        tagName:   'select',
     633
     634        initialize: function() {
     635            media.view.Button.prototype.initialize.apply( this, arguments );
     636            this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
     637            this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
     638                .append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
     639            this.$el.prop( 'disabled', true );
     640            this.$el.on( 'change', _.bind( this.toggleChange, this ) );
     641        },
     642
     643        toggleChange: function() {
     644            this.controller.model.set( { 'currentAction': this.$el.val() } );
     645        },
     646        enabled: function() {
     647            var disabled = ! this.controller.controller.state().get('selection').length;
     648            this.$el.prop( 'disabled', disabled );
     649        }
     650    });
     651
     652    media.view.BulkSelectionActionButton = media.view.Button.extend({
     653        tagName: 'button',
     654
    610655        initialize: function() {
    611656            media.view.Button.prototype.initialize.apply( this, arguments );
    612             this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
     657
     658            this.listenTo( this.controller.model, 'change', this.enabled, this );
     659            this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
    613660        },
    614661
    615662        click: function() {
    616             var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
     663            var selection = this.controller.controller.state().get('selection');
    617664            media.view.Button.prototype.click.apply( this, arguments );
    618665
    619             if ( bulkEditActive ) {
    620                 this.controller.deactivateMode( 'bulk-edit' ).activateMode( 'edit' );
    621             } else {
    622                 this.controller.deactivateMode( 'edit' ).activateMode( 'bulk-edit' );
    623             }
    624         },
    625 
    626         toggleBulkEditHandler: function() {
    627             var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    628             if ( bulkEditActive ) {
    629                 this.$el.addClass( 'button-primary' );
    630             } else {
    631                 this.$el.removeClass( 'button-primary' );
    632                 this.controller.state().get('selection').reset();
    633             }
     666            // Currently assumes delete is the only action
     667            if ( confirm( l10n.warnBulkDelete ) ) {
     668                while ( selection.length > 0) {
     669                    selection.at(0).destroy();
     670                }
     671            }
     672
     673            this.enabled();
     674        },
     675
     676        enabled: function() {
     677            var currentAction = this.controller.model.get( 'currentAction' ),
     678                selection = this.controller.controller.state().get('selection'),
     679                disabled = ! currentAction || ! selection.length;
     680            this.$el.prop( 'disabled', disabled );
    634681        }
    635682    });
    636683
    637     media.view.BulkDeleteButton = media.view.Button.extend({
    638         initialize: function() {
    639             media.view.Button.prototype.initialize.apply( this, arguments );
    640             this.$el.hide();
    641             this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) );
    642         },
    643 
    644         click: function() {
    645             media.view.Button.prototype.click.apply( this, arguments );
    646             while (this.controller.state().get('selection').length > 0) {
    647                 this.controller.state().get('selection').at(0).destroy();
    648             }
    649         },
    650 
    651         visibility: function() {
    652             var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    653             if ( bulkEditActive ) {
    654                 this.$el.show();
    655             } else {
    656                 this.$el.hide();
    657             }
    658         }
    659     });
    660 
    661684}(jQuery, _, Backbone, wp));

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

    r29136 r29212  
    46204620            'change [data-setting] textarea': 'updateSetting',
    46214621            'click .close':                   'removeFromLibrary',
    4622             'click .check':                   'removeFromSelection',
     4622            'click .check':                   'checkClickHandler',
    46234623            'click a':                        'preventDefault',
    46244624            'keydown':                        'toggleSelectionHandler'
    … …  
    48804880            }
    48814881
    4882             // In bulk edit mode (in media grid), attachments don't open the "details"
    4883             // pane, so a `details` class is unnecessary on the attachment view.
    4884             if ( ! this.controller.isModeActive( 'bulk-edit' ) ) {
    4885                 details = selection.single();
    4886                 this.$el.toggleClass( 'details', details === this.model );
    4887             }
     4882            details = selection.single();
     4883            this.$el.toggleClass( 'details', details === this.model );
    48884884        },
    48894885        /**
    … …  
    50165012            this.collection.remove( this.model );
    50175013        },
    5018         /**
    5019          * @param {Object} event
    5020          */
    5021         removeFromSelection: function( event ) {
     5014
     5015        /**
     5016         * Add the model if it isn't in the selection, if it is in the selection,
     5017         * remove it.
     5018         *
     5019         * @param  {[type]} event [description]
     5020         * @return {[type]}       [description]
     5021         */
     5022        checkClickHandler: function ( event ) {
    50225023            var selection = this.options.selection;
    50235024            if ( ! selection ) {
    50245025                return;
    50255026            }
    5026 
    5027             // Stop propagation so the model isn't selected.
    50285027            event.stopPropagation();
    5029 
    5030             selection.remove( this.model );
     5028            if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
     5029                selection.remove( this.model );
     5030            } else {
     5031                selection.add( this.model );
     5032            }
    50315033        }
    50325034    });
    … …  
    56585660                }).render() );
    56595661
    5660                 this.toolbar.set( 'bulkSelectionToggleButton', new media.view.BulkSelectionToggleButton({
    5661                     text: 'Bulk Edit',
    5662                     controller: this.controller,
    5663                     priority: -70
    5664                 }).render() );
    5665 
    5666                 this.toolbar.set( 'BulkDeleteButton', new media.view.BulkDeleteButton({
    5667                     text: 'Bulk Delete',
    5668                     controller: this.controller,
    5669                     priority: -69
    5670                 }).render() );
     5662                this.toolbar.set( 'BulkSelection', new media.view.BulkSelection({
     5663                    controller: this.controller,
     5664                    priority: -70
     5665                }).render() );
    56715666            }
    56725667

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

    r29208 r29212  
    398398
    399399    <script type="text/html" id="tmpl-attachment">
    400         <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
    401         <div class="inline-toolbar js--select-attachment">
    402             <div class="dashicons dashicons-edit edit edit-media"></div>
    403         </div>
    404         <# } #>
    405400        <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    406401            <# if ( data.uploading ) { #>
    … …  
    425420                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
    426421            <# } #>
    427 
    428             <# if ( data.buttons.check ) { #>
    429                 <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    430             <# } #>
    431         </div>
     422        </div>
     423        <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
     424        <div class="inline-toolbar js--select-attachment">
     425            <div class="dashicons dashicons-edit edit edit-media"></div>
     426        </div>
     427        <# } #>
     428        <# if ( data.buttons.check ) { #>
     429            <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
     430        <# } #>
    432431        <#
    433432        var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';

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

    r29204 r29212  
    28972897
    28982898        // Library
    2899         'mediaLibraryTitle'  => __( 'Media Library' ),
    2900         'insertMediaTitle'   => __( 'Insert Media' ),
    2901         'createNewGallery'   => __( 'Create a new gallery' ),
    2902         'createNewPlaylist'   => __( 'Create a new playlist' ),
    2903         'createNewVideoPlaylist'   => __( 'Create a new video playlist' ),
    2904         'returnToLibrary'    => __( '&#8592; Return to library' ),
    2905         'allMediaItems'      => __( 'All media items' ),
    2906         'allMediaTypes'      => __( 'All media types' ),
    2907         'noItemsFound'       => __( 'No items found.' ),
    2908         'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
    2909         'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
    2910         'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
     2899        'mediaLibraryTitle'      => __( 'Media Library' ),
     2900        'insertMediaTitle'       => __( 'Insert Media' ),
     2901        'createNewGallery'       => __( 'Create a new gallery' ),
     2902        'createNewPlaylist'      => __( 'Create a new playlist' ),
     2903        'createNewVideoPlaylist' => __( 'Create a new video playlist' ),
     2904        'returnToLibrary'        => __( '&#8592; Return to library' ),
     2905        'allMediaItems'          => __( 'All media items' ),
     2906        'allMediaTypes'          => __( 'All media types' ),
     2907        'noItemsFound'           => __( 'No items found.' ),
     2908        'insertIntoPost'         => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
     2909        'uploadedToThisPost'     => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
     2910        'warnDelete'             => __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
     2911        'warnBulkDelete'         => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
     2912        'bulkActions'            => __( 'Bulk Actions' ),
     2913        'deletePermanently'      => __( 'Delete Permanently' ),
     2914        'apply'                  => __( 'Apply' ),
    29112915
    29122916        // Library Details
Note: See TracChangeset for help on using the changeset viewer.