Merge pull request #27 from sharelatex/as-autocompile-onboarding

Autocompile onboarding

services/web/app/coffee/Features/Project/ProjectController.coffee

@@ -248,6 +248,24 @@ module.exports = ProjectController =
 						return cb(null, false)
 					else
 						return cb(null, true)
+			showAutoCompileOnboarding: (cb) ->
+				cb = underscore.once(cb)
+				if !user_id?
+					return cb()
+				timestamp = user_id.toString().substring(0,8)
+				userSignupDate = new Date( parseInt( timestamp, 16 ) * 1000 )
+				if userSignupDate > new Date("2017-10-03")
+					# Don't show for users who registered after it was released
+					return cb(null, false)
+				timeout = setTimeout cb, 500
+				AnalyticsManager.getLastOccurance user_id, "shown-autocompile-onboarding", (error, event) ->
+					clearTimeout timeout
+					if error?
+						return cb(null, false)
+					else if event?
+						return cb(null, false)
+					else
+						return cb(null, true)
 		}, (err, results)->
 			if err?
 				logger.err err:err, "error getting details for project page"
@@ -255,9 +273,9 @@ module.exports = ProjectController =
 			project = results.project
 			user = results.user
 			subscription = results.subscription
-			{ showTrackChangesOnboarding, showPerUserTCNotice } = results
+			{ showTrackChangesOnboarding, showPerUserTCNotice, showAutoCompileOnboarding } = results
 
-			daysSinceLastUpdated =  (new Date() - project.lastUpdated) /86400000
+			daysSinceLastUpdated =  (new Date() - project.lastUpdated) / 86400000
 			logger.log project_id:project_id, daysSinceLastUpdated:daysSinceLastUpdated, "got db results for loading editor"
 
 			AuthorizationManager.getPrivilegeLevelForProject user_id, project_id, (error, privilegeLevel)->
@@ -300,6 +318,7 @@ module.exports = ProjectController =
 					trackChangesState: project.track_changes
 					showTrackChangesOnboarding: !!showTrackChangesOnboarding
 					showPerUserTCNotice: !!showPerUserTCNotice
+					showAutoCompileOnboarding: !!showAutoCompileOnboarding
 					privilegeLevel: privilegeLevel
 					chatUrl: Settings.apis.chat.url
 					anonymous: anonymous

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

@@ -122,6 +122,7 @@ block requirejs
 		window.trackChangesState = data.trackChangesState;
 		window.showTrackChangesOnboarding = #{!!showTrackChangesOnboarding};
 		window.showPerUserTCNotice = #{!!showPerUserTCNotice};
+		window.showAutoCompileOnboarding = #{!!showAutoCompileOnboarding}
 		window.wikiEnabled = #{!!(settings.apis.wiki && settings.apis.wiki.url)};
 		window.requirejs = {
 			"paths" : {

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

@@ -94,4 +94,19 @@ div.full-size(
 	ng-show="ui.view == 'pdf'"
 )
 	include ./pdf
-	
+
+#onboarding-autocompile.onboarding-autocompile.popover(
+	ng-controller="AutoCompileOnboardingController"
+	ng-if="onboarding.autoCompile == 'show'"
+	ng-class="placement"
+)
+	.popover-inner
+		h3.popover-title
+			| #{translate("auto_compile")}
+			span.beta-feature-badge
+		.popover-content
+			p #{translate("try_out_auto_compile_setting")}
+			img(src="/img/onboarding/autocompile/setting-dropdown.png" width="100%")
+			p #{translate("auto_compile_onboarding_description")}
+			button.btn.btn-default.btn-block(ng-click="dismiss()")
+				| #{translate("got_it")}

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

@@ -1,6 +1,6 @@
 div.full-size.pdf(ng-controller="PdfController")
 	.toolbar.toolbar-tall
-		.btn-group(
+		.btn-group#recompile(
 			dropdown,
 			tooltip-html="'"+translate('recompile_pdf')+" <span class=\"keyboard-shortcut\">({{modifierKey}} + Enter)</span>'"
 			tooltip-class="keyboard-tooltip"
@@ -28,7 +28,9 @@ div.full-size.pdf(ng-controller="PdfController")
 			ul.dropdown-menu.dropdown-menu-left
 				// Only show on beta program?
 				if user.betaProgram
-					li.dropdown-header #{translate("auto_compile")}
+					li.dropdown-header
+						| #{translate("auto_compile")}
+						span.beta-feature-badge
 					li
 						a(href, ng-click="autocompile_enabled = true")
 							i.fa.fa-fw(ng-class="{'fa-check': autocompile_enabled}")

services/web/public/coffee/ide.coffee

@@ -12,7 +12,8 @@ define [
 	"ide/labels/LabelsManager"
 	"ide/review-panel/ReviewPanelManager"
 	"ide/SafariScrollPatcher"
-	"ide/FeatureOnboardingController"
+	"ide/FeatureOnboardingController",
+	"ide/AutoCompileOnboardingController",
 	"ide/settings/index"
 	"ide/share/index"
 	"ide/chat/index"
@@ -72,8 +73,12 @@ define [
 			chatOpen: false
 			pdfLayout: 'sideBySide'
 			pdfHidden: false,
-			reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}")
-			miniReviewPanelVisible: false
+			pdfWidth: 0,
+			reviewPanelOpen: localStorage("ui.reviewPanelOpen.#{window.project_id}"),
+			miniReviewPanelVisible: false,
+		}
+		$scope.onboarding = {
+			autoCompile: if window.user.betaProgram and window.showAutoCompileOnboarding then 'unseen' else 'dismissed'
 		}
 		$scope.user = window.user
 
@@ -102,6 +107,7 @@ define [
 
 		$scope.$on "layout:pdf:resize", (_, layoutState) ->
 			$scope.ui.pdfHidden = layoutState.east.initClosed
+			$scope.ui.pdfWidth = layoutState.east.size
 
 		# Tracking code.
 		$scope.$watch "ui.view", (newView, oldView) ->

services/web/public/coffee/ide/AutoCompileOnboardingController.coffee

@@ -0,0 +1,26 @@
+define [
+	"base"
+], (App) ->
+	App.controller "AutoCompileOnboardingController", ($scope, event_tracking) ->
+		recompileBtn = angular.element('#recompile')
+		popover = angular.element('#onboarding-autocompile')
+		{ top, left } = recompileBtn.offset()
+
+		# If pdf panel smaller than recompile button + popover, show to left.
+		# Otherwise show to right
+		if $scope.ui.pdfWidth < 475
+			$scope.placement = 'left'
+			popover.offset({
+				top: top,
+				left: left - popover.width()
+			})
+		else
+			$scope.placement = 'right'
+			popover.offset({
+				top: top,
+				left: left + recompileBtn.width()
+			})
+
+		$scope.dismiss = () ->
+			$scope.onboarding.autoCompile = 'dismissed'
+			event_tracking.sendMB "shown-autocompile-onboarding"

services/web/public/coffee/ide/pdf/controllers/PdfController.coffee

@@ -412,6 +412,9 @@ define [
 		$scope.recompile = (options = {}) ->
 			return if $scope.pdf.compiling
 
+			if !options.isAutoCompile and $scope.onboarding.autoCompile == 'unseen'
+				$scope.onboarding.autoCompile = 'show'
+
 			event_tracking.sendMBSampled "editor-recompile-sampled", options
 
 			$scope.pdf.compiling = true

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

@@ -98,4 +98,48 @@ a.feat-onboard-dismiss {
 		color: #FFF;
 		opacity: 1;
 	}
-}
+}
+
+.onboarding-autocompile {
+	display: block;
+	top: 10px;
+
+	img {
+		margin-bottom: 10px;
+		border: 1px solid @gray-lighter;
+	}
+
+	&::before, &::after {
+		content: '';
+		border-width: 11px;
+		border-style: solid;
+		border-color: transparent;
+		top: 7px;
+		display: block;
+		position: absolute;
+	}
+
+	&.right::before {
+		border-left-width: 0;
+		border-right-color: rgba(0, 0, 0, .3);
+		left: -11px;
+	}
+
+	&.right::after {
+		border-left-width: 0;
+		border-right-color: #f7f7f7;
+		left: -9.5px;
+	}
+
+	&.left::before {
+		border-right-width: 0;
+		border-left-color: rgba(0, 0, 0, .3);
+		right: -11px
+	}
+
+	&.left::after {
+		border-right-width: 0;
+		border-left-color: #f7f7f7;
+		right: -9.5px;
+	}
+}