forrest-app · radibit · Jul 25, 2016 · Jul 26, 2016 · Jul 26, 2016 · Jul 26, 2016
diff --git a/app/electron.js b/app/electron.js
@@ -8,6 +8,7 @@ const windowStateKeeper               = require( 'electron-window-state' );
 
 let mainWindows = [];
 let aboutWindow;
+let helpWindow;
 let config = {};
 
 // fix path to guarantee that npm and node are available
@@ -20,10 +21,12 @@ if ( process.env.NODE_ENV === 'development' ) {
   config          = require( '../config' ).config;
   config.url      = `http://localhost:${ config.port }`;
   config.aboutUrl = `http://localhost:${ config.port }#!/about`;
+  config.helpUrl  = `http://localhost:${ config.port }#!/help`;
 } else {
   config.devtron  = false;
   config.url      = `file://${ __dirname }/dist/index.html`;
   config.aboutUrl = `file://${ __dirname }/dist/index.html#!/about`;
+  config.helpUrl  = `file://${ __dirname }/dist/index.html#!/help`;
 }
 
 ipcMain.on( 'updatedAppSetting', ( event, key, value ) => {
@@ -59,6 +62,23 @@ function openAboutWindow() {
   }
 }
 
+function openHelpWindow() {
+  if ( ! helpWindow ) {
+    helpWindow = new BrowserWindow( {
+      height        : 500,
+      width         : 475,
+      titleBarStyle : 'hidden',
+      resizable     : false
+    } );
+
+    helpWindow.loadURL( config.helpUrl );
+
+    helpWindow.on( 'closed', () => helpWindow = null );
+  } else {
+    helpWindow.focus();
+  }
+}
+
 /**
  *
  */
@@ -114,7 +134,8 @@ function createWindow( event, hash ) {
   if ( mainWindows.length === 1 ) {
     menu.init( {
       createWindow,
-      openAboutWindow
+      openAboutWindow,
+      openHelpWindow
     } );
   }
 

diff --git a/app/main/menu.js b/app/main/menu.js
@@ -71,6 +71,11 @@ module.exports = {
       {
         role    : 'help',
         submenu : [
+          {
+            label       : 'Keyboard Shortcuts',
+            accelerator : 'CmdOrCtrl+/',
+            click() { options.openHelpWindow(); }
+          },
           {
             label : 'Learn More',
             click() { electron.shell.openExternal( 'http://electron.atom.io' ); }

diff --git a/app/src/App.vue b/app/src/App.vue
@@ -8,6 +8,8 @@
   @import './styles/objects/paragraphs';
   @import './styles/objects/lists';
   @import './styles/objects/small';
+  @import './styles/components/drag-handle';
+  @import './styles/components/logo';
   @import './styles/animations/move-down';
   @import './styles/transitions/slide-right--slide-left';
   @import './styles/transitions/slide-up--slide-down';
@@ -138,7 +140,9 @@
 </style>
 
 <template>
-  <header-bar v-if="$route.name !== 'about-page'"></header-bar>
+  <header-bar
+    v-if="$route.name !== 'about-page' && $route.name !== 'help-page'">
+  </header-bar>
   <main>
     <settings v-if="showSettings"></settings>
     <router-view v-on:activate="toggleSettings( false )"></router-view>

diff --git a/app/src/components/AboutView.vue b/app/src/components/AboutView.vue
@@ -6,19 +6,6 @@
 
     text-align : center;
 
-    &--dragHandle {
-      position : absolute;
-
-      top   : 0;
-      right : 0;
-      left  : 0;
-
-      height : 2em;
-
-      -webkit-user-select : none;
-      -webkit-app-region  : drag;
-    }
-
     &--heartList {
       padding    : 0 1em;
       list-style : none;
@@ -27,28 +14,14 @@
         margin-bottom : .5em;
       }
     }
-
-    &--logo {
-      display : inline-block;
-
-      width  : 5em;
-      height : 5em;
-
-      margin-bottom : .5em;
-
-      svg {
-        max-width  : 100%;
-        max-height : 100%;
-      }
-    }
   }
 </style>
 
 <template>
   <div class="c-about">
-    <div class="c-about--dragHandle"></div>
+    <div class="c-dragHandle"></div>
 
-    <div class="c-about--logo" transition="project">
+    <div class="c-logo" transition="project">
       <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>Forrest logo</title>
         <defs>

diff --git a/app/src/components/HelpView.vue b/app/src/components/HelpView.vue
@@ -0,0 +1,127 @@
+<style lang="scss">
+  .c-help {
+    position : relative;
+
+    padding : 1em;
+
+    text-align : center;
+
+    &--definitionList {
+      font-size : .9em; 
+
+      dt {
+        clear   : both;
+        width   : 20%;
+        padding : .5em 0;
+      }
+
+      dd {
+        width      : 80%;
+        text-align : left;
+
+        padding : .5em 0 .5em .5em;
+      }
+
+      dt, dd {
+        float   : left;
+        margin  : 0;
+      }
+    }
+
+    &--key {
+      display :  inline-block;
+
+      background-color : var(--header-background);
+      border-radius    : 2px;
+
+      color : var( --code-color );
+
+      padding : .25em .5em;
+
+      text-align : center;
+
+      min-width : 2em;
+      height    : 2em;
+    }
+  }
+</style>
+
+<template>
+  <div class="c-help">
+    <div class="c-dragHandle"></div>
+
+    <div class="c-logo" transition="project">
+      <svg width="330" height="330" viewBox="0 0 330 330" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>Forrest logo</title>
+        <defs>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
+            <stop stop-color="#EEEBEB" offset="0%" />
+            <stop stop-color="#FCFBFB" offset="18.142%" />
+            <stop stop-color="#CFCFCF" offset="100%" />
+          </linearGradient>
+          <ellipse id="b" cx="161.175" cy="161.175" rx="161.175" ry="161.175" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1" />
+          </filter>
+          <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="d">
+            <stop stop-color="#344352" offset="0%" />
+            <stop stop-color="#2A333C" offset="100%" />
+          </linearGradient>
+          <ellipse id="e" cx="161.175" cy="161.175" rx="150.059" ry="150.059" />
+          <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="f">
+            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1" />
+            <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1" />
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"
+            />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowInnerInner1" />
+          </filter>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <g transform="translate(4 3)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+            <use fill="url(#c)" xlink:href="#b" />
+          </g>
+          <g transform="translate(4 3)">
+            <use fill="url(#d)" xlink:href="#e" />
+            <use fill="#000" filter="url(#f)" xlink:href="#e" />
+          </g>
+          <g stroke-width="5">
+            <path d="M102.013 105.372l49.846 103.795H52.167l49.846-103.795zM87.06 209.167h29.908v10.38H87.059v-10.38zM215.235 209.167h29.908v10.38h-29.908v-10.38zm14.954-103.795l49.846 103.795h-99.692l49.846-103.795z"
+              stroke="#F1F1F1" />
+            <path d="M194.584 240.954h49.847L166.1 69.693l-78.33 171.261h49.847v14.843h56.966v-14.843z" stroke="#2A333C" fill="#CD3632"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div class="u-marginBottom">
+      <h1 class="o-headline-2">Keyboard Shortcuts</h1>
+    </div>
+
+    <dl class="c-help--definitionList">
+      <dt>
+        <span class="c-help--key">&#8592;</span>
+        <span class="c-help--key">&#8594;</span>
+      </dt>
+      <dd>Navigate between the home and project screens</dd>
+
+      <dt>
+        <span class="c-help--key">&#8593;</span>
+        <span class="c-help--key">&#8595;</span>
+      </dt>
+      <dd>Navigate between the available projects and commands</dd>
+
+      <dt>
+        <span class="c-help--key">tab</span>
+      </dt>
+      <dd>Focus on the next action</dd>
+
+      <dt>
+        <span class="c-help--key">shift + tab</span>
+      </dt>
+      <dd>Focus on the previous action</dd>
+    </dl>
+  </div>
+</template>
diff --git a/app/src/routes.js b/app/src/routes.js
@@ -10,5 +10,9 @@ export default {
   '/about' : {
     component : require( './components/AboutView' ),
     name      : 'about-page'
+  },
+  '/help' : {
+    component : require( './components/HelpView' ),
+    name      : 'help-page'
   }
 };
diff --git a/app/src/styles/components/_drag-handle.scss b/app/src/styles/components/_drag-handle.scss
@@ -0,0 +1,12 @@
+.c-dragHandle {
+  position : absolute;
+
+  top   : 0;
+  right : 0;
+  left  : 0;
+
+  height : 2em;
+
+  -webkit-user-select : none;
+  -webkit-app-region  : drag;
+}
diff --git a/app/src/styles/components/_logo.scss b/app/src/styles/components/_logo.scss
@@ -0,0 +1,13 @@
+.c-logo {
+  display : inline-block;
+
+  width  : 5em;
+  height : 5em;
+
+  margin-bottom : .5em;
+
+  svg {
+    max-width  : 100%;
+    max-height : 100%;
+  }
+}