From 6153bd302298bf974a0a702830f58a04ccc167ae Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 16 Nov 2016 15:47:05 +0000 Subject: [PATCH] Wrap add comment entries in a directive --- .../views/project/editor/review-panel.jade | 176 ++++++++++-------- .../review-panel/ReviewPanelManager.coffee | 1 + .../controllers/ReviewPanelController.coffee | 15 +- .../directives/addCommentEntry.coffee | 34 ++++ 4 files changed, 138 insertions(+), 88 deletions(-) create mode 100644 services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index f5ec420d88..2741a35b57 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -28,46 +28,28 @@ ) 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'") - change-entry( - entry="entry" - user="users[entry.metadata.user_id]" - on-reject="rejectChange(entry_id);" - on-accept="acceptChange(entry_id);" - ) + div(ng-if="entry.type === 'insert' || entry.type === 'delete'") + change-entry( + entry="entry" + user="users[entry.metadata.user_id]" + on-reject="rejectChange(entry_id);" + on-accept="acceptChange(entry_id);" + ) - div(ng-if="entry.type === 'comment'") - comment-entry( - entry="entry" - users="users" - on-resolve="" - on-reply="submitReply(entry);" - ) - - 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 + div(ng-if="entry.type === 'comment'") + comment-entry( + entry="entry" + users="users" + on-resolve="" + on-reply="submitReply(entry);" + ) + + div(ng-if="entry.type === 'add-comment'") + add-comment-entry( + on-start-new="startNewComment();" + on-submit="submitNewComment(content);" + on-cancel="cancelNewComment();" + ) .rp-overview-entry-list( ng-if="reviewPanel.subView === SubViews.OVERVIEW" @@ -189,49 +171,81 @@ script(type='text/ng-template', id='changeEntryTemplate') - .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({{ user.hue }}, 70%, 50%);") {{ user.name }} - p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} - .rp-avatar(style="background-color: hsl({{ user.hue }}, 70%, 50%);") {{ user.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="onReject();") - i.fa.fa-times - |  Reject - a.rp-entry-button(href, ng-click="onAccept();") - i.fa.fa-check - |  Accept + .rp-entry( + ng-class="[ 'rp-entry-' + entry.type, (entry.focused ? 'rp-entry-focused' : '')]" + ) + .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({{ user.hue }}, 70%, 50%);") {{ user.name }} + p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }} + .rp-avatar(style="background-color: hsl({{ user.hue }}, 70%, 50%);") {{ user.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="onReject();") + i.fa.fa-times + |  Reject + a.rp-entry-button(href, ng-click="onAccept();") + i.fa.fa-check + |  Accept script(type='text/ng-template', id='commentEntryTemplate') - .rp-comment( - ng-repeat="comment in entry.thread" - ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';" + .rp-entry.rp-entry-comment( + ng-class="entry.focused ? 'rp-entry-focused' : '';" ) - .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);" - placeholder="Hit \"Enter\" to reply" + .rp-comment( + ng-repeat="comment in entry.thread" + ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';" ) - .rp-entry-actions - a.rp-entry-button(href, ng-click="onResolve();") - i.fa.fa-check - |  Mark as resolved \ No newline at end of file + .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);" + placeholder="Hit \"Enter\" to reply" + ) + .rp-entry-actions + a.rp-entry-button(href, ng-click="onResolve();") + i.fa.fa-check + |  Mark as resolved + +script(type='text/ng-template', id='addCommentEntryTemplate') + .rp-entry.rp-entry-add-comment( + ng-class="[ (state.isAdding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]" + ) + a.rp-add-comment-btn( + href + ng-if="!state.isAdding" + ng-click="startNewComment();" + ) + i.fa.fa-comment + |  Add comment + div(ng-if="state.isAdding") + .rp-new-comment + textarea.rp-comment-input( + ng-model="state.content" + ng-keypress="handleCommentKeyPress($event);" + 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 \ No newline at end of file diff --git a/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee b/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee index 4c0945183b..d6a065f499 100644 --- a/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee +++ b/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee @@ -3,4 +3,5 @@ define [ "ide/review-panel/directives/reviewPanelSorted" "ide/review-panel/directives/changeEntry" "ide/review-panel/directives/commentEntry" + "ide/review-panel/directives/addCommentEntry" ], () -> \ No newline at end of file diff --git a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee index 89764aab19..64c0d6ea48 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -44,19 +44,20 @@ define [ $scope.$broadcast "change:reject", entry_id $scope.startNewComment = () -> - $scope.commentState.adding = true + # $scope.commentState.adding = true $scope.$broadcast "comment:select_line" $scope.$broadcast "review-panel:layout" - $scope.submitNewComment = () -> - $scope.commentState.adding = false - $scope.$broadcast "comment:add", $scope.commentState.content - $scope.commentState.content = "" + $scope.submitNewComment = (content) -> + console.log(content) + # $scope.commentState.adding = false + $scope.$broadcast "comment:add", content + # $scope.commentState.content = "" $scope.$broadcast "review-panel:layout" $scope.cancelNewComment = (entry) -> - $scope.commentState.adding = false - $scope.commentState.content = "" + # $scope.commentState.adding = false + # $scope.commentState.content = "" $scope.$broadcast "review-panel:layout" $scope.startReply = (entry) -> diff --git a/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee new file mode 100644 index 0000000000..202dfa0d80 --- /dev/null +++ b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee @@ -0,0 +1,34 @@ +define [ + "base" +], (App) -> + App.directive "addCommentEntry", () -> + restrict: "E" + templateUrl: "addCommentEntryTemplate" + scope: + onStartNew: "&" + onSubmit: "&" + onCancel: "&" + link: (scope, element, attrs) -> + scope.state = + isAdding: false + content: "" + + scope.startNewComment = () -> + scope.state.isAdding = true + scope.onStartNew() + + scope.cancelNewComment = () -> + scope.state.isAdding = false + scope.onCancel() + + scope.handleCommentKeyPress = (ev) -> + if ev.keyCode == 13 and !ev.shiftKey and !ev.ctrlKey and !ev.metaKey + ev.preventDefault() + ev.target.blur() + scope.submitNewComment() + + scope.submitNewComment = () -> + console.log scope.state.content + scope.onSubmit { content: scope.state.content } + scope.state.isAdding = false + scope.state.content = "" \ No newline at end of file