Isolate review-panel markup.

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

@@ -47,226 +47,8 @@ div.full-size(
 			changes-tracker="reviewPanel.changesTracker",
 			doc-id="editor.open_doc_id"
 		)
-		#review-panel
-			.review-panel-toolbar
-				| Track Changes 
-				input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
-			.review-panel-scroller
-				.rp-entry-list(
-					review-panel-sorted
-					ng-if="reviewPanel.subView === SubViews.CUR_FILE"
-				)
-					.rp-entry-wrapper(
-						ng-repeat="(entry_id, entry) in reviewPanel.entries[editor.open_doc_id]"
-					)
-						.rp-entry-callout(
-							ng-class="'rp-entry-callout-' + entry.type"
-						)
-
-						div(ng-switch="entry.type")
-							.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
-								i.fa.fa-pencil
-							.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
-								i.rp-icon-delete
-							.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
-								i.fa.fa-comment
-							.rp-entry-indicator(
-								ng-switch-when="add-comment"
-								ng-if="!commentState.adding"
-								ng-click="startNewComment(); toggleReviewPanel();"
-							)
-								i.fa.fa-commenting
-
-						.rp-entry(
-							ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
-						)
-							div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
-								.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")
-
-									.rp-entry-metadata
-										p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
-										p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
-									.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
-								.rp-entry-body(ng-switch="entry.type")
-										span(ng-switch-when="insert") Added 
-											ins.rp-content-highlight {{ entry.content }} 
-										span(ng-switch-when="delete") Delete 
-											del.rp-content-highlight {{ entry.content }} 
-								.rp-entry-actions
-									a.rp-entry-button(href, ng-click="rejectChange(entry_id)") 
-										i.fa.fa-times
-										|  Reject
-									a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
-										i.fa.fa-check
-										|  Accept
-							div(ng-if="entry.type == 'comment'")
-								.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%, 40%);") {{ users[comment.user_id].name }}
-								.rp-comment-reply
-									textarea.rp-comment-input(
-										ng-model="entry.replyContent"
-										ng-keypress="handleCommentReplyKeyPress($event, entry);"
-										placeholder="Hit \"Enter\" to reply"
-									)
-								.rp-entry-actions
-									a.rp-entry-button(href) 
-										i.fa.fa-check
-										|  Mark as resolved
-							
-							div(ng-if="entry.type == 'add-comment'")
-								a.rp-add-comment-btn(
-									href
-									ng-if="!commentState.adding"
-									ng-click="startNewComment()"
-								) 
-									i.fa.fa-comment
-									|  Add comment
-								div(ng-if="commentState.adding")
-									.rp-new-comment
-										textarea.rp-comment-input(
-											ng-model="commentState.content"
-											placeholder="Add your comment here"
-										)
-									.rp-entry-actions
-										a.rp-entry-button(href, ng-click="cancelNewComment()") 
-											i.fa.fa-times
-											|  Cancel
-										a.rp-entry-button(href, ng-click="submitNewComment()") 
-											i.fa.fa-comment
-											|  Comment
-
-				.rp-overview-entry-list(
-					ng-if="reviewPanel.subView === SubViews.OVERVIEW"
-				)
-					.rp-overview-file(
-						ng-repeat="(doc_id, entries) in reviewPanel.entries"
-					)
-						.rp-overview-file-header
-							| {{ doc_id }}
-						.rp-entry-wrapper(
-							ng-repeat="(entry_id, entry) in entries"
-						)
-							.rp-entry-callout(
-								ng-class="'rp-entry-callout-' + entry.type"
-							)
-
-							div(ng-switch="entry.type")
-								.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
-									i.fa.fa-pencil
-								.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
-									i.rp-icon-delete
-								.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
-									i.fa.fa-comment
-								.rp-entry-indicator(
-									ng-switch-when="add-comment"
-									ng-if="!commentState.adding"
-									ng-click="startNewComment(); toggleReviewPanel();"
-								)
-									i.fa.fa-commenting
-
-							.rp-entry(
-								ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
-							)
-								div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
-									.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")
-
-										.rp-entry-metadata
-											p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
-											p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
-										.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
-									.rp-entry-body(ng-switch="entry.type")
-											span(ng-switch-when="insert") Added 
-												ins.rp-content-highlight {{ entry.content }} 
-											span(ng-switch-when="delete") Delete 
-												del.rp-content-highlight {{ entry.content }} 
-									.rp-entry-actions
-										a.rp-entry-button(href, ng-click="rejectChange(entry_id)") 
-											i.fa.fa-times
-											|  Reject
-										a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
-											i.fa.fa-check
-											|  Accept
-								div(ng-if="entry.type == 'comment'")
-									.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%, 40%);") {{ users[comment.user_id].name }}
-									.rp-comment-reply
-										textarea.rp-comment-input(
-											ng-model="entry.replyContent"
-											ng-keypress="handleCommentReplyKeyPress($event, entry);"
-											placeholder="Hit \"Enter\" to reply"
-										)
-									.rp-entry-actions
-										a.rp-entry-button(href) 
-											i.fa.fa-check
-											|  Mark as resolved
-							
-								div(ng-if="entry.type == 'add-comment'")
-									a.rp-add-comment-btn(
-										href
-										ng-if="!commentState.adding"
-										ng-click="startNewComment()"
-									) 
-										i.fa.fa-comment
-										|  Add comment
-									div(ng-if="commentState.adding")
-										.rp-new-comment
-											textarea.rp-comment-input(
-												ng-model="commentState.content"
-												placeholder="Add your comment here"
-											)
-										.rp-entry-actions
-											a.rp-entry-button(href, ng-click="cancelNewComment()") 
-												i.fa.fa-times
-												|  Cancel
-											a.rp-entry-button(href, ng-click="submitNewComment()") 
-												i.fa.fa-comment
-												|  Comment
-
-			.rp-nav
-				a.rp-nav-item(
-					href
-					ng-click="setSubView(SubViews.CUR_FILE);"
-					ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.CUR_FILE }"
-				)
-					i.fa.fa-file-text-o
-					span.rp-nav-label Current file
-				a.rp-nav-item(
-					href
-					ng-click="setSubView(SubViews.OVERVIEW);"
-					ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.OVERVIEW }"
-				)
-					i.fa.fa-list
-					span.rp-nav-label Overview
+		
+		include ./review-panel
 
 	.ui-layout-east
 		div(ng-if="ui.pdfLayout == 'sideBySide'")

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

@@ -0,0 +1,225 @@
+#review-panel
+	.review-panel-toolbar
+		| Track Changes 
+		input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
+	.review-panel-scroller
+		.rp-entry-list(
+			review-panel-sorted
+			ng-if="reviewPanel.subView === SubViews.CUR_FILE"
+		)
+			.rp-entry-wrapper(
+				ng-repeat="(entry_id, entry) in reviewPanel.entries[editor.open_doc_id]"
+			)
+				.rp-entry-callout(
+					ng-class="'rp-entry-callout-' + entry.type"
+				)
+
+				div(ng-switch="entry.type")
+					.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+						i.fa.fa-pencil
+					.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+						i.rp-icon-delete
+					.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+						i.fa.fa-comment
+					.rp-entry-indicator(
+						ng-switch-when="add-comment"
+						ng-if="!commentState.adding"
+						ng-click="startNewComment(); toggleReviewPanel();"
+					)
+						i.fa.fa-commenting
+
+				.rp-entry(
+					ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
+				)
+					div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
+						.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")
+
+							.rp-entry-metadata
+								p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
+								p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
+							.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
+						.rp-entry-body(ng-switch="entry.type")
+								span(ng-switch-when="insert") Added 
+									ins.rp-content-highlight {{ entry.content }} 
+								span(ng-switch-when="delete") Deleted 
+									del.rp-content-highlight {{ entry.content }} 
+						.rp-entry-actions
+							a.rp-entry-button(href, ng-click="rejectChange(entry_id)") 
+								i.fa.fa-times
+								|  Reject
+							a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
+								i.fa.fa-check
+								|  Accept
+					div(ng-if="entry.type == 'comment'")
+						.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%, 40%);") {{ users[comment.user_id].name }}
+						.rp-comment-reply
+							textarea.rp-comment-input(
+								ng-model="entry.replyContent"
+								ng-keypress="handleCommentReplyKeyPress($event, entry);"
+								placeholder="Hit \"Enter\" to reply"
+							)
+						.rp-entry-actions
+							a.rp-entry-button(href) 
+								i.fa.fa-check
+								|  Mark as resolved
+					
+					div(ng-if="entry.type == 'add-comment'")
+						a.rp-add-comment-btn(
+							href
+							ng-if="!commentState.adding"
+							ng-click="startNewComment()"
+						) 
+							i.fa.fa-comment
+							|  Add comment
+						div(ng-if="commentState.adding")
+							.rp-new-comment
+								textarea.rp-comment-input(
+									ng-model="commentState.content"
+									placeholder="Add your comment here"
+								)
+							.rp-entry-actions
+								a.rp-entry-button(href, ng-click="cancelNewComment()") 
+									i.fa.fa-times
+									|  Cancel
+								a.rp-entry-button(href, ng-click="submitNewComment()") 
+									i.fa.fa-comment
+									|  Comment
+
+		.rp-overview-entry-list(
+			ng-if="reviewPanel.subView === SubViews.OVERVIEW"
+		)
+			.rp-overview-file(
+				ng-repeat="(doc_id, entries) in reviewPanel.entries"
+			)
+				.rp-overview-file-header
+					| {{ doc_id }}
+				.rp-entry-wrapper(
+					ng-repeat="(entry_id, entry) in entries"
+				)
+					.rp-entry-callout(
+						ng-class="'rp-entry-callout-' + entry.type"
+					)
+
+					div(ng-switch="entry.type")
+						.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+							i.fa.fa-pencil
+						.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+							i.rp-icon-delete
+						.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+							i.fa.fa-comment
+						.rp-entry-indicator(
+							ng-switch-when="add-comment"
+							ng-if="!commentState.adding"
+							ng-click="startNewComment(); toggleReviewPanel();"
+						)
+							i.fa.fa-commenting
+
+					.rp-entry(
+						ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
+					)
+						div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
+							.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")
+
+								.rp-entry-metadata
+									p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
+									p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
+								.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
+							.rp-entry-body(ng-switch="entry.type")
+									span(ng-switch-when="insert") Added 
+										ins.rp-content-highlight {{ entry.content }} 
+									span(ng-switch-when="delete") Delete 
+										del.rp-content-highlight {{ entry.content }} 
+							.rp-entry-actions
+								a.rp-entry-button(href, ng-click="rejectChange(entry_id)") 
+									i.fa.fa-times
+									|  Reject
+								a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
+									i.fa.fa-check
+									|  Accept
+						div(ng-if="entry.type == 'comment'")
+							.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%, 40%);") {{ users[comment.user_id].name }}
+							.rp-comment-reply
+								textarea.rp-comment-input(
+									ng-model="entry.replyContent"
+									ng-keypress="handleCommentReplyKeyPress($event, entry);"
+									placeholder="Hit \"Enter\" to reply"
+								)
+							.rp-entry-actions
+								a.rp-entry-button(href) 
+									i.fa.fa-check
+									|  Mark as resolved
+					
+						div(ng-if="entry.type == 'add-comment'")
+							a.rp-add-comment-btn(
+								href
+								ng-if="!commentState.adding"
+								ng-click="startNewComment()"
+							) 
+								i.fa.fa-comment
+								|  Add comment
+							div(ng-if="commentState.adding")
+								.rp-new-comment
+									textarea.rp-comment-input(
+										ng-model="commentState.content"
+										placeholder="Add your comment here"
+									)
+								.rp-entry-actions
+									a.rp-entry-button(href, ng-click="cancelNewComment()") 
+										i.fa.fa-times
+										|  Cancel
+									a.rp-entry-button(href, ng-click="submitNewComment()") 
+										i.fa.fa-comment
+										|  Comment
+
+	.rp-nav
+		a.rp-nav-item(
+			href
+			ng-click="setSubView(SubViews.CUR_FILE);"
+			ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.CUR_FILE }"
+		)
+			i.fa.fa-file-text-o
+			span.rp-nav-label Current file
+		a.rp-nav-item(
+			href
+			ng-click="setSubView(SubViews.OVERVIEW);"
+			ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.OVERVIEW }"
+		)
+			i.fa.fa-list
+			span.rp-nav-label Overview
+
+
+script(type='text/ng-template', id='changeEntryTemplate')
+
+script(type='text/ng-template', id='commentEntryTemplate')