Include directive; add some styling.

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

@@ -82,6 +82,17 @@
 						permissions="permissions"
 					)
 
+				div(ng-if="entry.type === 'agg-change'")
+					aggregate-change-entry(
+						entry="entry"
+						user="users[entry.metadata.user_id]"
+						on-reject="rejectChange(entry_id);"
+						on-accept="acceptChange(entry_id);"
+						on-indicator-click="toggleReviewPanel();"
+						on-body-click="gotoEntry(editor.open_doc_id, entry)"
+						permissions="permissions"
+					)
+
 				div(ng-if="entry.type === 'comment'")
 					comment-entry(
 						entry="entry"
@@ -147,6 +158,17 @@
 							permissions="permissions"
 						)
 
+					div(ng-if="entry.type === 'agg-change'")
+						aggregate-change-entry(
+							entry="entry"
+							user="users[entry.metadata.user_id]"
+							on-reject="rejectChange(entry_id);"
+							on-accept="acceptChange(entry_id);"
+							on-indicator-click="toggleReviewPanel();"
+							on-body-click="gotoEntry(editor.open_doc_id, entry)"
+							permissions="permissions"
+						)
+
 					div(ng-if="entry.type === 'comment'")
 						comment-entry(
 							entry="entry"
@@ -222,6 +244,44 @@ script(type='text/ng-template', id='changeEntryTemplate')
 					i.fa.fa-check
 					|  #{translate("accept")}
 
+script(type='text/ng-template', id='aggregateChangeEntryTemplate')
+	div
+		.rp-entry-callout.rp-entry-callout-aggregate
+		.rp-entry-indicator(
+			ng-class="{ 'rp-entry-indicator-focused': entry.focused }"
+			ng-click="onIndicatorClick();"
+		)
+			i.fa.fa-pencil
+		.rp-entry.rp-entry-aggregate(
+			ng-class="{ 'rp-entry-focused': entry.focused }"
+		)
+			.rp-entry-body
+				.rp-entry-action-icon
+					i.fa.fa-pencil
+				.rp-entry-details
+					.rp-entry-description
+						| Changed 
+						del.rp-content-highlight {{ entry.content }}
+						|  for 
+						ins.rp-content-highlight {{ entry.metadata.agg_op.content }}
+						//- span(ng-switch-when="insert") #{translate("tracked_change_added")} 
+						//- 	ins.rp-content-highlight {{ entry.content | limitTo:(isCollapsed ? contentLimit : entry.content.length) }}
+						//- 	a.rp-collapse-toggle(
+						//- 		href
+						//- 		ng-if="needsCollapsing"
+						//- 		ng-click="toggleCollapse();"
+						//- 	) {{ isCollapsed ? '... (#{translate("show_all")})' : ' (#{translate("show_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 }} 
+			.rp-entry-actions(ng-if="permissions.write")
+				a.rp-entry-button(href, ng-click="onReject();") 
+					i.fa.fa-times
+					|  #{translate("reject")}
+				a.rp-entry-button(href, ng-click="onAccept();") 
+					i.fa.fa-check
+					|  #{translate("accept")}
+
 script(type='text/ng-template', id='commentEntryTemplate')
 	.rp-comment-wrapper(
 		ng-class="{ 'rp-comment-wrapper-resolving': state.animating }"

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

@@ -299,7 +299,8 @@
 		transition: none;
 	}
 
-	&-insert {
+	&-insert,
+	&-aggregate {
 		border-color: @rp-green;
 	}
 
@@ -389,7 +390,7 @@
 				font-weight: @rp-semibold-weight;
 				text-decoration: none;
 
-				.rp-entry-delete & {
+				del& {
 					text-decoration: line-through;
 				}
 			}
@@ -780,6 +781,7 @@
 	}
 	.track-changes-added-marker-callout {
 		border-bottom: 1px dashed @rp-green;
+		z-index: 1;
 	}
 	.track-changes-comment-marker-callout {
 		border-bottom: 1px dashed @rp-yellow;