Show helpers to make navigating around diffs easier

This commit is contained in:
James Allen 2014-03-13 17:32:08 +00:00
parent 9a86f24bf7
commit b3096fc74e
2 changed files with 65 additions and 5 deletions

View file

@ -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

View file

@ -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;