Changeset 32687

Timestamp:

06/03/2015 03:12:19 PM (11 years ago)

Author:

helen

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (3 diffs)
• includes/class-wp-media-list-table.php (modified) (4 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -297 +297 @@
 }
 
-.fixed .column-icon {
-        width: 80px;
+/* Media file column */
+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 */
 }
 
@@ -1623 +1635 @@
         .tags .column-description,
         .media .column-parent,
+        .media .column-comments,
         .users .column-email,
         .users .column-name,
@@ -1649 +1662 @@
         .widefat * {
                 word-wrap: normal;
+        }
+
+        /* Media */
+        .media .column-title {
+                width: auto;
         }
 

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

@@ -248 +248 @@
                 $posts_columns = array();
                 $posts_columns['cb'] = '<input type="checkbox" />';
-                $posts_columns['icon'] = '';
                 /* translators: column name */
                 $posts_columns['title'] = _x( 'File', 'column name' );
@@ -362 +361 @@
 
                 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 ) ) {
@@ -375 +375 @@
                                         }
                                 }
-                                break;
-
-                        case 'title':
+
+                                echo '</div><div class="media-info">';
 ?>
                                         <strong>
@@ -389 +388 @@
                                         _media_states( $post ); ?></strong>
                                         <p class="filename"><?php echo wp_basename( $post->guid ); ?></p>
+                                </div>
 <?php
                                 break;