From 010612aaccbf8312e459c8cf48a03f711945ed44 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 10 Jan 2017 16:29:27 +0000 Subject: [PATCH 1/3] Keep track of resolved threads in the dropdown. --- .../views/project/editor/review-panel.jade | 3 ++- .../controllers/ReviewPanelController.coffee | 20 ++++++++++--------- .../resolvedCommentsDropdown.coffee | 8 ++------ 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index 34e49f03f0..753941702c 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -3,6 +3,7 @@ resolved-comments-dropdown( entries="reviewPanel.entries" threads="reviewPanel.commentThreads" + resolved-ids="reviewPanel.resolvedThreadIds" docs="docs" on-open="refreshResolvedCommentsDropdown();" on-unresolve="unresolveComment(threadId);" @@ -271,7 +272,7 @@ script(type='text/ng-template', id='resolvedCommentsDropdownTemplate') ng-if="!isLoading" ) resolved-comment-entry( - ng-repeat="thread in resolvedComments" + ng-repeat="thread in resolvedComments | orderBy:'-resolved_at'" thread="thread" on-unresolve="handleUnresolve(threadId);" on-delete="handleDelete(entryId, threadId);" 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 15ead40e84..4b45ef3b2d 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -21,6 +21,7 @@ define [ dropdown: loading: false commentThreads: {} + resolvedThreadIds: {} $scope.commentState = adding: false @@ -53,7 +54,6 @@ define [ _onCommentReopened(thread_id) rangesTrackers = {} - resolvedThreadIds = {} getDocEntries = (doc_id) -> $scope.reviewPanel.entries[doc_id] ?= {} @@ -62,7 +62,7 @@ define [ getChangeTracker = (doc_id) -> if !rangesTrackers[doc_id]? rangesTrackers[doc_id] = new RangesTracker() - rangesTrackers[doc_id].resolvedThreadIds = resolvedThreadIds + rangesTrackers[doc_id].resolvedThreadIds = $scope.reviewPanel.resolvedThreadIds return rangesTrackers[doc_id] scrollbar = {} @@ -97,7 +97,7 @@ define [ # The open doc range tracker is kept up to date in real-time so # replace any outdated info with this rangesTrackers[doc.doc_id] = doc.ranges - rangesTrackers[doc.doc_id].resolvedThreadIds = resolvedThreadIds + rangesTrackers[doc.doc_id].resolvedThreadIds = $scope.reviewPanel.resolvedThreadIds $scope.reviewPanel.rangesTracker = rangesTrackers[doc.doc_id] if old_doc? old_doc.off "flipped_pending_to_inflight" @@ -284,7 +284,7 @@ define [ thread.resolved = true thread.resolved_by_user = formatUser(user) thread.resolved_at = new Date() - resolvedThreadIds[thread_id] = true + $scope.reviewPanel.resolvedThreadIds[thread_id] = true $scope.$broadcast "comment:resolve_thread", thread_id _onCommentReopened = (thread_id) -> @@ -292,14 +292,16 @@ define [ delete thread.resolved delete thread.resolved_by_user delete thread.resolved_at - delete resolvedThreadIds[thread_id] + delete $scope.reviewPanel.resolvedThreadIds[thread_id] $scope.$broadcast "comment:unresolve_thread", thread_id _onCommentDeleted = (thread_id) -> + if $scope.reviewPanel.resolvedThreadIds[thread_id]? + delete $scope.reviewPanel.resolvedThreadIds[thread_id] + delete $scope.reviewPanel.commentThreads[thread_id] $scope.deleteComment = (entry_id, thread_id) -> - console.log thread_id _onCommentDeleted(thread_id) $scope.$broadcast "comment:remove", entry_id @@ -344,15 +346,15 @@ define [ refreshThreads = () -> $http.get "/project/#{$scope.project_id}/threads" .success (threads) -> - for thread_id, _ of resolvedThreadIds - delete resolvedThreadIds[thread_id] + for thread_id, _ of $scope.reviewPanel.resolvedThreadIds + delete $scope.reviewPanel.resolvedThreadIds[thread_id] for thread_id, thread of threads for comment in thread.messages formatComment(comment) if thread.resolved_by_user? $scope.$broadcast "comment:resolve_thread", thread_id thread.resolved_by_user = formatUser(thread.resolved_by_user) - resolvedThreadIds[thread_id] = true + $scope.reviewPanel.resolvedThreadIds[thread_id] = true $scope.reviewPanel.commentThreads = threads refreshThreads() diff --git a/services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee b/services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee index 38a440dfa0..1c798de0e3 100644 --- a/services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/resolvedCommentsDropdown.coffee @@ -7,6 +7,7 @@ define [ scope: entries : "=" threads : "=" + resolvedIds : "=" docs : "=" onOpen : "&" onUnresolve : "&" @@ -27,11 +28,9 @@ define [ scope.handleUnresolve = (threadId) -> scope.onUnresolve({ threadId }) - filterResolvedComments() scope.handleDelete = (entryId, threadId) -> scope.onDelete({ entryId, threadId }) - filterResolvedComments() getDocNameById = (docId) -> doc = _.find(scope.docs, (doc) -> doc.doc.id = docId) @@ -56,7 +55,4 @@ define [ scope.resolvedComments.push(resolvedComment) - scope.$watchCollection "entries", filterResolvedComments - scope.$watchCollection "threads", filterResolvedComments - - + scope.$watchCollection "resolvedIds", filterResolvedComments From 931187bd8b2b5c41b35be01179f91134411709bf Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 11 Jan 2017 10:53:46 +0000 Subject: [PATCH 2/3] Add a backdrop to the dropdown (to close when clicked outside). --- .../views/project/editor/review-panel.jade | 8 +++--- .../controllers/ReviewPanelController.coffee | 3 +-- .../stylesheets/app/editor/review-panel.less | 26 +++++++++---------- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index 633c6ccdcb..5da0fe5eaf 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -256,10 +256,10 @@ script(type='text/ng-template', id='addCommentEntryTemplate') script(type='text/ng-template', id='resolvedCommentsDropdownTemplate') .resolved-comments - //- .resolved-comments-backdrop( - //- ng-class="{ 'resolved-comments-backdrop-visible' : state.isOpen }" - //- ng-click="state.isOpen = !state.isOpen" - //- ) + .resolved-comments-backdrop( + ng-class="{ 'resolved-comments-backdrop-visible' : state.isOpen }" + ng-click="state.isOpen = false" + ) a.resolved-comments-toggle( href ng-click="toggleOpenState();" 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 fb521ed9f8..cbdfd62ef3 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -251,8 +251,7 @@ define [ $timeout () -> $scope.$broadcast "review-panel:layout" - $scope.submitReply = (entry, entry_id) -> - $scope.unresolveComment(entry, entry_id) + $scope.submitReply = (entry, entry_id) -> thread_id = entry.thread_id content = entry.replyContent $http.post("/project/#{$scope.project_id}/thread/#{thread_id}/messages", {content, _csrf: window.csrfToken}) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index aa14e2c2d4..1092fc2eb2 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -93,6 +93,7 @@ border-left: solid 1px @rp-border-grey; font-size: @rp-base-font-size; color: @rp-type-blue; + z-index: 4; // 3 is Ace's gutter z-index value. } .review-panel-toolbar { @@ -112,7 +113,7 @@ border-bottom: 1px solid @rp-border-grey; background-color: @rp-bg-dim-blue; text-align: center; - z-index: 2; + z-index: 3; flex-basis: 32px; flex-shrink: 0; } @@ -687,19 +688,18 @@ } } -// .resolved-comments-backdrop { -// display: none; -// position: fixed; -// top: 0; -// right: 0; -// bottom: 0; -// left: 0; -// background-color: rgba(0, 0, 0, .5); +.resolved-comments-backdrop { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; -// &-visible { -// display: block; -// } -// } + &-visible { + display: block; + } +} .resolved-comments-dropdown { display: none; From d701c1ef5ec26a5242ebefe74a884c44037865dc Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 11 Jan 2017 11:25:18 +0000 Subject: [PATCH 3/3] Make the dropdown scrollable. --- .../views/project/editor/review-panel.jade | 2 +- .../stylesheets/app/editor/review-panel.less | 23 ++++++++++++------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index 5da0fe5eaf..8d92ede03f 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -270,7 +270,7 @@ script(type='text/ng-template', id='resolvedCommentsDropdownTemplate') ) .rp-loading(ng-if="isLoading") i.fa.fa-spinner.fa-spin - div( + .resolved-comments-scroller( ng-if="!isLoading" ) resolved-comment-entry( diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 1092fc2eb2..47784df152 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -103,12 +103,12 @@ align-items: center; padding: 0 5px; } - .rp-state-current-file & { - position: absolute; - top: 0; - left: 0; - right: 0; - } + // .rp-state-current-file & { + // position: absolute; + // top: 0; + // left: 0; + // right: 0; + // } height: @rp-toolbar-height; border-bottom: 1px solid @rp-border-grey; background-color: @rp-bg-dim-blue; @@ -706,11 +706,13 @@ position: absolute; width: 300px; left: -150px; + max-height: 90%; margin-top: @rp-entry-arrow-width * 1.5; margin-left: 1em; background-color: @rp-bg-blue; text-align: left; - padding: 5px; + align-items: stretch; + justify-content: center; border-radius: 3px; box-shadow: 0 0 20px 10px rgba(0, 0, 0, .3); @@ -723,6 +725,11 @@ } &-open { - display: block; + display: flex; } } + .resolved-comments-scroller { + flex: 0 0 100%; + padding: 5px; + overflow-y: auto; + }