github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Use different color schemes for dark or light editor schemes

Browse source
This commit is contained in:
James Allen 2014-03-19 11:23:27 +00:00
parent d5f130ad07
commit 7d50c9c7aa
1 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
services/web/public/coffee/track-changes/DiffView.coffee
View file

@ -86,20 +86,27 @@ define [
markerBackLayer = @aceEditor.renderer.$markerBack markerBackLayer = @aceEditor.renderer.$markerBack
markerFrontLayer = @aceEditor.renderer.$markerFront markerFrontLayer = @aceEditor.renderer.$markerFront
lineHeight = @aceEditor.renderer.lineHeight lineHeight = @aceEditor.renderer.lineHeight
dark = @_isDarkTheme()
if entry.i? or entry.d? if entry.i? or entry.d?
hue = entry.meta.user.hue() hue = entry.meta.user.hue()
if entry.i? if entry.i?
@_addMarkerWithCustomStyle session, markerBackLayer, range, "inserted-change-background", false, """ if dark
background-color : hsl(#{hue}, 70%, 85%); 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? if entry.d?
@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-background", false, """ if dark
background-color : hsl(#{hue}, 70%, 95%); bgStyle = "background-color: hsl(#{hue}, 100%, 20%);"
""" fgStyle = "border-bottom: 2px solid hsl(#{hue}, 100%, 60%);"
@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-foreground", true, """ else
height: #{Math.round(lineHeight/2) - 1}px; bgStyle = "background-color: hsl(#{hue}, 70%, 95%);"
border-bottom: 2px solid hsl(#{hue}, 70%, 40%); 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) -> _addMarkerWithCustomStyle: (session, markerLayer, range, klass, foreground, style) ->
session.addMarker range, klass, (html, range, left, top, config) -> session.addMarker range, klass, (html, range, left, top, config) ->
@ -109,6 +116,14 @@ define [
markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style) markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style)
, foreground , 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: () -> insertNameTag: () ->
@$nameTagEl = $("<div class='change-name-marker'></div>") @$nameTagEl = $("<div class='change-name-marker'></div>")
@$nameTagEl.css({ @$nameTagEl.css({
@ -154,9 +169,10 @@ define [
height = @$ace.height() height = @$ace.height()
hue = entry.meta.user.hue() hue = entry.meta.user.hue()
css = { if @_isDarkTheme()
"background-color" : "hsl(#{hue}, 70%, 90%)"; css = { "background-color" : "hsl(#{hue}, 100%, 20%)"; }
} else
css = { "background-color" : "hsl(#{hue}, 70%, 90%)"; }
if position.pageX + @$nameTagEl.width() < @$ace.width() if position.pageX + @$nameTagEl.width() < @$ace.width()
css["left"] = position.pageX css["left"] = position.pageX
@ -175,7 +191,7 @@ define [
@$nameTagEl.css css @$nameTagEl.css css
_hideNameTag: () -> _hideNameTag: () ->
@$nameTagEl.hide() @$nameTagEl?.hide()
updateVisibleNames: (e) -> updateVisibleNames: (e) ->
visibleName = false visibleName = false