WordPress.org
Get WordPress

Make WordPress Core

Changeset 33016


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.

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.