Merge branch 'master' of github.com:sharelatex/web-sharelatex

This commit is contained in:
Henry Oswald 2014-03-20 08:52:17 +00:00
commit 69904e2acd
3 changed files with 103 additions and 41 deletions

View file

@ -3,6 +3,15 @@ define [
"libs/mustache"
"libs/backbone"
], (moment)->
moment.lang "en", calendar:
lastDay : '[Yesterday at] h:mm a'
sameDay : '[Today at] h:mm a'
nextDay : '[Tomorrow at] h:mm a'
lastWeek : "Do MMM YYYY, h:mm a"
nextWeek : "Do MMM YYYY, h:mm a"
sameElse : 'Do MMM YYYY, h:mm a'
ChangeListView = Backbone.View.extend
template: $("#changeListTemplate").html()
@ -39,6 +48,9 @@ define [
view.$el.insertBefore(elementAtIndex)
view.on "click", (e, v) =>
if e.shiftKey
@selectRangeTo(index)
else
@setSelectionRange(index, index)
view.on "selected:to", (e, v) =>
@ -74,6 +86,13 @@ define [
@resetAllSelectors()
@triggerChangeDiff()
selectRangeTo: (index) ->
return unless @selectedFromIndex? and @selectedToIndex?
if index < @selectedToIndex
@setSelectionRange(@selectedFromIndex, index)
else
@setSelectionRange(index, @selectedToIndex)
resetAllSelectors: () ->
for view, i in @itemViews
view.resetSelector(i, @selectedFromIndex, @selectedToIndex)

View file

@ -20,6 +20,7 @@ define [
@insertMarkers()
@insertNameTag()
@insertMoreChangeLabels()
@bindToScrollEvents()
@scrollToFirstChange()
return @
@ -43,7 +44,8 @@ define [
e.position = position
@updateVisibleNames(e)
session.on "changeScrollTop", (e) =>
bindToScrollEvents: () ->
@aceEditor.getSession().on "changeScrollTop", (e) =>
@updateMoreChangeLabels()
getPlainDiffContent: () ->
@ -84,20 +86,27 @@ define [
markerBackLayer = @aceEditor.renderer.$markerBack
markerFrontLayer = @aceEditor.renderer.$markerFront
lineHeight = @aceEditor.renderer.lineHeight
dark = @_isDarkTheme()
if entry.i? or entry.d?
hue = entry.meta.user.hue()
if entry.i?
@_addMarkerWithCustomStyle session, markerBackLayer, range, "inserted-change-background", false, """
background-color : hsl(#{hue}, 70%, 85%);
"""
if dark
style = "background-color : hsl(#{hue}, 100%, 28%);"
else
style = "background-color : hsl(#{hue}, 70%, 85%);"
@_addMarkerWithCustomStyle session, markerBackLayer, range, "inserted-change-background", false, style
if entry.d?
@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-background", false, """
background-color : hsl(#{hue}, 70%, 95%);
"""
@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-foreground", true, """
height: #{Math.round(lineHeight/2) - 1}px;
border-bottom: 2px solid hsl(#{hue}, 70%, 40%);
"""
if dark
bgStyle = "background-color: hsl(#{hue}, 100%, 20%);"
fgStyle = "border-bottom: 2px solid hsl(#{hue}, 100%, 60%);"
else
bgStyle = "background-color: hsl(#{hue}, 70%, 95%);"
fgStyle = "border-bottom: 2px solid hsl(#{hue}, 70%, 40%);"
fgStyle += "; height: #{Math.round(lineHeight/2) - 1}px;"
@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-background", false, bgStyle
@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-foreground", true, fgStyle
_addMarkerWithCustomStyle: (session, markerLayer, range, klass, foreground, style) ->
session.addMarker range, klass, (html, range, left, top, config) ->
@ -107,6 +116,14 @@ define [
markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style)
, foreground
_isDarkTheme: () ->
rgb = $(".ace_editor").css("background-color");
[m, r, g, b] = rgb.match(/rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/)
r = parseInt(r, 10)
g = parseInt(g, 10)
b = parseInt(b, 10)
return r + g + b < 3 * 128
insertNameTag: () ->
@$nameTagEl = $("<div class='change-name-marker'></div>")
@$nameTagEl.css({
@ -116,17 +133,23 @@ define [
@$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>")
@$changesBefore = $("<a class='changes-before' href='#'><span></span> <i class='icon-arrow-up'></a>")
@$changesAfter = $("<a class='changes-after' href='#'><span></span> <i class='icon-arrow-down'></a>")
@$ace.append(@$changesBefore)
@$ace.append(@$changesAfter)
@$changesBefore.on "click", () =>
@gotoLastHiddenChangeBefore()
@$changesAfter.on "click", () =>
@gotoFirstHiddenChangeAfter()
@updateMoreChangeLabels()
scrollToFirstChange: () ->
@aceEditor.scrollToLine(0)
setTimeout () =>
if @entries? and @entries[0]?
row = @entries[0].range.start.row
@aceEditor.gotoLine(0)
@aceEditor.gotoLine(row, 0, true)
@aceEditor.scrollToLine(row, true, false)
, 10
_drawNameTag: (entry, position) ->
@$nameTagEl.show()
@ -146,9 +169,10 @@ define [
height = @$ace.height()
hue = entry.meta.user.hue()
css = {
"background-color" : "hsl(#{hue}, 70%, 90%)";
}
if @_isDarkTheme()
css = { "background-color" : "hsl(#{hue}, 100%, 20%)"; }
else
css = { "background-color" : "hsl(#{hue}, 70%, 90%)"; }
if position.pageX + @$nameTagEl.width() < @$ace.width()
css["left"] = position.pageX
@ -167,7 +191,7 @@ define [
@$nameTagEl.css css
_hideNameTag: () ->
@$nameTagEl.hide()
@$nameTagEl?.hide()
updateVisibleNames: (e) ->
visibleName = false
@ -181,15 +205,21 @@ define [
updateMoreChangeLabels: () ->
return if !@$changesBefore or !@$changesAfter
firstRow = @aceEditor.renderer.getFirstFullyVisibleRow()
lastRow = @aceEditor.renderer.getLastFullyVisibleRow()
setTimeout () =>
firstRow = @aceEditor.getFirstVisibleRow()
lastRow = @aceEditor.getLastVisibleRow()
changesBefore = 0
changesAfter = 0
@lastHiddenChangeBefore = null
@firstHiddenChangeAfter = null
for entry in @entries or []
if entry.range.start.row < firstRow
changesBefore += 1
@lastHiddenChangeBefore = entry
if entry.range.end.row > lastRow
changesAfter += 1
@firstHiddenChangeAfter ||= entry
if changesBefore > 0
@$changesBefore.find("span").text("#{changesBefore} more change#{if changesBefore > 1 then "s" else ""} above")
@$changesBefore.show()
@ -200,6 +230,15 @@ define [
@$changesAfter.show()
else
@$changesAfter.hide()
, 100
gotoLastHiddenChangeBefore: () ->
return if !@lastHiddenChangeBefore
@aceEditor.scrollToLine(@lastHiddenChangeBefore.range.start.row, true, false)
gotoFirstHiddenChangeAfter: () ->
return if !@firstHiddenChangeAfter
@aceEditor.scrollToLine(@firstHiddenChangeAfter.range.end.row, true, false)
resize: () ->
@aceEditor.resize()

View file

@ -96,6 +96,10 @@
position: relative;
border-bottom: 1px solid #ccc;
cursor: pointer;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
.change-selectors {
.change-selector-from {
position: absolute;