Improve labelling of track changes diffs

services/web/app/views/project/editor/track-changes.jade

@@ -51,8 +51,10 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 					div.docs(ng-repeat="(doc_id, doc) in update.docs")
 						span.doc {{ doc.entity.name }}
 					div.users
-						span.user(ng-repeat="user in update.meta.users")
-							| {{user.first_name}} {{user.last_name}}
+						div.user(ng-repeat="update_user in update.meta.users")
+							.color-square(ng-style="{'background-color': 'hsl({{ update_user.hue }}, 100%, 50%)'}")
+							span(ng-if="update_user.id != user.id") {{user.first_name}} {{user.last_name}}
+							span(ng-if="update_user.id == user.id") You
 
 	.diff.full-size
 		.diff-editor(

services/web/public/coffee/app/ide/editor/annotations/AnnotationsManager.coffee

@@ -74,40 +74,55 @@ define [
 				if label.range.contains(position.row, position.column)
 					labelToShow = label
 
-			@$scope.$apply () =>
-				if !labelToShow?
+			if !labelToShow?
+				@$scope.$apply () =>
 					@$scope.annotationLabel.show = false
+			else
+				$ace = $(@editor.renderer.container).find(".ace_scroller")
+				# Move the label into the Ace content area so that offsets and positions are easy to calculate.
+				$ace.append(@element.find(".annotation-label"))
+
+				if labelToShow.snapToStartOfRange
+					coords = @editor.renderer.textToScreenCoordinates(labelToShow.range.start.row, labelToShow.range.start.column)
 				else
-					$ace = $(@editor.renderer.container).find(".ace_scroller")
-					# Move the label into the Ace content area so that offsets and positions are easy to calculate.
-					$ace.append(@element.find(".annotation-label"))
+					coords = @editor.renderer.textToScreenCoordinates(position.row, position.column)
 
-					if labelToShow.snapToStartOfRange
-						coords = @editor.renderer.textToScreenCoordinates(labelToShow.range.start.row, labelToShow.range.start.column)
-					else
-						coords = @editor.renderer.textToScreenCoordinates(position.row, position.column)
+				offset = $ace.offset()
+				height = $ace.height()
+				coords.pageX = coords.pageX - offset.left
+				coords.pageY = coords.pageY - offset.top
 
-					offset = $ace.offset()
-					height = $ace.height()
-					coords.pageX = coords.pageX - offset.left
-					coords.pageY = coords.pageY - offset.top
+				if coords.pageY > @editor.renderer.lineHeight * 2
+					top    = "auto"
+					bottom = height - coords.pageY
+				else
+					top    = coords.pageY + @editor.renderer.lineHeight
+					bottom = "auto"
 
-					if coords.pageY > 100
-						top    = "auto"
-						bottom = height - coords.pageY
-					else
-						top    = coords.pageY + @editor.renderer.lineHeight
-						bottom = "auto"
+				# Apply this first that the label has the correct width when calculating below
+				@$scope.$apply () =>
+					@$scope.annotationLabel.text = labelToShow.text
+					@$scope.annotationLabel.show = true
 
-					left   = coords.pageX
+				$label = @element.find(".annotation-label")
+				console.log "pageX", coords.pageX, "label", $label.outerWidth(), "ace", $ace.width()
+
+				if coords.pageX + $label.outerWidth() < $ace.width()
+					left  = coords.pageX
+					right = "auto"
+				else
+					right = 0
+					left = "auto"
 
+				@$scope.$apply () =>
 					@$scope.annotationLabel = {
-						show: true
-						left: left
+						show:   true
+						left:   left
+						right:  right
 						bottom: bottom
 						top:    top
 						backgroundColor: labelToShow.colorScheme.labelBackgroundColor
-						text: labelToShow.text
+						text:   labelToShow.text
 					}
 
 		_clearMarkers: () ->

services/web/public/coffee/app/ide/track-changes/TrackChangesManager.coffee

@@ -14,14 +14,12 @@ define [
 
 			@$scope.$watch "trackChanges.selection.updates", (updates) =>
 				if updates? and updates.length > 0
-					@_calculateRangeFromSelection()
 					@_selectDocFromUpdates()
 					@reloadDiff()
 
 			@$scope.$on "entity:selected", (event, entity) =>
 				if (@$scope.ui.view == "track-changes") and (entity.type == "doc")
 					@$scope.trackChanges.selection.doc = entity
-					@$scope.trackChanges.selection.range = @_calculateRangeFromSelection()
 					@reloadDiff()
 
 		onShow: () ->
@@ -76,11 +74,12 @@ define [
 						@$scope.trackChanges.atEnd = true
 
 		reloadDiff: () ->
-			console.log "Checking if diff has changed"
 
 			diff = @$scope.trackChanges.diff
 			{updates, doc} = @$scope.trackChanges.selection
-			{fromV, toV}   = @$scope.trackChanges.selection.range
+			{fromV, toV}   = @_calculateRangeFromSelection()
+
+			console.log "Checking if diff has changed", doc?.id, fromV, toV, updates
 
 			return if !doc?
 
@@ -144,18 +143,23 @@ define [
 						column: endColumn
 				}
 
-				if entry.i?
-					annotations.push {
-						label: entry.meta.user.first_name
-						highlight: range
-						hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user.id)
-					}
-				else if entry.d?
-					annotations.push {
-						label: entry.meta.user.first_name
-						strikeThrough: range
-						hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user.id)
-					}
+				if entry.i? or entry.d?
+					name = "#{entry.meta.user.first_name} #{entry.meta.user.last_name}"
+					if entry.meta.user.id == @$scope.user.id
+						name = "you"
+					date = moment(entry.meta.end_ts).format("Do MMM YYYY, h:mm a")
+					if entry.i?
+						annotations.push {
+							label: "Added by #{name} on #{date}"
+							highlight: range
+							hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user.id)
+						}
+					else if entry.d?
+						annotations.push {
+							label: "Deleted by #{name} on #{date}"
+							strikeThrough: range
+							hue: @ide.onlineUsersManager.getHueForUserId(entry.meta.user.id)
+						}
 
 			return {text, annotations}
 
@@ -187,11 +191,8 @@ define [
 			selected_doc_id = @$scope.trackChanges.selection.doc?.id
 
 			for update in @$scope.trackChanges.selection.updates or []
-				console.log "Checking update", update
 				for doc_id, doc of update.docs
-					console.log "Checking doc", doc_id, selected_doc_id, doc.fromV, doc.toV
 					if doc_id == selected_doc_id
-						console.log "Doc matches"
 						if fromV? and toV?
 							fromV = Math.min(fromV, doc.fromV)
 							toV = Math.max(toV, doc.toV)
@@ -204,13 +205,12 @@ define [
 							end_ts = update.meta.end_ts
 						break
 
-			@$scope.trackChanges.selection.range = {fromV, toV, start_ts, end_ts}
+			return {fromV, toV, start_ts, end_ts}
 
 		# Set the track changes selected doc to one of the docs in the range
 		# of currently selected updates. If we already have a selected doc
 		# then prefer this one if present.
 		_selectDocFromUpdates: () ->
-			console.log "selecting doc"
 			affected_docs = {}
 			for update in @$scope.trackChanges.selection.updates
 				for doc_id, doc of update.docs
@@ -226,7 +226,8 @@ define [
 					selected_doc_id = doc_id
 					break
 
-			@$scope.trackChanges.selection.doc = @ide.fileTreeManager.findEntityById(selected_doc_id)
+			doc = @$scope.trackChanges.selection.doc = @ide.fileTreeManager.findEntityById(selected_doc_id)
+			@ide.fileTreeManager.selectEntity(doc)
 
 		_updateContainsUserId: (update, user_id) ->
 			for user in update.meta.users

services/web/public/stylesheets/app/editor.less

@@ -83,6 +83,7 @@
 		font-family: @font-family-sans-serif;
 		color: white;
 		font-weight: 700;
+		white-space: nowrap;
 	}
 	.annotation {
 		position: absolute;

services/web/public/stylesheets/app/editor/track-changes.less

@@ -6,7 +6,7 @@
 @day-header-height: 24px;
 
 @range-bar-color: @link-color;
-@range-bar-selected-offset: 10px;
+@range-bar-selected-offset: 14px;
 
 #trackChanges {
 	// .track-changes-diff {
@@ -136,7 +136,6 @@
 		ul {
 			li.change {
 				position: relative;
-				cursor: pointer;
 				user-select: none;
 				-ms-user-select: none;
 				-moz-user-select: none;
@@ -186,11 +185,27 @@
 					padding-left: 38px;
 					min-height: 38px;
 					border-bottom: 1px solid @toolbar-border-color;
+					cursor: pointer;
+					&:hover {
+						background-color: @gray-lightest;
+					}
 				}
-				.user {
-					font-size: 0.8rem;
-					color: @gray;
-					text-transform: capitalize;
+				.users {
+					.user {
+						font-size: 0.8rem;
+						color: @gray;
+						text-transform: capitalize;
+						position: relative;
+						padding-left: 16px;
+						.color-square {
+							height: 12px;
+							width: 12px;
+							border-radius: 3px;
+							position: absolute;
+							top: 3px;
+							left: 0;
+						}
+					}
 				}
 				.time {
 					float: right;
@@ -200,20 +215,10 @@
 					font-size: 0.8rem;
 					line-height: @line-height-computed;
 				}
-				// .color-square {
-				// 	display: inline-block;
-				// 	height: 10px;
-				// 	width: 10px;
-				// 	margin-right: 4px;
-				// 	margin-bottom: -1px;
-				// }
 				.docs {
 					font-weight: bold;
 					font-size: 0.9rem;
 				}
-				&:hover {
-					background-color: @gray-lightest;
-				}
 			}
 			li.loading-changes, li.empty-message {
 				padding: 6px;