Add collapsing behaviour to long entries.

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

@@ -137,9 +137,19 @@ script(type='text/ng-template', id='changeEntryTemplate')
 				.rp-entry-details
 					.rp-entry-description(ng-switch="entry.type")
 						span(ng-switch-when="insert") Added 
-							ins.rp-content-highlight {{ entry.content }} 
+							ins.rp-content-highlight {{ entry.content | limitTo:(isCollapsed ? contentLimit : entry.content.length) }}
+							a.rp-collapse-toggle(
+								href
+								ng-if="needsCollapsing"
+								ng-click="toggleCollapse();"
+							)  {{ isCollapsed ? '(more)' : '(less)' }}
 						span(ng-switch-when="delete") Deleted 
-							del.rp-content-highlight {{ entry.content }} 
+							del.rp-content-highlight {{ entry.content | limitTo:(isCollapsed ? contentLimit : entry.content.length) }}
+							a.rp-collapse-toggle(
+								href
+								ng-if="needsCollapsing"
+								ng-click="toggleCollapse();"
+							)  {{ isCollapsed ? '(more)' : '(less)' }}
 					.rp-entry-metadata
 						| {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} • 
 						span.rp-entry-user(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }} 

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

@@ -1,7 +1,7 @@
 define [
 	"base"
 ], (App) ->
-	App.directive "changeEntry", () ->
+	App.directive "changeEntry", ($timeout) ->
 		restrict: "E"
 		templateUrl: "changeEntryTemplate"
 		scope: 
@@ -11,4 +11,12 @@ define [
 			onAccept: "&"
 			onReject: "&"
 			onIndicatorClick: "&"
-		
+		link: (scope, element, attrs) ->
+			scope.contentLimit = 40
+			scope.needsCollapsing = scope.entry.content.length > scope.contentLimit
+			scope.isCollapsed = true
+
+			scope.toggleCollapse = () ->
+				scope.isCollapsed = !scope.isCollapsed
+				$timeout () ->
+					scope.$emit "review-panel:layout"

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

@@ -785,3 +785,14 @@
 		padding: 5px;
 		overflow-y: auto;
 	}
+
+.rp-collapse-toggle {
+	color: @rp-type-blue;
+	font-weight: @rp-semibold-weight;
+	
+	&:hover,
+	&:focus {
+		color: darken(@rp-type-blue, 5%);
+		text-decoration: none;
+	}
+}