mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-19 18:15:17 +00:00
Show helpers to make navigating around diffs easier
This commit is contained in:
parent
9a86f24bf7
commit
b3096fc74e
2 changed files with 65 additions and 5 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Reference in a new issue