From a8ca38814681266dc1c7f37ee554978495a07c19 Mon Sep 17 00:00:00 2001 From: James Allen Date: Mon, 17 Mar 2014 14:33:02 +0000 Subject: [PATCH 1/4] Allow shift-click to select multiple versions --- .../coffee/track-changes/ChangeListView.coffee | 12 +++++++++++- .../web/public/stylesheets/less/trackchanges.less | 4 ++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/services/web/public/coffee/track-changes/ChangeListView.coffee b/services/web/public/coffee/track-changes/ChangeListView.coffee index ac8e918622..22bb129e03 100644 --- a/services/web/public/coffee/track-changes/ChangeListView.coffee +++ b/services/web/public/coffee/track-changes/ChangeListView.coffee @@ -39,7 +39,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 +77,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/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; From 1398d85626e84e60a83e5968b4f40ca0b336bfea Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 19 Mar 2014 10:45:00 +0000 Subject: [PATCH 2/4] Improve date format in change list --- .../public/coffee/track-changes/ChangeListView.coffee | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/services/web/public/coffee/track-changes/ChangeListView.coffee b/services/web/public/coffee/track-changes/ChangeListView.coffee index 22bb129e03..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() From d5f130ad07f42ec2a29555460988c1379517c6bf Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 19 Mar 2014 10:52:30 +0000 Subject: [PATCH 3/4] Improve more change messages and make them clickable --- .../coffee/track-changes/DiffView.coffee | 75 ++++++++++++------- 1 file changed, 49 insertions(+), 26 deletions(-) diff --git a/services/web/public/coffee/track-changes/DiffView.coffee b/services/web/public/coffee/track-changes/DiffView.coffee index 7fc95e77ba..bfa82923e6 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: () -> @@ -116,17 +118,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() @@ -181,25 +189,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() From 7d50c9c7aacab4bcf2e68428e3edf5b8c5cfb5fa Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 19 Mar 2014 11:23:27 +0000 Subject: [PATCH 4/4] Use different color schemes for dark or light editor schemes --- .../coffee/track-changes/DiffView.coffee | 44 +++++++++++++------ 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/services/web/public/coffee/track-changes/DiffView.coffee b/services/web/public/coffee/track-changes/DiffView.coffee index bfa82923e6..174e7547ee 100644 --- a/services/web/public/coffee/track-changes/DiffView.coffee +++ b/services/web/public/coffee/track-changes/DiffView.coffee @@ -86,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) -> @@ -109,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({ @@ -154,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 @@ -175,7 +191,7 @@ define [ @$nameTagEl.css css _hideNameTag: () -> - @$nameTagEl.hide() + @$nameTagEl?.hide() updateVisibleNames: (e) -> visibleName = false