diff --git a/services/web/public/coffee/track-changes/ChangeListView.coffee b/services/web/public/coffee/track-changes/ChangeListView.coffee
index ac8e918622..11487a2e83 100644
--- a/services/web/public/coffee/track-changes/ChangeListView.coffee
+++ b/services/web/public/coffee/track-changes/ChangeListView.coffee
@@ -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,7 +48,10 @@ define [
view.$el.insertBefore(elementAtIndex)
view.on "click", (e, v) =>
- @setSelectionRange(index, index)
+ if e.shiftKey
+ @selectRangeTo(index)
+ else
+ @setSelectionRange(index, index)
view.on "selected:to", (e, v) =>
@setSelectionRange(@selectedFromIndex, index)
@@ -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)
diff --git a/services/web/public/coffee/track-changes/DiffView.coffee b/services/web/public/coffee/track-changes/DiffView.coffee
index 7fc95e77ba..174e7547ee 100644
--- a/services/web/public/coffee/track-changes/DiffView.coffee
+++ b/services/web/public/coffee/track-changes/DiffView.coffee
@@ -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 = $("")
@$nameTagEl.css({
@@ -116,17 +133,23 @@ define [
@$ace.append(@$nameTagEl)
insertMoreChangeLabels: () ->
- @$changesBefore = $("
")
- @$changesAfter = $("
")
+ @$changesBefore = $(" ")
+ @$changesAfter = $(" ")
@$ace.append(@$changesBefore)
@$ace.append(@$changesAfter)
+ @$changesBefore.on "click", () =>
+ @gotoLastHiddenChangeBefore()
+ @$changesAfter.on "click", () =>
+ @gotoFirstHiddenChangeAfter()
@updateMoreChangeLabels()
scrollToFirstChange: () ->
- if @entries? and @entries[0]?
- row = @entries[0].range.start.row
- @aceEditor.gotoLine(0)
- @aceEditor.gotoLine(row, 0, true)
+ @aceEditor.scrollToLine(0)
+ setTimeout () =>
+ if @entries? and @entries[0]?
+ row = @entries[0].range.start.row
+ @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,25 +205,40 @@ define [
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()
+ 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()
+ 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()
+ , 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()
diff --git a/services/web/public/stylesheets/less/trackchanges.less b/services/web/public/stylesheets/less/trackchanges.less
index aa1f697d76..4c1afa70a5 100644
--- a/services/web/public/stylesheets/less/trackchanges.less
+++ b/services/web/public/stylesheets/less/trackchanges.less
@@ -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;