Create (hopefully) more intuitive change selector

services/web/app/views/templates.jade

@@ -435,6 +435,7 @@
 
 	script(type='text/template')#changeListItemTemplate
 		div(class='change-selectors')
+			div.range
 			input(type="radio",name="fromVersion").change-selector-from
 			input(type="radio",name="toVersion").change-selector-to
 

services/web/public/coffee/track-changes/ChangeListView.coffee

@@ -54,12 +54,42 @@ define [
 				@resetAllSelectors()
 				@triggerChangeDiff()
 
+			view.on "mouseenter:to", (e) =>
+				@hoverToIndex = index
+				@resetHoverStates()
+
+			view.on "mouseleave:to", (e) =>
+				delete @hoverToIndex
+				@resetHoverStates()
+
+			view.on "mouseenter:from", (e) =>
+				@hoverFromIndex = index
+				@resetHoverStates()
+
+			view.on "mouseleave:from", (e) =>
+				delete @hoverFromIndex
+				@resetHoverStates()
+
 			view.resetSelector(index, @selectedFromIndex, @selectedToIndex)
 
 		resetAllSelectors: () ->
 			for view, i in @itemViews
 				view.resetSelector(i, @selectedFromIndex, @selectedToIndex)
 
+		resetHoverStates: () ->
+			if @hoverToIndex?
+				@$("ul").addClass("hover-state")
+				for view, i in @itemViews
+					view.resetHoverState(i, @selectedFromIndex, @hoverToIndex)
+			else if @hoverFromIndex?
+				@$("ul").addClass("hover-state")
+				for view, i in @itemViews
+					view.resetHoverState(i, @hoverFromIndex, @selectedToIndex)
+			else
+				@$("ul").removeClass("hover-state")
+				for view, i in @itemViews
+					view.setHoverUnselected()
+
 		triggerChangeDiff: () ->
 			@trigger "change_diff", @collection.models[@selectedFromIndex], @collection.models[@selectedToIndex]
 
@@ -114,6 +144,15 @@ define [
 			"click .change-description"   : "onClick"
 			"click .change-selector-from" : "onFromSelectorClick"
 			"click .change-selector-to"   : "onToSelectorClick"
+			"mouseenter .change-selector-to": (args...) ->
+				@trigger "mouseenter:to", args...
+			"mouseleave .change-selector-to": (args...) ->
+				@trigger "mouseleave:to", args...
+			"mouseenter .change-selector-from": (args...) ->
+				@trigger "mouseenter:from", args...
+			"mouseleave .change-selector-from": (args...) ->
+				@trigger "mouseleave:from", args...
+
 	
 		template : $("#changeListItemTemplate").html()
 
@@ -168,12 +207,38 @@ define [
 		setToChecked: (checked) ->
 			@$(".change-selector-to").prop("checked", checked)
 
-		setSelected: () ->
+		setSelected: (first, last) ->
 			@$el.addClass("selected")
+			if first
+				@$el.addClass("selected-to")
+			else
+				@$el.removeClass("selected-to")
+			if last
+				@$el.addClass("selected-from")
+			else
+				@$el.removeClass("selected-from")
 
 		setUnselected: () ->
+			@$el.removeClass("selected-to")
+			@$el.removeClass("selected-from")
 			@$el.removeClass("selected")
 
+		setHoverSelected: (first, last) ->
+			@$el.addClass("hover-selected")
+			if first
+				@$el.addClass("hover-selected-to")
+			else
+				@$el.removeClass("hover-selected-to")
+			if last
+				@$el.addClass("hover-selected-from")
+			else
+				@$el.removeClass("hover-selected-from")
+
+		setHoverUnselected: () ->
+			@$el.removeClass("hover-selected-to")
+			@$el.removeClass("hover-selected-from")
+			@$el.removeClass("hover-selected")
+
 		resetSelector: (myIndex, selectedFromIndex, selectedToIndex) ->
 			if myIndex >= selectedToIndex
 				@showFromSelector()
@@ -186,13 +251,19 @@ define [
 				@hideToSelector()
 
 			if selectedToIndex <= myIndex <= selectedFromIndex
-				@setSelected()
+				@setSelected(selectedToIndex == myIndex, selectedFromIndex == myIndex)
 			else
 				@setUnselected()
 
 			@setFromChecked(myIndex == selectedFromIndex)
 			@setToChecked(myIndex == selectedToIndex)
 
+		resetHoverState: (myIndex, hoverFromIndex, hoverToIndex) ->
+			if hoverToIndex <= myIndex <= hoverFromIndex
+				@setHoverSelected(hoverToIndex == myIndex, hoverFromIndex == myIndex)
+			else
+				@setHoverUnselected()
+
 
 	return ChangeListView
 

services/web/public/coffee/track-changes/DiffView.coffee

@@ -46,6 +46,7 @@ define [
 			column = 0
 			for entry, i in @model.get("diff") or []
 				content = entry.u or entry.i or entry.d
+				content ||= ""
 				lines   = content.split("\n")
 				startRow    = row
 				startColumn = column

services/web/public/stylesheets/less/trackchanges.less

@@ -75,23 +75,30 @@
 			position: relative;
 			border-bottom: 1px solid #ccc;
 			cursor: pointer;
+			min-height: 38px;
 			.change-selectors {
-				position: absolute;
-				top: 4px;
-				left: 6px;
 				.change-selector-from {
 					position: absolute;
-					top: 0;
-					left: 0;
+					bottom: 5px;
+					left: 8px;
+					opacity: 0.8;
 				}
 				.change-selector-to {
 					position: absolute;
+					top: 5px;
+					left: 8px;
+					opacity: 0.8;
+				}
+				.range {
+					position: absolute;
+					left: 12px;
+					width: 4px;
 					top: 0;
-					left: 20px;
+					bottom: 0;
 				}
 			}
 			.change-description {
-				padding-left: 42px;
+				padding-left: 26px;
 			}
 			.change-name {
 				font-size: 0.9em;
@@ -111,6 +118,69 @@
 		}
 		li.selected {
 			background-color: #eaeaea;
+			.change-selectors {
+				.range {
+					background-color: rgb(0, 143, 255);
+				}
+			}
+		}
+		li.selected-to {
+			.change-selectors {
+				.range {
+					top: 10px;
+				}
+				.change-selector-to {
+					opacity: 1;
+				}
+			}
+		}
+		li.selected-from {
+			.change-selectors {
+				.range {
+					bottom: 10px;
+				}
+				.change-selector-from {
+					opacity: 1;
+				}
+			}
+		}
+	}
+	ul.change-list.hover-state {
+		li {
+			.change-selectors {
+				.range {
+					background-color: transparent;
+					top: 0;
+					bottom: 0;
+				}
+			}
+		}
+		li.hover-selected {
+			.change-selectors {
+				.range {
+					background-color: #999;
+				}
+			}
+		}
+		li.hover-selected-to {
+			.change-selectors {
+				.range {
+					top: 10px;
+				}
+				.change-selector-to {
+					opacity: 1;
+				}
+			}
+		}
+		li.hover-selected-from {
+			.change-selectors {
+				.range {
+					bottom: 10px;
+				}
+				.change-selector-from {
+					opacity: 1;
+				}
+			}
 		}
 	}
 }