List tables: Use CSS :nth-child() selectors for zebra striping.

Note that this does not fix issues related to comment quick edit. Internal linking also continues to use the `.alternate` class for now. IE8 and below gracefully degrade by not having zebra striping.

There is some hoop jumping with adding an extra table row to maintain zebra striping during quick edit. Documenting that here for future reference; it is also in the inline documentation.

fixes #30981 and #26060. see #25060.

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


git-svn-id: http://core.svn.wordpress.org/trunk@31162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2015-01-14 22:14:22 +00:00
parent a7dcd2d736
commit 62a197d6bf
24 changed files with 51 additions and 102 deletions

View File

@ -627,8 +627,8 @@ div#widgets-right .widget-top:hover,
color: #000;
}
.alternate,
.alt {
.striped > tbody > :nth-child(odd),
.alternate {
background-color: #f9f9f9;
}

View File

@ -627,8 +627,8 @@ div#widgets-right .widget-top:hover,
color: #000;
}
.alternate,
.alt {
.striped > tbody > :nth-child(odd),
.alternate {
background-color: #f9f9f9;
}

View File

@ -694,11 +694,6 @@ form.initial-form.quickpress-open input#title {
margin-right: 12px;
}
#activity-widget #the-comment-list .alternate,
#activity-widget #the-comment-list .alt {
background: none;
}
#activity-widget #the-comment-list .comment-item {
background: #fafafa;
padding: 12px;

View File

@ -694,11 +694,6 @@ form.initial-form.quickpress-open input#title {
margin-left: 12px;
}
#activity-widget #the-comment-list .alternate,
#activity-widget #the-comment-list .alt {
background: none;
}
#activity-widget #the-comment-list .comment-item {
background: #fafafa;
padding: 12px;

View File

@ -1433,16 +1433,16 @@ div.action-links,
/* ms */
/* Background Color for Site Status */
.wp-list-table .site-deleted {
.wp-list-table tr.site-deleted {
background: #ff8573;
}
.wp-list-table .site-spammed {
.wp-list-table tr.site-spammed {
background: #faafaa;
}
.wp-list-table .site-archived {
.wp-list-table tr.site-archived {
background: #ffebe8;
}
.wp-list-table .site-mature {
.wp-list-table tr.site-mature {
background: #fecac2;
}

View File

@ -1433,16 +1433,16 @@ div.action-links,
/* ms */
/* Background Color for Site Status */
.wp-list-table .site-deleted {
.wp-list-table tr.site-deleted {
background: #ff8573;
}
.wp-list-table .site-spammed {
.wp-list-table tr.site-spammed {
background: #faafaa;
}
.wp-list-table .site-archived {
.wp-list-table tr.site-archived {
background: #ffebe8;
}
.wp-list-table .site-mature {
.wp-list-table tr.site-mature {
background: #fecac2;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -76,10 +76,9 @@ if ( empty( $importers ) ) {
} else {
uasort( $importers, '_usort_by_first_member' );
?>
<table class="widefat importers">
<table class="widefat importers striped">
<?php
$alt = '';
foreach ($importers as $importer_id => $data) {
$action = '';
if ( isset( $data['install'] ) ) {
@ -108,9 +107,8 @@ if ( empty( $importers ) ) {
$action = "<a href='" . esc_url( "admin.php?import=$importer_id" ) . "' title='" . esc_attr( wptexturize( strip_tags( $data[1] ) ) ) ."'>{$data[0]}</a>";
}
$alt = $alt ? '' : ' class="alternate"';
echo "
<tr$alt>
<tr>
<td class='import-system row-title'>$action</td>
<td class='desc'>{$data[1]}</td>
</tr>";

View File

@ -111,8 +111,6 @@ class WP_Links_List_Table extends WP_List_Table {
public function display_rows() {
global $cat_id;
$alt = 0;
foreach ( $this->items as $link ) {
$link = sanitize_bookmark( $link );
$link->link_name = esc_attr( $link->link_name );
@ -122,11 +120,10 @@ class WP_Links_List_Table extends WP_List_Table {
$visible = ( $link->link_visible == 'Y' ) ? __( 'Yes' ) : __( 'No' );
$rating = $link->link_rating;
$style = ( $alt++ % 2 ) ? '' : ' class="alternate"';
$edit_link = get_edit_bookmark_link( $link );
?>
<tr id="link-<?php echo $link->link_id; ?>" <?php echo $style; ?>>
<tr id="link-<?php echo $link->link_id; ?>">
<?php
list( $columns, $hidden ) = $this->get_column_info();

View File

@ -953,7 +953,7 @@ class WP_List_Table {
* @return array List of CSS classes for the table tag.
*/
protected function get_table_classes() {
return array( 'widefat', 'fixed', $this->_args['plural'] );
return array( 'widefat', 'fixed', 'striped', $this->_args['plural'] );
}
/**
@ -1028,10 +1028,7 @@ class WP_List_Table {
* @param object $item The current item
*/
public function single_row( $item ) {
static $row_class = '';
$row_class = ( $row_class == '' ? ' class="alternate"' : '' );
echo '<tr' . $row_class . '>';
echo '<tr>';
$this->single_row_columns( $item );
echo '</tr>';
}

View File

@ -268,7 +268,6 @@ class WP_Media_List_Table extends WP_List_Table {
global $post;
add_filter( 'the_title','esc_html' );
$alt = '';
while ( have_posts() ) : the_post();
$user_can_edit = current_user_can( 'edit_post', $post->ID );
@ -277,11 +276,10 @@ class WP_Media_List_Table extends WP_List_Table {
|| !$this->is_trash && $post->post_status == 'trash' )
continue;
$alt = ( 'alternate' == $alt ) ? '' : 'alternate';
$post_owner = ( get_current_user_id() == $post->post_author ) ? 'self' : 'other';
$att_title = _draft_or_post_title();
?>
<tr id="post-<?php echo $post->ID; ?>" class="<?php echo trim( $alt . ' author-' . $post_owner . ' status-' . $post->post_status ); ?>">
<tr id="post-<?php echo $post->ID; ?>" class="<?php echo trim( ' author-' . $post_owner . ' status-' . $post->post_status ); ?>">
<?php
list( $columns, $hidden ) = $this->get_column_info();

View File

@ -208,15 +208,14 @@ class WP_MS_Sites_List_Table extends WP_List_Table {
$date = 'Y/m/d \<\b\r \/\> g:i:s a';
}
$class = '';
foreach ( $this->items as $blog ) {
$class = ( 'alternate' == $class ) ? '' : 'alternate';
$class = '';
reset( $status_list );
$blog_states = array();
foreach ( $status_list as $status => $col ) {
if ( get_blog_status( $blog['blog_id'], $status ) == 1 ) {
$class = $col[0];
$class = " class='{$col[0]}'";
$blog_states[] = $col[1];
}
}
@ -231,7 +230,7 @@ class WP_MS_Sites_List_Table extends WP_List_Table {
$blog_state .= "<span class='post-state'>$state$sep</span>";
}
}
echo "<tr class='$class'>";
echo "<tr{$class}>";
$blogname = ( is_subdomain_install() ) ? str_replace( '.' . get_current_site()->domain, '', $blog['domain'] ) : $blog['path'];

View File

@ -149,20 +149,19 @@ class WP_MS_Users_List_Table extends WP_List_Table {
public function display_rows() {
global $mode;
$alt = '';
$super_admins = get_super_admins();
foreach ( $this->items as $user ) {
$alt = ( 'alternate' == $alt ) ? '' : 'alternate';
$class = '';
$status_list = array( 'spam' => 'site-spammed', 'deleted' => 'site-deleted' );
foreach ( $status_list as $status => $col ) {
if ( $user->$status )
$alt .= " $col";
$class .= " $col";
}
?>
<tr class="<?php echo $alt; ?>">
<tr class="<?php echo trim( $class ); ?>">
<?php
list( $columns, $hidden ) = $this->get_column_info();

View File

@ -288,7 +288,7 @@ class WP_Posts_List_Table extends WP_List_Table {
}
protected function get_table_classes() {
return array( 'widefat', 'fixed', is_post_type_hierarchical( $this->screen->post_type ) ? 'pages' : 'posts' );
return array( 'widefat', 'fixed', 'striped', is_post_type_hierarchical( $this->screen->post_type ) ? 'pages' : 'posts' );
}
public function get_columns() {
@ -572,13 +572,11 @@ class WP_Posts_List_Table extends WP_List_Table {
/**
* @global string $mode
* @staticvar string $alternate
* @param WP_Post $post
* @param int $level
*/
public function single_row( $post, $level = 0 ) {
global $mode;
static $alternate;
$global_post = get_post();
$GLOBALS['post'] = $post;
@ -589,8 +587,7 @@ class WP_Posts_List_Table extends WP_List_Table {
$post_type_object = get_post_type_object( $post->post_type );
$can_edit_post = current_user_can( 'edit_post', $post->ID );
$alternate = 'alternate' == $alternate ? '' : 'alternate';
$classes = $alternate . ' iedit author-' . ( get_current_user_id() == $post->post_author ? 'self' : 'other' );
$classes = 'iedit author-' . ( get_current_user_id() == $post->post_author ? 'self' : 'other' );
$lock_holder = wp_check_post_lock( $post->ID );
if ( $lock_holder ) {

View File

@ -268,7 +268,6 @@ class WP_Terms_List_Table extends WP_List_Table {
/**
* @global string $taxonomy
* @staticvar string $row_class
* @param object $tag
* @param int $level
*/
@ -276,12 +275,9 @@ class WP_Terms_List_Table extends WP_List_Table {
global $taxonomy;
$tag = sanitize_term( $tag, $taxonomy );
static $row_class = '';
$row_class = ( $row_class == '' ? ' class="alternate"' : '' );
$this->level = $level;
echo '<tr id="tag-' . $tag->term_id . '"' . $row_class . '>';
echo '<tr id="tag-' . $tag->term_id . '">';
$this->single_row_columns( $tag );
echo '</tr>';
}

View File

@ -306,7 +306,6 @@ class WP_Users_List_Table extends WP_List_Table {
$editable_roles = array_keys( get_editable_roles() );
$style = '';
foreach ( $this->items as $userid => $user_object ) {
if ( count( $user_object->roles ) <= 1 ) {
$role = reset( $user_object->roles );
@ -319,8 +318,7 @@ class WP_Users_List_Table extends WP_List_Table {
if ( is_multisite() && empty( $user_object->allcaps ) )
continue;
$style = ( ' class="alternate"' == $style ) ? '' : ' class="alternate"';
echo "\n\t" . $this->single_row( $user_object, $style, $role, isset( $post_counts ) ? $post_counts[ $userid ] : 0 );
echo "\n\t" . $this->single_row( $user_object, $style = '', $role, isset( $post_counts ) ? $post_counts[ $userid ] : 0 );
}
}
@ -328,11 +326,11 @@ class WP_Users_List_Table extends WP_List_Table {
* Generate HTML for a single row on the users.php admin panel.
*
* @since 3.1.0
* @since 4.2.0 `$style` argument was deprecated.
* @access public
*
* @param object $user_object The current user object.
* @param string $style Optional. Style attributes added to the `<tr>` element.
* Must be sanitized. Default empty.
* @param string $style Deprecated. Not used.
* @param string $role Optional. Key for the $wp_roles array. Default empty.
* @param int $numposts Optional. Post count to display for this user. Defaults
* to zero, as in, a new user has made zero posts.
@ -395,7 +393,7 @@ class WP_Users_List_Table extends WP_List_Table {
$role_name = isset( $wp_roles->role_names[$role] ) ? translate_user_role( $wp_roles->role_names[$role] ) : __( 'None' );
$avatar = get_avatar( $user_object->ID, 32 );
$r = "<tr id='user-$user_object->ID'$style>";
$r = "<tr id='user-$user_object->ID'>";
list( $columns, $hidden ) = $this->get_column_info();

View File

@ -589,10 +589,6 @@ function _list_meta_row( $entry, &$count ) {
$r = '';
++ $count;
if ( $count % 2 )
$style = 'alternate';
else
$style = '';
if ( is_serialized( $entry['meta_value'] ) ) {
if ( is_serialized_string( $entry['meta_value'] ) ) {
@ -611,7 +607,7 @@ function _list_meta_row( $entry, &$count ) {
$delete_nonce = wp_create_nonce( 'delete-meta_' . $entry['meta_id'] );
$r .= "\n\t<tr id='meta-{$entry['meta_id']}' class='$style'>";
$r .= "\n\t<tr id='meta-{$entry['meta_id']}'>";
$r .= "\n\t\t<td class='left'><label class='screen-reader-text' for='meta-{$entry['meta_id']}-key'>" . __( 'Key' ) . "</label><input name='meta[{$entry['meta_id']}][key]' id='meta-{$entry['meta_id']}-key' type='text' size='20' value='{$entry['meta_key']}' />";
$r .= "\n\t\t<div class='submit'>";

View File

@ -82,7 +82,8 @@ inlineEditPost = {
this.revert();
$('#bulk-edit td').attr('colspan', $('.widefat:first thead th:visible').length);
$('table.widefat tbody').prepend( $('#bulk-edit') );
// Insert the editor at the top of the table with an empty row above to maintain zebra striping.
$('table.widefat tbody').prepend( $('#bulk-edit') ).prepend('<tr class="hidden"></tr>');
$('#bulk-edit').addClass('inline-editor').show();
$( 'tbody th.check-column input[type="checkbox"]' ).each( function() {
@ -128,14 +129,11 @@ inlineEditPost = {
fields.push('post_parent', 'page_template');
}
// add the new blank row
// add the new edit row with an extra blank row underneath to maintain zebra striping.
editRow = $('#inline-edit').clone(true);
$('td', editRow).attr('colspan', $('.widefat:first thead th:visible').length);
if ( $( t.what + id ).hasClass( 'alternate' ) ) {
$(editRow).addClass('alternate');
}
$(t.what+id).hide().after(editRow);
$(t.what+id).hide().before(editRow).before('<tr class="hidden"></tr>');
// populate the data
rowData = $('#inline_'+id);
@ -265,7 +263,7 @@ inlineEditPost = {
if (r) {
if ( -1 !== r.indexOf( '<tr' ) ) {
$(inlineEditPost.what+id).remove();
$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
$('#edit-'+id).before(r).remove();
$(inlineEditPost.what+id).hide().fadeIn();
} else {
@ -275,10 +273,6 @@ inlineEditPost = {
} else {
$('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
}
if ( $('#post-'+id).prev().hasClass('alternate') ) {
$('#post-'+id).removeClass('alternate');
}
},
'html');
return false;
@ -291,11 +285,11 @@ inlineEditPost = {
$('table.widefat .spinner').hide();
if ( 'bulk-edit' === id ) {
$('table.widefat #bulk-edit').removeClass('inline-editor').hide();
$('table.widefat #bulk-edit').removeClass('inline-editor').hide().siblings('tr.hidden').remove();
$('#bulk-titles').html('');
$('#inlineedit').append( $('#bulk-edit') );
} else {
$('#'+id).remove();
$('#'+id).siblings('tr.hidden').addBack().remove();
id = id.substr( id.lastIndexOf('-') + 1 );
$(this.what+id).show();
}

File diff suppressed because one or more lines are too long

View File

@ -56,11 +56,7 @@ inlineEditTax = {
editRow = $('#inline-edit').clone(true), rowData = $('#inline_'+id);
$('td', editRow).attr('colspan', $('.widefat:first thead th:visible').length);
if ( $( t.what + id ).hasClass( 'alternate' ) ) {
$(editRow).addClass('alternate');
}
$(t.what+id).hide().after(editRow);
$(t.what+id).hide().before(editRow).before('<tr class="hidden"></tr>');
$(':input[name="name"]', editRow).val( $('.name', rowData).text() );
$(':input[name="slug"]', editRow).val( $('.slug', rowData).text() );
@ -98,7 +94,7 @@ inlineEditTax = {
if (r) {
if ( -1 !== r.indexOf( '<tr' ) ) {
$(inlineEditTax.what+id).remove();
$(inlineEditTax.what+id).siblings('tr.hidden').addBack().remove();
new_id = $(r).attr('id');
$('#edit-'+id).before(r).remove();
@ -110,10 +106,6 @@ inlineEditTax = {
} else {
$('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
}
if ( $( row ).prev( 'tr' ).hasClass( 'alternate' ) ) {
$(row).removeClass('alternate');
}
}
);
return false;
@ -124,7 +116,7 @@ inlineEditTax = {
if ( id ) {
$('table.widefat .spinner').hide();
$('#'+id).remove();
$('#'+id).siblings('tr.hidden').addBack().remove();
id = id.substr( id.lastIndexOf('-') + 1 );
$(this.what+id).show();
}

View File

@ -1 +1 @@
var inlineEditTax;!function(a){inlineEditTax={init:function(){var b=this,c=a("#inline-edit");b.type=a("#the-list").attr("data-wp-lists").substr(5),b.what="#"+b.type+"-",a("#the-list").on("click","a.editinline",function(){return inlineEditTax.edit(this),!1}),c.keyup(function(a){return 27===a.which?inlineEditTax.revert():void 0}),a("a.cancel",c).click(function(){return inlineEditTax.revert()}),a("a.save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){return 13===a.which?inlineEditTax.save(this):void 0}),a('#posts-filter input[type="submit"]').mousedown(function(){b.revert()})},toggle:function(b){var c=this;"none"===a(c.what+c.getId(b)).css("display")?c.revert():c.edit(b)},edit:function(b){var c,d,e=this;return e.revert(),"object"==typeof b&&(b=e.getId(b)),c=a("#inline-edit").clone(!0),d=a("#inline_"+b),a("td",c).attr("colspan",a(".widefat:first thead th:visible").length),a(e.what+b).hasClass("alternate")&&a(c).addClass("alternate"),a(e.what+b).hide().after(c),a(':input[name="name"]',c).val(a(".name",d).text()),a(':input[name="slug"]',c).val(a(".slug",d).text()),a(c).attr("id","edit-"+b).addClass("inline-editor").show(),a(".ptitle",c).eq(0).focus(),!1},save:function(b){var c,d,e=a('input[name="taxonomy"]').val()||"";return"object"==typeof b&&(b=this.getId(b)),a("table.widefat .spinner").show(),c={action:"inline-save-tax",tax_type:this.type,tax_ID:b,taxonomy:e},d=a("#edit-"+b).find(":input").serialize(),c=d+"&"+a.param(c),a.post(ajaxurl,c,function(c){var d,e;a("table.widefat .spinner").hide(),c?-1!==c.indexOf("<tr")?(a(inlineEditTax.what+b).remove(),e=a(c).attr("id"),a("#edit-"+b).before(c).remove(),d=a(e?"#"+e:inlineEditTax.what+b),d.hide().fadeIn()):a("#edit-"+b+" .inline-edit-save .error").html(c).show():a("#edit-"+b+" .inline-edit-save .error").html(inlineEditL10n.error).show(),a(d).prev("tr").hasClass("alternate")&&a(d).removeClass("alternate")}),!1},revert:function(){var b=a("table.widefat tr.inline-editor").attr("id");return b&&(a("table.widefat .spinner").hide(),a("#"+b).remove(),b=b.substr(b.lastIndexOf("-")+1),a(this.what+b).show()),!1},getId:function(b){var c="TR"===b.tagName?b.id:a(b).parents("tr").attr("id"),d=c.split("-");return d[d.length-1]}},a(document).ready(function(){inlineEditTax.init()})}(jQuery);
var inlineEditTax;!function(a){inlineEditTax={init:function(){var b=this,c=a("#inline-edit");b.type=a("#the-list").attr("data-wp-lists").substr(5),b.what="#"+b.type+"-",a("#the-list").on("click","a.editinline",function(){return inlineEditTax.edit(this),!1}),c.keyup(function(a){return 27===a.which?inlineEditTax.revert():void 0}),a("a.cancel",c).click(function(){return inlineEditTax.revert()}),a("a.save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){return 13===a.which?inlineEditTax.save(this):void 0}),a('#posts-filter input[type="submit"]').mousedown(function(){b.revert()})},toggle:function(b){var c=this;"none"===a(c.what+c.getId(b)).css("display")?c.revert():c.edit(b)},edit:function(b){var c,d,e=this;return e.revert(),"object"==typeof b&&(b=e.getId(b)),c=a("#inline-edit").clone(!0),d=a("#inline_"+b),a("td",c).attr("colspan",a(".widefat:first thead th:visible").length),a(e.what+b).hide().before(c).before('<tr class="hidden"></tr>'),a(':input[name="name"]',c).val(a(".name",d).text()),a(':input[name="slug"]',c).val(a(".slug",d).text()),a(c).attr("id","edit-"+b).addClass("inline-editor").show(),a(".ptitle",c).eq(0).focus(),!1},save:function(b){var c,d,e=a('input[name="taxonomy"]').val()||"";return"object"==typeof b&&(b=this.getId(b)),a("table.widefat .spinner").show(),c={action:"inline-save-tax",tax_type:this.type,tax_ID:b,taxonomy:e},d=a("#edit-"+b).find(":input").serialize(),c=d+"&"+a.param(c),a.post(ajaxurl,c,function(c){var d,e;a("table.widefat .spinner").hide(),c?-1!==c.indexOf("<tr")?(a(inlineEditTax.what+b).siblings("tr.hidden").addBack().remove(),e=a(c).attr("id"),a("#edit-"+b).before(c).remove(),d=a(e?"#"+e:inlineEditTax.what+b),d.hide().fadeIn()):a("#edit-"+b+" .inline-edit-save .error").html(c).show():a("#edit-"+b+" .inline-edit-save .error").html(inlineEditL10n.error).show()}),!1},revert:function(){var b=a("table.widefat tr.inline-editor").attr("id");return b&&(a("table.widefat .spinner").hide(),a("#"+b).siblings("tr.hidden").addBack().remove(),b=b.substr(b.lastIndexOf("-")+1),a(this.what+b).show()),!1},getId:function(b){var c="TR"===b.tagName?b.id:a(b).parents("tr").attr("id"),d=c.split("-");return d[d.length-1]}},a(document).ready(function(){inlineEditTax.init()})}(jQuery);

View File

@ -75,7 +75,7 @@ else :
do_action( 'myblogs_allblogs_options' );
?>
<br clear="all" />
<table class="widefat fixed">
<table class="widefat fixed striped">
<?php
/**
* Enable the Global Settings section on the My Sites screen.
@ -109,10 +109,8 @@ else :
$split = $split + $cols;
}
$c = '';
foreach ( $rows as $row ) {
$c = $c == 'alternate' ? '' : 'alternate';
echo "<tr class='$c'>";
echo "<tr>";
$i = 0;
foreach ( $row as $user_blog ) {
$s = $i == 3 ? '' : 'border-right: 1px solid #ccc;';

View File

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