Focus on the focused change

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

@@ -57,8 +57,7 @@ div.full-size(
 							ng-class="'rp-entry-callout-' + entry.type"
 						)
 						.rp-entry(
-							ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : '') ]"
-							ng-style="{'top': top}"
+							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
@@ -119,7 +118,7 @@ div.full-size(
 										i.fa.fa-check
 										|  Mark as resolved
 							
-							div(ng-if="entry.type == 'focus-position'")
+							div(ng-if="entry.type == 'add-comment'")
 								a.rp-add-comment-btn(
 									href
 									ng-if="!commentState.adding"

services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee

@@ -223,6 +223,7 @@ define [
 					type: "comment"
 					thread: comment.metadata.thread
 					offset: comment.offset
+					length: comment.length
 				}
 				for key, value of new_entry
 					@$scope.reviewPanel.entries[comment.id][key] = value
@@ -235,10 +236,25 @@ define [
 		
 		updateFocus: () ->
 			@updateEntryGeneration()
-			@$scope.reviewPanel.entries["focus-position"] = {
-				type: "focus-position"
-				offset: @_aceRangeToShareJs(@editor.getSelectionRange().start)
-			}
+			selection = @editor.getSelectionRange()
+			cursor_offset = @_aceRangeToShareJs(selection.start)
+
+			for id, entry of @$scope.reviewPanel.entries
+				if entry.type == "comment"
+					entry.focused = (entry.offset <= cursor_offset <= entry.offset + entry.length)
+				else if entry.type == "insert"
+					entry.focused = (entry.offset <= cursor_offset <= entry.offset + entry.content.length)
+				else if entry.type == "delete"
+					entry.focused = (entry.offset == cursor_offset)
+
+			if selection.start.column == selection.end.column and selection.start.row == selection.end.row
+				# No selection
+				delete @$scope.reviewPanel.entries["add-comment"]
+			else
+				@$scope.reviewPanel.entries["add-comment"] = {
+					type: "add-comment"
+					offset: cursor_offset
+				}
 		
 		updateEntryGeneration: () ->
 			# Rather than making angular deep watch the whole entries array

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

@@ -4,6 +4,11 @@ define [
 	App.directive "reviewPanelSorted", ($timeout) ->
 		return  {
 			link: (scope, element, attrs) ->
+				TOOLBAR_HEIGHT = 28
+				ENTRY_PADDING = 12
+				
+				previous_focused_entry_index = 0
+				
 				layout = () ->
 					sl_console.log "LAYOUT"
 					entries = []
@@ -15,14 +20,50 @@ define [
 						}
 					entries.sort (a,b) -> a.scope.entry.offset - b.scope.entry.offset
 					
-					previousBottom = 28 # This should start at the height of the toolbar
-					for entry in entries
+					return if entries.length == 0
+					
+					focused_entry_index = Math.min(previous_focused_entry_index, entries.length - 1)
+					for entry, i in entries
+						if entry.scope.entry.focused
+							focused_entry_index = i
+							break
+					entries_after = entries.slice(focused_entry_index + 1)
+					entries_before = entries.slice(0, focused_entry_index)
+					focused_entry = entries[focused_entry_index]
+					previous_focused_entry_index = focused_entry_index
+					
+					sl_console.log "focused_entry_index", focused_entry_index
+					
+					line_height = 15
+					
+					# Put the focused entry exactly where it wants to be
+					focused_entry_top = Math.max(TOOLBAR_HEIGHT, focused_entry.scope.entry.screenPos.y)
+					focused_entry.$box_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()
+					for entry in entries_after
 						height = entry.$box_el.height()
 						original_top = entry.scope.entry.screenPos.y
-						top = Math.max(original_top, previousBottom + 12)
+						top = Math.max(original_top, previousBottom + ENTRY_PADDING)
 						previousBottom = top + height
+						entry.$box_el.css(top: top, bottom: 'auto')
+						entry.$callout_el.removeClass("rp-entry-callout-inverted")
+						entry.$callout_el.css(top: original_top + line_height, height: top - original_top)
+						sl_console.log "ENTRY", {entry: entry.scope.entry, top}
+					
+					previousTop = 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.$callout_el.css(top: original_top + 15, height: top - original_top)
+						entry.$callout_el.addClass("rp-entry-callout-inverted")
+						entry.$callout_el.css(top: top + line_height + 1, height: original_top - top)
 						sl_console.log "ENTRY", {entry: entry.scope.entry, top}
 				
 				scope.$watch "reviewPanel.entryGeneration", (value) ->

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

@@ -73,6 +73,7 @@
 	border-left: solid @rp-entry-ribbon-width transparent;
 	border-radius: 3px;
 	background-color: #FFF;
+	transition: top 0.3s, left 0.1s, right 0.1s;
 
 	&-insert {
 		border-left-color: @rp-green;
@@ -98,6 +99,12 @@
 			border-left-color: @rp-yellow;
 		}
 	}
+	
+	&-focused {
+		left: 0px;
+		right: 10px;
+		z-index: 1;
+	}
 }
 	
 	.rp-entry-header {
@@ -272,6 +279,17 @@
 		border-bottom: 1px solid grey;
 	}
 	
+	&-inverted {
+		border-top: none;
+		border-bottom: 1px solid grey;
+		&:after {
+			top: 0px;
+			bottom: -1px;
+			border-top: 1px solid grey;
+			border-bottom: none;
+		}
+	}
+	
 	&-insert {
 		border-color: @rp-green;
 		&:after {