Basic onboarding tutorial for track-changes.

services/web/app/views/project/editor/feature-onboarding.pug

@@ -1,54 +1,85 @@
 .feat-onboard(
 	ng-controller="FeatureOnboardingController"
-	ng-class="('feat-onboard-step' + innerStep)"
-	ng-if="!state.loading && ui.showCodeCheckerOnboarding"
+	ng-class="('feat-onboard-step' + onboarding.innerStep)"
 	ng-cloak
 )
 	.feat-onboard-wrapper
-		h1.feat-onboard-title
-			| Introducing 
-			span.feat-onboard-title-name Code check
-		div(ng-if="innerStep === 1;")
+		div(ng-if="onboarding.innerStep === 1;")
+			h1.feat-onboard-title
+				span.feat-onboard-title-name Commenting
+				|  & 
+				span.feat-onboard-title-name Track Changes
 			p.feat-onboard-description
-				span.feat-onboard-description-name Code check 
-				| will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive.
+				| Collaboration features are finally here! 
+			p.feat-onboard-description
+				span.feat-onboard-description-name Commenting 
+				| and 
+				span.feat-onboard-description-name Track Changes 
+				| will make it easier for you to work with peers in your documents. 
 			.row
 				video.feat-onboard-video(autoplay, loop)
-					source(src="/img/teasers/code-checker/code-checker.mp4", type="video/mp4")
-					img(src="/img/teasers/code-checker/code-checker.gif")
+					source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/open-review.gif")
 			.row.feat-onboard-adv-wrapper
-				.col-xs-4
-					h2.feat-onboard-adv-title 
-						| Missing 
-						span.feat-onboard-adv-title-highlight brackets
-					p Forgot to place a closing bracket? We'll warn you.
-				.col-xs-4
+				.col-xs-6
 					h2.feat-onboard-adv-title 
-						| Unclosed 
-						span.feat-onboard-adv-title-highlight environments
-					p 
-						| Know when you are missing an 
-						code \end{...}
-						|  command.
-				.col-xs-4
+						span.feat-onboard-adv-title-highlight Commenting
+					p Want to discuss specific parts of the text?
+					p Use our brand-new commenting system.
+				.col-xs-6
 					h2.feat-onboard-adv-title 
-						| Incorrect 
-						span.feat-onboard-adv-title-highlight nesting
-					p 
-						| Order matters. Get notified when you use an 
-						code \end{...}
-						|   too soon.
+						span.feat-onboard-adv-title-highlight Track Changes
+					p See changes in your documents, live.
+					p Track, accept and reject changes individually.
+			.feat-onboard-btn-wrapper
+				button.btn.btn-primary(ng-click="onboarding.innerStep = 2;") Next
+			//- .feat-onboard-btn-wrapper
+			//- 	button.btn.btn-default(ng-click="turnCodeCheckOff();") No, disable it for now
+		
+		div(ng-if="onboarding.innerStep === 2;")
+			h1.feat-onboard-title
+				span.feat-onboard-title-name Commenting
+			p.feat-onboard-description
+				span.feat-onboard-description-name Commenting 
+				| is very easy.
+			p.feat-onboard-description Just select a span of text and click on 
+				span.feat-onboard-description-name “Add comment”
+				| .
+			.row
+				video.feat-onboard-video(autoplay, loop)
+					source(src="/img/onboarding/review-panel/commenting.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/commenting.gif")
 			.feat-onboard-btn-wrapper
-				button.btn.btn-primary(ng-click="turnCodeCheckOn();") Yes, turn Code check on
+				button.btn.btn-primary(ng-click="onboarding.innerStep = 3;") Next
+
+		div(ng-if="onboarding.innerStep === 3;")
+			h1.feat-onboard-title
+				span.feat-onboard-title-name Track Changes
+			p.feat-onboard-description
+				| Let your peers know what you've been up to.
+			p.feat-onboard-description
+				| Click on the 
+				span.feat-onboard-description-name “Track Changes” 
+				| toggle to start marking your insertions, as well as your deletions.
+			.row
+				video.feat-onboard-video(autoplay, loop)
+					source(src="/img/onboarding/review-panel/add-changes.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/add-changes.gif")
 			.feat-onboard-btn-wrapper
-				button.btn.btn-default(ng-click="turnCodeCheckOff();") No, disable it for now
-		div(ng-if="innerStep === 2;")
+				button.btn.btn-primary(ng-click="onboarding.innerStep = 4;") Next
+
+		div(ng-if="onboarding.innerStep === 4;")
+			h1.feat-onboard-title
+				span.feat-onboard-title-name Track Changes
 			p.feat-onboard-description
-				| Remember: you can always turn 
-				span.feat-onboard-description-name Code check 
-				em on 
+				| Click 
+				span.feat-onboard-description-name “Accept” 
 				| or 
-				em off 
-				|, in the settings menu.
+				span.feat-onboard-description-name “Reject” 
+				| to keep or discard an individual change.
+			.row
+				video.feat-onboard-video(autoplay, loop)
+					source(src="/img/onboarding/review-panel/accept-changes.mp4", type="video/mp4")
+					img(src="/img/onboarding/review-panel/accept-changes.gif")
 			.feat-onboard-btn-wrapper
-				button.btn.btn-primary(ng-click="dismiss();") OK, got it
+				button.btn.btn-primary(ng-click="onboarding.innerStep = 4;") Next

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

@@ -6,7 +6,7 @@
 		ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }"
 	) Track changes is 
 		strong on
-		
+			
 	.review-panel-toolbar
 		resolved-comments-dropdown(
 			class="rp-flex-block"

services/web/public/coffee/ide/FeatureOnboardingController.coffee

@@ -2,34 +2,21 @@ define [
 	"base"
 ], (App) ->
 	App.controller "FeatureOnboardingController", ($scope, settings) ->
-		$scope.innerStep = 1
-
-		$scope.turnCodeCheckOn = () ->
-			settings.saveSettings({ syntaxValidation: true })
-			$scope.settings.syntaxValidation = true
-			navToInnerStep2()
-			
-		$scope.turnCodeCheckOff = () ->
-			settings.saveSettings({ syntaxValidation: false })
-			$scope.settings.syntaxValidation = false
-			navToInnerStep2()
+		$scope.onboarding = 
+			innerStep: 1
 
 		$scope.dismiss = () ->
 			$scope.ui.leftMenuShown = false
 			$scope.ui.showCodeCheckerOnboarding = false
 
-		navToInnerStep2 = () ->
-			$scope.innerStep = 2
-			$scope.ui.leftMenuShown = true
-
-		handleKeypress = (e) ->
-			if e.keyCode == 13
-				if $scope.innerStep == 1
-					$scope.turnCodeCheckOn()
-				else
-					$scope.dismiss()
+		# handleKeypress = (e) ->
+		# 	if e.keyCode == 13
+		# 		if $scope.innerStep == 1
+		# 			$scope.turnCodeCheckOn()
+		# 		else
+		# 			$scope.dismiss()
 
-		$(document).on "keypress", handleKeypress
+		# $(document).on "keypress", handleKeypress
 
-		$scope.$on "$destroy", () -> 
-			$(document).off "keypress", handleKeypress
+		# $scope.$on "$destroy", () -> 
+		# 	$(document).off "keypress", handleKeypress

services/web/public/stylesheets/app/editor/feature-onboarding.less

@@ -1,5 +1,5 @@
-@feat-onboard-wrapper-width: 820px;
-@feat-onboard-max-text-width: 750px;
+@feat-onboard-wrapper-width: 750px;
+@feat-onboard-max-text-width: 700px;
 
 .feat-onboard {
 	position: fixed;
@@ -10,56 +10,44 @@
 	display: flex;
  	justify-content: center;
  	align-items: center;
-	background-image: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85));
+	background-color: rgba(0, 0, 0, .85);
 	background-repeat: no-repeat;
 	background-position-x: 0;
 	color: #FFF;
 	text-align: center;
 	z-index: 102;
-	transition: background-position ease-in-out @left-menu-animation-duration;
 	overflow: auto;
 }
 
-.feat-onboard-step2 {
-	background-position-x: @left-menu-width;
-
-	~ #left-menu {
-		pointer-events: none;
-
-		.code-check-setting {
-			box-shadow: 0 0 300px 0 #000;
-		}
-	}
-}
 	.feat-onboard-wrapper {
 		width: @feat-onboard-wrapper-width;
 	}
 		.feat-onboard-title {
-			color: @brand-primary;
+			color: #FFF;
 			margin-bottom: 40px;
 
 		}
 			.feat-onboard-title-name {
-				color: #FFF;
 				font-weight: bold;
 			}
 
 		.feat-onboard-description {
 			max-width: @feat-onboard-max-text-width;
-			margin: 0 auto 30px;
+			margin: 0 auto 5px;
 			padding: 0 80px;
 		}
 			.feat-onboard-description-name {
 				font-weight: bold;
+				white-space: nowrap;
 			}
 
 	.feat-onboard-video {
+		margin-top: 30px;
 		box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3);
 	}
 
 	.feat-onboard-adv-wrapper {
 		text-align: left;
-		margin-bottom: 30px;
 	}
 		.feat-onboard-adv-title {
 			color: #FFF;
@@ -70,6 +58,7 @@
 			}
 
 	.feat-onboard-btn-wrapper {
+		margin-top: 30px;
 		margin-bottom: 10px;
 
 		> .btn {