WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
07/01/2015 01:30:23 AM (11 years ago)
Author:
helen
Message:

List tables: A better responsive view.

Instead of truncating columns, the data that's already in the markup can now be toggled into view. Only seems appropriate to celebrate four years of contributing by finally doing the first thing I ever mocked up.

Known issues / concerns:

  • Custom list tables that don't define a primary column will show nothing at all. These are not extremely common, as WP_List_Table isn't really recommended for plugin consumption, but it happens. We need to come up with some kind of fallback.
  • Some visual elements, particularly whitespace, could use refining.
  • Needs a11y review.
  • Touch performance on iOS feels sluggish - is there anything we can do about that?
  • Would this be better accordion-style (only one expanded at a time)?
  • Is wp_strip_all_tags() good enough for column titles that have HTML in them? It's essentially a workaround for the fact that core's comments column does that for the icon, which maybe it shouldn't. Perhaps worth another ticket, as a markup change would be fairly independent.
  • Visual hierarchy is not great when expanded (also worthy of another ticket).
  • Quick edit now becomes noticeably more annoying to cancel out of, as you have to scroll all the way down and you lose your position from before it was opened. Again, worthy of another ticket.

props Michael Arestad, helen.
see #32395.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r32800 r33016  
    396396
    397397?>
    398 <table class="<?php echo implode( ' ', $this->get_table_classes() ); ?>">
     398<table class="wp-list-table <?php echo implode( ' ', $this->get_table_classes() ); ?>">
    399399    <thead>
    400400    <tr>
    … …  
    467467        }
    468468
     469        if ( $primary !== $column_name ) {
     470            return '';
     471        }
     472
    469473        $post = get_post();
    470474
    … …  
    473477        $out = '';
    474478
    475         if ( $primary === $column_name ) {
    476             $del_nonce = esc_html( '_wpnonce=' . wp_create_nonce( "delete-comment_$comment->comment_ID" ) );
    477             $approve_nonce = esc_html( '_wpnonce=' . wp_create_nonce( "approve-comment_$comment->comment_ID" ) );
    478 
    479             $url = "comment.php?c=$comment->comment_ID";
    480 
    481             $approve_url = esc_url( $url . "&action=approvecomment&$approve_nonce" );
    482             $unapprove_url = esc_url( $url . "&action=unapprovecomment&$approve_nonce" );
    483             $spam_url = esc_url( $url . "&action=spamcomment&$del_nonce" );
    484             $unspam_url = esc_url( $url . "&action=unspamcomment&$del_nonce" );
    485             $trash_url = esc_url( $url . "&action=trashcomment&$del_nonce" );
    486             $untrash_url = esc_url( $url . "&action=untrashcomment&$del_nonce" );
    487             $delete_url = esc_url( $url . "&action=deletecomment&$del_nonce" );
    488 
    489             // Preorder it: Approve | Reply | Quick Edit | Edit | Spam | Trash.
    490             $actions = array(
    491                 'approve' => '', 'unapprove' => '',
    492                 'reply' => '',
    493                 'quickedit' => '',
    494                 'edit' => '',
    495                 'spam' => '', 'unspam' => '',
    496                 'trash' => '', 'untrash' => '', 'delete' => ''
    497             );
    498 
    499             // Not looking at all comments.
    500             if ( $comment_status && 'all' != $comment_status ) {
    501                 if ( 'approved' == $the_comment_status ) {
    502                     $actions['unapprove'] = "<a href='$unapprove_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:e7e7d3:action=dim-comment&amp;new=unapproved' class='vim-u vim-destructive' title='" . esc_attr__( 'Unapprove this comment' ) . "'>" . __( 'Unapprove' ) . '</a>';
    503                 } elseif ( 'unapproved' == $the_comment_status ) {
    504                     $actions['approve'] = "<a href='$approve_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:e7e7d3:action=dim-comment&amp;new=approved' class='vim-a vim-destructive' title='" . esc_attr__( 'Approve this comment' ) . "'>" . __( 'Approve' ) . '</a>';
    505                 }
    506             } else {
    507                 $actions['approve'] = "<a href='$approve_url' data-wp-lists='dim:the-comment-list:comment-$comment->comment_ID:unapproved:e7e7d3:e7e7d3:new=approved' class='vim-a' title='" . esc_attr__( 'Approve this comment' ) . "'>" . __( 'Approve' ) . '</a>';
    508                 $actions['unapprove'] = "<a href='$unapprove_url' data-wp-lists='dim:the-comment-list:comment-$comment->comment_ID:unapproved:e7e7d3:e7e7d3:new=unapproved' class='vim-u' title='" . esc_attr__( 'Unapprove this comment' ) . "'>" . __( 'Unapprove' ) . '</a>';
     479        $del_nonce = esc_html( '_wpnonce=' . wp_create_nonce( "delete-comment_$comment->comment_ID" ) );
     480        $approve_nonce = esc_html( '_wpnonce=' . wp_create_nonce( "approve-comment_$comment->comment_ID" ) );
     481
     482        $url = "comment.php?c=$comment->comment_ID";
     483
     484        $approve_url = esc_url( $url . "&action=approvecomment&$approve_nonce" );
     485        $unapprove_url = esc_url( $url . "&action=unapprovecomment&$approve_nonce" );
     486        $spam_url = esc_url( $url . "&action=spamcomment&$del_nonce" );
     487        $unspam_url = esc_url( $url . "&action=unspamcomment&$del_nonce" );
     488        $trash_url = esc_url( $url . "&action=trashcomment&$del_nonce" );
     489        $untrash_url = esc_url( $url . "&action=untrashcomment&$del_nonce" );
     490        $delete_url = esc_url( $url . "&action=deletecomment&$del_nonce" );
     491
     492        // Preorder it: Approve | Reply | Quick Edit | Edit | Spam | Trash.
     493        $actions = array(
     494            'approve' => '', 'unapprove' => '',
     495            'reply' => '',
     496            'quickedit' => '',
     497            'edit' => '',
     498            'spam' => '', 'unspam' => '',
     499            'trash' => '', 'untrash' => '', 'delete' => ''
     500        );
     501
     502        // Not looking at all comments.
     503        if ( $comment_status && 'all' != $comment_status ) {
     504            if ( 'approved' == $the_comment_status ) {
     505                $actions['unapprove'] = "<a href='$unapprove_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:e7e7d3:action=dim-comment&amp;new=unapproved' class='vim-u vim-destructive' title='" . esc_attr__( 'Unapprove this comment' ) . "'>" . __( 'Unapprove' ) . '</a>';
     506            } elseif ( 'unapproved' == $the_comment_status ) {
     507                $actions['approve'] = "<a href='$approve_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:e7e7d3:action=dim-comment&amp;new=approved' class='vim-a vim-destructive' title='" . esc_attr__( 'Approve this comment' ) . "'>" . __( 'Approve' ) . '</a>';
    509508            }
    510 
    511             if ( 'spam' != $the_comment_status ) {
    512                 $actions['spam'] = "<a href='$spam_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID::spam=1' class='vim-s vim-destructive' title='" . esc_attr__( 'Mark this comment as spam' ) . "'>" . /* translators: mark as spam link */ _x( 'Spam', 'verb' ) . '</a>';
    513             } elseif ( 'spam' == $the_comment_status ) {
    514                 $actions['unspam'] = "<a href='$unspam_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:66cc66:unspam=1' class='vim-z vim-destructive'>" . _x( 'Not Spam', 'comment' ) . '</a>';
     509        } else {
     510            $actions['approve'] = "<a href='$approve_url' data-wp-lists='dim:the-comment-list:comment-$comment->comment_ID:unapproved:e7e7d3:e7e7d3:new=approved' class='vim-a' title='" . esc_attr__( 'Approve this comment' ) . "'>" . __( 'Approve' ) . '</a>';
     511            $actions['unapprove'] = "<a href='$unapprove_url' data-wp-lists='dim:the-comment-list:comment-$comment->comment_ID:unapproved:e7e7d3:e7e7d3:new=unapproved' class='vim-u' title='" . esc_attr__( 'Unapprove this comment' ) . "'>" . __( 'Unapprove' ) . '</a>';
     512        }
     513
     514        if ( 'spam' != $the_comment_status ) {
     515            $actions['spam'] = "<a href='$spam_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID::spam=1' class='vim-s vim-destructive' title='" . esc_attr__( 'Mark this comment as spam' ) . "'>" . /* translators: mark as spam link */ _x( 'Spam', 'verb' ) . '</a>';
     516        } elseif ( 'spam' == $the_comment_status ) {
     517            $actions['unspam'] = "<a href='$unspam_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:66cc66:unspam=1' class='vim-z vim-destructive'>" . _x( 'Not Spam', 'comment' ) . '</a>';
     518        }
     519
     520        if ( 'trash' == $the_comment_status ) {
     521            $actions['untrash'] = "<a href='$untrash_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:66cc66:untrash=1' class='vim-z vim-destructive'>" . __( 'Restore' ) . '</a>';
     522        }
     523
     524        if ( 'spam' == $the_comment_status || 'trash' == $the_comment_status || !EMPTY_TRASH_DAYS ) {
     525            $actions['delete'] = "<a href='$delete_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID::delete=1' class='delete vim-d vim-destructive'>" . __( 'Delete Permanently' ) . '</a>';
     526        } else {
     527            $actions['trash'] = "<a href='$trash_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID::trash=1' class='delete vim-d vim-destructive' title='" . esc_attr__( 'Move this comment to the trash' ) . "'>" . _x( 'Trash', 'verb' ) . '</a>';
     528        }
     529
     530        if ( 'spam' != $the_comment_status && 'trash' != $the_comment_status ) {
     531            $actions['edit'] = "<a href='comment.php?action=editcomment&amp;c={$comment->comment_ID}' title='" . esc_attr__( 'Edit comment' ) . "'>". __( 'Edit' ) . '</a>';
     532
     533            $format = '<a data-comment-id="%d" data-post-id="%d" data-action="%s" class="%s" title="%s" href="#">%s</a>';
     534
     535            $actions['quickedit'] = sprintf( $format, $comment->comment_ID, $post->ID, 'edit', 'vim-q comment-inline',esc_attr__( 'Edit this item inline' ), __( 'Quick&nbsp;Edit' ) );
     536
     537            $actions['reply'] = sprintf( $format, $comment->comment_ID, $post->ID, 'replyto', 'vim-r comment-inline', esc_attr__( 'Reply to this comment' ), __( 'Reply' ) );
     538        }
     539
     540        /** This filter is documented in wp-admin/includes/dashboard.php */
     541        $actions = apply_filters( 'comment_row_actions', array_filter( $actions ), $comment );
     542
     543        $i = 0;
     544        $out .= '<div class="row-actions">';
     545        foreach ( $actions as $action => $link ) {
     546            ++$i;
     547            ( ( ( 'approve' == $action || 'unapprove' == $action ) && 2 === $i ) || 1 === $i ) ? $sep = '' : $sep = ' | ';
     548
     549            // Reply and quickedit need a hide-if-no-js span when not added with ajax
     550            if ( ( 'reply' == $action || 'quickedit' == $action ) && ! defined('DOING_AJAX') )
     551                $action .= ' hide-if-no-js';
     552            elseif ( ( $action == 'untrash' && $the_comment_status == 'trash' ) || ( $action == 'unspam' && $the_comment_status == 'spam' ) ) {
     553                if ( '1' == get_comment_meta( $comment->comment_ID, '_wp_trash_meta_status', true ) )
     554                    $action .= ' approve';
     555                else
     556                    $action .= ' unapprove';
    515557            }
    516558
    517             if ( 'trash' == $the_comment_status ) {
    518                 $actions['untrash'] = "<a href='$untrash_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID:66cc66:untrash=1' class='vim-z vim-destructive'>" . __( 'Restore' ) . '</a>';
    519             }
    520 
    521             if ( 'spam' == $the_comment_status || 'trash' == $the_comment_status || !EMPTY_TRASH_DAYS ) {
    522                 $actions['delete'] = "<a href='$delete_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID::delete=1' class='delete vim-d vim-destructive'>" . __( 'Delete Permanently' ) . '</a>';
    523             } else {
    524                 $actions['trash'] = "<a href='$trash_url' data-wp-lists='delete:the-comment-list:comment-$comment->comment_ID::trash=1' class='delete vim-d vim-destructive' title='" . esc_attr__( 'Move this comment to the trash' ) . "'>" . _x( 'Trash', 'verb' ) . '</a>';
    525             }
    526 
    527             if ( 'spam' != $the_comment_status && 'trash' != $the_comment_status ) {
    528                 $actions['edit'] = "<a href='comment.php?action=editcomment&amp;c={$comment->comment_ID}' title='" . esc_attr__( 'Edit comment' ) . "'>". __( 'Edit' ) . '</a>';
    529 
    530                 $format = '<a data-comment-id="%d" data-post-id="%d" data-action="%s" class="%s" title="%s" href="#">%s</a>';
    531 
    532                 $actions['quickedit'] = sprintf( $format, $comment->comment_ID, $post->ID, 'edit', 'vim-q comment-inline',esc_attr__( 'Edit this item inline' ), __( 'Quick&nbsp;Edit' ) );
    533 
    534                 $actions['reply'] = sprintf( $format, $comment->comment_ID, $post->ID, 'replyto', 'vim-r comment-inline', esc_attr__( 'Reply to this comment' ), __( 'Reply' ) );
    535             }
    536 
    537             /** This filter is documented in wp-admin/includes/dashboard.php */
    538             $actions = apply_filters( 'comment_row_actions', array_filter( $actions ), $comment );
    539 
    540             $i = 0;
    541             $out .= '<div class="row-actions">';
    542             foreach ( $actions as $action => $link ) {
    543                 ++$i;
    544                 ( ( ( 'approve' == $action || 'unapprove' == $action ) && 2 === $i ) || 1 === $i ) ? $sep = '' : $sep = ' | ';
    545 
    546                 // Reply and quickedit need a hide-if-no-js span when not added with ajax
    547                 if ( ( 'reply' == $action || 'quickedit' == $action ) && ! defined('DOING_AJAX') )
    548                     $action .= ' hide-if-no-js';
    549                 elseif ( ( $action == 'untrash' && $the_comment_status == 'trash' ) || ( $action == 'unspam' && $the_comment_status == 'spam' ) ) {
    550                     if ( '1' == get_comment_meta( $comment->comment_ID, '_wp_trash_meta_status', true ) )
    551                         $action .= ' approve';
    552                     else
    553                         $action .= ' unapprove';
    554                 }
    555 
    556                 $out .= "<span class='$action'>$sep$link</span>";
    557             }
    558             $out .= '</div>';
    559         }
     559            $out .= "<span class='$action'>$sep$link</span>";
     560        }
     561        $out .= '</div>';
     562
     563        $out .= '<button type="button" class="toggle-row"><span class="screen-reader-text">' . __( 'Show more details' ) . '</span></button>';
    560564
    561565        return $out;
Note: See TracChangeset for help on using the changeset viewer.