From b3096fc74eee6d667704ab74a729aa19d1a1b17d Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Thu, 13 Mar 2014 17:32:08 +0000
Subject: [PATCH] Show helpers to make navigating around diffs easier

---
 .../coffee/track-changes/DiffView.coffee      | 48 +++++++++++++++++--
 .../public/stylesheets/less/trackchanges.less | 22 ++++++++-
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/services/web/public/coffee/track-changes/DiffView.coffee b/services/web/public/coffee/track-changes/DiffView.coffee
index 73006e2f3d..6bb083986f 100644
--- a/services/web/public/coffee/track-changes/DiffView.coffee
+++ b/services/web/public/coffee/track-changes/DiffView.coffee
@@ -16,11 +16,11 @@ define [
 			@createAceEditor()
 			@aceEditor.setValue(@getPlainDiffContent())
 			@aceEditor.clearSelection()
-			session = @aceEditor.getSession()
-			session.setMode(new LatexMode.Mode())
-			session.setUseWrapMode(true)
+			@$ace = $(@aceEditor.renderer.container).find(".ace_scroller")
 			@insertMarkers()
 			@insertNameTag()
+			@insertMoreChangeLabels()
+			@scrollToFirstChange()
 			return @
 
 		destroy: () ->
@@ -34,12 +34,18 @@ define [
 			@aceEditor.setTheme("ace/theme/#{window.userSettings.theme}")
 			@aceEditor.setReadOnly true
 			@aceEditor.setShowPrintMargin(false)
+			session = @aceEditor.getSession()
+			session.setMode(new LatexMode.Mode())
+			session.setUseWrapMode(true)
 
 			@aceEditor.on "mousemove", (e) =>
 				position = @aceEditor.renderer.screenToTextCoordinates(e.clientX, e.clientY)
 				e.position = position
 				@updateVisibleNames(e)
 
+			session.on "changeScrollTop", (e) =>
+				@updateMoreChangeLabels()
+
 		getPlainDiffContent: () ->
 			content = ""
 			for entry in @model.get("diff") or []
@@ -102,7 +108,6 @@ define [
 			, foreground
 
 		insertNameTag: () ->
-			@$ace = $(@aceEditor.renderer.container).find(".ace_scroller")
 			@$nameTagEl = $("<div class='change-name-marker'></div>")
 			@$nameTagEl.css({
 				position: "absolute"
@@ -110,6 +115,19 @@ define [
 			@$nameTagEl.hide()
 			@$ace.append(@$nameTagEl)
 
+		insertMoreChangeLabels: () ->
+			@$changesBefore = $("<div class='changes-before'><span></span> <i class='icon-arrow-up'></div>")
+			@$changesAfter = $("<div class='changes-after'><span></span> <i class='icon-arrow-down'></div>")
+			@$ace.append(@$changesBefore)
+			@$ace.append(@$changesAfter)
+			@updateMoreChangeLabels()
+
+		scrollToFirstChange: () ->
+			if @entries? and @entries[0]?
+				row = @entries[0].range.start.row
+				@aceEditor.gotoLine(0)
+				@aceEditor.gotoLine(row, 0, true)
+
 		_drawNameTag: (entry, position) ->
 			@$nameTagEl.show()
 			
@@ -161,5 +179,27 @@ define [
 			if !visibleName
 				@_hideNameTag()
 
+		updateMoreChangeLabels: () ->
+			return if !@$changesBefore or !@$changesAfter
+			firstRow = @aceEditor.renderer.getFirstFullyVisibleRow()
+			lastRow = @aceEditor.renderer.getLastFullyVisibleRow()
+			changesBefore = 0
+			changesAfter = 0
+			for entry in @entries or []
+				if entry.range.start.row < firstRow
+					changesBefore += 1
+				if entry.range.end.row > lastRow
+					changesAfter += 1
+			if changesBefore > 0
+				@$changesBefore.find("span").text("#{changesBefore} more change#{if changesBefore > 1 then "s" else ""} above")
+				@$changesBefore.show()
+			else
+				@$changesBefore.hide()
+			if changesAfter > 0
+				@$changesAfter.find("span").text("#{changesAfter} more change#{if changesAfter > 1 then "s" else ""} below")
+				@$changesAfter.show()
+			else
+				@$changesAfter.hide()
+
 	return DiffView
 
diff --git a/services/web/public/stylesheets/less/trackchanges.less b/services/web/public/stylesheets/less/trackchanges.less
index d4adeb4495..aa1f697d76 100644
--- a/services/web/public/stylesheets/less/trackchanges.less
+++ b/services/web/public/stylesheets/less/trackchanges.less
@@ -56,7 +56,12 @@
 		}
 	}
 
-	.deleted-change-background, .deleted-change-foreground, .inserted-change-background, .change-name-marker {
+	.deleted-change-background,
+	.deleted-change-foreground,
+	.inserted-change-background,
+	.change-name-marker,
+	.changes-before,
+	.changes-after {
 		position: absolute;
 		z-index: 2;
 	}
@@ -71,6 +76,21 @@
 		white-space: pre;
 	}
 
+	.changes-before {
+		top: 6px;
+		right: 6px;
+	}
+	.changes-after {
+		bottom: 6px;
+		right: 6px;
+	}
+	.changes-before, .changes-after {
+		padding: 4px 8px;
+		background-color: #eee;
+		border: 1px solid #999;
+		.border-radius(3px);
+	}
+
 	ul.change-list {
 		li {
 			position: relative;