From 3e0f839eca1a43745d39311a6e2f13b8173fb7f4 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Fri, 10 Jul 2015 21:43:32 +0000 Subject: [PATCH] List tables: Better accessibility and design for the comments bubble. It is now plain text in the comments list table's "In Response To" column, where it was visually a bit confusing to have the bubble. For other list tables, it now shows a little notification bubble with the number of pending comments. The bubble and notification become plain text in the responsive list table view. It also shows no bubble when there are no comments at all, reducing some of the visual noise. props picard102, afercia, karinchristen. fixes #32152. git-svn-id: https://develop.svn.wordpress.org/trunk@33155 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/list-tables.css | 228 ++++++++++++------ .../includes/class-wp-comments-list-table.php | 18 +- src/wp-admin/includes/class-wp-list-table.php | 38 ++- 3 files changed, 202 insertions(+), 82 deletions(-) diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 4a3dccaa71..eb6692fcd0 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1,77 +1,124 @@ -/* List table styles */ -.post-com-count-wrapper { - min-width: 22px; -} - -.post-com-count { - background: none; - height: 1.3em; - line-height: 1.1em; +.response-links { display: block; - text-decoration: none; - padding: 0 0 6px; - cursor: pointer; - background-position: center -80px; - background-repeat: no-repeat; - color: #fff; + margin-bottom: 1em; } -.post-com-count:after { /* draw bubble connector using CSS! */ - content: ""; +.response-links a { display: block; - width: 0; - height: 0; - margin-left: 8px; - border-top: 5px solid #b4b9be; - border-right: 5px solid transparent; } -.post-com-count span { - font-size: 11px; +.response-links a.comments-edit-item-link { font-weight: 600; - height: 1.4em; - line-height: 1.4em; - min-width: 0.7em; - padding: 0 6px; +} + +.response-links a.comments-view-item-link { + font-size: 12px; +} + +.column-response .post-com-count .screen-reader-text { + position: static; + width: auto; + height: auto; + margin: 0; +} + +.column-response .post-com-count [aria-hidden="true"] { + display: none; +} + +.post-com-count-wrapper strong { + font-weight: 400; +} + +.column-response .post-com-count.post-com-count-pending { + color: #bb2a2a; +} + +.comments-view-item-link { display: inline-block; - -webkit-border-radius: 5px; - border-radius: 5px; - background-color: #b4b9be; - color: #fff; + clear: both; } -.post-com-count:hover { - background-position: center -3px; +.column-comments .post-com-count-wrapper { + white-space: nowrap; + word-wrap: normal; } -.post-com-count:hover span { - background-color: #00a0d2; -} - -.post-com-count:hover:after { - border-top: 5px solid #00a0d2; -} - -strong .post-com-count { - background-position: center -55px; -} - -strong .post-com-count span { - background-color: #0073aa; -} - -strong .post-com-count:after { - border-top: 5px solid #0073aa; +/* comments bubble common */ +.column-comments .post-com-count { + display: inline-block; + vertical-align: top; } .column-response .post-com-count { - float: left; - margin-right: 5px; + display: block; +} + +/* comments bubble approved */ +.column-comments .post-com-count-no-comments, +.column-comments .post-com-count-approved { + margin-top: 5px; +} + +.column-comments .comment-count-no-comments, +.column-comments .comment-count-approved { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: block; + padding: 0 8px; + min-width: 24px; + height: 2em; + -webkit-border-radius: 5px; + border-radius: 5px; + background-color: #72777c; + color: #fff; + font-size: 11px; + line-height: 21px; text-align: center; } -.response-links { - float: left; +.ie8 .column-comments .comment-count-no-comments, +.ie8 .column-comments .comment-count-approved { + min-width: 0; +} + +.column-comments .post-com-count-no-comments:after, +.column-comments .post-com-count-approved:after { + content: ""; + display: block; + margin-left: 8px; + width: 0; + height: 0; + border-top: 5px solid #72777c; + border-right: 5px solid transparent; +} + +.column-comments .post-com-count-approved:hover .comment-count-approved, +.column-comments .post-com-count-approved:focus .comment-count-approved { + background: #0073aa; +} + +.column-comments .post-com-count-approved:hover:after, +.column-comments .post-com-count-approved:focus:after { + border-top-color: #0073aa; +} + +/* comments bubble pending */ +.column-comments .post-com-count-pending { + position: relative; + left: -3px; + padding: 0 5px; + min-width: 7px; + height: 17px; + border: 2px solid #fff; + -webkit-border-radius: 11px; + border-radius: 11px; + background: #ca4a1f; + color: #fff; + font-size: 9px; + line-height: 17px; + text-align: center; } /* comments */ @@ -283,7 +330,7 @@ table.fixed { } .fixed .column-comments { - width: 4em; + width: 5.5em; padding: 8px 0; text-align: left; } @@ -292,9 +339,6 @@ table.fixed { padding-left: 3px; } -.fixed .column-comments a { - float: left; -} td.column-title strong, td.plugin-title strong { @@ -1452,14 +1496,6 @@ tr.active + tr.plugin-update-tr:not(.updated) .plugin-update .update-message { } } -@media screen and ( max-width: 782px ) { - .plugin-card { - margin-left: 0; - margin-right: 0; - width: 100%; - } -} - .plugin-card-top { position: relative; padding: 20px 20px 10px; @@ -1815,6 +1851,56 @@ div.action-links, box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } + /* Show comment bubble as text instead */ + .post-com-count .screen-reader-text { + position: static; + width: auto; + height: auto; + margin: 0; + } + + .column-comments .post-com-count-no-comments:after, + .column-comments .post-com-count-approved:after { + content: none; + } + + .column-comments .post-com-count [aria-hidden="true"] { + display: none; + } + + .column-comments .post-com-count-wrapper { + white-space: normal; + } + + .column-comments .post-com-count-wrapper > a { + display: block; + } + + .column-comments .post-com-count-no-comments, + .column-comments .post-com-count-approved { + margin-top: 0; + margin-right: 0.5em; + } + + .column-comments .post-com-count-pending { + position: static; + height: auto; + min-width: 0; + padding: 0; + border: none; + -webkit-border-radius: 0; + border-radius: 0; + background: none; + color: #bb2a2a; + font-size: inherit; + line-height: inherit; + text-align: left; + } + + .column-comments .post-com-count-pending:hover { + color: #dc3232; + } + .widefat thead .check-column, .widefat tfoot .check-column { padding: 10px 0 10px; } @@ -2020,4 +2106,10 @@ div.action-links, -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); } + + .plugin-card { + margin-left: 0; + margin-right: 0; + width: 100%; + } } diff --git a/src/wp-admin/includes/class-wp-comments-list-table.php b/src/wp-admin/includes/class-wp-comments-list-table.php index 865fdb583c..9922d6ca00 100644 --- a/src/wp-admin/includes/class-wp-comments-list-table.php +++ b/src/wp-admin/includes/class-wp-comments-list-table.php @@ -678,21 +678,23 @@ class WP_Comments_List_Table extends WP_List_Table { } if ( current_user_can( 'edit_post', $post->ID ) ) { - $post_link = ""; + $post_link = ""; $post_link .= esc_html( get_the_title( $post->ID ) ) . ''; } else { $post_link = esc_html( get_the_title( $post->ID ) ); } - echo '
'; - echo $post_link . '
'; + echo '
'; + echo $post_link; + $post_type_object = get_post_type_object( $post->post_type ); + echo "" . $post_type_object->labels->view_item . ''; + if ( 'attachment' == $post->post_type && ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) ) { + echo $thumb; + } + echo '
'; + echo ''; $this->comments_bubble( $post->ID, $pending_comments ); echo ' '; - $post_type_object = get_post_type_object( $post->post_type ); - echo "" . $post_type_object->labels->view_item . ''; - echo '
'; - if ( 'attachment' == $post->post_type && ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) ) - echo $thumb; } /** diff --git a/src/wp-admin/includes/class-wp-list-table.php b/src/wp-admin/includes/class-wp-list-table.php index 9ec1bcee24..864198ebff 100644 --- a/src/wp-admin/includes/class-wp-list-table.php +++ b/src/wp-admin/includes/class-wp-list-table.php @@ -614,15 +614,41 @@ class WP_List_Table { * @param int $pending_comments Number of pending comments. */ protected function comments_bubble( $post_id, $pending_comments ) { - $pending_phrase = sprintf( __( '%s pending' ), number_format( $pending_comments ) ); + $approved_comments = get_comments_number(); - if ( $pending_comments ) - echo ''; + $approved_comments_number = number_format_i18n( $approved_comments ); + $pending_comments_number = number_format_i18n( $pending_comments ); - echo "" . number_format_i18n( get_comments_number() ) . ""; + $approved_only_phrase = sprintf( _n( '%s comment', '%s comments', $approved_comments ), $approved_comments_number ); + $approved_phrase = sprintf( _n( '%s approved comment', '%s approved comments', $approved_comments ), $approved_comments_number ); + $pending_phrase = sprintf( _n( '%s pending comment', '%s pending comments', $pending_comments ), $pending_comments_number ); - if ( $pending_comments ) - echo ''; + // No comments at all. + if ( ! $approved_comments && ! $pending_comments ) { + printf( '%s', + __( 'No comments' ) + ); + // Approved comments have different display depending on some conditions. + } elseif ( $approved_comments ) { + printf( '%s', + esc_url( add_query_arg( array( 'p' => $post_id, 'comment_status' => 'approved' ), admin_url( 'edit-comments.php' ) ) ), + $approved_comments_number, + $pending_comments ? $approved_phrase : $approved_only_phrase + ); + } else { + printf( '%s', + $approved_comments_number, + $pending_comments ? __( 'No approved comments' ) : __( 'No comments' ) + ); + } + + if ( $pending_comments ) { + printf( '%s', + esc_url( add_query_arg( array( 'p' => $post_id, 'comment_status' => 'moderated' ), admin_url( 'edit-comments.php' ) ) ), + $pending_comments_number, + $pending_phrase + ); + } } /**