From a1435d13a35e5c5de2761cb32b8d5e7e25785a5c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 5 Jan 2017 17:15:27 +0000 Subject: [PATCH] Basic structure for the resolved comments dropdown. --- .../views/project/editor/review-panel.jade | 34 ++++++++++++++----- .../review-panel/ReviewPanelManager.coffee | 1 + .../resolvedCommentsDropdown.coffee | 28 +++++++++++++++ .../stylesheets/app/editor/review-panel.less | 25 +++++++++++++- 4 files changed, 79 insertions(+), 9 deletions(-) create mode 100644 services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index 6139d5b52f..a2f8d01efd 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -1,5 +1,9 @@ #review-panel .review-panel-toolbar + resolved-comments-dropdown( + entries="reviewPanel.entries" + threads="reviewPanel.commentThreads" + ) span.review-panel-toolbar-label(ng-click="editor.wantTrackChanges = true;", ng-if="editor.wantTrackChanges === false") Track Changes is strong off span.review-panel-toolbar-label(ng-click="editor.wantTrackChanges = false;", ng-if="editor.wantTrackChanges === true") Track Changes is @@ -118,8 +122,7 @@ script(type='text/ng-template', id='changeEntryTemplate') span(ng-switch-when="delete") Deleted  del.rp-content-highlight {{ entry.content }} .rp-entry-metadata - | {{ 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();") @@ -142,13 +145,16 @@ script(type='text/ng-template', id='commentEntryTemplate') ) div .rp-comment( - ng-repeat="comment in threads[entry.thread_id].messages" + ng-repeat="comment in threads[entry.thread_id].messages track by comment.id" ) - p.rp-comment-content {{ comment.content }} + p.rp-comment-content + span.rp-entry-user( + style="color: hsl({{ comment.user.hue }}, 70%, 40%);" + ng-if="$first || comment.user.id !== threads[entry.thread_id].messages[$index - 1].user.id" + ) {{ comment.user.name }}:  + | {{ comment.content }} .rp-entry-metadata | {{ comment.timestamp | date : 'MMM d, y h:mm a' }} - |  •  - 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" @@ -163,7 +169,7 @@ script(type='text/ng-template', id='commentEntryTemplate') //- 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();") - i.fa.fa-check + i.fa.fa-inbox |  Resolve a.rp-entry-button(href, ng-click="onReply();") i.fa.fa-reply @@ -212,4 +218,16 @@ script(type='text/ng-template', id='addCommentEntryTemplate') |  Cancel a.rp-entry-button(href, ng-click="submitNewComment()") i.fa.fa-comment - |  Comment \ No newline at end of file + |  Comment + +script(type='text/ng-template', id='resolvedCommentsDropdownTemplate') + .resolved-comments + a.resolved-comments-toggle( + href + ng-click="state.isOpen = !state.isOpen" + ) + i.fa.fa-inbox + .resolved-comments-dropdown( + ng-class="{ 'resolved-comments-dropdown-open' : state.isOpen }" + ) + div wut diff --git a/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee b/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee index cd1231c798..51358f8bc7 100644 --- a/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee +++ b/services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee @@ -5,6 +5,7 @@ define [ "ide/review-panel/directives/changeEntry" "ide/review-panel/directives/commentEntry" "ide/review-panel/directives/addCommentEntry" + "ide/review-panel/directives/resolvedCommentsDropdown" "ide/review-panel/filters/notEmpty" "ide/review-panel/filters/orderOverviewEntries" ], () -> \ No newline at end of file diff --git a/services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee b/services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee new file mode 100644 index 0000000000..61a187be5b --- /dev/null +++ b/services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee @@ -0,0 +1,28 @@ +define [ + "base" +], (App) -> + App.directive "resolvedCommentsDropdown", () -> + restrict: "E" + templateUrl: "resolvedCommentsDropdownTemplate" + scope: + entries: "=" + threads: "=" + link: (scope, element, attrs) -> + scope.state = + isOpen: false + + scope.resolvedComments = {} + + filterResolvedComments = () -> + scope.resolvedComments = {} + + for fileId, fileEntries of scope.entries + scope.resolvedComments[fileId] = {} + for entryId, entry of fileEntries + if entry.type == "comment" and scope.threads[entry.thread_id].resolved? + scope.resolvedComments[fileId][entryId] = scope.threads[entry.thread_id] + + scope.$watchCollection "entries", filterResolvedComments + scope.$watchCollection "threads", filterResolvedComments + + diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index a55c82220d..fc6193deb7 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -100,7 +100,6 @@ .rp-size-expanded & { display: flex; align-items: center; - justify-content: space-between; padding: 0 5px; } .rp-state-current-file & { @@ -120,6 +119,8 @@ .review-panel-toolbar-label { cursor: pointer; margin-right: 5px; + text-align: right; + flex-grow: 1; } .rp-entry-list { @@ -633,3 +634,25 @@ } } + +.resolved-comments-toggle { + font-size: @rp-icon-large-size; + color: lighten(@rp-type-blue, 25%); + border: solid 1px @rp-border-grey; + border-radius: 3px; + padding: 0 4px; + + &:hover, + &:focus { + text-decoration: none; + color: @rp-type-blue; + } +} + +.resolved-comments-dropdown { + display: none; + + &-open { + display: block; + } +}