Merge pull request #2666 from Automattic/fix/#981-link-comment-users

Reader: Add a link to comment author usernames
Automattic · Jan 21, 2016 · d92a64b · d92a64b
2 parents 53d8f99 + a01eac2
commit d92a64b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/client/reader/comments/index.jsx b/client/reader/comments/index.jsx
@@ -13,7 +13,8 @@ var Gravatar = require( 'components/gravatar' ),
 	PostCommentForm = require( './form' ),
 	CommentLikeButtonContainer = require( './comment-likes' ),
 	stats = require( 'reader/stats' ),
-	PostCommentContent = require( './post-comment-content' );
+	PostCommentContent = require( './post-comment-content' ),
+	Gridicon = require( 'components/gridicon' );
 
 var PostComment = React.createClass( {
 
@@ -139,7 +140,10 @@ var PostComment = React.createClass( {
 			<li className={ 'comment depth-' + this.props.depth }>
 				<div className="comment__author">
 					<Gravatar user={ comment.author } />
-					<strong className="comment__username">{ comment.author.name }</strong>
+
+					{ comment.author.URL
+						? <a href={ comment.author.URL } target="_blank" className="comment__username">{ comment.author.name }<Gridicon icon="external" /></a>
+						: <strong className="comment__username">{ comment.author.name }</strong> }
 					<small className="comment__timestamp">
 						<a href={ comment.URL }>
 							<PostTime date={ comment.date } />

diff --git a/client/reader/comments/style.scss b/client/reader/comments/style.scss
@@ -139,6 +139,7 @@
 }
 
 .comment__author {
+	font-weight: bold;
 	color: darken( $gray, 30 );
 
 	.gravatar {
@@ -147,17 +148,34 @@
 			left: -41px;
 		border-radius: 48px;
 	}
+
+	.gridicon {
+		height: 16px;
+		fill: lighten( $gray, 10 );
+		margin-left: 2px;
+		position: relative;
+			top: 2px;
+	}
+
+	&:hover .gridicon {
+		fill: $link-highlight;
+	}
 }
 
 .comment__username {
 	font-size: 16px;
 }
 
 .comment__timestamp a {
+	font-weight: normal;
 	font-size: 13px;
 	color: lighten( $gray, 10 );
 	margin-left: 8px;
 	text-decoration: none;
+
+	&:hover {
+		color: $link-highlight;
+	}
 }
 
 .comment__moderation {