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:
parent
fa29d5bb80
commit
6c60055740
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue