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.

Built from https://develop.svn.wordpress.org/trunk@29077


git-svn-id: http://core.svn.wordpress.org/trunk@28863 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -1025,6 +1025,7 @@ form.upgrade .hint {
 	display: none;
 	margin: 0 0px -1px 20px;
 	position: relative;
+	z-index: 10;
 	background-color: #fff;
 	border: 1px solid #ddd;
 	border-top: none;
@@ -1047,6 +1048,7 @@ form.upgrade .hint {
 #screen-meta-links .screen-meta-toggle {
 	position: relative;
 	top: 0;
+	z-index: 10;
 }
 
 #screen-meta-links a {

wp-admin/css/common.css

@@ -1025,6 +1025,7 @@ form.upgrade .hint {
 	display: none;
 	margin: 0 20px -1px 0px;
 	position: relative;
+	z-index: 10;
 	background-color: #fff;
 	border: 1px solid #ddd;
 	border-top: none;
@@ -1047,6 +1048,7 @@ form.upgrade .hint {
 #screen-meta-links .screen-meta-toggle {
 	position: relative;
 	top: 0;
+	z-index: 10;
 }
 
 #screen-meta-links a {

wp-admin/includes/screen.php

@@ -1019,7 +1019,12 @@ final class WP_Screen {
 		?>
 		<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
 		endif;
@@ -1071,6 +1076,17 @@ final class WP_Screen {
 				?>
 				<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;
 
 		$this->render_screen_layout();

wp-admin/js/common.js

@@ -28,6 +28,20 @@ columns = {
 
 	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',
 			hidden: hidden,

wp-admin/upload.php

@@ -26,6 +26,11 @@ if ( 'grid' === $mode ) {
 	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' );
 	include( ABSPATH . 'wp-admin/admin-footer.php' );
 	exit;

wp-includes/css/media-views-rtl.css

@@ -2575,6 +2575,7 @@ video#inline-media-node {
  * area of the screen.
  */
 .media-grid-view {
+	z-index: 1;
 	position: fixed;
 	bottom: 0;
 	right: 160px;

wp-includes/css/media-views.css

@@ -2575,6 +2575,7 @@ video#inline-media-node {
  * area of the screen.
  */
 .media-grid-view {
+	z-index: 1;
 	position: fixed;
 	bottom: 0;
 	left: 160px;

wp-includes/js/media-grid.js

@@ -597,34 +597,6 @@
 		}
 	});
 
-	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() {
 			media.view.Button.prototype.initialize.apply( this, arguments );

wp-includes/js/media-views.js

@@ -5228,8 +5228,7 @@
 				controller:           this.controller,
 				model:                attachment,
 				collection:           this.collection,
-				selection:            this.options.selection,
+				selection:            this.options.selection
-				showAttachmentFields: this.options.showAttachmentFields
 			});
 
 			return this._viewsByCid[ attachment.cid ] = view;
@@ -5544,7 +5543,6 @@
 				search:  true,
 				display: false,
 				sidebar: true,
-				showAttachmentFields: getUserSetting( 'showAttachmentFields', [ 'title', 'uploadedTo', 'dateFormatted', 'mime' ] ),
 				AttachmentView: media.view.Attachment.Library
 			});
 
@@ -5609,11 +5607,6 @@
 					controller: this.controller,
 					priority: -69
 				}).render() );
-
-				this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({
-					controller: this.controller,
-					priority: -50
-				}).render() );
 			}
 
 			filters = this.options.filters;
@@ -5705,7 +5698,6 @@
 				selection:            this.options.selection,
 				model:                this.model,
 				sortable:             this.options.sortable,
-				showAttachmentFields: this.options.showAttachmentFields,
 
 				// The single `Attachment` view to be used in the `Attachments` view.
 				AttachmentView: this.options.AttachmentView

wp-includes/media-template.php

@@ -229,25 +229,6 @@ function wp_print_media_templates() {
 		</a>
 	</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>
 		<a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
@@ -437,26 +418,26 @@ function wp_print_media_templates() {
 
 		if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
 		<div class="data-fields">
-		<# _.each( data.showAttachmentFields, function( field ) {
+		<?php
-			var className = 'data-field data-hidden';
+		$hidden = get_hidden_columns( get_current_screen() );
-			if ( '' === getUserSetting( 'hidegrid' + field ) ) {
+		$fields = array( 'title', 'uploadedTo', 'dateFormatted', 'mime' );
-				className = 'data-field data-visible';
+		foreach ( $fields as $field ):
-			}
+			$class_name = in_array( $field, $hidden ) ? 'data-field data-hidden' : 'data-field data-visible';
-		#>
+		?>
-			<div class="{{ className }} data-{{ field }}"><#
+			<div class="<?php echo $class_name ?> data-<?php echo $field ?>"><#
-				if ( 'uploadedTo' === field ) {
+				if ( 'uploadedTo' === '<?php echo $field ?>' ) {
-					if ( data[ 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 ] ) {
+				} else if ( data[ '<?php echo $field ?>' ] ) {
-				#>{{ data[ field ] }}<#
+				#>{{ data[ '<?php echo $field ?>' ] }}<#
 				}
 			#></div>
-		<# }); #>
+		<?php endforeach ?>
 		</div>
 		<# } #>