From 88b694f8940ff33ee0a434a754ce4a37ccc9e829 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 12 Jan 2017 11:25:36 +0000 Subject: [PATCH 1/2] Animate comment resolving. --- .../views/project/editor/review-panel.jade | 10 ++++++++-- .../directives/commentEntry.coffee | 12 +++++++++-- .../stylesheets/app/editor/review-panel.less | 20 +++++++++++++++++++ 3 files changed, 38 insertions(+), 4 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index df4051b1d9..b695f5f3cd 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -152,7 +152,9 @@ script(type='text/ng-template', id='changeEntryTemplate') |  Accept script(type='text/ng-template', id='commentEntryTemplate') - div + .rp-comment-wrapper( + ng-class="{ 'rp-comment-wrapper-resolving': state.animating }" + ) .rp-entry-callout.rp-entry-callout-comment .rp-entry-indicator( ng-class="{ 'rp-entry-indicator-focused': entry.focused }" @@ -160,7 +162,7 @@ script(type='text/ng-template', id='commentEntryTemplate') ) i.fa.fa-comment .rp-entry.rp-entry-comment( - ng-class="{ 'rp-entry-focused': entry.focused }" + ng-class="{ 'rp-entry-focused': entry.focused, 'rp-entry-comment-resolving': state.animating }" ) div .rp-comment( @@ -181,7 +183,11 @@ script(type='text/ng-template', id='commentEntryTemplate') placeholder="{{ 'Hit \"Enter\" to reply' + (entry.resolved ? ' and re-open' : '') }}" ) .rp-entry-actions +<<<<<<< Updated upstream a.rp-entry-button(href, ng-click="onResolve();", ng-if="permissions.comment && permissions.write") +======= + a.rp-entry-button(href, ng-click="animateAndCallOnResolve();") +>>>>>>> Stashed changes i.fa.fa-inbox |  Resolve a.rp-entry-button(href, ng-click="onReply();", ng-if="permissions.comment") 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 b74180b719..7ceed51bbe 100644 --- a/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee @@ -1,7 +1,7 @@ define [ "base" ], (App) -> - App.directive "commentEntry", () -> + App.directive "commentEntry", ($timeout) -> restrict: "E" templateUrl: "commentEntryTemplate" scope: @@ -12,9 +12,17 @@ define [ onReply: "&" onIndicatorClick: "&" link: (scope, element, attrs) -> + scope.state = + animating: false + scope.handleCommentReplyKeyPress = (ev) -> if ev.keyCode == 13 and !ev.shiftKey and !ev.ctrlKey and !ev.metaKey ev.preventDefault() ev.target.blur() scope.onReply() - \ No newline at end of file + + scope.animateAndCallOnResolve = () -> + scope.state.animating = true + element.find(".rp-entry").css("top", 0) + $timeout((() -> scope.onResolve()), 200) + return true \ No newline at end of file diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index ebafa888cc..c9c7b21359 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -27,6 +27,8 @@ @rp-toolbar-height : 32px; + + .rp-button() { background-color: @rp-highlight-blue; color: #FFF; @@ -254,6 +256,16 @@ border-color: @rp-yellow; } + &-comment-resolving { + top: 4px; + left: 6px; + opacity: 0; + z-index: 3; + transform: scale(.1); + transform-origin: 0 0; + transition: top .2s ease-out, left .2s ease-out, transform .2s ease-out, opacity .2s ease-out .1s; + } + &-comment-resolved { border-color: @rp-grey; background-color: #efefef; @@ -503,6 +515,14 @@ text-align: center; } +.rp-comment-wrapper { + transition: .2s opacity ease-out; + + &-resolving { + opacity: 0; + } +} + .rp-loading, .rp-empty { text-align: center; From 0b57cc650b1ccabeef92d2a53b2db3a5b95279b6 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 12 Jan 2017 11:56:04 +0000 Subject: [PATCH 2/2] Fix merge mistake; adjust animation timings. --- services/web/app/views/project/editor/review-panel.jade | 6 +----- .../coffee/ide/review-panel/directives/commentEntry.coffee | 2 +- .../web/public/stylesheets/app/editor/review-panel.less | 4 ++-- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index b695f5f3cd..ce1f7aa48e 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -183,11 +183,7 @@ script(type='text/ng-template', id='commentEntryTemplate') placeholder="{{ 'Hit \"Enter\" to reply' + (entry.resolved ? ' and re-open' : '') }}" ) .rp-entry-actions -<<<<<<< Updated upstream - a.rp-entry-button(href, ng-click="onResolve();", ng-if="permissions.comment && permissions.write") -======= - a.rp-entry-button(href, ng-click="animateAndCallOnResolve();") ->>>>>>> Stashed changes + a.rp-entry-button(href, ng-click="animateAndCallOnResolve();", ng-if="permissions.comment && permissions.write") i.fa.fa-inbox |  Resolve a.rp-entry-button(href, ng-click="onReply();", ng-if="permissions.comment") 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 7ceed51bbe..2d32f7f20e 100644 --- a/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee +++ b/services/web/public/coffee/ide/review-panel/directives/commentEntry.coffee @@ -24,5 +24,5 @@ define [ scope.animateAndCallOnResolve = () -> scope.state.animating = true element.find(".rp-entry").css("top", 0) - $timeout((() -> scope.onResolve()), 200) + $timeout((() -> scope.onResolve()), 350) return true \ No newline at end of file diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index c9c7b21359..96ed8377ad 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -263,7 +263,7 @@ z-index: 3; transform: scale(.1); transform-origin: 0 0; - transition: top .2s ease-out, left .2s ease-out, transform .2s ease-out, opacity .2s ease-out .1s; + transition: top .35s ease-out, left .35s ease-out, transform .35s ease-out, opacity .35s ease-out .2s; } &-comment-resolved { @@ -516,7 +516,7 @@ } .rp-comment-wrapper { - transition: .2s opacity ease-out; + transition: .35s opacity ease-out .2s; &-resolving { opacity: 0;