diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index db6a74533c..816b4026b0 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -47,226 +47,8 @@ div.full-size( changes-tracker="reviewPanel.changesTracker", doc-id="editor.open_doc_id" ) - #review-panel - .review-panel-toolbar - | Track Changes - input(type="checkbox", ng-model="reviewPanel.trackNewChanges") - .review-panel-scroller - .rp-entry-list( - review-panel-sorted - ng-if="reviewPanel.subView === SubViews.CUR_FILE" - ) - .rp-entry-wrapper( - ng-repeat="(entry_id, entry) in reviewPanel.entries[editor.open_doc_id]" - ) - .rp-entry-callout( - ng-class="'rp-entry-callout-' + entry.type" - ) - - div(ng-switch="entry.type") - .rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.fa.fa-pencil - .rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.rp-icon-delete - .rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.fa.fa-comment - .rp-entry-indicator( - ng-switch-when="add-comment" - ng-if="!commentState.adding" - ng-click="startNewComment(); toggleReviewPanel();" - ) - i.fa.fa-commenting - - .rp-entry( - 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 - .rp-entry-action-icon(ng-switch="entry.type") - i.fa.fa-pencil(ng-switch-when="insert") - i.rp-icon-delete(ng-switch-when="delete") - - .rp-entry-metadata - p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} - p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} - .rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} - .rp-entry-body(ng-switch="entry.type") - span(ng-switch-when="insert") Added  - ins.rp-content-highlight {{ entry.content }} - span(ng-switch-when="delete") Delete  - del.rp-content-highlight {{ entry.content }} - .rp-entry-actions - a.rp-entry-button(href, ng-click="rejectChange(entry_id)") - i.fa.fa-times - |  Reject - a.rp-entry-button(href, ng-click="acceptChange(entry_id)") - i.fa.fa-check - |  Accept - div(ng-if="entry.type == 'comment'") - .rp-comment( - ng-repeat="comment in entry.thread" - ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';" - ) - .rp-avatar( - ng-if="!users[comment.user_id].isSelf;" - style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);" - ) {{ users[comment.user_id].avatar_text }} - .rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);") - p.rp-comment-content {{ comment.content }} - p.rp-comment-metadata - | {{ comment.ts | date : 'MMM d, y h:mm a' }} - |  •  - span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }} - .rp-comment-reply - textarea.rp-comment-input( - ng-model="entry.replyContent" - ng-keypress="handleCommentReplyKeyPress($event, entry);" - placeholder="Hit \"Enter\" to reply" - ) - .rp-entry-actions - a.rp-entry-button(href) - i.fa.fa-check - |  Mark as resolved - - div(ng-if="entry.type == 'add-comment'") - a.rp-add-comment-btn( - href - ng-if="!commentState.adding" - ng-click="startNewComment()" - ) - i.fa.fa-comment - |  Add comment - div(ng-if="commentState.adding") - .rp-new-comment - textarea.rp-comment-input( - ng-model="commentState.content" - placeholder="Add your comment here" - ) - .rp-entry-actions - a.rp-entry-button(href, ng-click="cancelNewComment()") - i.fa.fa-times - |  Cancel - a.rp-entry-button(href, ng-click="submitNewComment()") - i.fa.fa-comment - |  Comment - - .rp-overview-entry-list( - ng-if="reviewPanel.subView === SubViews.OVERVIEW" - ) - .rp-overview-file( - ng-repeat="(doc_id, entries) in reviewPanel.entries" - ) - .rp-overview-file-header - | {{ doc_id }} - .rp-entry-wrapper( - ng-repeat="(entry_id, entry) in entries" - ) - .rp-entry-callout( - ng-class="'rp-entry-callout-' + entry.type" - ) - - div(ng-switch="entry.type") - .rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.fa.fa-pencil - .rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.rp-icon-delete - .rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") - i.fa.fa-comment - .rp-entry-indicator( - ng-switch-when="add-comment" - ng-if="!commentState.adding" - ng-click="startNewComment(); toggleReviewPanel();" - ) - i.fa.fa-commenting - - .rp-entry( - 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 - .rp-entry-action-icon(ng-switch="entry.type") - i.fa.fa-pencil(ng-switch-when="insert") - i.rp-icon-delete(ng-switch-when="delete") - - .rp-entry-metadata - p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} - p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} - .rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} - .rp-entry-body(ng-switch="entry.type") - span(ng-switch-when="insert") Added  - ins.rp-content-highlight {{ entry.content }} - span(ng-switch-when="delete") Delete  - del.rp-content-highlight {{ entry.content }} - .rp-entry-actions - a.rp-entry-button(href, ng-click="rejectChange(entry_id)") - i.fa.fa-times - |  Reject - a.rp-entry-button(href, ng-click="acceptChange(entry_id)") - i.fa.fa-check - |  Accept - div(ng-if="entry.type == 'comment'") - .rp-comment( - ng-repeat="comment in entry.thread" - ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';" - ) - .rp-avatar( - ng-if="!users[comment.user_id].isSelf;" - style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);" - ) {{ users[comment.user_id].avatar_text }} - .rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);") - p.rp-comment-content {{ comment.content }} - p.rp-comment-metadata - | {{ comment.ts | date : 'MMM d, y h:mm a' }} - |  •  - span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }} - .rp-comment-reply - textarea.rp-comment-input( - ng-model="entry.replyContent" - ng-keypress="handleCommentReplyKeyPress($event, entry);" - placeholder="Hit \"Enter\" to reply" - ) - .rp-entry-actions - a.rp-entry-button(href) - i.fa.fa-check - |  Mark as resolved - - div(ng-if="entry.type == 'add-comment'") - a.rp-add-comment-btn( - href - ng-if="!commentState.adding" - ng-click="startNewComment()" - ) - i.fa.fa-comment - |  Add comment - div(ng-if="commentState.adding") - .rp-new-comment - textarea.rp-comment-input( - ng-model="commentState.content" - placeholder="Add your comment here" - ) - .rp-entry-actions - a.rp-entry-button(href, ng-click="cancelNewComment()") - i.fa.fa-times - |  Cancel - a.rp-entry-button(href, ng-click="submitNewComment()") - i.fa.fa-comment - |  Comment - - .rp-nav - a.rp-nav-item( - href - ng-click="setSubView(SubViews.CUR_FILE);" - ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.CUR_FILE }" - ) - i.fa.fa-file-text-o - span.rp-nav-label Current file - a.rp-nav-item( - href - ng-click="setSubView(SubViews.OVERVIEW);" - ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.OVERVIEW }" - ) - i.fa.fa-list - span.rp-nav-label Overview + + include ./review-panel .ui-layout-east div(ng-if="ui.pdfLayout == 'sideBySide'") diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade new file mode 100644 index 0000000000..b09e1314fe --- /dev/null +++ b/services/web/app/views/project/editor/review-panel.jade @@ -0,0 +1,225 @@ +#review-panel + .review-panel-toolbar + | Track Changes + input(type="checkbox", ng-model="reviewPanel.trackNewChanges") + .review-panel-scroller + .rp-entry-list( + review-panel-sorted + ng-if="reviewPanel.subView === SubViews.CUR_FILE" + ) + .rp-entry-wrapper( + ng-repeat="(entry_id, entry) in reviewPanel.entries[editor.open_doc_id]" + ) + .rp-entry-callout( + ng-class="'rp-entry-callout-' + entry.type" + ) + + div(ng-switch="entry.type") + .rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") + i.fa.fa-pencil + .rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") + i.rp-icon-delete + .rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") + i.fa.fa-comment + .rp-entry-indicator( + ng-switch-when="add-comment" + ng-if="!commentState.adding" + ng-click="startNewComment(); toggleReviewPanel();" + ) + i.fa.fa-commenting + + .rp-entry( + 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 + .rp-entry-action-icon(ng-switch="entry.type") + i.fa.fa-pencil(ng-switch-when="insert") + i.rp-icon-delete(ng-switch-when="delete") + + .rp-entry-metadata + p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} + p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} + .rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} + .rp-entry-body(ng-switch="entry.type") + span(ng-switch-when="insert") Added  + ins.rp-content-highlight {{ entry.content }} + span(ng-switch-when="delete") Deleted  + del.rp-content-highlight {{ entry.content }} + .rp-entry-actions + a.rp-entry-button(href, ng-click="rejectChange(entry_id)") + i.fa.fa-times + |  Reject + a.rp-entry-button(href, ng-click="acceptChange(entry_id)") + i.fa.fa-check + |  Accept + div(ng-if="entry.type == 'comment'") + .rp-comment( + ng-repeat="comment in entry.thread" + ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';" + ) + .rp-avatar( + ng-if="!users[comment.user_id].isSelf;" + style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);" + ) {{ users[comment.user_id].avatar_text }} + .rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);") + p.rp-comment-content {{ comment.content }} + p.rp-comment-metadata + | {{ comment.ts | date : 'MMM d, y h:mm a' }} + |  •  + span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }} + .rp-comment-reply + textarea.rp-comment-input( + ng-model="entry.replyContent" + ng-keypress="handleCommentReplyKeyPress($event, entry);" + placeholder="Hit \"Enter\" to reply" + ) + .rp-entry-actions + a.rp-entry-button(href) + i.fa.fa-check + |  Mark as resolved + + div(ng-if="entry.type == 'add-comment'") + a.rp-add-comment-btn( + href + ng-if="!commentState.adding" + ng-click="startNewComment()" + ) + i.fa.fa-comment + |  Add comment + div(ng-if="commentState.adding") + .rp-new-comment + textarea.rp-comment-input( + ng-model="commentState.content" + placeholder="Add your comment here" + ) + .rp-entry-actions + a.rp-entry-button(href, ng-click="cancelNewComment()") + i.fa.fa-times + |  Cancel + a.rp-entry-button(href, ng-click="submitNewComment()") + i.fa.fa-comment + |  Comment + + .rp-overview-entry-list( + ng-if="reviewPanel.subView === SubViews.OVERVIEW" + ) + .rp-overview-file( + ng-repeat="(doc_id, entries) in reviewPanel.entries" + ) + .rp-overview-file-header + | {{ doc_id }} + .rp-entry-wrapper( + ng-repeat="(entry_id, entry) in entries" + ) + .rp-entry-callout( + ng-class="'rp-entry-callout-' + entry.type" + ) + + div(ng-switch="entry.type") + .rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") + i.fa.fa-pencil + .rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") + i.rp-icon-delete + .rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }") + i.fa.fa-comment + .rp-entry-indicator( + ng-switch-when="add-comment" + ng-if="!commentState.adding" + ng-click="startNewComment(); toggleReviewPanel();" + ) + i.fa.fa-commenting + + .rp-entry( + 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 + .rp-entry-action-icon(ng-switch="entry.type") + i.fa.fa-pencil(ng-switch-when="insert") + i.rp-icon-delete(ng-switch-when="delete") + + .rp-entry-metadata + p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} + p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} + .rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }} + .rp-entry-body(ng-switch="entry.type") + span(ng-switch-when="insert") Added  + ins.rp-content-highlight {{ entry.content }} + span(ng-switch-when="delete") Delete  + del.rp-content-highlight {{ entry.content }} + .rp-entry-actions + a.rp-entry-button(href, ng-click="rejectChange(entry_id)") + i.fa.fa-times + |  Reject + a.rp-entry-button(href, ng-click="acceptChange(entry_id)") + i.fa.fa-check + |  Accept + div(ng-if="entry.type == 'comment'") + .rp-comment( + ng-repeat="comment in entry.thread" + ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';" + ) + .rp-avatar( + ng-if="!users[comment.user_id].isSelf;" + style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);" + ) {{ users[comment.user_id].avatar_text }} + .rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);") + p.rp-comment-content {{ comment.content }} + p.rp-comment-metadata + | {{ comment.ts | date : 'MMM d, y h:mm a' }} + |  •  + span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }} + .rp-comment-reply + textarea.rp-comment-input( + ng-model="entry.replyContent" + ng-keypress="handleCommentReplyKeyPress($event, entry);" + placeholder="Hit \"Enter\" to reply" + ) + .rp-entry-actions + a.rp-entry-button(href) + i.fa.fa-check + |  Mark as resolved + + div(ng-if="entry.type == 'add-comment'") + a.rp-add-comment-btn( + href + ng-if="!commentState.adding" + ng-click="startNewComment()" + ) + i.fa.fa-comment + |  Add comment + div(ng-if="commentState.adding") + .rp-new-comment + textarea.rp-comment-input( + ng-model="commentState.content" + placeholder="Add your comment here" + ) + .rp-entry-actions + a.rp-entry-button(href, ng-click="cancelNewComment()") + i.fa.fa-times + |  Cancel + a.rp-entry-button(href, ng-click="submitNewComment()") + i.fa.fa-comment + |  Comment + + .rp-nav + a.rp-nav-item( + href + ng-click="setSubView(SubViews.CUR_FILE);" + ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.CUR_FILE }" + ) + i.fa.fa-file-text-o + span.rp-nav-label Current file + a.rp-nav-item( + href + ng-click="setSubView(SubViews.OVERVIEW);" + ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.OVERVIEW }" + ) + i.fa.fa-list + span.rp-nav-label Overview + + +script(type='text/ng-template', id='changeEntryTemplate') + +script(type='text/ng-template', id='commentEntryTemplate') \ No newline at end of file