From e0da6da4c6a1427ee6d08779e4eed2077eaf2831 Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 12 Mar 2014 16:46:20 +0000 Subject: [PATCH] Improve hover info in diff --- .../coffee/track-changes/DiffView.coffee | 113 +++++++++++------- .../public/stylesheets/less/trackchanges.less | 20 ++-- 2 files changed, 78 insertions(+), 55 deletions(-) diff --git a/services/web/public/coffee/track-changes/DiffView.coffee b/services/web/public/coffee/track-changes/DiffView.coffee index 9c433b24d2..396de3de67 100644 --- a/services/web/public/coffee/track-changes/DiffView.coffee +++ b/services/web/public/coffee/track-changes/DiffView.coffee @@ -2,8 +2,9 @@ define [ "ace/ace" "ace/mode/latex" "ace/range" + "moment" "libs/backbone" -], (Ace, LatexMode, Range)-> +], (Ace, LatexMode, Range, moment)-> DiffView = Backbone.View.extend initialize: () -> @model.on "change:diff", () => @render() @@ -19,6 +20,7 @@ define [ session.setMode(new LatexMode.Mode()) session.setUseWrapMode(true) @insertMarkers() + @insertNameTag() return @ createAceEditor: () -> @@ -44,6 +46,7 @@ define [ insertMarkers: () -> row = 0 column = 0 + @entries = [] for entry, i in @model.get("diff") or [] content = entry.u or entry.i or entry.d content ||= "" @@ -62,9 +65,12 @@ define [ range = new Range.Range( startRow, startColumn, endRow, endColumn ) - @addMarker(range, "change-marker-#{i}", entry) + entry.range = range + @addMarker(range, entry) + if entry.i? or entry.d? + @entries.push entry - addMarker: (range, id, entry) -> + addMarker: (range, entry) -> session = @aceEditor.getSession() markerBackLayer = @aceEditor.renderer.$markerBack markerFrontLayer = @aceEditor.renderer.$markerFront @@ -72,10 +78,9 @@ define [ if entry.i? or entry.d? hue = entry.meta.user.hue() if entry.i? - @_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-background", false, """ + @_addMarkerWithCustomStyle session, markerBackLayer, range, "inserted-change-background", false, """ background-color : hsl(#{hue}, 70%, 85%); """ - tag = "Added by #{entry.meta.user.name()}" if entry.d? @_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-background", false, """ background-color : hsl(#{hue}, 70%, 95%); @@ -84,13 +89,6 @@ define [ height: #{Math.round(lineHeight/2) - 1}px; border-bottom: 2px solid hsl(#{hue}, 70%, 40%); """ - tag = "Deleted by #{entry.meta.user.name()}" - - date = moment(parseInt(entry.meta.end_ts, 10)).format("Do MMM YYYY, h:mm:ss a") - tag += " on #{date}" - @_addNameTag session, id, range, tag, """ - background-color : hsl(#{hue}, 70%, 95%); - """ _addMarkerWithCustomStyle: (session, markerLayer, range, klass, foreground, style) -> session.addMarker range, klass, (html, range, left, top, config) -> @@ -100,42 +98,65 @@ define [ markerLayer.drawSingleLineMarker(html, range, "#{klass} ace_start", config, 0, style) , foreground - _addNameTag: (session, id, range, content, style) -> - @nameMarkers ||= [] - @nameMarkers.push - range: range - id: id - startRange = new Range.Range( - range.start.row, range.start.column - range.start.row, range.start.column + 1 - ) - session.addMarker startRange, "change-name-marker", (html, range, left, top, config) -> - html.push """ -
-
#{content}
-
- """ - , true + insertNameTag: () -> + @$ace = $(@aceEditor.renderer.container).find(".ace_scroller") + @$nameTagEl = $("
") + @$nameTagEl.css({ + position: "absolute" + }) + @$nameTagEl.hide() + @$ace.append(@$nameTagEl) + + _drawNameTag: (entry, position) -> + @$nameTagEl.show() + + if entry.i? + text = "Added by #{entry.meta.user.name()}" + else if entry.d? + text = "Deleted by #{entry.meta.user.name()}" + date = moment(parseInt(entry.meta.end_ts, 10)).format("Do MMM YYYY, h:mm a") + text += " on #{date}" + @$nameTagEl.text(text) + + position = @aceEditor.renderer.textToScreenCoordinates(position.row, position.column) + offset = @$ace.offset() + position.pageX = position.pageX - offset.left + position.pageY = position.pageY - offset.top + height = @$ace.height() + + hue = entry.meta.user.hue() + css = { + "background-color" : "hsl(#{hue}, 70%, 90%)"; + } + + if position.pageX + @$nameTagEl.width() < @$ace.width() + css["left"] = position.pageX + css["right"] = "auto" + else + css["right"] = 0 + css["left"] = "auto" + + if position.pageY > 2 * @$nameTagEl.height() + css["bottom"] = height - position.pageY + css["top"] = "auto" + else + css["top"] = position.pageY + @aceEditor.renderer.lineHeight + css["bottom"] = "auto" + + @$nameTagEl.css css + + _hideNameTag: () -> + @$nameTagEl.hide() updateVisibleNames: (e) -> - for marker in @nameMarkers or [] - if marker.range.contains(e.position.row, e.position.column) - $("##{marker.id}").find(".name").show() - else - $("##{marker.id}").find(".name").hide() + visibleName = false + for entry in @entries or [] + if entry.range.contains(e.position.row, e.position.column) + @_drawNameTag(entry, e.position) + visibleName = true + break + if !visibleName + @_hideNameTag() return DiffView diff --git a/services/web/public/stylesheets/less/trackchanges.less b/services/web/public/stylesheets/less/trackchanges.less index 584a2cbfd8..06959e6b30 100644 --- a/services/web/public/stylesheets/less/trackchanges.less +++ b/services/web/public/stylesheets/less/trackchanges.less @@ -16,6 +16,9 @@ left: 0; right: 0; bottom: 0; + .ace_active-line, .ace_cursor-layer { + display: none; + } } } @@ -53,20 +56,19 @@ } } - .deleted-change-background, .deleted-change-foreground, .inserted-change, .change-name-marker { + .deleted-change-background, .deleted-change-foreground, .inserted-change-background, .change-name-marker { position: absolute; z-index: 2; } .change-name-marker { - .name { - font-size: 0.8em; - padding: 2px 6px; - .border-radius(3px 3px 3px 3px); - position: absolute; - border: 1px solid #999; - left: 0; - } + font-size: 0.8em; + padding: 2px 6px; + .border-radius(3px 3px 3px 3px); + position: absolute; + border: 1px solid #999; + left: 0; + white-space: pre; } ul.change-list {