Merge pull request #415 from sharelatex/ja-track-changes

Don't animate review panel entries on toggle and resize

services/web/app/views/project/editor/review-panel.pug

@@ -201,7 +201,7 @@ script(type='text/ng-template', id='commentEntryTemplate')
 							span.rp-entry-user(
 								style="color: hsl({{ comment.user.hue }}, 70%, 40%);",
 							) {{ comment.user.name }}: 
-							| {{ comment.content }}
+							span(ng-bind-html="comment.content | linky:'_blank'")
 						textarea.rp-comment-input(
 							expandable-text-area
 							ng-if="comment.editing"
@@ -272,7 +272,7 @@ script(type='text/ng-template', id='resolvedCommentEntryTemplate')
 						style="color: hsl({{ comment.user.hue }}, 70%, 40%);"
 						ng-if="$first || comment.user.id !== thread.messages[$index - 1].user.id"
 					) {{ comment.user.name }}: 
-					| {{ comment.content }}
+					span(ng-bind-html="comment.content | linky:'_blank'")
 				.rp-entry-metadata
 					| {{ comment.timestamp | date : 'MMM d, y h:mm a' }}
 			.rp-comment.rp-comment-resolver

services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee

@@ -33,7 +33,7 @@ define [
 
 		$scope.$on "layout:pdf:resize", (event, state) ->
 			$scope.reviewPanel.layoutToLeft = (state.east?.size < 220 || state.east?.initClosed)
-			$scope.$broadcast "review-panel:layout"
+			$scope.$broadcast "review-panel:layout", false
 
 		$scope.$on "expandable-text-area:resize", (event) ->
 			$timeout () ->
@@ -154,7 +154,7 @@ define [
 			return if !reviewPanelOpen?
 			$timeout () ->
 				$scope.$broadcast "review-panel:toggle"
-				$scope.$broadcast "review-panel:layout"
+				$scope.$broadcast "review-panel:layout", false
 
 		regenerateTrackChangesId = (doc) ->
 			old_id = getChangeTracker(doc.doc_id).getIdSeed()

services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee

@@ -6,7 +6,11 @@ define [
 			link: (scope, element, attrs) ->
 				previous_focused_entry_index = 0
 				
-				layout = () ->
+				layout = (animate = true) ->
+					if animate
+						element.removeClass("no-animate")
+					else
+						element.addClass("no-animate")
 					sl_console.log "LAYOUT"
 					if scope.ui.reviewPanelOpen
 						PADDING = 8
@@ -101,9 +105,9 @@ define [
 				scope.$applyAsync () ->
 					layout()
 				
-				scope.$on "review-panel:layout", () ->
+				scope.$on "review-panel:layout", (e, animate = true) ->
 					scope.$applyAsync () ->
-						layout()
+						layout(animate)
 				
 				scope.$watch "reviewPanel.rendererData.lineHeight", () ->
 					layout()

services/web/public/stylesheets/app/editor/review-panel.less

@@ -184,6 +184,9 @@
 	color: #FFF;
 	cursor: pointer;
 	transition: top 0.3s, left 0.1s, right 0.1s;
+	.no-animate & {
+		transition: none;
+	}
 	
 	&-focused {
 		left: 0px;
@@ -277,6 +280,9 @@
 	border-radius: 3px;
 	background-color: #FFF;
 	transition: top 0.3s, left 0.1s, right 0.1s;
+	.no-animate & {
+		transition: none;
+	}
 
 	&-insert {
 		border-color: @rp-green;
@@ -339,6 +345,7 @@
 			// We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0).
 			// This is needed to ensure that IE makes the element fill the available space. 
 			flex: 1 0 1px; 
+			overflow-x: auto;
 
 			.rp-state-overview & {
 				margin-left: 0;
@@ -417,6 +424,7 @@
 		.rp-comment-content {
 			margin: 0;
 			color: @rp-type-darkgrey;
+			overflow-x: auto; // Long words, like links can overflow without this.
 		}
 	
 	.rp-comment-resolver {