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.


git-svn-id: https://develop.svn.wordpress.org/trunk@32687 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2015-06-03 15:12:19 +00:00
parent fa29d5bb80
commit 6c60055740
2 changed files with 25 additions and 7 deletions

View File

@ -296,8 +296,20 @@ table.fixed {
float: left; 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 */ /* @todo: pick a consistent list table selector */
@ -1622,6 +1634,7 @@ div.action-links,
.column-tags, .column-tags,
.tags .column-description, .tags .column-description,
.media .column-parent, .media .column-parent,
.media .column-comments,
.users .column-email, .users .column-email,
.users .column-name, .users .column-name,
.sites .column-registered, .sites .column-registered,
@ -1650,6 +1663,11 @@ div.action-links,
word-wrap: normal; word-wrap: normal;
} }
/* Media */
.media .column-title {
width: auto;
}
/* Quick Edit and Bulk Edit */ /* Quick Edit and Bulk Edit */
#wpbody-content .quick-edit-row-post .inline-edit-col-left, #wpbody-content .quick-edit-row-post .inline-edit-col-left,
#wpbody-content .quick-edit-row-post .inline-edit-col-right, #wpbody-content .quick-edit-row-post .inline-edit-col-right,

View File

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