WordPress.org

Make WordPress Core

Changeset 29077


Ignore:
Timestamp:
07/10/2014 08:59:12 PM (6 years ago)
Author:
wonderboymusic
Message:

Media Grid: Move toggling of visible fields to Screen Options. This moves us in a better direction... but this will probably need to be massaged again.

See #24716.

Location:
trunk/src
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r29075 r29077  
    10261026    margin: 0 20px -1px 0px;
    10271027    position: relative;
     1028    z-index: 10;
    10281029    background-color: #fff;
    10291030    border: 1px solid #ddd;
     
    10481049    position: relative;
    10491050    top: 0;
     1051    z-index: 10;
    10501052}
    10511053
  • trunk/src/wp-admin/includes/screen.php

    r28500 r29077  
    10201020        <div id="screen-options-wrap" class="hidden" tabindex="-1" aria-label="<?php esc_attr_e('Screen Options Tab'); ?>">
    10211021        <form id="adv-settings" action="" method="post">
    1022         <?php if ( isset( $wp_meta_boxes[ $this->id ] ) || $this->get_option( 'per_page' ) || ( $columns && empty( $columns['_title'] ) ) ) : ?>
     1022        <?php if (
     1023            isset( $wp_meta_boxes[ $this->id ] )
     1024            || $this->get_option( 'per_page' )
     1025            || $this->get_option( 'media_grid_title' )
     1026            || ( $columns && empty( $columns['_title'] ) )
     1027        ) : ?>
    10231028            <h5><?php _e( 'Show on screen' ); ?></h5>
    10241029        <?php
     
    10721077                <br class="clear" />
    10731078            </div>
     1079        <?php elseif ( $this->get_option( 'media_grid_title' ) ): ?>
     1080            <div class="metabox-prefs media-grid-prefs">
     1081            <?php foreach ( $this->_options as $column => $args ) {
     1082                $id = "$column-hide";
     1083                echo '<label for="' . $id . '">';
     1084                $saved = str_replace( 'media_grid_', '', $column );
     1085                echo '<input class="hide-column-tog" name="' . $id . '" type="checkbox" id="' . $id . '" value="' . $column . '"' . checked( ! in_array( $saved, $hidden ), true, false ) . ' />';
     1086                echo $args['label'] . "</label>\n";
     1087            } ?>
     1088                <br class="clear" />
     1089            </div>
    10741090        <?php endif;
    10751091
  • trunk/src/wp-admin/js/common.js

    r29049 r29077  
    2929    saveManageColumnsState : function() {
    3030        var hidden = this.hidden();
     31        if ( $( '#media_grid_title-hide' ).length ) {
     32            hidden = [];
     33            $( '.hide-column-tog', '.media-grid-prefs' ).each( function() {
     34                var $el, field = this.value.replace( 'media_grid_', '' );
     35                $el = $( '.data-' + field );
     36                if ( ! this.checked ) {
     37                    hidden.push( field );
     38                    $el.removeClass( 'data-visible' ).addClass( 'data-hidden' );
     39                } else {
     40                    $el.removeClass( 'data-hidden' ).addClass( 'data-visible' );
     41                }
     42            } );
     43            hidden = hidden.join( ',' );
     44        }
    3145        $.post(ajaxurl, {
    3246            action: 'hidden-columns',
  • trunk/src/wp-admin/upload.php

    r29057 r29077  
    2626    wp_enqueue_script( 'media' );
    2727    wp_localize_script( 'media-grid', 'mediaGridSettings', array( 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )  ) );
     28
     29    add_screen_option( 'media_grid_title', array( 'label' => __( 'Name' ) ) );
     30    add_screen_option( 'media_grid_uploadedTo', array( 'label' => __( 'Uploaded To' ) ) );
     31    add_screen_option( 'media_grid_dateFormatted', array( 'label' => __( 'Date' ) ) );
     32    add_screen_option( 'media_grid_mime', array( 'label' => __( 'Mime-type' ) ) );
    2833
    2934    require_once( ABSPATH . 'wp-admin/admin-header.php' );
  • trunk/src/wp-includes/css/media-views.css

    r29067 r29077  
    25762576 */
    25772577.media-grid-view {
     2578    z-index: 1;
    25782579    position: fixed;
    25792580    bottom: 0;
  • trunk/src/wp-includes/js/media-grid.js

    r29076 r29077  
    598598    });
    599599
    600     media.view.GridFieldOptions = media.View.extend({
    601         className: 'media-grid-field-options',
    602         template: media.template( 'media-grid-field-options' ),
    603 
    604         events: {
    605             'change input': 'toggleFields'
    606         },
    607 
    608         toggleFields: function(e) {
    609             var $el = $( e.currentTarget ), fields, setting;
    610             setting = $el.data( 'setting' );
    611             fields = $( '.data-' + setting, '.data-fields' );
    612             if ( $el.is( ':checked' ) ) {
    613                 fields.show();
    614                 deleteUserSetting( 'hidegrid' + setting );
    615             } else {
    616                 fields.hide();
    617                 setUserSetting( 'hidegrid' + setting, 1 );
    618             }
    619 
    620             if ( $( ':checked', this.$el ).length ) {
    621                 fields.parent().show();
    622             } else {
    623                 fields.parent().hide();
    624             }
    625         }
    626     });
    627 
    628600    media.view.BulkSelectionToggleButton = media.view.Button.extend({
    629601        initialize: function() {
  • trunk/src/wp-includes/js/media-views.js

    r29067 r29077  
    52295229                model:                attachment,
    52305230                collection:           this.collection,
    5231                 selection:            this.options.selection,
    5232                 showAttachmentFields: this.options.showAttachmentFields
     5231                selection:            this.options.selection
    52335232            });
    52345233
     
    55455544                display: false,
    55465545                sidebar: true,
    5547                 showAttachmentFields: getUserSetting( 'showAttachmentFields', [ 'title', 'uploadedTo', 'dateFormatted', 'mime' ] ),
    55485546                AttachmentView: media.view.Attachment.Library
    55495547            });
     
    56095607                    controller: this.controller,
    56105608                    priority: -69
    5611                 }).render() );
    5612 
    5613                 this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({
    5614                     controller: this.controller,
    5615                     priority: -50
    56165609                }).render() );
    56175610            }
     
    57065699                model:                this.model,
    57075700                sortable:             this.options.sortable,
    5708                 showAttachmentFields: this.options.showAttachmentFields,
    57095701
    57105702                // The single `Attachment` view to be used in the `Attachments` view.
  • trunk/src/wp-includes/media-template.php

    r29065 r29077  
    230230    </script>
    231231
    232     <script type="text/html" id="tmpl-media-grid-field-options">
    233         <label class="setting">
    234             <span><?php _e( 'Name' ); ?></span>
    235             <input type="checkbox" data-setting="title" {{ '' === getUserSetting( 'hidegridtitle' ) && 'checked' }} />
    236         </label>
    237         <label class="setting">
    238             <span><?php _e( 'Uploaded to' ); ?></span>
    239             <input type="checkbox" data-setting="uploadedTo" {{ '' === getUserSetting( 'hidegriduploadedTo' ) && 'checked' }} />
    240         </label>
    241         <label class="setting">
    242             <span><?php _e( 'Date' ); ?></span>
    243             <input type="checkbox" data-setting="dateFormatted" {{ '' === getUserSetting( 'hidegriddateFormatted' ) && 'checked' }} />
    244         </label>
    245         <label class="setting">
    246             <span><?php _e( 'Mime-type' ); ?></span>
    247             <input type="checkbox" data-setting="mime" {{ '' === getUserSetting( 'hidegridmime' ) && 'checked' }} />
    248         </label>
    249     </script>
    250 
    251232    <script type="text/html" id="tmpl-uploader-status">
    252233        <h3><?php _e( 'Uploading' ); ?></h3>
     
    438419        if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
    439420        <div class="data-fields">
    440         <# _.each( data.showAttachmentFields, function( field ) {
    441             var className = 'data-field data-hidden';
    442             if ( '' === getUserSetting( 'hidegrid' + field ) ) {
    443                 className = 'data-field data-visible';
    444             }
    445         #>
    446             <div class="{{ className }} data-{{ field }}"><#
    447                 if ( 'uploadedTo' === field ) {
    448                     if ( data[ field ] ) {
     421        <?php
     422        $hidden = get_hidden_columns( get_current_screen() );
     423        $fields = array( 'title', 'uploadedTo', 'dateFormatted', 'mime' );
     424        foreach ( $fields as $field ):
     425            $class_name = in_array( $field, $hidden ) ? 'data-field data-hidden' : 'data-field data-visible';
     426        ?>
     427            <div class="<?php echo $class_name ?> data-<?php echo $field ?>"><#
     428                if ( 'uploadedTo' === '<?php echo $field ?>' ) {
     429                    if ( data[ '<?php echo $field ?>' ] ) {
    449430                    #><?php _e( 'Uploaded To: ' ) ?><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a><#
    450431                    } else {
    451432                    #><?php _e( 'Unattached' ) ?><#
    452433                    }
    453                 } else if ( 'title' === field && ! data[ field ] ) {
     434                } else if ( 'title' === '<?php echo $field ?>' && ! data[ '<?php echo $field ?>' ] ) {
    454435                #><?php _e( '(No title)' ) ?><#
    455                 } else if ( data[ field ] ) {
    456                 #>{{ data[ field ] }}<#
     436                } else if ( data[ '<?php echo $field ?>' ] ) {
     437                #>{{ data[ '<?php echo $field ?>' ] }}<#
    457438                }
    458439            #></div>
    459         <# }); #>
     440        <?php endforeach ?>
    460441        </div>
    461442        <# } #>
Note: See TracChangeset for help on using the changeset viewer.