Merge branch 'ja-track-changes' of github.com:sharelatex/web-sharelatex into ja-track-changes

services/web/app/views/project/editor/editor.jade

@@ -58,6 +58,15 @@ div.full-size(
 			doc-id="editor.open_doc_id"
 			renderer-data="reviewPanel.rendererData"
 		)
+
+		a.rp-track-changes-indicator(
+			href
+			ng-if="editor.wantTrackChanges"
+			ng-click="toggleReviewPanel();"
+			ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }"
+		) Track changes is 
+			strong on
+
 		
 		include ./review-panel
 

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

@@ -13,10 +13,13 @@ define [
 			onIndicatorClick: "&"
 		link: (scope, element, attrs) ->
 			scope.contentLimit = 40
-			scope.needsCollapsing = scope.entry.content.length > scope.contentLimit
 			scope.isCollapsed = true
+			scope.needsCollapsing = false
 
 			scope.toggleCollapse = () ->
 				scope.isCollapsed = !scope.isCollapsed
 				$timeout () ->
-					scope.$emit "review-panel:layout"
+					scope.$emit "review-panel:layout"
+
+			scope.$watch "entry.content.length", (contentLength) ->
+				scope.needsCollapsing = contentLength > scope.contentLimit

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

@@ -11,10 +11,11 @@ define [
 			onDelete: "&"
 		link: (scope, element, attrs) ->
 			scope.contentLimit = 40
-			scope.needsCollapsing = scope.thread.content.length > scope.contentLimit
+			scope.needsCollapsing = false
 			scope.isCollapsed = true
 
 			scope.toggleCollapse = () ->
 				scope.isCollapsed = !scope.isCollapsed
-				$timeout () ->
-					scope.$emit "review-panel:layout"
+
+			scope.$watch "thread.content.length", (contentLength) ->
+				scope.needsCollapsing = contentLength > scope.contentLimit

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

@@ -827,4 +827,41 @@
 		color: darken(@rp-type-blue, 5%);
 		text-decoration: none;
 	}
-}
+}
+
+.rp-track-changes-indicator {
+	display: none;
+	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;
+	font-size: 10px;
+	z-index: 2;
+
+	&.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;
+	}
+}