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

#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')