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

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

@@ -62,10 +62,16 @@ div.full-size(
 						ng-style="{'top': top}"
 					)
 						div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
-							div(style="float: right; background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%); width: 40px; height: 40px;") {{ users[entry.metadata.user_id].avatar_text }}
-							div.small(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%)") {{ users[entry.metadata.user_id].name }}
-							div.small {{ entry.metadata.ts }}
-							| {{ entry.content }}
+							.review-entry-header
+								.review-entry-header-action-icon
+
+								.review-entry-header-metadata
+									{{ users[entry.metadata.user_id].name }} {{ entry.metadata.ts }}
+								.review-entry-header-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
+							.review-entry-body
+								{{ entry.content }}
+							.review-entry-actions
+
 						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 }}

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

@@ -1,20 +1,23 @@
-@rp-bg-blue			: #dadfed;
-@rp-bg-dim-blue		: #fafafa;
-@rp-highlight-blue	: #8a96b5;
+@rp-base-font-size		: 12px;
 
-@rp-border-grey		: #d9d9d9;
+@rp-bg-blue				: #dadfed;
+@rp-bg-dim-blue			: #fafafa;
+@rp-highlight-blue		: #8a96b5;
 
-@rp-green			: #2c8e30;
-@rp-dim-green		: #cae3cb;
-@rp-red				: #c5060b;
-@rp-dim-red			: #f3cdce;
-@rp-yellow			: #f3b111;
-@rp-dim-yellow		: #ffe9b2;
+@rp-border-grey			: #d9d9d9;
 
-@rp-type-blue		: #6b7797;
-@rp-type-darkgrey	: #3f3f3f;
+@rp-green				: #2c8e30;
+@rp-dim-green			: #cae3cb;
+@rp-red					: #c5060b;
+@rp-dim-red				: #f3cdce;
+@rp-yellow				: #f3b111;
+@rp-dim-yellow			: #ffe9b2;
 
-@review-panel-width	: 230px;
+@rp-type-blue			: #6b7797;
+@rp-type-darkgrey		: #3f3f3f;
+
+@rp-entry-ribbon-width	: 4px;
+@review-panel-width		: 230px;
 
 #review-panel {
 	position: absolute;
@@ -26,6 +29,8 @@
 	border-left: solid 1px @rp-border-grey;
 	overflow: hidden;
 	display: none;
+	font-size: @rp-base-font-size;
+	color: @rp-type-blue;
 }
 
 .review-panel-toolbar {
@@ -58,13 +63,12 @@
 
 .review-entry {
 	position: absolute;
-	font-size: 12px;
-	padding: 5px 5px 5px 9px;
-	border-left: solid 4px transparent;
+	padding-left: @rp-entry-ribbon-width;
+	border-left: solid @rp-entry-ribbon-width transparent;
 	border-radius: 3px;
 	margin: 0 6px;
 	background-color: #FFF;
-	max-width: 148px;
+	max-width: 248px;
 	word-wrap: break-word;
 
 	&-insert {
@@ -75,6 +79,32 @@
 		border-left-color: @rp-red;
 	}
 }
+	
+	.review-entry-header {
+		display: flex;
+
+		&-action-icon {
+
+		}
+
+		&-metadata {
+			flex-grow: 1;
+		}
+
+		&-avatar {
+
+		}
+	}
+
+	.review-entry-body {
+
+	}
+
+	.review-entry-actions {
+
+	}
+
+
 
 .review-entry-callout {
 	position: absolute;