Make mini review panel entries scroll and stack like main panel

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

@@ -51,7 +51,7 @@ div.full-size(
 				| Track Changes 
 				input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
 			.review-panel-scroller
-				.rp-entry-list(review-panel-sorted)
+				.rp-entry-list(review-panel-sorted, review-panel-sorted-entry-class="ui.reviewPanelOpen ? 'rp-entry' : 'rp-entry-indicator'")
 					.rp-entry-wrapper(
 						ng-repeat="(entry_id, entry) in reviewPanel.entries"
 					)
@@ -60,11 +60,11 @@ div.full-size(
 						)
 
 						div(ng-switch="entry.type")
-							.rp-entry-indicator(ng-switch-when="insert")
+							.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")
+							.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")
+							.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"

services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee

@@ -53,7 +53,6 @@ define [
 		$scope.$watch "ui.reviewPanelOpen", (reviewPanelOpen) ->
 			return if !reviewPanelOpen?
 			if reviewPanelOpen
-				$scope.$broadcast "review-panel:layout"
 				scroller.on "scroll", scrollAce
 				$scope.onScroll = scrollPanel # Passed into the editor directive for it to call
 			else
@@ -61,6 +60,7 @@ define [
 				$scope.onScroll = null
 			$timeout () ->
 				$scope.$broadcast "review-panel:toggle"
+				$scope.$broadcast "review-panel:layout"
 
 		$scope.$watch (() -> Object.keys($scope.reviewPanel.entries).length), (nEntries) ->
 			$scope.reviewPanel.hasEntries = nEntries > 0

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

@@ -5,7 +5,8 @@ define [
 		return  {
 			link: (scope, element, attrs) ->
 				TOOLBAR_HEIGHT = 28
-				ENTRY_PADDING = 12
+				BOX_PADDING = 12
+				INDICATOR_PADDING = 4
 				
 				previous_focused_entry_index = 0
 				
@@ -43,31 +44,55 @@ define [
 					focused_entry.$indicator_el.css(top: focused_entry_top)
 					focused_entry.$callout_el.css(top: focused_entry_top + line_height, height: 0)
 					
-					previousBottom = focused_entry_top + focused_entry.$box_el.height()
+					previousBoxBottom = focused_entry_top + focused_entry.$box_el.height()
+					previousIndicatorBottom = focused_entry_top + focused_entry.$indicator_el.height()
 					for entry in entries_after
-						height = entry.$box_el.height()
 						original_top = entry.scope.entry.screenPos.y
-						top = Math.max(original_top, previousBottom + ENTRY_PADDING)
-						previousBottom = top + height
-						entry.$box_el.css(top: top, bottom: 'auto')
-						entry.$indicator_el.css(top: top, bottom: 'auto')
+						box_height = entry.$box_el.height()
+						box_top = Math.max(original_top, previousBoxBottom + BOX_PADDING)
+						indicator_height = entry.$indicator_el.height()
+						indicator_top = Math.max(original_top, previousIndicatorBottom + INDICATOR_PADDING)
+						previousBoxBottom = box_top + box_height
+						previousIndicatorBottom = indicator_top + indicator_height
+						entry.$box_el.css(top: box_top, bottom: 'auto')
+						entry.$indicator_el.css(top: indicator_top, bottom: 'auto')
+
 						entry.$callout_el.removeClass("rp-entry-callout-inverted")
-						entry.$callout_el.css(top: original_top + line_height, height: top - original_top)
+						
+						if scope.ui.reviewPanelOpen
+							callout_height = box_top - original_top
+						else
+							callout_height = indicator_top - original_top
+
+						entry.$callout_el.css(top: original_top + line_height, height: callout_height)
 						sl_console.log "ENTRY", {entry: entry.scope.entry, top}
 					
-					previousTop = focused_entry_top
+					previousBoxTop = focused_entry_top
+					previousIndicatorTop = focused_entry_top
 					entries_before.reverse() # Work through backwards, starting with the one just above
 					for entry in entries_before
-						height = entry.$box_el.height()
 						original_top = entry.scope.entry.screenPos.y
-						original_bottom = original_top + height
-						bottom = Math.min(original_bottom, previousTop - ENTRY_PADDING)
-						top = bottom - height
-						previousTop = top
-						entry.$box_el.css(top: top)
-						entry.$indicator_el.css(top: top, bottom: 'auto')
+						box_height = entry.$box_el.height()
+						original_box_bottom = original_top + box_height
+						box_bottom = Math.min(original_box_bottom, previousBoxTop - BOX_PADDING)
+						box_top = box_bottom - box_height
+						indicator_height = entry.$indicator_el.height()
+						original_indicator_bottom = original_top + indicator_height
+						indicator_bottom = Math.min(original_indicator_bottom, previousIndicatorTop - INDICATOR_PADDING)
+						indicator_top = indicator_bottom - indicator_height
+						previousBoxTop = box_top
+						previousIndicatorTop = indicator_top
+						entry.$box_el.css(top: box_top, bottom: 'auto')
+						entry.$indicator_el.css(top: indicator_top, bottom: 'auto')
+
 						entry.$callout_el.addClass("rp-entry-callout-inverted")
-						entry.$callout_el.css(top: top + line_height + 1, height: original_top - top)
+						
+						if scope.ui.reviewPanelOpen
+							callout_top = box_top + line_height
+						else
+							callout_top = indicator_top + line_height
+
+						entry.$callout_el.css(top: callout_top + 1, height: original_top - callout_top + line_height)
 						sl_console.log "ENTRY", {entry: entry.scope.entry, top}
 				
 				scope.$watch "reviewPanel.entryGeneration", (value) ->

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

@@ -22,7 +22,7 @@
 @rp-entry-arrow-width	: 4px;
 @rp-semibold-weight		: 600;
 @review-panel-width		: 230px;
-@review-off-width		: 20px;
+@review-off-width		: 22px;
 
 @rp-scroller-offset		: 30px;
 
@@ -83,7 +83,7 @@
 	top: 0;
 	left: 0;
 	right: 0;
-	z-index: 1;
+	z-index: 2;
 }
 
 .review-panel-scroller {
@@ -103,13 +103,20 @@
 .rp-entry-indicator {
 	display: block;
 	position: absolute;
-	left: 1px;
-	right: 1px;
+	left: 2px;
+	right: 2px;
 	text-align: center;
 	background-color: @rp-highlight-blue;
 	border-radius: 3px;
 	color: #FFF;
 	cursor: pointer;
+	transition: top 0.3s, left 0.1s, right 0.1s;
+	
+	&-focused {
+		left: 0px;
+		right: 4px;
+		z-index: 1;
+	}
 }
 
 .rp-entry-wrapper {
@@ -323,13 +330,13 @@
 
 .rp-entry-callout {
 	position: absolute;
-	width: 3px;
+	width: 1px;
 	border-top: 1px solid grey;
 	border-right: 1px dashed grey;
 	&::after {
 		content: "";
 		position: absolute;
-		width: 3px;
+		width: 1px;
 		top: -1px;
 		left: 3px;
 		bottom: 0;
@@ -443,6 +450,13 @@
 
 
 			}
+			
+			.rp-entry-callout {
+				width: 3px;
+				&::after {
+					width: 3px;
+				}
+			}
 
 			.rp-entry-indicator {
 				display: none;