Merge pull request #748 from sharelatex/as-rt-review-panel-warning

Show warning in review panel when using rich text mode

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

@@ -15,6 +15,7 @@ div.full-size(
 	.ui-layout-center(
 		ng-controller="ReviewPanelController",
 		ng-class="{\
+			'rp-unsupported': editor.showRichText,\
 			'rp-state-current-file': (reviewPanel.subView === SubViews.CUR_FILE),\
 			'rp-state-current-file-expanded': (reviewPanel.subView === SubViews.CUR_FILE && ui.reviewPanelOpen),\
 			'rp-state-current-file-mini': (reviewPanel.subView === SubViews.CUR_FILE && !ui.reviewPanelOpen),\

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

@@ -235,6 +235,13 @@
 			i.fa.fa-list
 			span.rp-nav-label #{translate("overview")}
 
+	.rp-unsupported-msg-wrapper
+		.rp-unsupported-msg
+			i.fa.fa-5x.fa-exclamation-triangle
+			p.rp-unsupported-msg-title Sorry, Track Changes is not supported in Rich Text mode (yet).
+			p We didn't want to delay your ability to use Rich Text mode so we've launched without support for Track Changes.
+			p We're working hard to include Track Changes as soon as possible.
+
 
 script(type='text/ng-template', id='changeEntryTemplate')
 	div

services/web/public/coffee/ide/editor/directives/aceEditor.coffee

@@ -521,6 +521,7 @@ define [
 						detachFromAce(scope.sharejsDoc)
 						session = editor.getSession()
 						session?.destroy()
+						scope.eventsBridge.emit "aceScrollbarVisibilityChanged", false, 0
 
 				scope.$emit "#{scope.name}:inited", editor
 

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

@@ -164,7 +164,7 @@ define [
 			updateScrollbar()
 
 		updateScrollbar = () ->
-			if scrollbar.isVisible and $scope.reviewPanel.subView == $scope.SubViews.CUR_FILE
+			if scrollbar.isVisible and $scope.reviewPanel.subView == $scope.SubViews.CUR_FILE and !$scope.editor.showRichText
 				$reviewPanelEl.css "right", "#{ scrollbar.scrollbarWidth }px"
 			else
 				$reviewPanelEl.css "right", "0"

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

@@ -139,6 +139,10 @@
 		padding: 0 5px;
 	}
 
+	.rp-unsupported & {
+		display: none;
+	}
+
 	position: relative;
 	border-bottom: 1px solid @rp-border-grey;
 	background-color: @rp-bg-dim-blue;
@@ -217,6 +221,10 @@
 	.rp-size-mini & {
 		display: block;
 	}
+
+	.rp-unsupported & {
+		display: none;
+	}
 	
 	.rp-state-current-file & {
 		position: absolute;
@@ -714,6 +722,10 @@
 		display: flex;
 	}
 
+	.rp-unsupported & {
+		display: none;
+	}
+
 	.rp-state-current-file & {
 		position: absolute;
 		bottom: 0;
@@ -781,6 +793,12 @@
 	}
 }
 
+.toolbar-editor {
+	.rp-size-expanded & {
+		margin-right: @review-panel-width;
+	}
+}
+
 .rp-toggle {
 	display: inline-block;
 	vertical-align: middle;
@@ -834,6 +852,31 @@
 		}
 	}
 
+.rp-unsupported-msg-wrapper {
+	display: none;
+	.rp-size-expanded.rp-unsupported & {
+		display: block;
+	}
+
+	height: 100%;
+
+	.rp-unsupported-msg {
+		display: flex;
+		width: @review-panel-width - 40px;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin: 0 auto;
+		text-align: center;
+
+		.rp-unsupported-msg-title {
+			font-size: 1.3em;
+			margin-top: 13px;
+		}
+	}
+}
+
 .ace-editor-wrapper {
 	.track-changes-marker-callout {
 		border-radius: 0;
@@ -1003,7 +1046,8 @@
 	.rp-size-mini & {
 		right: @review-off-width;
 	}
-	.rp-size-expanded & {
+	.rp-size-expanded &,
+	.rp-unsupported & {
 		display: none;
 	}
 }
@@ -1053,6 +1097,10 @@
 		display: block;
 	}
 
+	.rp-unsupported & {
+		display: none;
+	}
+
 	.rp-size-expanded & {
 		&::after {
 			content: "\f105";