Get hover state working

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

@@ -1,13 +1,22 @@
 div#trackChanges(ng-show="ui.view == 'track-changes'")
-	aside.change-list
-		ul.list-unstyled(ng-controller="TrackChangesListController")
+	aside.change-list(
+		ng-controller="TrackChangesListController"
+	)
+		ul.list-unstyled(
+			ng-class="{\
+				'hover-state': trackChanges.hoveringOverListSelectors\
+			}"
+		)
 			li.change(
 				ng-repeat="update in trackChanges.updates"
 				ng-class="{\
 					'first-in-day': update.meta.first_in_day,\
 					'selected': update.inSelection,\
 					'selected-to': update.selectedTo,\
-					'selected-from': update.selectedFrom\
+					'selected-from': update.selectedFrom,\
+					'hover-selected': update.inHoverSelection,\
+					'hover-selected-to': update.hoverSelectedTo,\
+					'hover-selected-from': update.hoverSelectedFrom,\
 				}"
 				ng-controller="TrackChangesListItemController"
 			)
@@ -22,6 +31,9 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 							name="fromVersion"
 							ng-model="update.selectedFrom"
 							ng-value="true"
+							ng-mouseover="mouseOverSelectedFrom()"
+							ng-mouseout="mouseOutSelectedFrom()"
+							ng-show="update.afterSelection || update.inSelection"
 						)
 					form
 						input.selector-to(
@@ -29,6 +41,9 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
 							name="toVersion"
 							ng-model="update.selectedTo"
 							ng-value="true"
+							ng-mouseover="mouseOverSelectedTo()"
+							ng-mouseout="mouseOutSelectedTo()"
+							ng-show="update.beforeSelection || update.inSelection"
 						)
 
 				div.description(ng-click="select()")

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

@@ -2,14 +2,63 @@ define [
 	"base"
 ], (App) ->
 	App.controller "TrackChangesListController", ["$scope", ($scope) ->
+		$scope.hoveringOverListSelectors = false
+
 		$scope.recalculateSelectedUpdates = () ->
+			beforeSelection = true
+			afterSelection = false
 			inSelection = false
 			for update in $scope.trackChanges.updates
 				if update.selectedTo
 					inSelection = true
+					beforeSelection = false
+
+				update.beforeSelection = beforeSelection
 				update.inSelection = inSelection
+				update.afterSelection = afterSelection
+
 				if update.selectedFrom
 					inSelection = false
+					afterSelection = true
+
+		$scope.recalculateHoveredUpdates = () ->
+			hoverSelectedFrom = false
+			hoverSelectedTo = false
+			for update in $scope.trackChanges.updates
+				# Figure out whether the to or from selector is hovered over
+				if update.hoverSelectedFrom
+					hoverSelectedFrom = true
+				if update.hoverSelectedTo
+					hoverSelectedTo = true
+
+			console.log "RECALCULATING HOVER", hoverSelectedFrom, hoverSelectedTo
+
+			if hoverSelectedFrom
+				# We want to 'hover select' everything between hoverSelectedFrom and selectedTo
+				inHoverSelection = false
+				for update in $scope.trackChanges.updates
+					if update.selectedTo
+						update.hoverSelectedTo = true
+						inHoverSelection = true
+					update.inHoverSelection = inHoverSelection
+					if update.hoverSelectedFrom
+						inHoverSelection = false
+			if hoverSelectedTo
+				# We want to 'hover select' everything between hoverSelectedTo and selectedFrom
+				inHoverSelection = false
+				for update in $scope.trackChanges.updates
+					if update.hoverSelectedTo
+						inHoverSelection = true
+					update.inHoverSelection = inHoverSelection
+					if update.selectedFrom
+						update.hoverSelectedFrom = true
+						inHoverSelection = false
+
+		$scope.resetHoverState = () ->
+			for update in $scope.trackChanges.updates
+				delete update.hoverSelectedFrom
+				delete update.hoverSelectedTo
+				delete update.inHoverSelection
 	]
 
 	App.controller "TrackChangesListItemController", ["$scope", ($scope) ->
@@ -31,4 +80,22 @@ define [
 			$scope.update.selectedTo = true
 			$scope.update.selectedFrom = true
 
+		$scope.mouseOverSelectedFrom = () ->
+			$scope.trackChanges.hoveringOverListSelectors = true
+			$scope.update.hoverSelectedFrom = true
+			$scope.recalculateHoveredUpdates()
+
+		$scope.mouseOutSelectedFrom = () ->
+			$scope.trackChanges.hoveringOverListSelectors = false
+			$scope.resetHoverState()
+
+		$scope.mouseOverSelectedTo = () ->
+			$scope.trackChanges.hoveringOverListSelectors = true
+			$scope.update.hoverSelectedTo = true
+			$scope.recalculateHoveredUpdates()
+
+		$scope.mouseOutSelectedTo = () ->
+			$scope.trackChanges.hoveringOverListSelectors = false
+			$scope.resetHoverState()
+
 	]

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

@@ -1,11 +1,12 @@
 @changesListWidth:   250px;
 @changesListPadding: @line-height-computed / 2;
 
-@selector-padding-vertical: @line-height-computed / 3;
+@selector-padding-vertical: 10px;
 @selector-padding-horizontal: @line-height-computed / 2;
 @day-header-height: 24px;
 
 @range-bar-color: @link-color;
+@range-bar-selected-offset: 10px;
 
 #trackChanges {
 	// .track-changes-diff {
@@ -220,6 +221,9 @@
 			}
 			li.selected {
 				border-left: 4px solid @range-bar-color;
+				.day {
+					padding-left: 0;
+				}
 				.description {
 					padding-left: 34px;
 				}
@@ -233,7 +237,7 @@
 			li.selected-to {
 				.selectors {
 					.range {
-						top: 10px;
+						top: @range-bar-selected-offset;
 					}
 					.selector-to {
 						opacity: 1;
@@ -243,7 +247,7 @@
 			li.selected-from {
 				.selectors {
 					.range {
-						bottom: 10px;
+						bottom: @range-bar-selected-offset;
 					}
 					.selector-from {
 						opacity: 1;
@@ -251,9 +255,6 @@
 				}
 			}
 			li.first-in-day {
-				.day {
-					display: block;
-				}
 				.selectors {
 					.selector-to {
 						top: @day-header-height + @selector-padding-vertical;
@@ -263,12 +264,12 @@
 			li.first-in-day.selected-to {
 				.selectors {
 					.range {
-						top: 33px;
+						top: @day-header-height + @range-bar-selected-offset;
 					}
 				}
 			}
 		}
-		ul.list.hover-state {
+		ul.hover-state {
 			li {
 				.selectors {
 					.range {
@@ -282,14 +283,14 @@
 				.selectors {
 					.range {
 						top: 0;
-						background-color: #999;
+						background-color: @gray-light;
 					}
 				}
 			}
 			li.hover-selected-to {
 				.selectors {
 					.range {
-						top: 10px;
+						top: @range-bar-selected-offset;
 					}
 					.selector-to {
 						opacity: 1;
@@ -299,7 +300,7 @@
 			li.hover-selected-from {
 				.selectors {
 					.range {
-						bottom: 10px;
+						bottom: @range-bar-selected-offset;
 					}
 					.selector-from {
 						opacity: 1;
@@ -309,7 +310,7 @@
 			li.first-in-day.hover-selected-to {
 				.selectors {
 					.range {
-						top: 33px;
+						top: @day-header-height + @range-bar-selected-offset;
 					}
 				}
 			}