Relayout the onboarding, making a video slideshow.

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

@@ -1,85 +1,96 @@
 .feat-onboard(
 	ng-controller="FeatureOnboardingController"
 	ng-class="('feat-onboard-step' + onboarding.innerStep)"
+	ng-if="!state.loading && ui.showCollabFeaturesOnboarding"
 	ng-cloak
 )
 	.feat-onboard-wrapper
-		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
-				| 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/onboarding/review-panel/open-review.mp4", type="video/mp4")
-					img(src="/img/onboarding/review-panel/open-review.gif")
-			.row.feat-onboard-adv-wrapper
+		h1.feat-onboard-title
+			span.feat-onboard-title-name Commenting
+			|  & 
+			span.feat-onboard-title-name Track Changes
+		p.feat-onboard-description
+			| Collaboration features are finally here! 
+		p.feat-onboard-description
+			span.feat-onboard-highlight Commenting 
+			| and 
+			span.feat-onboard-highlight Track Changes 
+			| will make it easier for you to work with peers in your documents. 
+
+		.feat-onboard-tutorial-wrapper
+			button.btn.btn-primary.feat-onboard-nav-btn(
+				ng-click="gotoPrevStep();"
+				ng-disabled="onboarding.innerStep === 1;")
+				i.fa.fa-arrow-left
+			.feat-onboard-video-container(ng-switch="onboarding.innerStep")
+				div(ng-switch-when="1")
+					video.feat-onboard-video(
+						autoplay
+						loop
+					)
+						source(src="/img/onboarding/review-panel/open-review.mp4", type="video/mp4")
+						img(src="/img/onboarding/review-panel/open-review.gif")
+				div(ng-switch-when="2")
+					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")
+				div(ng-switch-when="3")
+					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")
+				div(ng-switch-when="4")
+					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")
+			button.btn.btn-primary.feat-onboard-nav-btn(
+				ng-click="gotoNextStep();"
+				ng-disabled="onboarding.innerStep === onboarding.nSteps;")
+				i.fa.fa-arrow-right
+
+		div(ng-switch="onboarding.innerStep")
+			.row.feat-onboard-adv-wrapper(ng-switch-when="1")
 				.col-xs-6
-					h2.feat-onboard-adv-title 
-						span.feat-onboard-adv-title-highlight Commenting
+					h2.feat-onboard-adv-title 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 
-						span.feat-onboard-adv-title-highlight Track Changes
+					h2.feat-onboard-adv-title 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="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-primary(ng-click="onboarding.innerStep = 4;") Next
+			.row.feat-onboard-adv-wrapper(ng-switch-when="2")
+				.col-xs-12
+					h2.feat-onboard-adv-title Commenting
+					p
+						span.feat-onboard-highlight Commenting 
+						| is very easy.
+					p Just select a span of text and click on 
+						span.feat-onboard-highlight “Add comment”
+						| .		
+			.row.feat-onboard-adv-wrapper(ng-switch-when="3")
+				.col-xs-12
+					h2.feat-onboard-adv-title Track Changes
+					p
+						| Let your peers know what you've been up to.
+					p
+						| Click on the 
+						span.feat-onboard-highlight “Track Changes” 
+						| toggle to start marking your insertions, as well as your deletions.
 
-		div(ng-if="onboarding.innerStep === 4;")
-			h1.feat-onboard-title
-				span.feat-onboard-title-name Track Changes
-			p.feat-onboard-description
-				| Click 
-				span.feat-onboard-description-name “Accept” 
-				| or 
-				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="onboarding.innerStep = 4;") Next
+			.row.feat-onboard-adv-wrapper(ng-switch-when="4") 
+				.col-xs-12
+					h2.feat-onboard-adv-title Track Changes
+					p
+						| Click 
+						span.feat-onboard-highlight “Accept” 
+						| or 
+						span.feat-onboard-highlight “Reject” 
+						| to keep or discard an individual change.

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

@@ -20,7 +20,6 @@
 }
 
 	.feat-onboard-wrapper {
-		width: @feat-onboard-wrapper-width;
 	}
 		.feat-onboard-title {
 			color: #FFF;
@@ -36,26 +35,22 @@
 			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-highlight {
+		font-weight: bold;
+		white-space: nowrap;
 	}
 
 	.feat-onboard-adv-wrapper {
 		text-align: left;
 	}
 		.feat-onboard-adv-title {
+			font-weight: bold;
+			white-space: nowrap;
 			color: #FFF;
 			font-size: 23px;
+			margin-top: 0;
 		}
-			.feat-onboard-adv-title-highlight {
-				font-weight: bold;
-			}
 
 	.feat-onboard-btn-wrapper {
 		margin-top: 30px;
@@ -64,4 +59,31 @@
 		> .btn {
 			box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3);
 		}
-	}
+	}
+
+	.feat-onboard-tutorial-wrapper {
+		display: flex;
+		align-items: center;
+		padding: 30px 0;
+	}
+		.feat-onboard-video-container {
+			width: 618px;
+			margin: 0 30px;
+		}
+		.feat-onboard-video {
+			box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.3);
+		}
+
+		.feat-onboard-nav-btn {
+			border-radius: 1em;
+			width: 2em;
+			height: 2em;
+			text-align: center;
+			padding: 0;
+			font-size: 1.3em;
+			line-height: 1em;
+
+			&[disabled] {
+				opacity: 0.2;
+			}
+		}