Merge pull request #457 from sharelatex/pr-new-add-comment-btn

New "add comment" button

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")

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.newAddCommentUI && reviewPanel.entries[editor.open_doc_id]['add-comment'] != null"
+		ng-click="addNewComment();"
+	) 
+		i.fa.fa-comment
+		|  #{translate("add_comment")}
+#review-panel
 	.review-panel-toolbar
 		resolved-comments-dropdown(
 			class="rp-flex-block"
@@ -314,7 +322,7 @@ 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.rp-entry-indicator-add-comment(
 			ng-if="!commentState.adding"
 			ng-click="startNewComment(); onIndicatorClick();"
 			tooltip=translate("add_comment")

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

@@ -27,6 +27,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 = {}
@@ -163,7 +167,11 @@ define [
 
 		$scope.$watch (() ->
 			entries = $scope.reviewPanel.entries[$scope.editor.open_doc_id] or {}
-			Object.keys(entries).length
+			permEntries = {}
+			for entry, entryData of entries
+				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
 
@@ -323,6 +331,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 () ->

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

@@ -8,13 +8,16 @@ define [
 			onStartNew: "&"
 			onSubmit: "&"
 			onCancel: "&"
-			onIndicatorClick: "&"
+			onIndicatorClick: "&"	
 			layoutToLeft: "="
 		link: (scope, element, attrs) ->
 			scope.state =
 				isAdding: false
 				content: ""
 
+			scope.$on "comment:start_adding", () ->
+				scope.startNewComment()
+
 			scope.startNewComment = () ->
 				scope.state.isAdding = true
 				scope.onStartNew()

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

@@ -194,6 +194,10 @@
 		right: 4px;
 		z-index: 1;
 	}
+
+	.rp-new-comment-ui &-add-comment {
+		display: none;
+	}
 }
 
 .rp-entry-wrapper {
@@ -445,6 +449,11 @@
 		display: block;
 		padding: 5px 10px;
 		border-radius: 3px;
+
+		.rp-in-editor-widgets & {
+			border-radius: 0;
+			border-bottom-left-radius: 3px;
+		}
 	}
 
 	.rp-new-comment {
@@ -560,6 +569,10 @@
 			border-color: @rp-yellow;
 		}
 	}
+
+	.rp-size-mini.rp-new-comment-ui &-add-comment {
+		display: none;
+	}
 }
 
 .rp-overview-file-header {
@@ -871,43 +884,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;
-	font-size: 10px;
-	z-index: 2;
-	white-space: nowrap;
+	right: 0;
+	font-size: 11px;
+	
+	.rp-size-mini & {
+		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);
+		&.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;
-	}
+		&:hover,
+		&:focus {
+			outline: 0;
+			text-decoration: none;
+			background-color: rgba(240, 240, 240, 1);
+			color: @rp-type-blue;
+		}
 
-	.rp-size-mini & {
-		display: block;
+		.rp-size-expanded & {
+			display: none;
+		}
 	}
-}
 
 // Helper class for elements which aren't treated as flex-items by IE10, e.g:
 // * inline items;