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
This commit is contained in:
Helen Hou-Sandí 2015-06-03 15:13:25 +00:00
parent 2d3a637598
commit 40fca44c89
6 changed files with 48 additions and 12 deletions

View File

@ -296,8 +296,20 @@ table.fixed {
float: right;
}
.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 */
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,

View File

@ -296,8 +296,20 @@ table.fixed {
float: left;
}
.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 */
}
/* @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,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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;

View File

@ -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.