Simpler UI for comments; remove some unused code.

This commit is contained in:
Paulo Reis 2017-01-05 11:50:43 +00:00
parent 898d20a6fc
commit d13035a4f4
3 changed files with 54 additions and 101 deletions

View file

@ -30,10 +30,6 @@
entry="entry"
threads="reviewPanel.commentThreads"
on-resolve="resolveComment(entry, entry_id)"
on-unresolve="unresolveComment(entry, entry_id)"
on-show-thread="showThread(entry)"
on-hide-thread="hideThread(entry)"
on-delete="deleteComment(entry_id)"
on-reply="submitReply(entry, entry_id);"
on-indicator-click="toggleReviewPanel();"
)
@ -66,8 +62,6 @@
change-entry(
entry="entry"
user="users[entry.metadata.user_id]"
on-reject="rejectChange(entry.id);"
on-accept="acceptChange(entry.id);"
on-indicator-click="toggleReviewPanel();"
ng-click="gotoEntry(doc_id, entry)"
)
@ -76,9 +70,6 @@
comment-entry(
entry="entry"
users="users"
on-resolve="resolveComment(entry, entry.id)"
on-unresolve="unresolveComment(entry, entry.id)"
on-delete="deleteComment(entry.id)"
on-reply="submitReply(entry, entry_id);"
on-indicator-click="toggleReviewPanel();"
ng-click="gotoEntry(doc_id, entry)"
@ -127,7 +118,8 @@ script(type='text/ng-template', id='changeEntryTemplate')
span(ng-switch-when="delete") Deleted 
del.rp-content-highlight {{ entry.content }}
.rp-entry-metadata
span {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} • 
| {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
|  • 
span.rp-entry-user(style="color: hsl({{ user.hue }}, 70%, 40%);") {{ user.name }}
.rp-entry-actions
a.rp-entry-button(href, ng-click="onReject();")
@ -139,54 +131,51 @@ script(type='text/ng-template', id='changeEntryTemplate')
script(type='text/ng-template', id='commentEntryTemplate')
div
.rp-entry-callout.rp-entry-callout-comment(ng-if="!threads[entry.thread_id].resolved")
.rp-entry-callout.rp-entry-callout-comment
.rp-entry-indicator(
ng-class="{ 'rp-entry-indicator-focused': entry.focused }"
ng-click="onIndicatorClick();"
)
i.fa.fa-comment
.rp-entry.rp-entry-comment(
ng-class="{ 'rp-entry-focused': entry.focused, 'rp-entry-comment-resolved': threads[entry.thread_id].resolved}"
ng-class="{ 'rp-entry-focused': entry.focused }"
)
.rp-comment(
ng-if="!threads[entry.thread_id].resolved || entry.showWhenResolved"
ng-repeat="comment in threads[entry.thread_id].messages"
ng-class="comment.user.isSelf ? 'rp-comment-self' : '';"
)
.rp-avatar(
ng-if="!comment.user.isSelf;"
style="background-color: hsl({{ comment.user.hue }}, 70%, 50%);"
) {{ comment.user.avatar_text | limitTo : 1 }}
.rp-comment-body(style="color: hsl({{ comment.user.hue }}, 70%, 90%);")
div
.rp-comment(
ng-repeat="comment in threads[entry.thread_id].messages"
)
p.rp-comment-content {{ comment.content }}
p.rp-comment-metadata
.rp-entry-metadata
| {{ comment.timestamp | date : 'MMM d, y h:mm a' }}
|  • 
span(style="color: hsl({{ comment.user.hue }}, 70%, 40%);") {{ comment.user.name }}
.rp-comment-reply(ng-if="!threads[entry.thread_id].resolved || entry.showWhenResolved")
span.rp-entry-user(style="color: hsl({{ comment.user.hue }}, 70%, 40%);") {{ comment.user.name }}
.rp-comment-reply
textarea.rp-comment-input(
ng-model="entry.replyContent"
ng-keypress="handleCommentReplyKeyPress($event);"
stop-propagation="click"
placeholder="{{ 'Hit \"Enter\" to reply' + (entry.resolved ? ' and re-open' : '') }}"
)
.rp-comment-resolved-description(ng-if="threads[entry.thread_id].resolved && !entry.showWhenResolved")
div
| Comment resolved by
span(style="color: hsl({{ threads[entry.thread_id].resolved_by_user.hue }}, 70%, 40%);") {{ threads[entry.thread_id].resolved_by_user.name }}
div {{ threads[entry.thread_id].resolved_at | date : 'MMM d, y h:mm a' }}
//- .rp-comment-resolved-description(ng-if="threads[entry.thread_id].resolved && !entry.showWhenResolved")
//- div
//- | Comment resolved by
//- span(style="color: hsl({{ threads[entry.thread_id].resolved_by_user.hue }}, 70%, 40%);") {{ threads[entry.thread_id].resolved_by_user.name }}
//- div {{ threads[entry.thread_id].resolved_at | date : 'MMM d, y h:mm a' }}
.rp-entry-actions
a.rp-entry-button(href, ng-click="onResolve();", ng-if="!threads[entry.thread_id].resolved")
a.rp-entry-button(href, ng-click="onResolve();")
i.fa.fa-check
|  Mark as resolved
a.rp-entry-button(href, ng-click="onShowThread();", ng-if="threads[entry.thread_id].resolved && !entry.showWhenResolved")
|  Show
a.rp-entry-button(href, ng-click="onHideThread();", ng-if="threads[entry.thread_id].resolved && entry.showWhenResolved")
|  Hide
a.rp-entry-button(href, ng-click="onUnresolve();", ng-if="threads[entry.thread_id].resolved")
|  Re-open
a.rp-entry-button(href, ng-click="onDelete();", ng-if="threads[entry.thread_id].resolved")
|  Delete
|  Resolve
a.rp-entry-button(href, ng-click="onReply();")
i.fa.fa-reply
|  Reply
//- a.rp-entry-button(href, ng-click="onShowThread();", ng-if="threads[entry.thread_id].resolved && !entry.showWhenResolved")
//- |  Show
//- a.rp-entry-button(href, ng-click="onHideThread();", ng-if="threads[entry.thread_id].resolved && entry.showWhenResolved")
//- |  Hide
//- a.rp-entry-button(href, ng-click="onUnresolve();", ng-if="threads[entry.thread_id].resolved")
//- |  Re-open
//- a.rp-entry-button(href, ng-click="onDelete();", ng-if="threads[entry.thread_id].resolved")
//- |  Delete
script(type='text/ng-template', id='addCommentEntryTemplate')

View file

@ -10,10 +10,6 @@ define [
onResolve: "&"
onReply: "&"
onIndicatorClick: "&"
onDelete: "&"
onUnresolve: "&"
onShowThread: "&"
onHideThread: "&"
link: (scope, element, attrs) ->
scope.handleCommentReplyKeyPress = (ev) ->
if ev.keyCode == 13 and !ev.shiftKey and !ev.ctrlKey and !ev.metaKey

View file

@ -291,8 +291,6 @@
.rp-entry-metadata {
font-size: @rp-small-font-size;
.rp-state-overview & {
}
}
.rp-entry-user {
font-weight: @rp-semibold-weight;
@ -328,69 +326,39 @@
}
.rp-comment {
display: flex;
align-items: flex-start;
padding: 5px;
margin: 2px 5px;
padding-bottom: 3px;
line-height: 1.4;
border-bottom: solid 1px @rp-border-grey;
&:last-child {
margin-bottom: 2px;
border-bottom-width: 0;
}
.rp-state-overview & {
padding: 3px 0;
line-height: 1.2;
padding: 0;
}
}
.rp-comment-body {
position: relative;
background-color: currentColor;
flex-grow: 1;
padding: 2px 5px;
margin-left: @rp-entry-arrow-width;
border-radius: 3px;
.rp-comment-self & {
margin-left: 0;
margin-right: @rp-entry-arrow-width;
}
&::after {
.triangle(left, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit);
top: (@review-off-width / 2) - @rp-entry-arrow-width;
left: -@rp-entry-arrow-width;
content: '';
.rp-comment-self & {
.triangle(right, @rp-entry-arrow-width, @rp-entry-arrow-width * 1.5, inherit);
right: -@rp-entry-arrow-width;
left: auto;
}
}
}
.rp-comment-content {
margin: 0;
color: @rp-type-darkgrey;
}
.rp-comment-metadata {
color: @rp-type-blue;
font-size: @rp-small-font-size;
margin: 0;
}
.rp-comment-reply {
padding: 0 5px;
.rp-state-overview & {
padding: 3px 0 0;
}
.rp-comment-content {
margin: 0;
color: @rp-type-darkgrey;
}
.rp-comment-resolved-description {
padding: 5px;
.rp-state-overview & {
padding: 0px;
}
.rp-comment-metadata {
color: @rp-type-blue;
font-size: @rp-small-font-size;
margin: 0;
}
.rp-comment-reply {
padding: 0 5px;
.rp-state-overview & {
padding: 3px 0 0;
}
}
.rp-add-comment-btn {
.rp-button();
display: block;