Isolate review-panel markup.

This commit is contained in:
Paulo Reis 2016-11-16 14:42:07 +00:00
parent b006f4fbbf
commit d7d21b106c
2 changed files with 227 additions and 220 deletions

View file

@ -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'")

View 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')