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 = $("
")
@$nameTagEl.css({
position: "absolute"
@@ -110,6 +115,19 @@ define [
@$nameTagEl.hide()
@$ace.append(@$nameTagEl)
+ insertMoreChangeLabels: () ->
+ @$changesBefore = $("
")
+ @$changesAfter = $("
")
+ @$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;