Refactor layout and CSS to be more manageable with overview classes

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

@@ -9,7 +9,7 @@ div.full-size(
 	minimum-restore-size-east="300"
 	allow-overflow-on="'center'"
 )
-	.ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'has-review-panel': ui.reviewPanelOpen, 'has-entries': reviewPanel.hasEntries }")
+	.ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'rp-show-expanded': ui.reviewPanelOpen, 'rp-show-mini': reviewPanel.hasEntries && !ui.reviewPanelOpen }")
 		.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")
 			span(ng-show="editor.open_doc_id")
 				i.fa.fa-spin.fa-refresh

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

@@ -2,9 +2,10 @@
 	.review-panel-toolbar
 		| Track Changes 
 		input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
-	.rp-entry-list(
+	.rp-entry-list.rp-entry-list-current-file(
 		review-panel-sorted
 		ng-if="reviewPanel.subView === SubViews.CUR_FILE"
+		ng-class="{ 'rp-entry-list-current-file-expanded': ui.reviewPanelOpen, 'rp-entry-list-current-file-mini': !ui.reviewPanelOpen }"
 	)
 		.rp-entry-list-inner
 			.rp-entry-wrapper(
@@ -36,107 +37,34 @@
 						on-indicator-click="toggleReviewPanel();"
 					)
 
-		.rp-overview-entry-list(
+	.rp-entry-list.rp-entry-list-overview(
-			ng-if="reviewPanel.subView === SubViews.OVERVIEW"
+		ng-if="reviewPanel.subView === SubViews.OVERVIEW"
+	)
+		.rp-overview-file(
+			ng-repeat="(doc_id, entries) in reviewPanel.entries"
 		)
-			.rp-overview-file(
+			.rp-overview-file-header
-				ng-repeat="(doc_id, entries) in reviewPanel.entries"
+				| {{ doc_id }}
+			.rp-entry-wrapper(
+				ng-repeat="(entry_id, entry) in entries"
 			)
-				.rp-overview-file-header
+				div(ng-if="entry.type === 'insert' || entry.type === 'delete'")
-					| {{ doc_id }}
+					change-entry(
-				.rp-entry-wrapper(
+						entry="entry"
-					ng-repeat="(entry_id, entry) in entries"
+						user="users[entry.metadata.user_id]"
-				)
+						on-reject="rejectChange(entry_id);"
-					.rp-entry-callout(
+						on-accept="acceptChange(entry_id);"
-						ng-class="'rp-entry-callout-' + entry.type"
+						on-indicator-click="toggleReviewPanel();"
 					)
 
-					div(ng-switch="entry.type")
+				div(ng-if="entry.type === 'comment'")
-						.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+					comment-entry(
-							i.fa.fa-pencil
+						entry="entry"
-						.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+						users="users"
-							i.rp-icon-delete
+						on-resolve=""
-						.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
+						on-reply="submitReply(entry);"
-							i.fa.fa-comment
+						on-indicator-click="toggleReviewPanel();"
-						.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(

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

@@ -58,8 +58,17 @@
 
 #review-panel {
 	display: none;
+	.rp-show-expanded & {
+		display: block;
+		width: @review-panel-width;
+		overflow: hidden;
+	}
+	.rp-show-mini & {
+		display: block;
+		width: @review-off-width;
+		overflow: hidden;
+	}
 	position: absolute;
-	width: @review-off-width; 
 	top: 0px;
 	bottom: 0px;
 	right: 0px;
@@ -71,6 +80,9 @@
 
 .review-panel-toolbar {
 	display: none;
+	.rp-show-expanded & {
+		display: block;
+	}
 	height: 32px;
 	padding: 6px;
 	border-bottom: 1px solid @rp-border-grey;
@@ -84,7 +96,12 @@
 }
 
 .rp-entry-list {
-	width: @review-off-width;
+	.rp-show-expanded & {
+		width: @review-panel-width;
+	}
+	.rp-show-mini & {
+		width: @review-off-width;
+	}
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -95,7 +112,10 @@
 }
 
 .rp-entry-indicator {
-	display: block;
+	display: none;
+	.rp-show-mini & {
+		display: block;
+	}
 	position: absolute;
 	left: 2px;
 	right: 2px;
@@ -122,22 +142,48 @@
 }
 
 .rp-entry {
-	display: none;
+	.rp-entry-list-current-file & {
-	position: absolute;
+		position: absolute;
-	left: @review-off-width + @rp-entry-arrow-width;
+		width: @review-panel-width;
-	width: @review-panel-width;
+	}
+	.rp-entry-list-current-file-mini & {
+		display: none;
+		left: @review-off-width + @rp-entry-arrow-width;
+		box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2);
+		&::before {
+			.triangle(left, @rp-entry-arrow-width, 6px, inherit);
+			top: (@review-off-width / 2) - @rp-entry-arrow-width;
+			left: -(@rp-entry-ribbon-width  + @rp-entry-arrow-width);
+			content: '';
+		}
+	}
+	.rp-entry-list-current-file-expanded & {
+		left: 5px;
+		right: 5px;
+		width: auto;
+
+		&-focused {
+			left: 0px;
+			right: 10px;
+			z-index: 1;
+		}
+
+		&-add-comment {
+			right: auto;
+
+			&.rp-entry-adding-comment {
+				right: 5px;
+			}
+		}
+	}
+	.rp-entry-list-overview & {
+		margin: 5px;
+	}
+
 	border-left: solid @rp-entry-ribbon-width transparent;
 	border-radius: 3px;
 	background-color: #FFF;
 	transition: top 0.3s, left 0.1s, right 0.1s;
-	box-shadow: 0 0 10px 5px rgba(0, 0, 0, .2);
-
-	&::before {
-		.triangle(left, @rp-entry-arrow-width, 6px, inherit);
-		top: (@review-off-width / 2) - @rp-entry-arrow-width;
-		left: -(@rp-entry-ribbon-width  + @rp-entry-arrow-width);
-		content: '';
-	}
 
 	&-insert {
 		border-color: @rp-green;
@@ -323,21 +369,37 @@
 }
 
 .rp-entry-callout {
-	position: absolute;
+	.rp-entry-list-current-file & {
-	width: 1px;
-	border-top: 1px solid grey;
-	border-right: 1px dashed grey;
-	&::after {
-		content: "";
 		position: absolute;
+		border-top: 1px solid grey;
+		border-right: 1px dashed grey;
+		&::after {
+			content: "";
+			position: absolute;
+			top: -1px;
+			left: 3px;
+			bottom: 0;
+			border-bottom: 1px solid grey;
+		}
+	}
+	.rp-entry-list-current-file-expanded & {
+		width: 3px;
+		&::after {
+			width: 3px;
+		}
+	}
+	.rp-entry-list-current-file-mini & {
 		width: 1px;
-		top: -1px;
+		&::after {
-		left: 3px;
+			width: 1px;
-		bottom: 0;
+		}
-		border-bottom: 1px solid grey;
 	}
 	
-	&-inverted {
+	.rp-entry-list-overview & {
+		display: none;
+	}
+	
+	.rp-entry-list-current-file &-inverted {
 		border-top: none;
 		border-bottom: 1px solid grey;
 		&::after {
@@ -348,21 +410,21 @@
 		}
 	}
 	
-	&-insert {
+	.rp-entry-list-current-file &-insert {
 		border-color: @rp-green;
 		&::after {
 			border-color: @rp-green;
 		}
 	}
 	
-	&-delete {
+	.rp-entry-list-current-file &-delete {
 		border-color: @rp-red;
 		&::after {
 			border-color: @rp-red;
 		}
 	}
 	
-	&-comment {
+	.rp-entry-list-current-file &-comment {
 		border-color: @rp-yellow;
 		&::after {
 			border-color: @rp-yellow;
@@ -371,7 +433,10 @@
 }
 
 .rp-nav {
-	display: none;
+	display: flex;
+	.rp-show-mini & {
+		display: none;
+	}
 	position: absolute;
 	bottom: 0;
 	width: 100%;
@@ -403,22 +468,8 @@
 			font-size: @rp-base-font-size;
 		}
 
-
+#editor {
-.has-entries {
+	.rp-show-expanded & {
-	#editor {
-		right: @review-off-width;
-		.ace-editor-body {
-			overflow: visible;
-		}
-	}
-
-	#review-panel {
-		display: block;
-	}
-}
-
-.has-review-panel {
-	#editor {
 		right: @review-panel-width;
 		left: 0px;
 		width: auto;
@@ -429,59 +480,11 @@
 			}
 		}
 	}
-
+	
-	#review-panel {
+	.rp-show-mini & {
-		display: block;
+		right: @review-off-width;
-		width: @review-panel-width;
+		.ace-editor-body {
-		overflow: hidden;
+			overflow: visible;
+		}
 	}
-
+}
-		.review-panel-toolbar {
-			display: block;
-		}
-
-		.rp-entry-list {
-			width: @review-panel-width;
-		}
-
-			.rp-entry {
-				display: block;
-				left: 5px;
-				right: 5px;
-				width: auto;
-				box-shadow: none;
-
-				&::before {
-					content: none;
-				}
-
-				&-focused {
-					left: 0px;
-					right: 10px;
-					z-index: 1;
-				}
-
-				&-add-comment {
-					right: auto;
-
-					&.rp-entry-adding-comment {
-						right: 5px;
-					}
-				}
-			}
-			
-			.rp-entry-callout {
-				width: 3px;
-				&::after {
-					width: 3px;
-				}
-			}
-
-			.rp-entry-indicator {
-				display: none;
-			}
-
-		.rp-nav {
-			display: flex;
-		}
-}