Changeset 29077

Timestamp:

07/10/2014 08:59:12 PM (10 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:

• wp-admin/css/common.css (modified) (2 diffs)
• wp-admin/includes/screen.php (modified) (2 diffs)
• wp-admin/js/common.js (modified) (1 diff)
• wp-admin/upload.php (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (1 diff)
• wp-includes/js/media-grid.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (4 diffs)
• wp-includes/media-template.php (modified) (2 diffs)

trunk/src/wp-admin/css/common.css

@@ -1026 +1026 @@
     margin: 0 20px -1px 0px;
     position: relative;
+    z-index: 10;
     background-color: #fff;
     border: 1px solid #ddd;
@@ -1048 +1049 @@
     position: relative;
     top: 0;
+    z-index: 10;
 }
 

trunk/src/wp-admin/includes/screen.php

@@ -1020 +1020 @@
         <div id="screen-options-wrap" class="hidden" tabindex="-1" aria-label="<?php esc_attr_e('Screen Options Tab'); ?>">
         <form id="adv-settings" action="" method="post">
-        <?php if ( isset( $wp_meta_boxes[ $this->id ] ) || $this->get_option( 'per_page' ) || ( $columns && empty( $columns['_title'] ) ) ) : ?>
+        <?php if (
+            isset( $wp_meta_boxes[ $this->id ] )
+            || $this->get_option( 'per_page' )
+            || $this->get_option( 'media_grid_title' )
+            || ( $columns && empty( $columns['_title'] ) )
+        ) : ?>
             <h5><?php _e( 'Show on screen' ); ?></h5>
         <?php
@@ -1072 +1077 @@
                 <br class="clear" />
             </div>
+        <?php elseif ( $this->get_option( 'media_grid_title' ) ): ?>
+            <div class="metabox-prefs media-grid-prefs">
+            <?php foreach ( $this->_options as $column => $args ) {
+                $id = "$column-hide";
+                echo '<label for="' . $id . '">';
+                $saved = str_replace( 'media_grid_', '', $column );
+                echo '<input class="hide-column-tog" name="' . $id . '" type="checkbox" id="' . $id . '" value="' . $column . '"' . checked( ! in_array( $saved, $hidden ), true, false ) . ' />';
+                echo $args['label'] . "</label>\n";
+            } ?>
+                <br class="clear" />
+            </div>
         <?php endif;
 

trunk/src/wp-admin/js/common.js

@@ -29 +29 @@
     saveManageColumnsState : function() {
         var hidden = this.hidden();
+        if ( $( '#media_grid_title-hide' ).length ) {
+            hidden = [];
+            $( '.hide-column-tog', '.media-grid-prefs' ).each( function() {
+                var $el, field = this.value.replace( 'media_grid_', '' );
+                $el = $( '.data-' + field );
+                if ( ! this.checked ) {
+                    hidden.push( field );
+                    $el.removeClass( 'data-visible' ).addClass( 'data-hidden' );
+                } else {
+                    $el.removeClass( 'data-hidden' ).addClass( 'data-visible' );
+                }
+            } );
+            hidden = hidden.join( ',' );
+        }
         $.post(ajaxurl, {
             action: 'hidden-columns',

trunk/src/wp-admin/upload.php

@@ -26 +26 @@
     wp_enqueue_script( 'media' );
     wp_localize_script( 'media-grid', 'mediaGridSettings', array( 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )  ) );
+
+    add_screen_option( 'media_grid_title', array( 'label' => __( 'Name' ) ) );
+    add_screen_option( 'media_grid_uploadedTo', array( 'label' => __( 'Uploaded To' ) ) );
+    add_screen_option( 'media_grid_dateFormatted', array( 'label' => __( 'Date' ) ) );
+    add_screen_option( 'media_grid_mime', array( 'label' => __( 'Mime-type' ) ) );
 
     require_once( ABSPATH . 'wp-admin/admin-header.php' );

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

@@ -2576 +2576 @@
  */
 .media-grid-view {
+    z-index: 1;
     position: fixed;
     bottom: 0;

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

@@ -598 +598 @@
     });
 
-    media.view.GridFieldOptions = media.View.extend({
-        className: 'media-grid-field-options',
-        template: media.template( 'media-grid-field-options' ),
-
-        events: {
-            'change input': 'toggleFields'
-        },
-
-        toggleFields: function(e) {
-            var $el = $( e.currentTarget ), fields, setting;
-            setting = $el.data( 'setting' );
-            fields = $( '.data-' + setting, '.data-fields' );
-            if ( $el.is( ':checked' ) ) {
-                fields.show();
-                deleteUserSetting( 'hidegrid' + setting );
-            } else {
-                fields.hide();
-                setUserSetting( 'hidegrid' + setting, 1 );
-            }
-
-            if ( $( ':checked', this.$el ).length ) {
-                fields.parent().show();
-            } else {
-                fields.parent().hide();
-            }
-        }
-    });
-
     media.view.BulkSelectionToggleButton = media.view.Button.extend({
         initialize: function() {

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

@@ -5229 +5229 @@
                 model:                attachment,
                 collection:           this.collection,
-                selection:            this.options.selection,
-                showAttachmentFields: this.options.showAttachmentFields
+                selection:            this.options.selection
             });
 
@@ -5545 +5544 @@
                 display: false,
                 sidebar: true,
-                showAttachmentFields: getUserSetting( 'showAttachmentFields', [ 'title', 'uploadedTo', 'dateFormatted', 'mime' ] ),
                 AttachmentView: media.view.Attachment.Library
             });
@@ -5609 +5607 @@
                     controller: this.controller,
                     priority: -69
-                }).render() );
-
-                this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({
-                    controller: this.controller,
-                    priority: -50
                 }).render() );
             }
@@ -5706 +5699 @@
                 model:                this.model,
                 sortable:             this.options.sortable,
-                showAttachmentFields: this.options.showAttachmentFields,
 
                 // The single `Attachment` view to be used in the `Attachments` view.

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

@@ -230 +230 @@
     </script>
 
-    <script type="text/html" id="tmpl-media-grid-field-options">
-        <label class="setting">
-            <span><?php _e( 'Name' ); ?></span>
-            <input type="checkbox" data-setting="title" {{ '' === getUserSetting( 'hidegridtitle' ) && 'checked' }} />
-        </label>
-        <label class="setting">
-            <span><?php _e( 'Uploaded to' ); ?></span>
-            <input type="checkbox" data-setting="uploadedTo" {{ '' === getUserSetting( 'hidegriduploadedTo' ) && 'checked' }} />
-        </label>
-        <label class="setting">
-            <span><?php _e( 'Date' ); ?></span>
-            <input type="checkbox" data-setting="dateFormatted" {{ '' === getUserSetting( 'hidegriddateFormatted' ) && 'checked' }} />
-        </label>
-        <label class="setting">
-            <span><?php _e( 'Mime-type' ); ?></span>
-            <input type="checkbox" data-setting="mime" {{ '' === getUserSetting( 'hidegridmime' ) && 'checked' }} />
-        </label>
-    </script>
-
     <script type="text/html" id="tmpl-uploader-status">
         <h3><?php _e( 'Uploading' ); ?></h3>
@@ -438 +419 @@
         if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
         <div class="data-fields">
-        <# _.each( data.showAttachmentFields, function( field ) {
-            var className = 'data-field data-hidden';
-            if ( '' === getUserSetting( 'hidegrid' + field ) ) {
-                className = 'data-field data-visible';
-            }
-        #>
-            <div class="{{ className }} data-{{ field }}"><#
-                if ( 'uploadedTo' === field ) {
-                    if ( data[ field ] ) {
+        <?php
+        $hidden = get_hidden_columns( get_current_screen() );
+        $fields = array( 'title', 'uploadedTo', 'dateFormatted', 'mime' );
+        foreach ( $fields as $field ):
+            $class_name = in_array( $field, $hidden ) ? 'data-field data-hidden' : 'data-field data-visible';
+        ?>
+            <div class="<?php echo $class_name ?> data-<?php echo $field ?>"><#
+                if ( 'uploadedTo' === '<?php echo $field ?>' ) {
+                    if ( data[ '<?php echo $field ?>' ] ) {
                     #><?php _e( 'Uploaded To: ' ) ?><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a><#
                     } else {
                     #><?php _e( 'Unattached' ) ?><#
                     }
-                } else if ( 'title' === field && ! data[ field ] ) {
+                } else if ( 'title' === '<?php echo $field ?>' && ! data[ '<?php echo $field ?>' ] ) {
                 #><?php _e( '(No title)' ) ?><#
-                } else if ( data[ field ] ) {
-                #>{{ data[ field ] }}<#
+                } else if ( data[ '<?php echo $field ?>' ] ) {
+                #>{{ data[ '<?php echo $field ?>' ] }}<#
                 }
             #></div>
-        <# }); #>
+        <?php endforeach ?>
         </div>
         <# } #>