Merge branch 'ja-track-changes' of github.com:sharelatex/web-sharelatex into ja-track-changes

services/web/app/views/project/editor/review-panel.jade

@@ -172,12 +172,12 @@ script(type='text/ng-template', id='commentEntryTemplate')
 					|  Reply
 	
 script(type='text/ng-template', id='resolvedCommentEntryTemplate')
-	.rp-entry.rp-entry-comment
+	.rp-resolved-comment
 		div
-			.rp-comment-context
+			.rp-resolved-comment-context
 				| Quoted text on 
-				.rp-comment-context-file {{ doc.doc.name }}
-				.rp-comment-context-quote {{ thread.content }}
+				span.rp-resolved-comment-context-file {{ doc.doc.name }}
+				p.rp-resolved-comment-context-quote {{ thread.content }}
 			.rp-comment(
 				ng-repeat="comment in thread.messages track by comment.id"
 			)
@@ -189,6 +189,15 @@ script(type='text/ng-template', id='resolvedCommentEntryTemplate')
 					| {{ comment.content }}
 				.rp-entry-metadata
 					| {{ comment.timestamp | date : 'MMM d, y h:mm a' }}
+			.rp-comment.rp-comment-resolver
+				p.rp-comment-resolver-content 
+					span.rp-entry-user(
+						style="color: hsl({{ thread.resolved_by_user.hue }}, 70%, 40%);"
+					) {{ thread.resolved_by_user.name }}: 
+					| Marked as resolved.
+				.rp-entry-metadata
+					| {{ thread.resolved_at | date : 'MMM d, y h:mm a' }}
+				
 		.rp-entry-actions
 			a.rp-entry-button(href, ng-click="onUnresolve();") 
 				|  Re-open
@@ -234,10 +243,10 @@ script(type='text/ng-template', id='addCommentEntryTemplate')
 
 script(type='text/ng-template', id='resolvedCommentsDropdownTemplate')
 	.resolved-comments
-		.resolved-comments-backdrop(
-			ng-class="{ 'resolved-comments-backdrop-visible' : state.isOpen }"
-			ng-click="state.isOpen = !state.isOpen"
-		)
+		//- .resolved-comments-backdrop(
+		//- 	ng-class="{ 'resolved-comments-backdrop-visible' : state.isOpen }"
+		//- 	ng-click="state.isOpen = !state.isOpen"
+		//- )
 		a.resolved-comments-toggle(
 			href
 			ng-click="state.isOpen = !state.isOpen"

services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee

@@ -316,7 +316,7 @@ define [
 							formatComment(comment)
 						if thread.resolved_by_user?
 							$scope.$broadcast "comment:resolve_thread", thread_id
-							formatUser(thread.resolved_by_user)
+							thread.resolved_by_user = formatUser(thread.resolved_by_user)
 					$scope.reviewPanel.commentThreads = threads
 
 		refreshThreads()

services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee

@@ -20,13 +20,10 @@ define [
 				for fileId, fileEntries of scope.entries
 					scope.resolvedCommentsPerFile[fileId] = {}
 					for entryId, entry of fileEntries
-						if entry.type == "comment" and scope.threads[entry.thread_id].resolved?
+						if entry.type == "comment" and scope.threads[entry.thread_id]?.resolved?
 							scope.resolvedCommentsPerFile[fileId][entryId] = angular.copy scope.threads[entry.thread_id]
 							scope.resolvedCommentsPerFile[fileId][entryId].content = entry.content
 
-				console.log scope.resolvedCommentsPerFile
-
-
 			scope.$watchCollection "entries", filterResolvedComments
 			scope.$watchCollection "threads", filterResolvedComments
 

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

@@ -226,7 +226,6 @@
 	}
 	.rp-state-overview & {
 		border-radius: 0;
-		padding: 2px 5px;
 		border-bottom: solid 1px @rp-border-grey;
 		cursor: pointer;
 	}
@@ -274,10 +273,6 @@
 		display: flex;
 		align-items: center;
 		padding: 4px 5px;
-
-		.rp-state-overview & {
-			padding: 0;
-		}
 	}
 		.rp-entry-action-icon {
 			font-size: @rp-icon-large-size;
@@ -292,6 +287,10 @@
 		.rp-entry-details {
 			line-height: 1.4;
 			margin-left: 5px;
+
+			.rp-state-overview & {
+				margin-left: 0;
+			}
 		}
 
 			.rp-entry-metadata {
@@ -299,6 +298,7 @@
 			}
 				.rp-entry-user {
 					font-weight: @rp-semibold-weight;
+					font-style: normal;
 				}
 
 			.rp-content-highlight {
@@ -336,13 +336,20 @@
 		line-height: 1.4;
 		border-bottom: solid 1px @rp-border-grey;
 
+
+
 		&:last-child {
 			margin-bottom: 2px;
 			border-bottom-width: 0;
 		}
 
 		.rp-state-overview & {
-			padding: 0;
+			margin: 4px 5px;
+
+			&:first-child {
+				margin-top: 0;
+				padding-top: 4px;
+			}
 		}
 	}
 		.rp-comment-content {
@@ -355,13 +362,17 @@
 			font-size: @rp-small-font-size;
 			margin: 0;
 		}
+	
+	.rp-comment-resolver {
+		color: @rp-type-blue;
+	}
+		.rp-comment-resolver-content {
+			font-style: italic;
+			margin: 0;
+		}
 
 	.rp-comment-reply {
 		padding: 0 5px;
-
-		.rp-state-overview & {
-			padding: 3px 0 0;
-		}
 	}
 
 	.rp-add-comment-btn {
@@ -396,6 +407,26 @@
 	}
 }
 
+.rp-resolved-comment {
+	border-left: solid @rp-entry-ribbon-width @rp-yellow;
+	border-radius: 3px;
+	background-color: #FFF;
+	margin-bottom: 5px;
+}
+	.rp-resolved-comment-context {
+		background-color: lighten(@rp-yellow, 35%);
+		padding: 4px 5px;
+	}
+		.rp-resolved-comment-context-file {
+			font-weight: @rp-semibold-weight;
+		}
+
+		.rp-resolved-comment-context-quote {
+			color: #000;
+			font-family: @font-family-monospace;
+			margin: 0;
+		}
+
 .rp-entry-callout {
 	.rp-state-current-file & {
 		position: absolute;
@@ -653,28 +684,40 @@
 	}
 }
 
-.resolved-comments-backdrop {
-	display: none;
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	background-color: rgba(0, 0, 0, .5);
-
-	&-visible {
-		display: block;
-	}
-}
+// .resolved-comments-backdrop {
+// 	display: none;
+// 	position: fixed;
+// 	top: 0;
+// 	right: 0;
+// 	bottom: 0;
+// 	left: 0;
+// 	background-color: rgba(0, 0, 0, .5);
+
+// 	&-visible {
+// 		display: block;
+// 	}
+// }
 
 .resolved-comments-dropdown {
 	display: none;
 	position: absolute;
 	width: 300px;
+	left: -150px;
+	margin-top: @rp-entry-arrow-width * 1.5;
+	margin-left: 1em;
 	background-color: @rp-bg-blue;
 	text-align: left;
-	padding: 5px;
+	padding: 5px 5px 0;
 	border-radius: 3px;
+	box-shadow: 0 0 20px 10px rgba(0, 0, 0, .3);
+
+	&::before {
+		content: '';
+		.triangle(top, @rp-entry-arrow-width * 3, @rp-entry-arrow-width * 1.5, @rp-bg-blue);
+		top: -@rp-entry-ribbon-width * 2;
+		left: 50%;
+		margin-left: -@rp-entry-arrow-width * .75;
+	}
 
 	&-open {
 		display: block;