Allow multiple diffs to be selected

services/web/app/views/templates.jade

@@ -430,7 +430,11 @@
 			.track-changes-diff
 
 	script(type='text/template')#changeListItemTemplate
-		a(href="#")
+		div(class='change-selectors')
+			input(type="radio",name="fromVersion").change-selector-from
+			input(type="radio",name="toVersion").change-selector-to
+
+		div(class='change-description')
 			div(class='change-message') {{user_id}}
 			div(class='change-date') {{end_ts}} 
 			div(class='change-date') {{start_ts}} 

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

@@ -18,6 +18,9 @@ define [
 			@collection.on "reset", (collection) ->
 				self.addItem model for model in collection.models
 
+			@selectedFromIndex = 0
+			@selectedToIndex = 0
+
 			@render()
 			@hideLoading()
 
@@ -28,13 +31,36 @@ define [
 			this
 
 		addItem: (model) ->
+			index = @collection.indexOf(model)
 			view = new ChangeListItemView(model : model)
 			@itemViews.push view
-			index = @collection.indexOf(model)
 			elementAtIndex = @$(".change-list").children()[index]
 			view.$el.insertBefore(elementAtIndex)
+
 			view.on "click", (e, v) =>
-				@trigger "change_diff", v.model.get("version")
+				@selectedToIndex = index
+				@selectedFromIndex = index
+				@resetAllSelectors()
+				@triggerChangeDiff()
+
+			view.on "selected:to", (e, v) =>
+				@selectedToIndex = index
+				@resetAllSelectors()
+				@triggerChangeDiff()
+
+			view.on "selected:from", (e, v) =>
+				@selectedFromIndex = index
+				@resetAllSelectors()
+				@triggerChangeDiff()
+
+			view.resetSelector(index, @selectedFromIndex, @selectedToIndex)
+
+		resetAllSelectors: () ->
+			for view, i in @itemViews
+				view.resetSelector(i, @selectedFromIndex, @selectedToIndex)
+
+		triggerChangeDiff: () ->
+			@trigger "change_diff", @collection.models[@selectedFromIndex], @collection.models[@selectedToIndex]
 
 		listShorterThanContainer: ->
 			@$el.height() > @$(".change-list").height()
@@ -84,7 +110,9 @@ define [
 		tagName: "li"
 
 		events:
-			"click a": "onClick"
+			"click .change-description"   : "onClick"
+			"click .change-selector-from" : "onFromSelectorClick"
+			"click .change-selector-to"   : "onToSelectorClick"
 	
 		template : $("#changeListItemTemplate").html()
 
@@ -105,5 +133,61 @@ define [
 			e.preventDefault()
 			@trigger "click", e, @
 
+		onToSelectorClick: (e) ->
+			@trigger "selected:to", e, @
+
+		onFromSelectorClick: (e) ->
+			@trigger "selected:from", e, @
+
+		isSelectedFrom: () ->
+			@$(".change-selector-from").is(":checked")
+
+		isSelectedTo: () ->
+			@$(".change-selector-to").is(":checked")
+
+		hideFromSelector: () ->
+			@$(".change-selector-from").hide()
+
+		showFromSelector: () ->
+			@$(".change-selector-from").show()
+
+		hideToSelector: () ->
+			@$(".change-selector-to").hide()
+
+		showToSelector: () ->
+			@$(".change-selector-to").show()
+
+		setFromChecked: (checked) ->
+			@$(".change-selector-from").prop("checked", checked)
+
+		setToChecked: (checked) ->
+			@$(".change-selector-to").prop("checked", checked)
+
+		setSelected: () ->
+			@$el.addClass("selected")
+
+		setUnselected: () ->
+			@$el.removeClass("selected")
+
+		resetSelector: (myIndex, selectedFromIndex, selectedToIndex) ->
+			if myIndex >= selectedToIndex
+				@showFromSelector()
+			else
+				@hideFromSelector()
+
+			if myIndex <= selectedFromIndex
+				@showToSelector()
+			else
+				@hideToSelector()
+
+			if selectedToIndex <= myIndex <= selectedFromIndex
+				@setSelected()
+			else
+				@setUnselected()
+
+			@setFromChecked(myIndex == selectedFromIndex)
+			@setToChecked(myIndex == selectedToIndex)
+
+
 	return ChangeListView
 

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

@@ -24,12 +24,12 @@ define [
 			@changeListView.render()
 			@changeListView.loadUntilFull()
 
-			@changeListView.on "change_diff", (version) =>
+			@changeListView.on "change_diff", (fromModel, toModel) =>
 				@diff = new Diff({
 					project_id: @project_id
 					doc_id: @doc_id
-					from: version
-					to: version
+					from: fromModel.get("version")
+					to:   toModel.get("version")
 				})
 				@diffView = new DiffView(
 					model: @diff

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

@@ -1,10 +1,10 @@
-@changesListWidth:   200px;
-@versionsListPadding: 10px;
+@changesListWidth:   250px;
+@changesListPadding: 10px;
 
 #trackChangesPanel {
 	.track-changes-diff {
 		position: absolute;
-		right: @versionsListWidth + 1px;
+		right: @changesListWidth + 1px;
 		left: 0;
 		top: 0;
 		bottom: 0;
@@ -22,7 +22,7 @@
 	.track-changes-side-bar {
 		border-left: 1px solid #999;
 		height: 100%;
-		width: @versionsListWidth;
+		width: @changesListWidth;
 		position: absolute;
 		right: 0;
 	}
@@ -50,4 +50,32 @@
 			left: 0;
 		}
 	}
+
+	ul.change-list {
+		li {
+			padding: 4px;
+			position: relative;
+			.change-selectors {
+				position: absolute;
+				top: 4px;
+				left: 4px;
+				.change-selector-from {
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+				.change-selector-to {
+					position: absolute;
+					top: 0;
+					left: 20px;
+				}
+			}
+			.change-description {
+				padding-left: 40px;
+			}
+		}
+		li.selected {
+			background-color: rgb(190, 226, 244);
+		}
+	}
 }