diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index e563207224..0f65929236 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -57,8 +57,7 @@ div.full-size( ng-class="'rp-entry-callout-' + entry.type" ) .rp-entry( - ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : '') ]" - ng-style="{'top': top}" + ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]" ) div(ng-if="entry.type == 'insert' || entry.type == 'delete'") .rp-entry-header @@ -119,7 +118,7 @@ div.full-size( i.fa.fa-check |  Mark as resolved - div(ng-if="entry.type == 'focus-position'") + div(ng-if="entry.type == 'add-comment'") a.rp-add-comment-btn( href ng-if="!commentState.adding" diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee index 15ce190f64..c3cb6a30d2 100644 --- a/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee +++ b/services/web/public/coffee/ide/editor/directives/aceEditor/track-changes/TrackChangesManager.coffee @@ -223,6 +223,7 @@ define [ type: "comment" thread: comment.metadata.thread offset: comment.offset + length: comment.length } for key, value of new_entry @$scope.reviewPanel.entries[comment.id][key] = value @@ -235,10 +236,25 @@ define [ updateFocus: () -> @updateEntryGeneration() - @$scope.reviewPanel.entries["focus-position"] = { - type: "focus-position" - offset: @_aceRangeToShareJs(@editor.getSelectionRange().start) - } + selection = @editor.getSelectionRange() + cursor_offset = @_aceRangeToShareJs(selection.start) + + for id, entry of @$scope.reviewPanel.entries + if entry.type == "comment" + entry.focused = (entry.offset <= cursor_offset <= entry.offset + entry.length) + else if entry.type == "insert" + entry.focused = (entry.offset <= cursor_offset <= entry.offset + entry.content.length) + else if entry.type == "delete" + entry.focused = (entry.offset == cursor_offset) + + if selection.start.column == selection.end.column and selection.start.row == selection.end.row + # No selection + delete @$scope.reviewPanel.entries["add-comment"] + else + @$scope.reviewPanel.entries["add-comment"] = { + type: "add-comment" + offset: cursor_offset + } updateEntryGeneration: () -> # Rather than making angular deep watch the whole entries array diff --git a/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee b/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee index 0b5a7b2487..8dbf9117a5 100644 --- a/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee @@ -4,6 +4,11 @@ define [ App.directive "reviewPanelSorted", ($timeout) -> return { link: (scope, element, attrs) -> + TOOLBAR_HEIGHT = 28 + ENTRY_PADDING = 12 + + previous_focused_entry_index = 0 + layout = () -> sl_console.log "LAYOUT" entries = [] @@ -15,14 +20,50 @@ define [ } entries.sort (a,b) -> a.scope.entry.offset - b.scope.entry.offset - previousBottom = 28 # This should start at the height of the toolbar - for entry in entries + return if entries.length == 0 + + focused_entry_index = Math.min(previous_focused_entry_index, entries.length - 1) + for entry, i in entries + if entry.scope.entry.focused + focused_entry_index = i + break + entries_after = entries.slice(focused_entry_index + 1) + entries_before = entries.slice(0, focused_entry_index) + focused_entry = entries[focused_entry_index] + previous_focused_entry_index = focused_entry_index + + sl_console.log "focused_entry_index", focused_entry_index + + line_height = 15 + + # Put the focused entry exactly where it wants to be + focused_entry_top = Math.max(TOOLBAR_HEIGHT, focused_entry.scope.entry.screenPos.y) + focused_entry.$box_el.css(top: focused_entry_top) + focused_entry.$callout_el.css(top: focused_entry_top + line_height, height: 0) + + previousBottom = focused_entry_top + focused_entry.$box_el.height() + for entry in entries_after height = entry.$box_el.height() original_top = entry.scope.entry.screenPos.y - top = Math.max(original_top, previousBottom + 12) + top = Math.max(original_top, previousBottom + ENTRY_PADDING) previousBottom = top + height + entry.$box_el.css(top: top, bottom: 'auto') + entry.$callout_el.removeClass("rp-entry-callout-inverted") + entry.$callout_el.css(top: original_top + line_height, height: top - original_top) + sl_console.log "ENTRY", {entry: entry.scope.entry, top} + + previousTop = focused_entry_top + entries_before.reverse() # Work through backwards, starting with the one just above + for entry in entries_before + height = entry.$box_el.height() + original_top = entry.scope.entry.screenPos.y + original_bottom = original_top + height + bottom = Math.min(original_bottom, previousTop - ENTRY_PADDING) + top = bottom - height + previousTop = top entry.$box_el.css(top: top) - entry.$callout_el.css(top: original_top + 15, height: top - original_top) + entry.$callout_el.addClass("rp-entry-callout-inverted") + entry.$callout_el.css(top: top + line_height + 1, height: original_top - top) sl_console.log "ENTRY", {entry: entry.scope.entry, top} scope.$watch "reviewPanel.entryGeneration", (value) -> diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 10daee32f2..4750182ab5 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -73,6 +73,7 @@ border-left: solid @rp-entry-ribbon-width transparent; border-radius: 3px; background-color: #FFF; + transition: top 0.3s, left 0.1s, right 0.1s; &-insert { border-left-color: @rp-green; @@ -98,6 +99,12 @@ border-left-color: @rp-yellow; } } + + &-focused { + left: 0px; + right: 10px; + z-index: 1; + } } .rp-entry-header { @@ -272,6 +279,17 @@ border-bottom: 1px solid grey; } + &-inverted { + border-top: none; + border-bottom: 1px solid grey; + &:after { + top: 0px; + bottom: -1px; + border-top: 1px solid grey; + border-bottom: none; + } + } + &-insert { border-color: @rp-green; &:after {