Add custom styling; add code to handle point-in-time selection.

services/web/app/views/project/editor/history/entriesListV2.pug

@@ -9,6 +9,7 @@ aside.change-list(
 		load-disabled="history.loading || history.atEnd"
 		load-initialize="ui.view == 'history'"
 		is-loading="history.loading"
+		on-entry-select="handleEntrySelect(selectedEntry)"
 	)
 
 
@@ -23,6 +24,7 @@ script(type="text/ng-template", id="historyEntriesListTpl")
 				ng-repeat="entry in $ctrl.entries"
 				entry="entry"
 				current-user="$ctrl.currentUser"
+				on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })"
 			)
 			.loading(ng-show="history.loading")
 				i.fa.fa-spin.fa-refresh
@@ -31,13 +33,13 @@ script(type="text/ng-template", id="historyEntriesListTpl")
 script(type="text/ng-template", id="historyEntryTpl")
 	.history-entry(
 		ng-class="{\
-			'first-in-day': $ctrl.entry.meta.first_in_day,\
-			'selected': $ctrl.entry.inSelection,\
-			'selected-to': $ctrl.entry.selectedTo,\
-			'selected-from': $ctrl.entry.selectedFrom,\
-			'hover-selected': $ctrl.entry.inHoverSelection,\
-			'hover-selected-to': $ctrl.entry.hoverSelectedTo,\
-			'hover-selected-from': $ctrl.entry.hoverSelectedFrom,\
+			'history-entry-first-in-day': $ctrl.entry.meta.first_in_day,\
+			'history-entry-selected': $ctrl.entry.inSelection,\
+			'history-entry-selected-to': $ctrl.entry.selectedTo,\
+			'history-entry-selected-from': $ctrl.entry.selectedFrom,\
+			'history-entry-hover-selected': $ctrl.entry.inHoverSelection,\
+			'history-entry-hover-selected-to': $ctrl.entry.hoverSelectedTo,\
+			'history-entry-hover-selected-from': $ctrl.entry.hoverSelectedFrom,\
 		}"
 	)
 
@@ -66,7 +68,7 @@ script(type="text/ng-template", id="historyEntryTpl")
 		//- 			ng-show="$ctrl.entry.beforeSelection || $ctrl.entry.inSelection"
 				)
 
-		.history-entry-details(ng-click="select()")
+		.history-entry-details(ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })")
 			ol.history-entry-changes
 				li.history-entry-change(
 					ng-repeat="pathname in ::$ctrl.entry.pathnames"

services/web/public/coffee/ide/history/HistoryV2Manager.coffee

@@ -2,12 +2,13 @@ define [
 	"moment"
 	"ide/colors/ColorManager"
 	"ide/history/util/displayNameForUser"
+	"ide/history/util/HistoryViewModes"
 	"ide/history/controllers/HistoryListController"
 	"ide/history/controllers/HistoryDiffController"
 	"ide/history/directives/infiniteScroll"
 	"ide/history/components/historyEntriesList"
 	"ide/history/components/historyEntry"
-], (moment, ColorManager, displayNameForUser) ->
+], (moment, ColorManager, displayNameForUser, HistoryViewModes) ->
 	class HistoryManager
 		constructor: (@ide, @$scope) ->
 			@reset()
@@ -18,13 +19,13 @@ define [
 				else
 					@show()
 
-			@$scope.$watch "history.selection.updates", (updates) =>
-				if updates? and updates.length > 0
-					@_selectDocFromUpdates()
-					@reloadDiff()
+			# @$scope.$watch "history.selection.updates", (updates) =>
+			# 	if updates? and updates.length > 0
+			# 		@_selectDocFromUpdates()
+			# 		@reloadDiff()
 
-			@$scope.$watch "history.selection.pathname", () =>
-				@reloadDiff()
+			# @$scope.$watch "history.selection.pathname", () =>
+			# 	@reloadDiff()
 
 		show: () ->
 			@$scope.ui.view = "history"
@@ -37,6 +38,7 @@ define [
 			@$scope.history = {
 				isV2: true
 				updates: []
+				viewMode: HistoryViewModes.POINT_IN_TIME
 				nextBeforeTimestamp: null
 				atEnd: false
 				selection: {
@@ -72,6 +74,21 @@ define [
 
 			@$scope.history.updates[indexOfLastUpdateNotByMe].selectedFrom = true
 
+		autoSelectLastUpdate: () ->
+			return if @$scope.history.updates.length == 0
+			@$scope.history.updates[0].selectedTo = true
+			@$scope.history.updates[0].selectedFrom = true
+
+		selectUpdate: (update) ->
+			selectedUpdateIndex = @$scope.history.updates.indexOf update
+			if selectedUpdateIndex == -1
+				selectedUpdateIndex = 0
+			for update in @$scope.history.updates
+				update.selectedTo = false
+				update.selectedFrom = false
+			@$scope.history.updates[selectedUpdateIndex].selectedTo = true
+			@$scope.history.updates[selectedUpdateIndex].selectedFrom = true
+
 		BATCH_SIZE: 10
 		fetchNextBatchOfUpdates: () ->
 			url = "/project/#{@ide.project_id}/updates?min_count=#{@BATCH_SIZE}"
@@ -202,7 +219,11 @@ define [
 			@$scope.history.updates =
 				@$scope.history.updates.concat(updates)
 
-			@autoSelectRecentUpdates() if firstLoad
+			if firstLoad 
+				if @$scope.history.viewMode == HistoryViewModes.COMPARE
+					@autoSelectRecentUpdates()
+				else 
+					@autoSelectLastUpdate()
 
 		_perDocSummaryOfUpdates: (updates) ->
 			# Track current_pathname -> original_pathname

services/web/public/coffee/ide/history/components/historyEntriesList.coffee

@@ -2,7 +2,7 @@ define [
 	"base"
 ], (App) ->
 	historyEntriesListController = ($scope, $element, $attrs) ->
-		ctrl = @
+		ctrl = @ 
 		return
 
 	App.component "historyEntriesList", {
@@ -13,6 +13,7 @@ define [
 			loadInitialize: "<"
 			isLoading: "<"
 			currentUser: "<"
+			onEntrySelect: "&"
 		controller: historyEntriesListController
 		templateUrl: "historyEntriesListTpl"
 	}

services/web/public/coffee/ide/history/components/historyEntry.coffee

@@ -19,6 +19,7 @@ define [
 		bindings:
 			entry: "<"
 			currentUser: "<"
+			onSelect: "&"
 		controller: historyEntryController
 		templateUrl: "historyEntryTpl"
 	}

services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee

@@ -9,6 +9,11 @@ define [
 		$scope.loadMore = () =>
 			ide.historyManager.fetchNextBatchOfUpdates()
 
+		$scope.handleEntrySelect = (entry) ->
+			# $scope.$applyAsync () ->
+			ide.historyManager.selectUpdate(entry)
+			$scope.recalculateSelectedUpdates()
+
 		$scope.recalculateSelectedUpdates = () ->
 			beforeSelection = true
 			afterSelection = false
@@ -70,41 +75,41 @@ define [
 			$scope.recalculateSelectedUpdates()
 	]
 
-	App.controller "HistoryListItemController", ["$scope", "event_tracking", ($scope, event_tracking) ->
-		$scope.$watch "update.selectedFrom", (selectedFrom, oldSelectedFrom) ->
-			if selectedFrom
-				for update in $scope.history.updates
-					update.selectedFrom = false unless update == $scope.update
-				$scope.recalculateSelectedUpdates()		
-
-		$scope.$watch "update.selectedTo", (selectedTo, oldSelectedTo) ->
-			if selectedTo
-				for update in $scope.history.updates
-					update.selectedTo = false unless update == $scope.update
-				$scope.recalculateSelectedUpdates()
-
-		$scope.select = () ->
-			event_tracking.sendMB "history-view-change"
-			$scope.update.selectedTo = true
-			$scope.update.selectedFrom = true
-
-		$scope.mouseOverSelectedFrom = () ->
-			$scope.history.hoveringOverListSelectors = true
-			$scope.update.hoverSelectedFrom = true
-			$scope.recalculateHoveredUpdates()
-
-		$scope.mouseOutSelectedFrom = () ->
-			$scope.history.hoveringOverListSelectors = false
-			$scope.resetHoverState()
-
-		$scope.mouseOverSelectedTo = () ->
-			$scope.history.hoveringOverListSelectors = true
-			$scope.update.hoverSelectedTo = true
-			$scope.recalculateHoveredUpdates()
-
-		$scope.mouseOutSelectedTo = () ->
-			$scope.history.hoveringOverListSelectors = false
-			$scope.resetHoverState()
-
-		$scope.displayName = displayNameForUser
-	]
+	# App.controller "HistoryListItemController", ["$scope", "event_tracking", ($scope, event_tracking) ->
+	# 	$scope.$watch "update.selectedFrom", (selectedFrom, oldSelectedFrom) ->
+	# 		if selectedFrom
+	# 			for update in $scope.history.updates
+	# 				update.selectedFrom = false unless update == $scope.update
+	# 			$scope.recalculateSelectedUpdates()		
+
+	# 	$scope.$watch "update.selectedTo", (selectedTo, oldSelectedTo) ->
+	# 		if selectedTo
+	# 			for update in $scope.history.updates
+	# 				update.selectedTo = false unless update == $scope.update
+	# 			$scope.recalculateSelectedUpdates()
+
+	# 	$scope.select = () ->
+	# 		event_tracking.sendMB "history-view-change"
+	# 		$scope.update.selectedTo = true
+	# 		$scope.update.selectedFrom = true
+
+	# 	$scope.mouseOverSelectedFrom = () ->
+	# 		$scope.history.hoveringOverListSelectors = true
+	# 		$scope.update.hoverSelectedFrom = true
+	# 		$scope.recalculateHoveredUpdates()
+
+	# 	$scope.mouseOutSelectedFrom = () ->
+	# 		$scope.history.hoveringOverListSelectors = false
+	# 		$scope.resetHoverState()
+
+	# 	$scope.mouseOverSelectedTo = () ->
+	# 		$scope.history.hoveringOverListSelectors = true
+	# 		$scope.update.hoverSelectedTo = true
+	# 		$scope.recalculateHoveredUpdates()
+
+	# 	$scope.mouseOutSelectedTo = () ->
+	# 		$scope.history.hoveringOverListSelectors = false
+	# 		$scope.resetHoverState()
+
+	# 	$scope.displayName = displayNameForUser
+	# ]

services/web/public/coffee/ide/history/util/HistoryViewModes.coffee

@@ -0,0 +1,4 @@
+define [], () ->
+	HistoryViewModes = 
+		POINT_IN_TIME : 'point_in_time'
+		COMPARE       : 'compare'

services/web/public/stylesheets/app/editor/history-v2.less

@@ -17,6 +17,12 @@
 	background-color: #FFF;
 	margin-bottom: 2px;
 	padding: 5px 10px;
+	cursor: pointer;
+
+	.history-entry-selected & {
+		background-color: @history-entry-selected-bg;
+		color: #FFF;
+	}
 }
 	.history-entry-changes {
 		.list-unstyled;
@@ -33,6 +39,9 @@
 				color: @history-highlight-color;
 				font-weight: bold;
 				word-break: break-all;
+				.history-entry-selected & {
+					color: #FFF;
+				}
 			}
 	.history-entry-metadata {
 

services/web/public/stylesheets/core/_common-variables.less

@@ -975,8 +975,9 @@
 @sys-msg-border     : 1px solid @common-border-color;
 
 // v2 History
-@history-base-font-size  : @font-size-small;
-@history-base-bg         : @gray-lightest;
-@history-entry-day-bg    : @gray-dark;
-@history-base-color      : @gray-light;
-@history-highlight-color : @gray;
+@history-base-font-size    : @font-size-small;
+@history-base-bg           : @gray-lightest;
+@history-entry-day-bg      : @gray-dark;
+@history-entry-selected-bg : @red;
+@history-base-color        : @gray-light;
+@history-highlight-color   : @gray;

services/web/public/stylesheets/core/ol-variables.less

@@ -267,11 +267,12 @@
 
 
 // v2 History
-@history-base-font-size  : @font-size-small;
-@history-base-bg         : @ol-blue-gray-1;
-@history-entry-day-bg    : @ol-blue-gray-2;
-@history-base-color      : @ol-blue-gray-2;
-@history-highlight-color : @ol-type-color;
+@history-base-font-size    : @font-size-small;
+@history-base-bg           : @ol-blue-gray-1;
+@history-entry-day-bg      : @ol-blue-gray-2;
+@history-entry-selected-bg : @ol-green;
+@history-base-color        : @ol-blue-gray-2;
+@history-highlight-color   : @ol-type-color;
 
 // System messages
 @sys-msg-background             : @ol-blue;