From d13035a4f474cb4e87605d5296e595e2dfa7101b Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Jan 2017 11:50:43 +0000 Subject: [PATCH] Simpler UI for comments; remove some unused code. --- .../views/project/editor/review-panel.jade | 69 +++++++--------- .../directives/commentEntry.coffee | 4 - .../stylesheets/app/editor/review-panel.less | 82 ++++++------------- 3 files changed, 54 insertions(+), 101 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index aade8bde51..6139d5b52f 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -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') diff --git a/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee b/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee index 76798b1935..2ee7862379 100644 --- a/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee @@ -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 diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index c2dd9f314c..a55c82220d 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -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;