WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@33127 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2015-07-10 21:44:25 +00:00
parent f29e5044cd
commit 6e73f1282e
7 changed files with 367 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
wp-admin/css/list-tables-rtl.css
View File

@ -1,77 +1,124 @@
/* List table styles */ .response-links {
.post-com-count-wrapper {
min-width: 22px;
}
.post-com-count {
background: none;
height: 1.3em;
line-height: 1.1em;
display: block; display: block;
text-decoration: none; margin-bottom: 1em;
padding: 0 0 6px;
cursor: pointer;
background-position: center -80px;
background-repeat: no-repeat;
color: #fff;
} }
.post-com-count:after { /* draw bubble connector using CSS! */ .response-links a {
content: "";
display: block; display: block;
width: 0;
height: 0;
margin-right: 8px;
border-top: 5px solid #b4b9be;
border-left: 5px solid transparent;
} }
.post-com-count span { .response-links a.comments-edit-item-link {
font-size: 11px;
font-weight: 600; font-weight: 600;
height: 1.4em; }
line-height: 1.4em;
min-width: 0.7em; .response-links a.comments-view-item-link {
padding: 0 6px; 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; display: inline-block;
-webkit-border-radius: 5px; clear: both;
border-radius: 5px;
background-color: #b4b9be;
color: #fff;
} }
.post-com-count:hover { .column-comments .post-com-count-wrapper {
background-position: center -3px; white-space: nowrap;
word-wrap: normal;
} }
.post-com-count:hover span { /* comments bubble common */
background-color: #00a0d2; .column-comments .post-com-count {
} display: inline-block;
vertical-align: top;
.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;
} }
.column-response .post-com-count { .column-response .post-com-count {
float: right; display: block;
margin-left: 5px; }
/* 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; text-align: center;
} }
.response-links { .ie8 .column-comments .comment-count-no-comments,
float: right; .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-right: 8px;
width: 0;
height: 0;
border-top: 5px solid #72777c;
border-left: 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;
right: -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 */ /* comments */
@ -283,7 +330,7 @@ table.fixed {
} }
.fixed .column-comments { .fixed .column-comments {
width: 4em; width: 5.5em;
padding: 8px 0; padding: 8px 0;
text-align: right; text-align: right;
} }
@ -292,9 +339,6 @@ table.fixed {
padding-right: 3px; padding-right: 3px;
} }
.fixed .column-comments a {
float: right;
}
td.column-title strong, td.column-title strong,
td.plugin-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-right: 0;
margin-left: 0;
width: 100%;
}
}
.plugin-card-top { .plugin-card-top {
position: relative; position: relative;
padding: 20px 20px 10px; padding: 20px 20px 10px;
@ -1815,6 +1851,56 @@ div.action-links,
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); 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-left: 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: right;
}
.column-comments .post-com-count-pending:hover {
color: #dc3232;
}
.widefat thead .check-column, .widefat tfoot .check-column { .widefat thead .check-column, .widefat tfoot .check-column {
padding: 10px 0 10px; padding: 10px 0 10px;
} }
@ -2020,4 +2106,10 @@ div.action-links,
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); -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); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
} }
.plugin-card {
margin-right: 0;
margin-left: 0;
width: 100%;
}
} }

228
wp-admin/css/list-tables.css
View File

@ -1,77 +1,124 @@
/* List table styles */ .response-links {
.post-com-count-wrapper {
min-width: 22px;
}
.post-com-count {
background: none;
height: 1.3em;
line-height: 1.1em;
display: block; display: block;
text-decoration: none; margin-bottom: 1em;
padding: 0 0 6px;
cursor: pointer;
background-position: center -80px;
background-repeat: no-repeat;
color: #fff;
} }
.post-com-count:after { /* draw bubble connector using CSS! */ .response-links a {
content: "";
display: block; display: block;
width: 0;
height: 0;
margin-left: 8px;
border-top: 5px solid #b4b9be;
border-right: 5px solid transparent;
} }
.post-com-count span { .response-links a.comments-edit-item-link {
font-size: 11px;
font-weight: 600; font-weight: 600;
height: 1.4em; }
line-height: 1.4em;
min-width: 0.7em; .response-links a.comments-view-item-link {
padding: 0 6px; 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; display: inline-block;
-webkit-border-radius: 5px; clear: both;
border-radius: 5px;
background-color: #b4b9be;
color: #fff;
} }
.post-com-count:hover { .column-comments .post-com-count-wrapper {
background-position: center -3px; white-space: nowrap;
word-wrap: normal;
} }
.post-com-count:hover span { /* comments bubble common */
background-color: #00a0d2; .column-comments .post-com-count {
} display: inline-block;
vertical-align: top;
.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;
} }
.column-response .post-com-count { .column-response .post-com-count {
float: left; display: block;
margin-right: 5px; }
/* 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; text-align: center;
} }
.response-links { .ie8 .column-comments .comment-count-no-comments,
float: left; .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 */ /* comments */
@ -283,7 +330,7 @@ table.fixed {
} }
.fixed .column-comments { .fixed .column-comments {
width: 4em; width: 5.5em;
padding: 8px 0; padding: 8px 0;
text-align: left; text-align: left;
} }
@ -292,9 +339,6 @@ table.fixed {
padding-left: 3px; padding-left: 3px;
} }
.fixed .column-comments a {
float: left;
}
td.column-title strong, td.column-title strong,
td.plugin-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 { .plugin-card-top {
position: relative; position: relative;
padding: 20px 20px 10px; padding: 20px 20px 10px;
@ -1815,6 +1851,56 @@ div.action-links,
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); 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 { .widefat thead .check-column, .widefat tfoot .check-column {
padding: 10px 0 10px; padding: 10px 0 10px;
} }
@ -2020,4 +2106,10 @@ div.action-links,
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); -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); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
} }
.plugin-card {
margin-left: 0;
margin-right: 0;
width: 100%;
}
} }

4
wp-admin/css/wp-admin-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
wp-admin/css/wp-admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

18
wp-admin/includes/class-wp-comments-list-table.php
View File

@ -678,21 +678,23 @@ class WP_Comments_List_Table extends WP_List_Table {
} }
if ( current_user_can( 'edit_post', $post->ID ) ) { if ( current_user_can( 'edit_post', $post->ID ) ) {
$post_link = "<a href='" . get_edit_post_link( $post->ID ) . "'>"; $post_link = "<a href='" . get_edit_post_link( $post->ID ) . "' class='comments-edit-item-link'>";
$post_link .= esc_html( get_the_title( $post->ID ) ) . '</a>'; $post_link .= esc_html( get_the_title( $post->ID ) ) . '</a>';
} else { } else {
$post_link = esc_html( get_the_title( $post->ID ) ); $post_link = esc_html( get_the_title( $post->ID ) );
} }
echo '<div class="response-links"><span class="post-com-count-wrapper">'; echo '<div class="response-links">';
echo $post_link . '<br />'; echo $post_link;
$post_type_object = get_post_type_object( $post->post_type );
echo "<a href='" . get_permalink( $post->ID ) . "' class='comments-view-item-link'>" . $post_type_object->labels->view_item . '</a>';
if ( 'attachment' == $post->post_type && ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) ) {
echo $thumb;
}
echo '</div>';
echo '<span class="post-com-count-wrapper">';
$this->comments_bubble( $post->ID, $pending_comments ); $this->comments_bubble( $post->ID, $pending_comments );
echo '</span> '; echo '</span> ';
$post_type_object = get_post_type_object( $post->post_type );
echo "<a href='" . get_permalink( $post->ID ) . "'>" . $post_type_object->labels->view_item . '</a>';
echo '</div>';
if ( 'attachment' == $post->post_type && ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) )
echo $thumb;
} }
/** /**

38
wp-admin/includes/class-wp-list-table.php
View File

@ -614,15 +614,41 @@ class WP_List_Table {
* @param int $pending_comments Number of pending comments. * @param int $pending_comments Number of pending comments.
*/ */
protected function comments_bubble( $post_id, $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 ) $approved_comments_number = number_format_i18n( $approved_comments );
echo '<strong>'; $pending_comments_number = number_format_i18n( $pending_comments );
echo "<a href='" . esc_url( add_query_arg( 'p', $post_id, admin_url( 'edit-comments.php' ) ) ) . "' title='" . esc_attr( $pending_phrase ) . "' class='post-com-count'><span class='comment-count'>" . number_format_i18n( get_comments_number() ) . "</span></a>"; $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 ) // No comments at all.
echo '</strong>'; if ( ! $approved_comments && ! $pending_comments ) {
printf( '<span aria-hidden="true">—</span><span class="screen-reader-text">%s</span>',
__( 'No comments' )
);
// Approved comments have different display depending on some conditions.
} elseif ( $approved_comments ) {
printf( '<a href="%s" class="post-com-count post-com-count-approved"><span class="comment-count-approved" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></a>',
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( '<span class="post-com-count post-com-count-no-comments"><span class="comment-count comment-count-no-comments" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></span>',
$approved_comments_number,
$pending_comments ? __( 'No approved comments' ) : __( 'No comments' )
);
}
if ( $pending_comments ) {
printf( '<a href="%s" class="post-com-count post-com-count-pending"><span class="comment-count-pending" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></a>',
esc_url( add_query_arg( array( 'p' => $post_id, 'comment_status' => 'moderated' ), admin_url( 'edit-comments.php' ) ) ),
$pending_comments_number,
$pending_phrase
);
}
} }
/** /**

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.3-beta2-33154'; $wp_version = '4.3-beta2-33155';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.