mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Isolate review-panel markup.
This commit is contained in:
Paulo Reis
parent
b006f4fbbf
commit
d7d21b106c
2 changed files with 227 additions and 220 deletions
|
|
@ -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'")
|
||||
|
|
|
|||
225
services/web/app/views/project/editor/review-panel.jade
Normal file
225
services/web/app/views/project/editor/review-panel.jade
Normal file
|
|
@ -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')
|
||||
Loading…
Reference in a new issue