Media: move the thumbnail into the title column in list view.

This gives us more space for the title and row actions, and will make a responsive list table enhancement significantly easier.

props bradt for the initial patch.
fixes #29993 and #32255. see #32509 and #32395.

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


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

wp-admin/css/list-tables-rtl.css

@@ -296,8 +296,20 @@ table.fixed {
 	float: right;
 }
 
-.fixed .column-icon {
+/* Media file column */
-	width: 80px;
+table.media .column-title {
+	position: relative;
+}
+
+table.media .column-title .media-icon {
+	position: absolute;
+	top: 8px; /* match cell padding */
+	right: 10px; /* match cell padding */
+}
+
+table.media .column-title .media-info,
+table.media .column-title .row-actions {
+	margin-right: 70px; /* 60px image + margin */
 }
 
 /* @todo: pick a consistent list table selector */
@@ -1622,6 +1634,7 @@ div.action-links,
 	.column-tags,
 	.tags .column-description,
 	.media .column-parent,
+	.media .column-comments,
 	.users .column-email,
 	.users .column-name,
 	.sites .column-registered,
@@ -1650,6 +1663,11 @@ div.action-links,
 		word-wrap: normal;
 	}
 
+	/* Media */
+	.media .column-title {
+		width: auto;
+	}
+
 	/* Quick Edit and Bulk Edit */
 	#wpbody-content .quick-edit-row-post .inline-edit-col-left,
 	#wpbody-content .quick-edit-row-post .inline-edit-col-right,

wp-admin/css/list-tables.css

@@ -296,8 +296,20 @@ table.fixed {
 	float: left;
 }
 
-.fixed .column-icon {
+/* Media file column */
-	width: 80px;
+table.media .column-title {
+	position: relative;
+}
+
+table.media .column-title .media-icon {
+	position: absolute;
+	top: 8px; /* match cell padding */
+	left: 10px; /* match cell padding */
+}
+
+table.media .column-title .media-info,
+table.media .column-title .row-actions {
+	margin-left: 70px; /* 60px image + margin */
 }
 
 /* @todo: pick a consistent list table selector */
@@ -1622,6 +1634,7 @@ div.action-links,
 	.column-tags,
 	.tags .column-description,
 	.media .column-parent,
+	.media .column-comments,
 	.users .column-email,
 	.users .column-name,
 	.sites .column-registered,
@@ -1650,6 +1663,11 @@ div.action-links,
 		word-wrap: normal;
 	}
 
+	/* Media */
+	.media .column-title {
+		width: auto;
+	}
+
 	/* Quick Edit and Bulk Edit */
 	#wpbody-content .quick-edit-row-post .inline-edit-col-left,
 	#wpbody-content .quick-edit-row-post .inline-edit-col-right,

wp-admin/includes/class-wp-media-list-table.php

@@ -247,7 +247,6 @@ class WP_Media_List_Table extends WP_List_Table {
 	public function get_columns() {
 		$posts_columns = array();
 		$posts_columns['cb'] = '<input type="checkbox" />';
-		$posts_columns['icon'] = '';
 		/* translators: column name */
 		$posts_columns['title'] = _x( 'File', 'column name' );
 		$posts_columns['author'] = __( 'Author' );
@@ -361,9 +360,10 @@ foreach ( $columns as $column_name => $column_display_name ) {
 		echo "<td $attributes>";
 
 		switch ( $column_name ) {
-			case 'icon':
+			case 'title':
 				list( $mime ) = explode( '/', $post->post_mime_type );
-				$attributes = 'class="column-icon media-icon ' . $mime . '-icon"' . $style;
+
+				echo "<div class='media-icon {$mime}-icon'>";
 
 				if ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) {
 					if ( $this->is_trash || ! $user_can_edit ) {
@@ -374,9 +374,8 @@ foreach ( $columns as $column_name => $column_display_name ) {
 					</a><?php
 					}
 				}
-				break;
 
-			case 'title':
+				echo '</div><div class="media-info">';
 ?>
 					<strong>
 					<?php if ( $this->is_trash || ! $user_can_edit ) {
@@ -388,6 +387,7 @@ foreach ( $columns as $column_name => $column_display_name ) {
 					<?php }
 					_media_states( $post ); ?></strong>
 					<p class="filename"><?php echo wp_basename( $post->guid ); ?></p>
+				</div>
 <?php
 				break;
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-alpha-32686';
+$wp_version = '4.3-alpha-32687';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.