WordPress.org

Make WordPress Core

Ticket #28842: 28842.4.diff

File 28842.4.diff, 14.0 KB (added by ericlewis, 5 years ago)
  • src/wp-includes/css/media-views.css

    diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
    index 0f57613..e58d201 100644
    a b  
    889889        box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
    890890}
    891891
     892.media-grid-view .attachment .check {
     893        display: block;
     894}
     895
    892896.attachment .check div {
    893897        background-position: -1px 0;
    894898        height: 15px;
     
    913917}
    914918
    915919.attachment.details .check,
    916 .media-grid-view .attachment .check {
     920.media-grid-view .attachment.selected .check {
    917921        background-color: #1e8cbe;
    918922        -webkit-box-shadow: 0 0 0 1px #fff,
    919923                                0 0 0 2px #1e8cbe;
     
    921925                                0 0 0 2px #1e8cbe;
    922926}
    923927
    924 .attachment.details .check div,
    925928.media-grid-view .attachment .check div {
     929        background-position: 21px 0;
     930}
     931.attachment.details .check div,
     932.media-grid-view .attachment.selected .check div {
    926933        background-position: -21px 0;
    927934}
    928935
    929936.attachment.details .check:hover div,
    930 .media-grid-view .attachment .check:hover div {
     937.media-grid-view .attachment.selected .check:hover div {
    931938        background-position: -60px 0;
    932939}
    933940
     
    10511058        display: inline-block;
    10521059}
    10531060
    1054 .attachment:hover .inline-toolbar {
     1061.attachment-preview:hover ~ .inline-toolbar {
    10551062        display: block;
    10561063}
    10571064
    video#inline-media-node { 
    25692576}
    25702577
    25712578
     2579.media-grid-view .attachments-browser .bulk-select {
     2580        display: inline-block;
     2581}
     2582
    25722583/**
    25732584 * Media Grid
    25742585 */
    video#inline-media-node { 
    26062617 *
    26072618 * This should be OOCSS'd so both use a shared selector.
    26082619 */
    2609 .media-grid-view .media-toolbar {
     2620.media-grid-view .attachments-browser .media-toolbar {
    26102621        background: #fff;
    26112622        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    26122623        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    video#inline-media-node { 
    26442655        margin: 0 20px 0 0;
    26452656}
    26462657
    2647 .media-grid-view select.attachment-filters {
     2658.media-grid-view select {
    26482659        margin: 0 10px 0 0;
    26492660}
    26502661
    video#inline-media-node { 
    26902701        font-weight: 300;
    26912702}
    26922703
    2693 .media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
     2704.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
    26942705        display: none;
    26952706}
    26962707
    video#inline-media-node { 
    28652876        margin-top: 3px;
    28662877}
    28672878
     2879/**
     2880 * Media queries for media grid.
     2881 */
     2882
    28682883@media only screen and (max-width: 1120px) {
    2869         .media-grid-view .media-toolbar-primary,
    2870         .media-grid-view .media-toolbar-secondary {
     2884        .media-grid-view .attachments-browser .media-toolbar-primary,
     2885        .media-grid-view .attachments-browser .media-toolbar-secondary {
    28712886                float: none;
    28722887        }
    28732888
    video#inline-media-node { 
    28772892                width: 100%;
    28782893                max-width: none !important;
    28792894        }
    2880 }
    2881 
     2895}
     2896 No newline at end of file
  • src/wp-includes/js/media-grid.js

    diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
    index 3521bbc..cd4735a 100644
    a b  
    191191                },
    192192
    193193                createStates: function() {
    194                         var options = this.options,
    195                                 libraryState;
     194                        var options = this.options;
    196195
    197196                        if ( this.options.states ) {
    198197                                return;
    199198                        }
    200199
    201                         libraryState = new media.controller.Library({
    202                                 library:    media.query( options.library ),
    203                                 multiple:   options.multiple,
    204                                 title:      options.title,
    205                                 priority:   20,
    206                                 toolbar:    false,
    207                                 router:     false,
    208                                 content:    'browse',
    209                                 filterable: 'mime-types'
    210                         });
    211 
    212200                        // Add the default states.
    213201                        this.states.add([
    214                                 libraryState
     202                                new media.controller.Library({
     203                                        library:    media.query( options.library ),
     204                                        multiple:   options.multiple,
     205                                        title:      options.title,
     206                                        priority:   20,
     207
     208                                        router:     false,
     209                                        content:    'browse',
     210
     211                                        filterable: 'mime-types'
     212                                })
    215213                        ]);
    216214                },
    217215
     
    261259                                filters:    state.get('filterable'),
    262260                                display:    state.get('displaySettings'),
    263261                                dragInfo:   state.get('dragInfo'),
    264                                 bulkEdit:   true,
    265262                                sidebar:    false,
    266263
    267264                                suggestedWidth:  state.get('suggestedWidth'),
     
    638635                }
    639636        });
    640637
    641         media.view.BulkSelectionToggleButton = media.view.Button.extend({
    642                 initialize: function() {
    643                         media.view.Button.prototype.initialize.apply( this, arguments );
    644                         this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
    645                 },
    646 
    647                 click: function() {
    648                         var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    649                         media.view.Button.prototype.click.apply( this, arguments );
    650 
    651                         if ( bulkEditActive ) {
    652                                 this.controller.deactivateMode( 'bulk-edit' ).activateMode( 'edit' );
    653                         } else {
    654                                 this.controller.deactivateMode( 'edit' ).activateMode( 'bulk-edit' );
    655                         }
    656                 },
     638        media.view.BulkSelection = media.View.extend({
     639                className: 'bulk-select',
    657640
    658                 toggleBulkEditHandler: function() {
    659                         var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    660                         if ( bulkEditActive ) {
    661                                 this.$el.addClass( 'button-primary' );
    662                         } else {
    663                                 this.$el.removeClass( 'button-primary' );
    664                                 this.controller.state().get('selection').reset();
    665                         }
    666                 }
    667         });
    668 
    669         media.view.BulkDeleteButton = media.view.Button.extend({
    670641                initialize: function() {
    671                         media.view.Button.prototype.initialize.apply( this, arguments );
    672                         this.$el.hide();
    673                         this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) );
    674                 },
     642                        this.model = new Backbone.Model({
     643                                currentAction: '',
    675644
    676                 click: function() {
    677                         media.view.Button.prototype.click.apply( this, arguments );
    678                         while (this.controller.state().get('selection').length > 0) {
    679                                 this.controller.state().get('selection').at(0).destroy();
    680                         }
    681                 },
     645                        });
    682646
    683                 visibility: function() {
    684                         var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    685                         if ( bulkEditActive ) {
    686                                 this.$el.show();
    687                         } else {
    688                                 this.$el.hide();
    689                         }
     647                        this.views.add(
     648                                new media.view.BulkSelectionActionDropdown({
     649                                        controller: this
     650                                })
     651                        );
     652
     653                        this.views.add(
     654                                new media.view.BulkSelectionActionButton({
     655                                        disabled:   true,
     656                                        text:       l10n.apply,
     657                                        controller: this
     658                                })
     659                        );
    690660                }
    691661        });
    692662
     663        media.view.BulkSelectionActionDropdown = media.View.extend({
     664                tagName:   'select',
     665
     666                initialize: function() {
     667                        media.view.Button.prototype.initialize.apply( this, arguments );
     668                        this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
     669                        this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
     670                                .append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
     671                        this.$el.prop( 'disabled', true );
     672                        this.$el.on( 'change', _.bind( this.toggleChange, this ) );
     673                },
     674
     675                toggleChange: function() {
     676                        this.controller.model.set( { 'currentAction': this.$el.val() } );
     677                },
     678                enabled: function() {
     679                        var disabled = ! this.controller.controller.state().get('selection').length;
     680                        this.$el.prop( 'disabled', disabled );
     681                }
     682        });
     683
     684        media.view.BulkSelectionActionButton = media.view.Button.extend({
     685                tagName: 'button',
     686
     687                initialize: function() {
     688                        media.view.Button.prototype.initialize.apply( this, arguments );
     689
     690                        this.listenTo( this.controller.model, 'change', this.enabled, this );
     691                },
     692
     693                click: function() {
     694                        var selection = this.controller.controller.state().get('selection');
     695                        media.view.Button.prototype.click.apply( this, arguments );
     696                        while ( selection.length > 0) {
     697                                selection.at(0).destroy();
     698                        }
     699                        this.enabled();
     700                },
     701
     702                enabled: function() {
     703                        var currentAction = this.controller.model.get( 'currentAction' ),
     704                                selection = this.controller.controller.state().get('selection'),
     705                                disabled = ! currentAction || ! selection.length;
     706                        this.$el.prop( 'disabled', disabled );
     707                }
     708        });
     709
    693710}(jQuery, _, Backbone, wp));
  • src/wp-includes/js/media-views.js

    diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
    index 0f3246e..0da70e8 100644
    a b  
    46194619                        'change [data-setting] select':   'updateSetting',
    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'
    46254625                },
     
    48794879                                return;
    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                /**
    48904886                 * @param {Object} event
     
    50155011
    50165012                        this.collection.remove( this.model );
    50175013                },
     5014
    50185015                /**
    5019                  * @param {Object} event
     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]
    50205021                 */
    5021                 removeFromSelection: function( event ) {
     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        });
    50335035
     
    56575659                                        priority: -90
    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
    56735668                        filters = this.options.filters;
  • src/wp-includes/media-template.php

    diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
    index 40a20a4..3c82af7 100644
    a b function wp_print_media_templates() { 
    386386        </script>
    387387
    388388        <script type="text/html" id="tmpl-attachment">
    389                 <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
    390                 <div class="inline-toolbar js--select-attachment">
    391                         <div class="dashicons dashicons-edit edit edit-media"></div>
    392                 </div>
    393                 <# } #>
    394389                <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    395390                        <# if ( data.uploading ) { #>
    396391                                <div class="media-progress-bar"><div></div></div>
    function wp_print_media_templates() { 
    413408                        <# if ( data.buttons.close ) { #>
    414409                                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
    415410                        <# } #>
    416 
    417                         <# if ( data.buttons.check ) { #>
    418                                 <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    419                         <# } #>
    420411                </div>
     412                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
     413                <div class="inline-toolbar js--select-attachment">
     414                        <div class="dashicons dashicons-edit edit edit-media"></div>
     415                </div>
     416                <# } #>
     417                <# if ( data.buttons.check ) { #>
     418                        <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
     419                <# } #>
    421420                <#
    422421                var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
    423422                if ( data.describe ) {
  • src/wp-includes/media.php

    diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
    index a7000b8..19dec8d 100644
    a b function wp_enqueue_media( $args = array() ) { 
    28962896                'uploadImagesTitle' => __( 'Upload Images' ),
    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                'bulkActions'            => __( 'Bulk Actions' ),
     2912                'deletePermanently'      => __( 'Delete Permanently' ),
     2913                'apply'                  => __( 'Apply' ),
    29112914
    29122915                // From URL
    29132916                'insertFromUrlTitle' => __( 'Insert from URL' ),