Comments list table: Display that cute lil comment bubble.

The comments list table suffers from "wall of text" problems, which the two plain text links compounded.

props obenland. fixes #33149.

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


git-svn-id: http://core.svn.wordpress.org/trunk@33457 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/list-tables-rtl.css

@@ -15,51 +15,38 @@
 	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;
 	clear: both;
 }
 
+.column-response .post-com-count-wrapper,
 .column-comments .post-com-count-wrapper {
 	white-space: nowrap;
 	word-wrap: normal;
 }
 
 /* comments bubble common */
+.column-response .post-com-count,
 .column-comments .post-com-count {
 	display: inline-block;
 	vertical-align: top;
 }
 
-.column-response .post-com-count {
-	display: block;
-}
-
 /* comments bubble approved */
+.column-response .post-com-count-no-comments,
+.column-response .post-com-count-approved,
 .column-comments .post-com-count-no-comments,
 .column-comments .post-com-count-approved {
 	margin-top: 5px;
 }
 
+.column-response .comment-count-no-comments,
+.column-response .comment-count-approved,
 .column-comments .comment-count-no-comments,
 .column-comments .comment-count-approved {
 	-webkit-box-sizing: border-box;
@@ -78,11 +65,15 @@
 	text-align: center;
 }
 
+.ie8 .column-response .comment-count-no-comments,
+.ie8 .column-response .comment-count-approved,
 .ie8 .column-comments .comment-count-no-comments,
 .ie8 .column-comments .comment-count-approved {
 	min-width: 0;
 }
 
+.column-response .post-com-count-no-comments:after,
+.column-response .post-com-count-approved:after,
 .column-comments .post-com-count-no-comments:after,
 .column-comments .post-com-count-approved:after {
 	content: "";
@@ -94,17 +85,22 @@
 	border-left: 5px solid transparent;
 }
 
+.column-response .post-com-count-approved:hover .comment-count-approved,
+.column-response .post-com-count-approved:focus .comment-count-approved,
 .column-comments .post-com-count-approved:hover .comment-count-approved,
 .column-comments .post-com-count-approved:focus .comment-count-approved {
 	background: #0073aa;
 }
 
+.column-response .post-com-count-approved:hover:after,
+.column-response .post-com-count-approved:focus:after,
 .column-comments .post-com-count-approved:hover:after,
 .column-comments .post-com-count-approved:focus:after {
 	border-top-color: #0073aa;
 }
 
 /* comments bubble pending */
+.column-response .post-com-count-pending,
 .column-comments .post-com-count-pending {
 	position: relative;
 	right: -3px;
@@ -208,10 +204,6 @@
 	vertical-align: text-top;
 }
 
-#the-comment-list .attachment-80x60 {
-	padding: 4px 8px;
-}
-
 #the-comment-list tr.undo,
 #the-comment-list div.undo {
 	background-color: #f4f4f4;
@@ -1854,29 +1846,37 @@ div.action-links,
 		margin: 0;
 	}
 
+	.column-response .post-com-count-no-comments:after,
+	.column-response .post-com-count-approved:after,
 	.column-comments .post-com-count-no-comments:after,
 	.column-comments .post-com-count-approved:after {
 		content: none;
 	}
 
+	.column-response .post-com-count [aria-hidden="true"],
 	.column-comments .post-com-count [aria-hidden="true"] {
 		display: none;
 	}
 
+	.column-response .post-com-count-wrapper,
 	.column-comments .post-com-count-wrapper {
 		white-space: normal;
 	}
 
+	.column-response .post-com-count-wrapper > a,
 	.column-comments .post-com-count-wrapper > a {
 		display: block;
 	}
 
+	.column-response .post-com-count-no-comments,
+	.column-response .post-com-count-approved,
 	.column-comments .post-com-count-no-comments,
 	.column-comments .post-com-count-approved {
 		margin-top: 0;
 		margin-left: 0.5em;
 	}
 
+	.column-response .post-com-count-pending,
 	.column-comments .post-com-count-pending {
 		position: static;
 		height: auto;
@@ -1892,6 +1892,7 @@ div.action-links,
 		text-align: right;
 	}
 
+	.column-response .post-com-count-pending:hover,
 	.column-comments .post-com-count-pending:hover {
 		color: #dc3232;
 	}

wp-admin/css/list-tables.css

@@ -15,51 +15,38 @@
 	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;
 	clear: both;
 }
 
+.column-response .post-com-count-wrapper,
 .column-comments .post-com-count-wrapper {
 	white-space: nowrap;
 	word-wrap: normal;
 }
 
 /* comments bubble common */
+.column-response .post-com-count,
 .column-comments .post-com-count {
 	display: inline-block;
 	vertical-align: top;
 }
 
-.column-response .post-com-count {
-	display: block;
-}
-
 /* comments bubble approved */
+.column-response .post-com-count-no-comments,
+.column-response .post-com-count-approved,
 .column-comments .post-com-count-no-comments,
 .column-comments .post-com-count-approved {
 	margin-top: 5px;
 }
 
+.column-response .comment-count-no-comments,
+.column-response .comment-count-approved,
 .column-comments .comment-count-no-comments,
 .column-comments .comment-count-approved {
 	-webkit-box-sizing: border-box;
@@ -78,11 +65,15 @@
 	text-align: center;
 }
 
+.ie8 .column-response .comment-count-no-comments,
+.ie8 .column-response .comment-count-approved,
 .ie8 .column-comments .comment-count-no-comments,
 .ie8 .column-comments .comment-count-approved {
 	min-width: 0;
 }
 
+.column-response .post-com-count-no-comments:after,
+.column-response .post-com-count-approved:after,
 .column-comments .post-com-count-no-comments:after,
 .column-comments .post-com-count-approved:after {
 	content: "";
@@ -94,17 +85,22 @@
 	border-right: 5px solid transparent;
 }
 
+.column-response .post-com-count-approved:hover .comment-count-approved,
+.column-response .post-com-count-approved:focus .comment-count-approved,
 .column-comments .post-com-count-approved:hover .comment-count-approved,
 .column-comments .post-com-count-approved:focus .comment-count-approved {
 	background: #0073aa;
 }
 
+.column-response .post-com-count-approved:hover:after,
+.column-response .post-com-count-approved:focus:after,
 .column-comments .post-com-count-approved:hover:after,
 .column-comments .post-com-count-approved:focus:after {
 	border-top-color: #0073aa;
 }
 
 /* comments bubble pending */
+.column-response .post-com-count-pending,
 .column-comments .post-com-count-pending {
 	position: relative;
 	left: -3px;
@@ -208,10 +204,6 @@
 	vertical-align: text-top;
 }
 
-#the-comment-list .attachment-80x60 {
-	padding: 4px 8px;
-}
-
 #the-comment-list tr.undo,
 #the-comment-list div.undo {
 	background-color: #f4f4f4;
@@ -1854,29 +1846,37 @@ div.action-links,
 		margin: 0;
 	}
 
+	.column-response .post-com-count-no-comments:after,
+	.column-response .post-com-count-approved:after,
 	.column-comments .post-com-count-no-comments:after,
 	.column-comments .post-com-count-approved:after {
 		content: none;
 	}
 
+	.column-response .post-com-count [aria-hidden="true"],
 	.column-comments .post-com-count [aria-hidden="true"] {
 		display: none;
 	}
 
+	.column-response .post-com-count-wrapper,
 	.column-comments .post-com-count-wrapper {
 		white-space: normal;
 	}
 
+	.column-response .post-com-count-wrapper > a,
 	.column-comments .post-com-count-wrapper > a {
 		display: block;
 	}
 
+	.column-response .post-com-count-no-comments,
+	.column-response .post-com-count-approved,
 	.column-comments .post-com-count-no-comments,
 	.column-comments .post-com-count-approved {
 		margin-top: 0;
 		margin-right: 0.5em;
 	}
 
+	.column-response .post-com-count-pending,
 	.column-comments .post-com-count-pending {
 		position: static;
 		height: auto;
@@ -1892,6 +1892,7 @@ div.action-links,
 		text-align: left;
 	}
 
+	.column-response .post-com-count-pending:hover,
 	.column-comments .post-com-count-pending:hover {
 		color: #dc3232;
 	}

wp-admin/includes/class-wp-comments-list-table.php

@@ -687,16 +687,16 @@ class WP_Comments_List_Table extends WP_List_Table {
 		}
 
 		echo '<div class="response-links">';
-		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 $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>';
 		echo '<span class="post-com-count-wrapper">';
 		$this->comments_bubble( $post->ID, $pending_comments );
 		echo '</span> ';
+		echo '</div>';
 	}
 
 	/**

wp-includes/version.php

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