final touches

package.json

@@ -31,6 +31,7 @@
     "release": "npm test && webpack --config=build/webpack.app.config.js --env=production && electron-builder"
   },
   "dependencies": {
+    "electron-context-menu": "^2.5.0",
     "fs-jetpack": "^4.1.0"
   },
   "devDependencies": {

src/app.js

@@ -1,7 +1,6 @@
 import "./stylesheets/main.css";
 
-// Small helpers you might want to keep
-// import "./helpers/context_menu.js";
+// Small helper you might want to keep
 import "./helpers/external_links_renderer.js";
 
 // ----------------------------------------------------------------------------

src/helpers/window.js

@@ -1,5 +1,5 @@
-// This helper remembers the size and position of your windows (and restores
-// them in that place after app relaunch).
+// This helper remembers the size and position of your windows, and restores
+// them in that place after app relaunch.
 // Can be used for more than one window, just construct many
 // instances of it and give each different name.
 

src/main.js

@@ -5,18 +5,28 @@
 
 import path from "path";
 import url from "url";
+import contextMenu from "electron-context-menu";
 import { app, Menu, ipcMain } from "electron";
-import { devMenuTemplate } from "./menu/dev_menu_template";
-import { editMenuTemplate } from "./menu/edit_menu_template";
-import initExternalLinks from "./helpers/external_links_main";
+import appMenuTemplate from "./menu/app_menu_template";
+import editMenuTemplate from "./menu/edit_menu_template";
+import devMenuTemplate from "./menu/dev_menu_template";
+import externalLinks from "./helpers/external_links";
 import createWindow from "./helpers/window";
 
 // Special module holding environment variables which you declared
 // in config/env_xxx.json file.
 import env from "env";
 
+// Save userData in separate folders for each environment.
+// Thanks to this you can use production and development versions of the app
+// on same machine like those are two separate apps.
+if (env.name !== "production") {
+  const userDataPath = app.getPath("userData");
+  app.setPath("userData", `${userDataPath} (${env.name})`);
+}
+
 const setApplicationMenu = () => {
-  const menus = [editMenuTemplate];
+  const menus = [appMenuTemplate, editMenuTemplate];
   if (env.name !== "production") {
     menus.push(devMenuTemplate);
   }
@@ -30,18 +40,12 @@ const initIpc = () => {
   });
 };
 
-// Save userData in separate folders for each environment.
-// Thanks to this you can use production and development versions of the app
-// on same machine like those are two separate apps.
-if (env.name !== "production") {
-  const userDataPath = app.getPath("userData");
-  app.setPath("userData", `${userDataPath} (${env.name})`);
-}
+contextMenu();
+externalLinks();
 
 app.on("ready", () => {
   setApplicationMenu();
   initIpc();
-  initExternalLinks();
 
   const mainWindow = createWindow("main", {
     width: 1000,

src/menu/app_menu_template.js

@@ -0,0 +1,14 @@
+import { app } from "electron";
+
+export default {
+  label: "App",
+  submenu: [
+    {
+      label: "Quit",
+      accelerator: "CmdOrCtrl+Q",
+      click: () => {
+        app.quit();
+      }
+    }
+  ]
+};

src/menu/dev_menu_template.js

@@ -1,6 +1,6 @@
-import { app, BrowserWindow } from "electron";
+import { BrowserWindow } from "electron";
 
-export const devMenuTemplate = {
+export default {
   label: "Development",
   submenu: [
     {
@@ -16,13 +16,6 @@ export const devMenuTemplate = {
       click: () => {
         BrowserWindow.getFocusedWindow().toggleDevTools();
       }
-    },
-    {
-      label: "Quit",
-      accelerator: "CmdOrCtrl+Q",
-      click: () => {
-        app.quit();
-      }
     }
   ]
 };

src/menu/edit_menu_template.js

@@ -1,4 +1,4 @@
-export const editMenuTemplate = {
+export default {
   label: "Edit",
   submenu: [
     { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },