create helper window and add keyboard shortcuts - fix #7

app/electron.js

@@ -6,9 +6,38 @@ const menu                            = require( './main/menu' );
 const fixPath                         = require( 'fix-path' );
 const windowStateKeeper               = require( 'electron-window-state' );
 
+// configuration for the available static windows
+const staticWindows = {
+  about : {
+    config : {
+      height          : 625,
+      width           : 475,
+      backgroundColor : '#f1f1f1',
+      titleBarStyle   : 'hidden',
+      resizable       : false
+    },
+    hash              : '#!/about',
+    initializedWindow : null
+  },
+  help : {
+    config : {
+      height          : 400,
+      width           : 550,
+      backgroundColor : '#f1f1f1',
+      titleBarStyle   : 'hidden',
+      resizable       : false
+    },
+    hash              : '#!/help',
+    initializedWindow : null
+  }
+};
+
 let mainWindows = [];
-let aboutWindow;
-let config = {};
+let config  = {};
+let baseUrl = {
+  development : '',
+  production  : `file://${ __dirname }/dist/index.html`
+};
 
 // fix path to guarantee that npm and node are available
 fixPath();
@@ -17,13 +46,13 @@ fixPath();
 app.commandLine.appendSwitch( '--enable-experimental-web-platform-features' );
 
 if ( process.env.NODE_ENV === 'development' ) {
-  config          = require( '../config' ).config;
-  config.url      = `http://localhost:${ config.port }`;
-  config.aboutUrl = `http://localhost:${ config.port }#!/about`;
+  config              = require( '../config' ).config;
+  baseUrl.development = `http://localhost:${ config.port }`;
+
+  config.url      = `${ baseUrl.development }`;
 } else {
   config.devtron  = false;
-  config.url      = `file://${ __dirname }/dist/index.html`;
-  config.aboutUrl = `file://${ __dirname }/dist/index.html#!/about`;
+  config.url      = `${ baseUrl.production }`;
 }
 
 ipcMain.on( 'updatedAppSetting', ( event, key, value ) => {
@@ -42,21 +71,26 @@ ipcMain.on( 'updatedRepos', ( event, reposString ) => {
 
 ipcMain.on( 'openNewWindow', createWindow );
 
-function openAboutWindow() {
-  if ( ! aboutWindow ) {
-    aboutWindow = new BrowserWindow( {
-      height          : 625,
-      width           : 475,
-      backgroundColor : '#f1f1f1',
-      titleBarStyle   : 'hidden',
-      resizable       : false
-    } );
-
-    aboutWindow.loadURL( config.aboutUrl );
-
-    aboutWindow.on( 'closed', () => aboutWindow = null );
+/**
+ * Open a selected static window
+ *
+ * @param {String} type - name of the selected window type
+ */
+function openStaticWindow( type ) {
+  if ( ! staticWindows[ type ].initializedWindow ) {
+    staticWindows[ type ].initializedWindow = new BrowserWindow(
+      staticWindows[ type ].config
+    );
+
+    staticWindows[ type ].initializedWindow.loadURL(
+      `${ config.url }` + staticWindows[ type ].hash
+    );
+
+    staticWindows[ type ].initializedWindow.on(
+      'closed', () => staticWindows[ type ].initializedWindow = null
+    );
   } else {
-    aboutWindow.focus();
+    staticWindows[ type ].initializedWindow.focus();
   }
 }
 
@@ -116,7 +150,7 @@ function createWindow( event, hash ) {
   if ( mainWindows.length === 1 ) {
     menu.init( {
       createWindow,
-      openAboutWindow
+      openStaticWindow
     } );
   }
 

app/main/menu.js

@@ -1,4 +1,5 @@
 const electron = require( 'electron' );
+const shell    = electron.shell;
 const Menu     = electron.Menu;
 
 module.exports = {
@@ -72,8 +73,13 @@ module.exports = {
         role    : 'help',
         submenu : [
           {
-            label : 'Learn More',
-            click() { electron.shell.openExternal( 'http://electron.atom.io' ); }
+            label       : 'Shortcuts',
+            accelerator : 'CmdOrCtrl+/',
+            click() { options.openStaticWindow( 'help' ); }
+          },
+          {
+            label : 'Report an Issue',
+            click() { shell.openExternal( 'https://github.com/stefanjudis/forrest/issues' ); }
           }
         ]
       }
@@ -86,13 +92,13 @@ module.exports = {
         submenu : [
           {
             label : 'About Forrest',
-            click() { options.openAboutWindow(); }
+            click() { options.openStaticWindow( 'about' ); }
           },
           {
             type : 'separator'
           },
           {
-            label       : 'Open new window',
+            label       : 'Open New Window',
             accelerator : 'CmdOrCtrl+N',
             click() { options.createWindow(); }
           },

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';
@@ -33,6 +35,7 @@
     --svg-fill       : #2a333c;
     --svg-fill-red   : var(--npm-red);
     --svg-fill-green : #399039;
+    --svg-fill-white : #ffffff;
 
     --svg-fill-bright : var(--main-bg-color);
 
@@ -138,7 +141,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>

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>

app/src/components/HelpView.vue

@@ -0,0 +1,169 @@
+<style lang="scss">
+  .c-help {
+    position : relative;
+
+    padding : 1em;
+
+    text-align : center;
+
+    &--definitionList {
+      dt {
+        clear   : both;
+        width   : 25%;
+        padding : .5em 0;
+      }
+
+      dd {
+        font-size  : .9em;
+
+        width      : 75%;
+        text-align : left;
+
+        padding : .5em 0 .5em .5em;
+      }
+
+      dt, dd {
+        float   : left;
+        margin  : 0;
+      }
+    }
+
+    &--key {
+      display :  inline-block;
+
+      font-size   : 1em;
+      font-weight : bold;
+      color       : var(--header-background);
+      text-align  : center;
+
+      min-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">Shortcuts</h1>
+    </div>
+
+    <div class="u-flexCenter u-marginBottom">
+      <div>
+        <h4 class="o-headline-4">Home</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Right mouse button">
+            <svg class="u-fillWhite" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z" stroke="#2a333c" />
+              <path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93z" fill="#cb3837" />
+            </svg>
+          </dt>
+          <dd>Show more project options</dd>
+
+          <dt aria-label="Right arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
+            </svg>
+          </dt>
+          <dd>Open project</dd>
+
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
+          </dt>
+          <dd>Navigate through projects</dd>
+        </dl>
+      </div>
+      <div>
+        <h4 class="o-headline-4">Projects</h4>
+
+        <dl class="c-help--definitionList u-marginTopSmall">
+          <dt aria-label="Escape key">
+            <span class="c-help--key u-textTransformUppercase">esc</span>
+          </dt>
+          <dd>Terminate running command</dd>
+
+          <dt aria-label="Left arrow key">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0z" fill="none"/>
+              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+            </svg>
+          </dt>
+          <dd>Go Home / Terminate running command</dd>
+
+          <dt aria-label="Up and down keys">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="#010101" />
+            </svg>
+          </dt>
+          <dd>Navigate through commands</dd>
+        </dl>
+      </div>
+    </div>
+
+    <p class="u-marginTop">
+      To reach other actions use the <span class="c-help--key u-textTransformUppercase">tab</span> key when needed.
+    </p>
+  </div>
+</template>