diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index 13597f769a..634f743e3a 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -50,8 +50,14 @@ div.full-size( input(type="checkbox", ng-model="reviewPanel.trackNewChanges") .review-panel-scroller .review-entry-list(review-panel-sorted) - .review-entry( + .review-entry-wrapper( ng-repeat="(entry_id, entry) in reviewPanel.entries" + ) + .review-entry-callout( + ng-class="'review-entry-callout-' + entry.type" + style="top: {{ entry.screenPos.y + 15 }}px; height: {{ top - entry.screenPos.y }}px" + ) + .review-entry( ng-class="'review-entry-' + entry.type" ng-style="{'top': top}" ) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index f13264eab2..44325dedb5 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -76,6 +76,43 @@ } } +.review-entry-callout { + position: absolute; + width: 3px; + border-top: 1px solid grey; + border-right: 1px dashed grey; + &:after { + content: ""; + position: absolute; + width: 3px; + top: -1px; + left: 3px; + bottom: 0; + border-bottom: 1px solid grey; + } + + &-insert { + border-color: green; + &:after { + border-color: green; + } + } + + &-delete { + border-color: red; + &:after { + border-color: red; + } + } + + &-comment { + border-color: orange; + &:after { + border-color: orange; + } + } +} + .has-review-panel { #editor { right: @review-panel-width;;