Animate comment resolving.

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
 					| &nbsp;Resolve
 				a.rp-entry-button(href, ng-click="onReply();", ng-if="permissions.comment")

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()
-		
+			
+			scope.animateAndCallOnResolve = () ->
+				scope.state.animating = true
+				element.find(".rp-entry").css("top", 0)
+				$timeout((() -> scope.onResolve()), 200)
+				return true

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;