Threaded comments.

services/web/app/views/project/editor/editor.jade

@@ -70,11 +70,11 @@ div.full-size(
 									.rp-entry-metadata
 										p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
 										p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
-									.rp-entry-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
+									.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
 								.rp-entry-body(ng-switch="entry.type")
 										span(ng-switch-when="insert") Added 
 											span.rp-content-highlight  {{ entry.content }} 
-										span(ng-switch-when="delete") Deleted
+										span(ng-switch-when="delete") Delete
 											span.rp-content-highlight  {{ entry.content }} 
 								.rp-entry-actions
 									a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
@@ -84,15 +84,30 @@ div.full-size(
 										i.fa.fa-times
 										|  Reject
 							div(ng-if="entry.type == 'comment'")
-								div(ng-repeat="comment in entry.thread", class="comment-thread__comment")
-									div.small(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%)") {{ users[comment.user_id].name }}
-									div.small {{ comment.ts }}
-									| {{ comment.content }}
+								.rp-comment(ng-repeat="comment in entry.thread")
+									.rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);")
+										p.rp-comment-content {{ comment.content }}
+										p.rp-comment-metadata
+											| {{ comment.ts | date : 'MMM d, y h:mm a' }}
+											|  • 
+											span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);") {{ users[comment.user_id].name }}
+									.rp-avatar(style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);") {{ users[comment.user_id].avatar_text }}
+									//- div.small(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%)") {{ users[comment.user_id].name }}
+									//- div.small {{ comment.ts }}
+									//- | {{ comment.content }}
+									//- pre {{ comment | json}}
+									//- pre {{ users[comment.user_id] | json }}
 								div(ng-if="entry.replying")
 									textarea(ng-model="entry.replyContent")
 									a.btn.btn-sm.btn-primary(href, ng-click="submitReply(entry)") Submit
 									a(href, ng-click="cancelReply(entry)") X
 								a.btn.btn-sm.btn-primary(href, ng-click="startReply(entry)", ng-if="!entry.replying") Reply
+
+								.rp-entry-actions
+									a.rp-entry-button(href) 
+										i.fa.fa-check
+										|  Mark as resolved
+							
 							div(ng-if="entry.type == 'focus-position'")
 								a.btn.btn-sm(href, ng-if="!commentState.adding", ng-click="startNewComment()") Add comment
 								div(ng-if="commentState.adding")

services/web/public/stylesheets/app/editor/review-panel.less

@@ -1,4 +1,5 @@
 @rp-base-font-size		: 12px;
+@rp-small-font-size		: 10px;
 @rp-icon-large-size		: 22px;
 
 @rp-bg-blue				: #dadfed;
@@ -80,16 +81,21 @@
 	&-delete {
 		border-left-color: @rp-red;
 	}
+
+	&-comment {
+		border-left-color: @rp-yellow;
+	}
 }
 	
 	.rp-entry-header {
 		display: flex;
 		align-items: center;
-		padding: 0 5px;
+		padding: 5px;
 	}
 		.rp-entry-action-icon {
 			font-size: @rp-icon-large-size;
 			padding: 0 5px;
+			line-height: 0;
 		}
 
 		.rp-entry-metadata {
@@ -101,20 +107,8 @@
 				margin: 0;
 			}
 
-		.rp-entry-avatar {
-			border-radius: 3px;
-			font-weight: @rp-semibold-weight;
-			font-size: @rp-icon-large-size;
-			line-height: 1.2;
-			text-transform: uppercase;
-			color: #FFF;
-			width: 1.3em;
-			height: 1.3em;
-			text-align: center;
-		}
-
 	.rp-entry-body {
-		padding: 10px 5px 5px;
+		padding: 5px;
 	}
 		.rp-content-highlight {
 			color: @rp-type-darkgrey;
@@ -145,6 +139,66 @@
 			}
 		}
 
+	.rp-comment {
+		display: flex;
+		align-items: flex-start;
+		padding: 5px;
+		
+		&:nth-child(even) {
+			flex-direction: row-reverse;
+
+			.rp-comment-body {
+				margin-right: 0;
+				margin-left: 6px;
+
+				&::after {
+					content: "\25C4";
+					left: -5px;
+					right: auto;
+				}
+			}
+		}
+	}
+		.rp-comment-body {
+			position: relative;
+			background-color: currentColor;
+			flex-grow: 1;
+			padding: 0 3px;
+			margin-right: 6px;
+			border-radius: 3px;
+
+			&::after {
+				content: "\25BA";
+				position: absolute;
+				top: 3px;
+				right: -6px;
+				font-size: 1.2em;
+				line-height: 1;
+			}
+		}
+			.rp-comment-content {
+				margin: 0;
+				color: @rp-type-darkgrey;
+			}
+
+
+			.rp-comment-metadata {
+				color: @rp-type-blue;
+				font-size: @rp-small-font-size;
+				margin: 0;
+			}
+
+.rp-avatar {
+	border-radius: 3px;
+	font-weight: @rp-semibold-weight;
+	font-size: @rp-icon-large-size;
+	line-height: 1.2;
+	text-transform: uppercase;
+	color: #FFF;
+	width: 1.3em;
+	height: 1.3em;
+	text-align: center;
+}
 
 .rp-icon-delete {
 	display: inline-block;