WordPress.org
Get WordPress

Make WordPress Core

Changeset 33016


Ignore:
Timestamp:
07/01/2015 01:30:23 AM (9 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.

Location:
trunk/src/wp-admin
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/list-tables.css

    r32984 r33016  
    429429}
    430430
     431.wp-list-table .toggle-row {
     432    position: absolute;
     433    right: 8px;
     434    top: 10px;
     435    display: none;
     436    padding: 0;
     437    width: 40px;
     438    height: 40px;
     439    border: none;
     440    outline: none;
     441    background: transparent;
     442}
     443
     444.wp-list-table .toggle-row:hover {
     445    cursor: pointer;
     446}
     447
     448.wp-list-table .toggle-row:focus {
     449    -webkit-box-shadow:
     450        0 0 0 1px #5b9dd9,
     451        0 0 2px 1px rgba(30, 140, 190, .8);
     452    box-shadow:
     453        0 0 0 1px #5b9dd9,
     454        0 0 2px 1px rgba(30, 140, 190, .8);
     455}
     456
     457.ie8 .wp-list-table .toggle-row:focus {
     458    outline: #5b9dd9 solid 1px;
     459}
     460
     461.wp-list-table .toggle-row:active {
     462    -webkit-box-shadow: none;
     463    box-shadow: none;
     464}
     465
     466.wp-list-table .toggle-row:before {
     467    position: absolute;
     468    top: 0;
     469    left: 10px;
     470    display: block;
     471    padding: 0;
     472    color: #666;
     473    content: '\f140';
     474    font: normal 20px/1 'dashicons';
     475    line-height: 10px;
     476    -webkit-font-smoothing: antialiased;
     477    -moz-osx-font-smoothing: grayscale;
     478    speak: none;
     479}
     480
     481.wp-list-table .is-expanded .toggle-row:before {
     482    content: '\f142';
     483}
     484
    431485tr.wp-locked .locked-indicator {
    432486    margin-left: 6px;
    … …  
    13041358}
    13051359
    1306 .plugins .plugin-update-tr .plugin-update {
     1360.wp-list-table.plugins tbody tr.plugin-update-tr td.plugin-update {
     1361    overflow: hidden; /* clearfix */
    13071362    padding: 0;
    13081363    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
    … …  
    16771732    }
    16781733
    1679     /* Columns to hide */
    1680     .fixed .column-date,
    1681     .fixed .column-author,
    1682     .column-categories,
    1683     .column-tags,
    1684     .tags .column-description,
    1685     .media .column-parent,
    1686     .media .column-comments,
    1687     .users .column-email,
    1688     .users .column-name,
    1689     .sites .column-registered,
    1690     .sites .column-users {
     1734    .wp-list-table th:not(.column-primary),
     1735    .wp-list-table th:not(.column-primary),
     1736    .wp-list-table tr:not(.inline-edit-row) td:not(.column-primary):not(.check-column) {
    16911737        display: none;
     1738    }
     1739
     1740    /* Checkboxes need to show */
     1741    .wp-list-table tr th.check-column {
     1742        display: table-cell;
     1743        width: 35px;
     1744    }
     1745
     1746    .wp-list-table .toggle-row {
     1747        display: block;
     1748    }
     1749
     1750    .wp-list-table tr:not(.inline-edit-row) td:not(.check-column) {
     1751        position: relative;
     1752        clear: both;
     1753        display: block;
     1754        width: auto !important; /* needs to override some columns that are more specifically targeted */
     1755    }
     1756
     1757    .wp-list-table td.column-primary {
     1758        padding-right: 50px; /* space for toggle button */
     1759    }
     1760
     1761    .wp-list-table tr:not(.inline-edit-row) td:not(.column-primary):not(.check-column) {
     1762        padding: 3px 8px 3px 35%;
     1763    }
     1764
     1765    .wp-list-table tr:not(.inline-edit-row) td:not(.column-primary)::before {
     1766        position: absolute;
     1767        left: 10px; /* match padding of regular table cell */
     1768        display: block;
     1769        overflow: hidden;
     1770        width: 32%; /* leave a little space for a gutter */
     1771        content: attr(data-colname);
     1772        white-space: nowrap;
     1773        text-overflow: ellipsis;
     1774    }
     1775
     1776    .wp-list-table .is-expanded td:not(.hidden) {
     1777        display: block !important;
     1778        overflow: hidden; /* clearfix */
     1779    }
     1780
     1781    /* Special cases */
     1782    .widefat .num,
     1783    .column-posts {
     1784        text-align: left;
     1785    }
     1786
     1787    #comments-form .fixed .column-author {
     1788        display: none !important;
    16921789    }
    16931790
    … …  
    16961793    }
    16971794
    1698     /* Posts */
    1699     .column-title {
    1700         width: 85%;
    1701     }
    1702 
    1703     .fixed .column-comments, .widefat .check-column {
    1704         width: 35px
     1795    #the-comment-list .is-expanded td {
     1796        -webkit-box-shadow: none;
     1797        box-shadow: none;
     1798    }
     1799
     1800    #the-comment-list .is-expanded td:last-child {
     1801        -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     1802        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    17051803    }
    17061804
    … …  
    17111809    .widefat * {
    17121810        word-wrap: normal;
    1713     }
    1714 
    1715     /* Media */
    1716     .media .column-title {
    1717         width: auto;
    17181811    }
    17191812
    … …  
    17931886    }
    17941887
    1795     /* Taxonomies */
    1796     .tags .column-posts {
    1797         width: 74px;
    1798     }
    1799 
    1800     .tags .column-slug {
    1801         width: 30%;
    1802     }
    1803 
    1804     /* Comments */
    1805     .comments .column-response {
    1806         width: 35%;
    1807     }
    1808 
    1809     /* Users */
    1810     .users .column-role {
    1811         width: 35%;
    1812     }
    1813 
    1814     /* Network admin sites */
    1815     .sites .column-blogname {
    1816         width: 55%;
    1817     }
    1818 
    18191888    /* Updates */
    18201889    #wpbody-content #update-themes-table .plugin-title {
    … …  
    18321901
    18331902    /* Plugin/Theme Management Page */
    1834     .wp-list-table.plugins {
    1835         position: relative;
    1836         margin-bottom: 15px;
    1837     }
    1838 
    1839     #wpbody-content .wp-list-table.plugins thead .column-description,
    1840     #wpbody-content .wp-list-table.plugins tfoot .column-description,
    1841     .wp-list-table.plugins th#description {
     1903    .wp-list-table.plugins .toggle-row {
    18421904        display: none;
    18431905    }
    18441906
    1845     #wpbody-content .wp-list-table.plugins,
    1846     #wpbody-content .wp-list-table.plugins thead,
    1847     #wpbody-content .wp-list-table.plugins tbody,
    1848     #wpbody-content .wp-list-table.plugins tr,
    1849     #wpbody-content .wp-list-table.plugins .column-description,
    1850     #wpbody-content .wp-list-table.plugins .plugin-title,
    1851     #wpbody-content .wp-list-table.plugins .theme-title,
    1852     #wpbody-content .wp-list-table.plugins .plugin-update,
    1853     #wpbody-content .wp-list-table.plugins .manage-column.column-name {
     1907    #wpbody-content .wp-list-table.plugins td {
    18541908        display: block;
    18551909        width: auto;
    1856     }
    1857 
    1858     .active, .inactive {
    1859         padding-top: 0;
     1910        padding: 10px 9px; /* reset from other list tables that have a label at this width */
     1911    }
     1912
     1913    #wpbody-content .wp-list-table.plugins .column-description {
     1914        padding-top: 2px;
    18601915    }
    18611916
    … …  
    18661921    }
    18671922
    1868     .plugins tr.active + tr.inactive th.check-column,
    18691923    .plugins tr.active + tr.inactive td,
    18701924    .wp-list-table.plugins .plugin-title,
    1871     .wp-list-table.plugins .theme-title,
    1872     .wp-list-table.plugins tbody th {
     1925    .wp-list-table.plugins .theme-title {
    18731926        -webkit-box-shadow: none;
    18741927        box-shadow: none;
    … …  
    18791932    }
    18801933
    1881     .plugins tr.active + tr.inactive td.column-description {
     1934    .plugins tr.active + tr.inactive th.check-column,
     1935    .plugins tr.active + tr.inactive td.column-description,
     1936    .plugins .plugin-update-tr:before {
    18821937        -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    18831938        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    … …  
    18891944    }
    18901945
    1891     .wp-list-table.plugins .column-description {
    1892         padding-top: 0;
    1893     }
    1894 
    1895     .wp-list-table.plugins .manage-column.column-name,
    1896     .wp-list-table.plugins .column-description,
    1897     .wp-list-table.plugins .plugin-title,
    1898     .wp-list-table.plugins .theme-title {
    1899         padding-right: 12px;
    1900         padding-left: 46px;
    1901     }
    1902 
    1903     .wp-list-table.plugins .manage-column.column-name {
    1904         padding-top: 11px;
    1905         padding-bottom: 12px;
    1906     }
    1907 
    1908     .wp-list-table.plugins .manage-column.column-name.sortable {
    1909         padding: 4px 12px 4px 36px;
    1910     }
    1911 
    1912     .wp-list-table.plugins tr {
    1913         position: relative;
    1914     }
    1915 
    1916     .wp-list-table.plugins th.check-column,
    1917     .wp-list-table.plugins thead td.check-column,
    1918     .wp-list-table.plugins tfoot td.check-column,
    1919     .wp-list-table.plugins tr.update th.check-column {
    1920         position: absolute;
    1921         height: auto;
    1922         top: 0;
    1923         bottom: 0;
    1924         left: 0;
    1925         padding-left: 2px;
    1926         padding-top: 18px;
    1927     }
    1928 
    1929     .wp-list-table.plugins thead td.check-column,
    1930     .wp-list-table.plugins tfoot td.check-column {
    1931         padding-left: 3px;
    1932         padding-top: 11px;
    1933         background: none;
    1934     }
    1935 
    1936     .plugins tbody th.check-column input[type="checkbox"] {
    1937         margin-top: -3px;
    1938         margin-left: 9px;
    1939     }
    1940 
    1941     .plugins tbody .active th.check-column input[type="checkbox"],
    1942     .plugins tbody .active.update th.check-column input[type="checkbox"] {
    1943         margin-left: 5px;
    1944     }
    1945 
    1946     .wp-list-table.plugins thead .check-column input,
    1947     .wp-list-table.plugins tfoot .check-column input {
    1948         margin-top: -2px;
    1949         margin-left: 8px;
    1950     }
    1951 
    1952     .wp-list-table.plugins .active th.check-column {
    1953         background: none;
     1946    /* mimic the checkbox th */
     1947    .plugins .plugin-update-tr:before {
     1948        content: '';
     1949        display: table-cell;
     1950    }
     1951
     1952    .plugins .active.update + .plugin-update-tr:before {
     1953        border-left: 4px solid #d54e21;
     1954        background-color: #fef7f1;
     1955    }
     1956
     1957    .plugins .plugin-update-tr .plugin-update {
     1958        border-left: none;
     1959    }
     1960
     1961    .plugin-update-tr .update-message {
     1962        margin-left: 0;
    19541963    }
    19551964
    … …  
    19922001    }
    19932002}
    1994 
    1995 /* Smartphone */
    1996 @media screen and (max-width: 600px) {
    1997     /* Remove slug column from taxonomy list page
    1998        and role column from users list page */
    1999     .tags .column-slug,
    2000     .users .column-role {
    2001         display: none;
    2002     }
    2003 }

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

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

    r32984 r33016  
    498498        $out .= '</div>';
    499499
     500        $out .= '<button type="button" class="toggle-row"><span class="screen-reader-text">' . __( 'Show more details' ) . '</span></button>';
     501
    500502        return $out;
    501503    }
    … …  
    944946     */
    945947    public function print_column_headers( $with_id = true ) {
    946         list( $columns, $hidden, $sortable ) = $this->get_column_info();
     948        list( $columns, $hidden, $sortable, $primary ) = $this->get_column_info();
    947949
    948950        $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
    … …  
    977979            elseif ( in_array( $column_key, array( 'posts', 'comments', 'links' ) ) )
    978980                $class[] = 'num';
     981
     982            if ( $column_key === $primary ) {
     983                $class[] = 'column-primary';
     984            }
    979985
    980986            if ( isset( $sortable[$column_key] ) ) {
    … …  
    11641170            }
    11651171
    1166             $attributes = "class='$classes'";
     1172            // Comments column uses HTML in the display name with screen reader text.
     1173            // Instead of using esc_attr(), we strip tags to get closer to a user-friendly string.
     1174            $data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
     1175
     1176            $attributes = "class='$classes' $data";
    11671177
    11681178            if ( 'cb' == $column_name ) {

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

    r32938 r33016  
    404404            }
    405405
    406             $attributes = "class='$classes'";
     406            $data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
     407
     408            $attributes = "class='$classes' $data";
    407409
    408410            if ( 'cb' === $column_name ) {

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

    r32757 r33016  
    337337            }
    338338
    339             $attributes = "class='$classes'";
     339            $data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
     340
     341            $attributes = "class='$classes' $data";
    340342
    341343            if ( 'cb' === $column_name ) {

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

    r32945 r33016  
    974974            }
    975975
    976             $attributes = "class='$classes'";
     976            // Comments column uses HTML in the display name with screen reader text.
     977            // Instead of using esc_attr(), we strip tags to get closer to a user-friendly string.
     978            $data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
     979
     980            $attributes = "class='$classes' $data";
    977981
    978982            if ( 'cb' === $column_name ) {

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

    r32724 r33016  
    420420            }
    421421
    422             $attributes = "class='$classes'";
     422            $data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
     423
     424            $attributes = "class='$classes' $data";
    423425
    424426            if ( 'cb' === $column_name ) {

  • trunk/src/wp-admin/js/common.js

    r32974 r33016  
    488488    }, 'td.has-row-actions' );
    489489
     490    // Toggle list table rows on small screens
     491    $( 'tbody' ).on( 'click', '.toggle-row', function() {
     492        $( this ).closest( 'tr' ).toggleClass( 'is-expanded' );
     493    });
     494
    490495    $('#default-password-nag-no').click( function() {
    491496        setUserSetting('default_password_nag', 'hide');

  • trunk/src/wp-admin/js/inline-edit-post.js

    r33015 r33016  
    134134        $( 'td', editRow ).attr( 'colspan', $( 'th:visible, td:visible', '.widefat:first thead' ).length );
    135135
    136         $(t.what+id).hide().after(editRow).after('<tr class="hidden"></tr>');
     136        $(t.what+id).removeClass('is-expanded').hide().after(editRow).after('<tr class="hidden"></tr>');
    137137
    138138        // populate the data
Note: See TracChangeset for help on using the changeset viewer.