From c74449b2e3cce3b4ae6814191213ea04b2bb99ca Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 17 Mar 2017 16:28:21 +0000 Subject: [PATCH 1/6] Don't show the mini review panel when the only visible entry is the add comment one. --- .../review-panel/controllers/ReviewPanelController.coffee | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 5067799571..6c6354a773 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -163,7 +163,10 @@ define [ $scope.$watch (() -> entries = $scope.reviewPanel.entries[$scope.editor.open_doc_id] or {} - Object.keys(entries).length + permEntries = {} + for entry, entryData of entries + permEntries[entry] = entryData if entry != "add-comment" + Object.keys(permEntries).length ), (nEntries) -> $scope.reviewPanel.hasEntries = nEntries > 0 and $scope.project.features.trackChangesVisible From beac43741cf3bead3bfed015f458ceab8b58d936 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 17 Mar 2017 17:05:38 +0000 Subject: [PATCH 2/6] New add comment button. --- .../app/views/project/editor/review-panel.pug | 10 ++- .../controllers/ReviewPanelController.coffee | 1 + .../stylesheets/app/editor/review-panel.less | 73 +++++++++++-------- 3 files changed, 52 insertions(+), 32 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index b9dea40207..f4606be9a3 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -1,10 +1,18 @@ -#review-panel +.rp-in-editor-widgets a.rp-track-changes-indicator( href ng-if="editor.wantTrackChanges" ng-click="toggleReviewPanel();" ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }" ) !{translate("track_changes_is_on")} + a.rp-add-comment-btn( + href + ng-if="reviewPanel.entries[editor.open_doc_id]['add-comment'] != null" + ng-click="startNewComment();" + ) + i.fa.fa-comment + |  #{translate("add_comment")} +#review-panel .review-panel-toolbar resolved-comments-dropdown( class="rp-flex-block" 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 6c6354a773..04a32b2626 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -15,6 +15,7 @@ define [ entries: {} resolvedComments: {} hasEntries: false + showAddComment: false subView: $scope.SubViews.CUR_FILE openSubView: $scope.SubViews.CUR_FILE overview: diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 7d2dbb1c9f..5bfd6275f9 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -448,6 +448,11 @@ display: block; padding: 5px 10px; border-radius: 3px; + + .rp-in-editor-widgets & { + border-radius: 0; + border-bottom-left-radius: 3px; + } } .rp-new-comment { @@ -871,43 +876,49 @@ } } -.rp-track-changes-indicator { - display: none; +.rp-in-editor-widgets { position: absolute; top: 0; - right: @review-off-width; - padding: 5px 10px; - background-color: rgba(240, 240, 240, 0.9); - color: @rp-type-blue; - text-align: center; - border-bottom-left-radius: 3px; + right: 0; font-size: 10px; - z-index: 2; - white-space: nowrap; - - &.rp-track-changes-indicator-on-dark { - background-color: rgba(88, 88, 88, .8); - color: #FFF; - - &:hover, - &:focus { - background-color: rgba(88, 88, 88, 1); - color: #FFF; - } - } - - &:hover, - &:focus { - outline: 0; - text-decoration: none; - background-color: rgba(240, 240, 240, 1); - color: @rp-type-blue; - } - + .rp-size-mini & { - display: block; + right: @review-off-width; } } + .rp-track-changes-indicator { + display: block; + padding: 5px 10px; + background-color: rgba(240, 240, 240, 0.9); + color: @rp-type-blue; + text-align: center; + border-bottom-left-radius: 3px; + z-index: 2; + white-space: nowrap; + + &.rp-track-changes-indicator-on-dark { + background-color: rgba(88, 88, 88, .8); + color: #FFF; + + &:hover, + &:focus { + background-color: rgba(88, 88, 88, 1); + color: #FFF; + } + } + + &:hover, + &:focus { + outline: 0; + text-decoration: none; + background-color: rgba(240, 240, 240, 1); + color: @rp-type-blue; + } + + .rp-size-expanded & { + display: none; + } + } // Helper class for elements which aren't treated as flex-items by IE10, e.g: // * inline items; From 2c2abc3cae17abc13cb1032d56c1be7d26fb6e51 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 20 Mar 2017 11:18:29 +0000 Subject: [PATCH 3/6] Wire up new button with existing UI for adding comments. --- services/web/app/views/project/editor/review-panel.pug | 2 +- .../ide/review-panel/controllers/ReviewPanelController.coffee | 4 ++++ .../coffee/ide/review-panel/directives/addCommentEntry.coffee | 3 +++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index f4606be9a3..026663e35f 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -8,7 +8,7 @@ a.rp-add-comment-btn( href ng-if="reviewPanel.entries[editor.open_doc_id]['add-comment'] != null" - ng-click="startNewComment();" + ng-click="addNewComment();" ) i.fa.fa-comment |  #{translate("add_comment")} 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 04a32b2626..2f903879ec 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -327,6 +327,10 @@ define [ $scope.$broadcast "change:reject", entry_id event_tracking.sendMB "rp-change-rejected", { view: if $scope.ui.reviewPanelOpen then $scope.reviewPanel.subView else 'mini' } + $scope.addNewComment = () -> + $scope.$broadcast "comment:start_adding" + $scope.toggleReviewPanel() + $scope.startNewComment = () -> $scope.$broadcast "comment:select_line" $timeout () -> diff --git a/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee index 2ec79efcd5..40282562d4 100644 --- a/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee @@ -15,6 +15,9 @@ define [ isAdding: false content: "" + scope.$on "comment:start_adding", () -> + scope.startNewComment() + scope.startNewComment = () -> scope.state.isAdding = true scope.onStartNew() From 8951e91e315e5d5161c54cdaf98b681f5163ab3c Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 20 Mar 2017 11:35:35 +0000 Subject: [PATCH 4/6] Remove add comment button from the mini review panel. --- services/web/app/views/project/editor/review-panel.pug | 9 --------- .../ide/review-panel/directives/addCommentEntry.coffee | 3 +-- .../web/public/stylesheets/app/editor/review-panel.less | 4 ++++ 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index 026663e35f..83a985ebf0 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -81,7 +81,6 @@ on-start-new="startNewComment();" on-submit="submitNewComment(content);" on-cancel="cancelNewComment();" - on-indicator-click="toggleReviewPanel();" layout-to-left="reviewPanel.layoutToLeft" ) @@ -322,14 +321,6 @@ script(type='text/ng-template', id='resolvedCommentEntryTemplate') script(type='text/ng-template', id='addCommentEntryTemplate') div .rp-entry-callout.rp-entry-callout-add-comment - .rp-entry-indicator( - ng-if="!commentState.adding" - ng-click="startNewComment(); onIndicatorClick();" - tooltip=translate("add_comment") - tooltip-placement="{{ layoutToLeft ? 'left' : 'right' }}" - tooltip-append-to-body="true" - ) - i.fa.fa-commenting .rp-entry.rp-entry-add-comment( ng-class="[ (state.isAdding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]" ) diff --git a/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee index 40282562d4..abbce86e9b 100644 --- a/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee @@ -7,8 +7,7 @@ define [ scope: onStartNew: "&" onSubmit: "&" - onCancel: "&" - onIndicatorClick: "&" + onCancel: "&" layoutToLeft: "=" link: (scope, element, attrs) -> scope.state = diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 5bfd6275f9..24f8759b29 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -568,6 +568,10 @@ border-color: @rp-yellow; } } + + .rp-state-current-file &-add-comment { + display: none; + } } .rp-overview-file-header { From 0e24d7118dda2a5d94af589cb006758629c5b86b Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 20 Mar 2017 13:56:36 +0000 Subject: [PATCH 5/6] Hide new UI behind query string parameter. --- services/web/app/views/project/editor/editor.pug | 3 ++- .../web/app/views/project/editor/review-panel.pug | 11 ++++++++++- .../controllers/ReviewPanelController.coffee | 7 ++++++- .../review-panel/directives/addCommentEntry.coffee | 3 ++- .../public/stylesheets/app/editor/review-panel.less | 8 ++++++-- 5 files changed, 26 insertions(+), 6 deletions(-) diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 9924fe1221..ce24108f77 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -19,7 +19,8 @@ div.full-size( 'rp-size-mini': (!ui.reviewPanelOpen && reviewPanel.hasEntries),\ 'rp-size-expanded': ui.reviewPanelOpen,\ 'rp-layout-left': reviewPanel.layoutToLeft,\ - 'rp-loading-threads': reviewPanel.loadingThreads\ + 'rp-loading-threads': reviewPanel.loadingThreads,\ + 'rp-new-comment-ui': reviewPanel.newAddCommentUI\ }" ) .loading-panel(ng-show="!editor.sharejs_doc || editor.opening") diff --git a/services/web/app/views/project/editor/review-panel.pug b/services/web/app/views/project/editor/review-panel.pug index 83a985ebf0..89b0e05305 100644 --- a/services/web/app/views/project/editor/review-panel.pug +++ b/services/web/app/views/project/editor/review-panel.pug @@ -7,7 +7,7 @@ ) !{translate("track_changes_is_on")} a.rp-add-comment-btn( href - ng-if="reviewPanel.entries[editor.open_doc_id]['add-comment'] != null" + ng-if="reviewPanel.newAddCommentUI && reviewPanel.entries[editor.open_doc_id]['add-comment'] != null" ng-click="addNewComment();" ) i.fa.fa-comment @@ -81,6 +81,7 @@ on-start-new="startNewComment();" on-submit="submitNewComment(content);" on-cancel="cancelNewComment();" + on-indicator-click="toggleReviewPanel();" layout-to-left="reviewPanel.layoutToLeft" ) @@ -321,6 +322,14 @@ script(type='text/ng-template', id='resolvedCommentEntryTemplate') script(type='text/ng-template', id='addCommentEntryTemplate') div .rp-entry-callout.rp-entry-callout-add-comment + .rp-entry-indicator.rp-entry-indicator-add-comment( + ng-if="!commentState.adding" + ng-click="startNewComment(); onIndicatorClick();" + tooltip=translate("add_comment") + tooltip-placement="{{ layoutToLeft ? 'left' : 'right' }}" + tooltip-append-to-body="true" + ) + i.fa.fa-commenting .rp-entry.rp-entry-add-comment( ng-class="[ (state.isAdding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]" ) 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 2f903879ec..ba5c70daab 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -28,6 +28,10 @@ define [ layoutToLeft: false rendererData: {} loadingThreads: false + newAddCommentUI: false # Test new UI for adding comments; remove afterwards. + + if window.location.search.match /new-comments=true/ + $scope.reviewPanel.newAddCommentUI = true window.addEventListener "beforeunload", () -> collapsedStates = {} @@ -166,7 +170,8 @@ define [ entries = $scope.reviewPanel.entries[$scope.editor.open_doc_id] or {} permEntries = {} for entry, entryData of entries - permEntries[entry] = entryData if entry != "add-comment" + if entry != "add-comment" or !$scope.reviewPanel.newAddCommentUI + permEntries[entry] = entryData Object.keys(permEntries).length ), (nEntries) -> $scope.reviewPanel.hasEntries = nEntries > 0 and $scope.project.features.trackChangesVisible diff --git a/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee index abbce86e9b..9d33bcb35a 100644 --- a/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/addCommentEntry.coffee @@ -7,7 +7,8 @@ define [ scope: onStartNew: "&" onSubmit: "&" - onCancel: "&" + onCancel: "&" + onIndicatorClick: "&" layoutToLeft: "=" link: (scope, element, attrs) -> scope.state = diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 24f8759b29..20b1b953fb 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -197,6 +197,10 @@ right: 4px; z-index: 1; } + + .rp-new-comment-ui &-add-comment { + display: none; + } } .rp-entry-wrapper { @@ -569,7 +573,7 @@ } } - .rp-state-current-file &-add-comment { + .rp-size-mini.rp-new-comment-ui &-add-comment { display: none; } } @@ -884,7 +888,7 @@ position: absolute; top: 0; right: 0; - font-size: 10px; + font-size: 11px; .rp-size-mini & { right: @review-off-width; From a35f2585c7ce21f7e08334ea90a89363dddb7421 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Mon, 20 Mar 2017 14:02:25 +0000 Subject: [PATCH 6/6] Remove unused flag. --- .../ide/review-panel/controllers/ReviewPanelController.coffee | 1 - 1 file changed, 1 deletion(-) 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 ba5c70daab..406d2a9c5b 100644 --- a/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee +++ b/services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee @@ -15,7 +15,6 @@ define [ entries: {} resolvedComments: {} hasEntries: false - showAddComment: false subView: $scope.SubViews.CUR_FILE openSubView: $scope.SubViews.CUR_FILE overview: