Add a help page to facilitate onboarding

mikaa123 · Dec 22, 2015 · eac0378 · eac0378
1 parent 0b00fb9
commit eac0378
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 42 deletions.
diff --git a/main.js b/main.js
@@ -7,10 +7,12 @@ const ipc = electron.ipcMain;
 const Tray = electron.Tray;
 const Menu = electron.Menu;
 const path = require('path');
+const dataStore = require('./src/data-store');
 
 let rulers = [];
 let mainWindow;
 let settingsWindow;
+let helpWindow;
 
 /**
  * Create a ruler window and push it to the `rulers` array. The ruler window
@@ -44,6 +46,29 @@ function createNewRuler(windowInfo) {
 	rulers.push(ruler);
 }
 
+/**
+ * Show the help page for better onboarding.
+ */
+function showHelp() {
+	if (helpWindow) {
+		return;
+	}
+
+	helpWindow = new BrowserWindow({
+		width: 700,
+		height: 570,
+		frameless: true,
+		frame: false,
+		resizable: false
+	});
+
+	helpWindow.loadURL(`file://${__dirname}/src/app/help/help.html`);
+
+	helpWindow.on('closed', () => {
+		helpWindow = null;
+	});
+}
+
 let hidden = false;
 
 /**
@@ -113,6 +138,10 @@ app.on('ready', function() {
 					});
 				}
 			},
+			{
+				label: 'Help',
+				click: showHelp
+			},
 			{
 				type: 'separator'
 			},
@@ -152,7 +181,12 @@ app.on('ready', function() {
 	globalShortcut.register('Command + Control + T', toggleRulerCommand);
 	globalShortcut.register('Command + Control + R', createNewRuler);
 
-	createNewRuler();
+	// Show help the first time the app is launched.
+	if (dataStore.readSettings('tutorialShown')) {
+		createNewRuler();
+	} else {
+		showHelp();
+	}
 });
 
 // We make sure not to quit when every windows are closed.
@@ -169,6 +203,6 @@ ipc.on('settings-changed', () => {
 });
 
 // Duplicate a given ruler.
-ipc.on('duplicate-ruler', (evt, duplicateInfo) => {
-	createNewRuler(duplicateInfo);
+ipc.on('create-ruler', (evt, rulerInfo) => {
+	createNewRuler(rulerInfo);
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "linear",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Ruler application with web-development in mind.",
   "main": "main.js",
   "scripts": {

diff --git a/src/app/help/help.css b/src/app/help/help.css
@@ -0,0 +1,27 @@
+body {
+	font-family: 'Open Sans';
+	padding: .4em 2em;
+}
+
+h1 {
+	font-family: 'Raleway';
+}
+
+footer {
+	position: absolute;
+	bottom: 2em;
+	right: 2em;
+}
+
+b {
+	color: #6A24FA;
+}
+
+.step {
+	opacity: 0;
+	-webkit-transition: opacity .2s ease-out;
+}
+
+.step--0 {
+	opacity: 1;
+}
diff --git a/src/app/help/help.html b/src/app/help/help.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Linear help</title>
+		<link href="../../assets/styles/font-awesome.min.css" rel="stylesheet" type="text/css"/>
+		<link href="../../assets/styles/common.css" rel="stylesheet" type="text/css"/>
+		<link href="help.css" rel="stylesheet" type="text/css"/>
+	</head>
+	<body>
+		<div class="help-wrapper">
+			<div class="help-wrapper__close close"><i class="fa fa-times-circle"></i></div>
+
+			<header>
+				<h1>Welcome to Linear</h1>
+				<p>We're thrilled to have you with us. Linear will help you achieve pixel-perfect
+				designs without getting in your way.</p>
+			</header>
+
+			<section class="step step--0">
+				<p>In Linear, you work with <b>rulers</b>. Here is one. Go ahead, grab it around :-)</p>
+			</section>
+
+			<section class="step step--1">
+				<p>To manage your rulers, have a look at the <span class="lr">lr<span> icon in the tray bar,
+					located on the top right corner of your screen. From there, you can create new rulers.
+				You can create as many rulers as you want.</p>
+			</section>
+
+			<section class="step step--2">
+				<p>Shortcuts are really useful! To create a new ruler, press ^⌘R. To hide/show existing
+				rulers, ^⌘T (toggle). To close a ruler, ⌘W.</p>
+			</section>
+
+			<section class="step step--3">
+				<p>Right-clicking on a ruler lets you duplicate it. It keeps the ruler's position and size.</p>
+			</section>
+
+			<section class="step step--4">
+				<p>In the settings window (available from clicking the lr icon in the tray bar,) you can change
+				the displayed unit to either px or em.</p>
+			</section>
+
+			<section class="step step--5">
+				<p>Thanks for your time. We hope you enjoy using Linear!</p>
+			</section>
+
+			<footer>
+				<div class="btn next-step">
+					<div class="btn__inner">Next</div>
+				</div>
+			</footer>
+
+		</div>
+		<script src="help.js" charset="utf-8"></script>
+	</body>
+</html>
diff --git a/src/app/help/help.js b/src/app/help/help.js
@@ -0,0 +1,27 @@
+'use strict';
+
+const ipc = require('electron').ipcRenderer;
+const remote = require('electron').remote;
+const browserWindow = remote.getCurrentWindow();
+const dataStore = require('../../data-store');
+
+// When the help menu is loaded, we create a ruler so the user can get a feel
+// of how to use them.
+ipc.send('create-ruler', {
+	x: browserWindow.getPosition()[0] + 274,
+	y: browserWindow.getPosition()[1] + 250
+});
+
+let currentStep = 0;
+document.querySelector('.help-wrapper__close').addEventListener('click', () => browserWindow.close());
+document.querySelector('.next-step').addEventListener('click', () => {
+	document.querySelector(`.step--${++currentStep}`).style.opacity = 1;
+
+	if (currentStep === 5) {
+		document.querySelector('.next-step .btn__inner').textContent = 'Got it!';
+		document.querySelector('.next-step').addEventListener('click', () => {
+			browserWindow.close();
+			dataStore.saveSettings('tutorialShown', true);
+		});
+	}
+});
diff --git a/src/app/ruler/ruler.css b/src/app/ruler/ruler.css
@@ -1,24 +1,3 @@
-@font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 700;
-	src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../../assets/fonts/OpenSans-Bold.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 300;
-	src: local('Open Sans Light'), local('OpenSans-Light'), url(../../assets/fonts/OpenSans-Light.ttf) format('ttf');
-}
-
-@font-face {
-	font-family: 'Raleway';
-	font-style: normal;
-	font-weight: 300;
-	src: local('Raleway Light'), local('Raleway-Light'), url(../../assets/fonts/Raleway-Light.ttf) format('ttf');
-}
-
 html,
 body {
 	height: 100%;
@@ -129,16 +108,6 @@ body {
 	color: white;
 }
 
-.ruler__inner__close {
-	position: absolute;
-	right: 1.35em;
-	top: 1.1em;
-	color: #888;
-	height: 1.4em;
-	font-size: 1.8em;
-	cursor: pointer;
-}
-
 .ruler__inner__theme {
 	color: #888;
 	position: absolute;

diff --git a/src/app/ruler/ruler.html b/src/app/ruler/ruler.html
@@ -2,8 +2,9 @@
 <html>
 	<head>
 		<meta charset="UTF-8">
-		<title>Hello World!</title>
+		<title>Ruler</title>
 		<link href="../../assets/styles/font-awesome.min.css" rel="stylesheet" type="text/css"/>
+		<link href="../../assets/styles/common.css" rel="stylesheet" type="text/css"/>
 		<link href="ruler.css" rel="stylesheet" type="text/css"/>
 	</head>
 	<body>
@@ -21,7 +22,7 @@
 				<div class="ruler__inner__border ruler__inner__border--top"></div>
 				<div class="ruler__inner__border ruler__inner__border--bottom"></div>
 
-				<div class="ruler__inner__close"><i class="fa fa-times-circle"></i></div>
+				<div class="ruler__inner__close close"><i class="fa fa-times-circle"></i></div>
 				<div class="ruler__inner__theme"><i class="fa fa-sun-o"></i></div>
 			</div>
 		</div>

diff --git a/src/app/ruler/ruler.js b/src/app/ruler/ruler.js
@@ -26,7 +26,7 @@ let unitStrategies = {
 
 	/**
 	 * Format into to pixels.
-	 * @param  {px} px - The number of px to display.
+	 * @param	{px} px - The number of px to display.
 	 * @return {String} A formatted string displaying px.
 	 */
 	px(px) {
@@ -35,7 +35,7 @@ let unitStrategies = {
 
 	/**
 	 * Format into to em.
-	 * @param  {px} px - The number of px to convert to em.
+	 * @param	{px} px - The number of px to convert to em.
 	 * @return {String} A formatted string displaying em.
 	 */
 	em(em) {
@@ -74,7 +74,7 @@ contextMenu.append(new MenuItem({
 		let bounds = browserWindow.getBounds();
 		let position = browserWindow.getPosition();
 
-		ipc.send('duplicate-ruler', {
+		ipc.send('create-ruler', {
 			x: position[0],
 			y: position[1],
 			width: bounds.width,
@@ -84,8 +84,8 @@ contextMenu.append(new MenuItem({
 }));
 
 window.addEventListener('contextmenu', function (e) {
-  e.preventDefault();
-  contextMenu.popup(remote.getCurrentWindow());
+	e.preventDefault();
+	contextMenu.popup(remote.getCurrentWindow());
 }, false);
 
 document.querySelector('.ruler__inner__close').addEventListener('click', () => browserWindow.close());

diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css
@@ -0,0 +1,42 @@
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 700;
+	src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../../assets/fonts/OpenSans-Bold.ttf) format('truetype');
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 300;
+	src: local('Open Sans Light'), local('OpenSans-Light'), url(../../assets/fonts/OpenSans-Light.ttf) format('truetype');
+}
+
+@font-face {
+	font-family: 'Raleway';
+	font-style: normal;
+	font-weight: 300;
+	src: local('Raleway Light'), local('Raleway-Light'), url(../../assets/fonts/Raleway-Light.ttf) format('truetype');
+}
+
+.close {
+	position: absolute;
+	right: 1.35em;
+	top: 1.1em;
+	color: #888;
+	height: 1.4em;
+	font-size: 1.8em;
+	cursor: pointer;
+}
+
+.btn {
+	background-color: #6A24FA;
+	padding: 1em 2em;
+	color: white;
+	cursor: pointer;
+	display: inline-block;
+}
+
+.btn__inner {
+	font-family: 'Open Sans';
+}