Merge branch 'ja-review-panel' of github.com:sharelatex/web-sharelatex into ja-review-panel

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

@@ -82,14 +82,20 @@ div.full-size(
 										i.fa.fa-times
 										|  Reject
 							div(ng-if="entry.type == 'comment'")
-								.rp-comment(ng-repeat="comment in entry.thread")
+								.rp-comment(
+									ng-repeat="comment in entry.thread"
+									ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';"
+								)
+									.rp-avatar(
+										ng-if="!users[comment.user_id].isSelf;"
+										style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);"
+									) {{ users[comment.user_id].avatar_text }}
 									.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 }}
+											span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }}
 								//- div.small(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 50%)") {{ users[comment.user_id].name }}
 								//- div.small {{ comment.ts }}
 								//- | {{ comment.content }}

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

@@ -12,6 +12,9 @@ define [
 			adding: false
 			content: ""
 			
+		# TODO Just for prototyping purposes; remove afterwards.
+		mockedUserId = '12345abc'
+
 		scroller = $element.find(".review-panel-scroller")
 		list = $element.find(".rp-entry-list")
 
@@ -101,6 +104,21 @@ define [
 			entry.replyContent = ""
 			entry.replying = false
 			$scope.$broadcast "review-panel:layout"
+			# TODO Just for prototyping purposes; remove afterwards
+			window.setTimeout((() -> 
+				$scope.$applyAsync(() -> submitMockedReply(entry))
+			), 1000 * 2)
+
+		# TODO Just for prototyping purposes; remove afterwards.
+		submitMockedReply = (entry) ->
+			entry.thread.push {
+				content: 'Lorem ipsum dolor sit amet'
+				ts: new Date()
+				user_id: mockedUserId
+			}
+			entry.replyContent = ""
+			entry.replying = false
+			$scope.$broadcast "review-panel:layout"
 		
 		$scope.cancelReply = (entry) ->
 			entry.replying = false
@@ -111,14 +129,27 @@ define [
 		# when we get an id we don't know. This'll do for client side testing
 		refreshUsers = () ->
 			$scope.users = {}
+			# TODO Just for prototyping purposes; remove afterwards.
+			$scope.users[mockedUserId] = {
+				email: "gerald.butler@gmail.com"
+				name: "Gerald Butler"
+				isSelf: false
+				hue: 70
+				avatar_text: "G"
+			}
+
 			for member in $scope.project.members.concat($scope.project.owner)
 				if member._id == window.user_id
 					name = "You"
+					isSelf = true
 				else
 					name = "#{member.first_name} #{member.last_name}"
+					isSelf = false
+
 				$scope.users[member._id] = {
 					email: member.email
 					name: name
+					isSelf: isSelf
 					hue: ColorManager.getHueForUserId(member._id)
 					avatar_text: [member.first_name, member.last_name].filter((n) -> n?).map((n) -> n[0]).join ""
 				}

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

@@ -149,18 +149,14 @@
 		align-items: flex-start;
 		padding: 5px;
 		
-		&:nth-child(even) {
-			flex-direction: row-reverse;
+		&.rp-comment-self .rp-comment-body {
+			margin-left: 0;
+			margin-right: 9px;
 
-			.rp-comment-body {
-				margin-right: 0;
-				margin-left: 6px;
-
-				&::after {
-					content: "\25C4";
-					left: -5px;
-					right: auto;
-				}
+			&::after {
+				content: "\25BA";
+				left: auto;
+				right: -9px;
 			}
 		}
 	}
@@ -168,15 +164,15 @@
 			position: relative;
 			background-color: currentColor;
 			flex-grow: 1;
-			padding: 0 3px;
-			margin-right: 6px;
+			padding: 2px 5px;
+			margin-left: 9px;
 			border-radius: 3px;
 
 			&::after {
-				content: "\25BA";
+				content: "\25C4";
 				position: absolute;
 				top: 3px;
-				right: -6px;
+				left: -9px;
 				font-size: 1.2em;
 				line-height: 1;
 			}
@@ -186,7 +182,6 @@
 				color: @rp-type-darkgrey;
 			}
 
-
 			.rp-comment-metadata {
 				color: @rp-type-blue;
 				font-size: @rp-small-font-size;