Basic support for action icons.

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

@@ -49,28 +49,30 @@ div.full-size(
 				| Track Changes 
 				input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
 			.review-panel-scroller
-				.review-entry-list(review-panel-sorted)
-					.review-entry-wrapper(
+				.rp-entry-list(review-panel-sorted)
+					.rp-entry-wrapper(
 						ng-repeat="(entry_id, entry) in reviewPanel.entries"
 					)
-						.review-entry-callout(
-							ng-class="'review-entry-callout-' + entry.type"
+						.rp-entry-callout(
+							ng-class="'rp-entry-callout-' + entry.type"
 							style="top: {{ entry.screenPos.y + 15 }}px; height: {{ top - entry.screenPos.y }}px"
 						)
-						.review-entry(
-							ng-class="'review-entry-' + entry.type"
+						.rp-entry(
+							ng-class="'rp-entry-' + entry.type"
 							ng-style="{'top': top}"
 						)
 							div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
-								.review-entry-header
-									.review-entry-header-action-icon
+								.rp-entry-header
+									.rp-entry-action-icon(ng-switch="entry.type")
+										i.fa.fa-pencil(ng-switch-when="insert")
+										i.rp-icon-delete(ng-switch-when="delete")
 
-									.review-entry-header-metadata
+									.rp-entry-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
+									.rp-entry-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
+								.rp-entry-body
 									{{ entry.content }}
-								.review-entry-actions
+								.rp-entry-actions
 
 							div(ng-if="entry.type == 'comment'")
 								div(ng-repeat="comment in entry.thread", class="comment-thread__comment")

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

@@ -13,7 +13,7 @@ define [
 			content: ""
 			
 		scroller = $element.find(".review-panel-scroller")
-		list = $element.find(".review-entry-list")
+		list = $element.find(".rp-entry-list")
 
 		# Use these to avoid unnecessary updates. Scrolling one
 		# panel causes us to scroll the other panel, but there's no

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

@@ -6,7 +6,7 @@ define [
 			link: (scope, element, attrs) ->
 				layout = () ->
 					entries = []
-					for el in element.find(".review-entry")
+					for el in element.find(".rp-entry")
 						entries.push {
 							el: el
 							scope: angular.element(el).scope()

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

@@ -1,4 +1,5 @@
 @rp-base-font-size		: 12px;
+@rp-icon-large-size		: 22px;
 
 @rp-bg-blue				: #dadfed;
 @rp-bg-dim-blue			: #fafafa;
@@ -17,8 +18,11 @@
 @rp-type-darkgrey		: #3f3f3f;
 
 @rp-entry-ribbon-width	: 4px;
+@rp-semibold-weight		: 600;
 @review-panel-width		: 230px;
 
+@rp-scroller-offset		: 30px;
+
 #review-panel {
 	position: absolute;
 	width: @review-panel-width;
@@ -52,24 +56,22 @@
 	bottom: 0;
 	left: 0;
 	// TODO: Use a more cross-browser method of hiding the scroll bar
-	right: -30px; // Hide scroll bar
+	right: -@rp-scroller-offset; // Hide scroll bar
 	overflow-y: scroll;
 }
 
-.review-entry-list {
+.rp-entry-list {
 	position: relative;
 	width: @review-panel-width;;
 }
 
-.review-entry {
+.rp-entry {
 	position: absolute;
-	padding-left: @rp-entry-ribbon-width;
+	left: 5px;
+	right: 5px;
 	border-left: solid @rp-entry-ribbon-width transparent;
 	border-radius: 3px;
-	margin: 0 6px;
 	background-color: #FFF;
-	max-width: 248px;
-	word-wrap: break-word;
 
 	&-insert {
 		border-left-color: @rp-green;
@@ -80,33 +82,44 @@
 	}
 }
 	
-	.review-entry-header {
+	.rp-entry-header {
 		display: flex;
-
-		&-action-icon {
-
+		padding: 5px;
+	}
+		.rp-entry-action-icon {
+			font-size: @rp-icon-large-size;
 		}
 
-		&-metadata {
+		.rp-entry-metadata {
 			flex-grow: 1;
 		}
 
-		&-avatar {
+		.rp-entry-avatar {
 
 		}
-	}
 
-	.review-entry-body {
+	.rp-entry-body {
 
 	}
 
-	.review-entry-actions {
+	.rp-entry-actions {
 
 	}
 
 
+.rp-icon-delete {
+	display: inline-block;
+	line-height: 1;
+	font-style: normal;
+	font-size: 0.8em;
+	text-decoration: line-through;
+	font-weight: @rp-semibold-weight;
+	&::before {
+		content: 'Ab';
+	}
+}
 
-.review-entry-callout {
+.rp-entry-callout {
 	position: absolute;
 	width: 3px;
 	border-top: 1px solid grey;