Added basic menu-bar and about window

app.dev.js

@@ -1,20 +1,21 @@
 const electron = require('electron')
+const contextMenu = require('electron-context-menu')
+const path = require('path')
+
 const app = electron.app
 const BrowserWindow = electron.BrowserWindow
-const contextMenu = require('electron-context-menu');
 
 let url = 'http://localhost:8080/'
 
+// Set the application menu
+require('./menu.js')
+
 app.on('ready', () => {
   let window = new BrowserWindow({
     width: 1124, 
     height: 800,
-    // Remove the window frame from windows applications
+    icon: path.join(__dirname, '/icons/png/64x64.png')
-    //frame: false,
-    // Hide the titlebar from MacOS applications while keeping the stop lights
-    //titleBarStyle: 'hidden', // or 'customButtonsOnHover',
   })
-  //window.setMenu(null);
 
   contextMenu({
     showCopyImageAddress: true,

app.js

@@ -5,18 +5,22 @@
     return;
  }
 
+// Required packages
 const electron = require('electron')
-const contextMenu = require('electron-context-menu');
+const contextMenu = require('electron-context-menu')
 const path = require('path')
 
+// Set up the app
 const app = electron.app
 const BrowserWindow = electron.BrowserWindow
 
-const isDev = (process.env.NODE_ENV === 'DEV');
+// Set the window content
-
 let url = `file://${path.join(__dirname, '/dist/index.html')}`
 let mainWindow
 
+// Set the application menu
+require('./menu.js')
+
 function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
@@ -25,12 +29,10 @@ function createWindow() {
     icon: path.join(__dirname, '/icons/png/64x64.png')
   })
 
-  mainWindow.setMenu(null);
-
   contextMenu({
     showCopyImageAddress: true,
     showSaveImageAs: true,
-    showInspectElement: isDev,
+    showInspectElement: false,
   });
 
   mainWindow.loadURL(url)

menu.js

@@ -0,0 +1,102 @@
+const { app, Menu } = require('electron')
+const path = require('path')
+
+const openAboutWindow = require('about-window').default
+
+const template = [
+  {
+    label: 'Edit',
+    submenu: [
+      { role: 'undo' },
+      { role: 'redo' },
+      { type: 'separator' },
+      { role: 'cut' },
+      { role: 'copy' },
+      { role: 'paste' },
+      { role: 'delete' },
+      { role: 'selectall' }
+    ]
+  },
+  {
+    label: 'View',
+    submenu: [
+      { role: 'reload' },
+      { role: 'forcereload' },
+      { role: 'toggledevtools' },
+      { type: 'separator' },
+      { role: 'togglefullscreen' }
+    ]
+  },
+  {
+    role: 'window',
+    submenu: [
+      { role: 'minimize' },
+      { role: 'close' }
+    ]
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'About',
+        click () {
+          openAboutWindow({
+            icon_path: path.join(__dirname, '/icons/png/512x512.png'),
+            bug_report_url: "https://gitlab.com/openflexure/openflexure-microscope-jsclient/issues",
+            homepage: "https://gitlab.com/openflexure/openflexure-microscope-jsclient",
+            package_json_dir: __dirname
+          })
+        }
+      }
+    ]
+  }
+]
+
+if (process.platform === 'darwin') {
+  template.unshift({
+    label: app.getName(),
+    submenu: [
+      { role: 'about' },
+      { type: 'separator' },
+      { role: 'services' },
+      { type: 'separator' },
+      { role: 'hide' },
+      { role: 'hideothers' },
+      { role: 'unhide' },
+      { type: 'separator' },
+      { role: 'quit' }
+    ]
+  })
+
+  // Edit menu
+  template[1].submenu.push(
+    { type: 'separator' },
+    {
+      label: 'Speech',
+      submenu: [
+        { role: 'startspeaking' },
+        { role: 'stopspeaking' }
+      ]
+    }
+  )
+
+  // Window menu
+  template[3].submenu = [
+    { role: 'close' },
+    { role: 'minimize' },
+    { role: 'zoom' },
+    { type: 'separator' },
+    { role: 'front' }
+  ]
+}
+else {
+  template.unshift({
+    label: 'File',
+    submenu: [
+      { role: 'quit' }
+    ]
+  })
+}
+
+const menu = Menu.buildFromTemplate(template)
+Menu.setApplicationMenu(menu)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "openflexure-ev",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1432,6 +1432,12 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true
     },
+    "about-window": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/about-window/-/about-window-1.12.1.tgz",
+      "integrity": "sha512-P/fJACq7RBFpv5Ql0kIqpOYgFqQ8WdoZoB7wrKmDvwTSKVOMbUZMYnQYtnOW6dHmMCYuNrmQFf+MxvuhE+KrzQ==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",

package.json

@@ -7,12 +7,13 @@
   "description": "An electron-based user client for the OpenFlexure Microscope Server",
   "main": "app.js",
   "version": "0.1.1-alpha",
+  "license": "GNU General Public License v3.0 ",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "dev": "set NODE_ENV=DEV&& electron app.dev.js",
-    "run": "vue-cli-service build && electron app.js",
+    "run": "vue-cli-service build && electron .",
     "package-win": "electron-packager . openflexure-ev --ignore=^/src --overwrite --asar=true --platform=win32 --arch=x64 --icon=icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"OpenFlexure Microscope JS\"",
     "package-linux": "electron-packager . openflexure-ev --ignore=^/src --overwrite --asar=true --platform=linux --arch=x64 --icon=icons/png/1024x1024.png --prune=true --out=release-builds",
     "package-rpi": "electron-packager . openflexure-ev --ignore=^/src --overwrite --asar=true --platform=linux --electron-version=3.0.13 --arch=armv7l --icon=icons/png/1024x1024.png --prune=true --out=release-builds",
@@ -26,6 +27,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-service": "^3.3.0",
+    "about-window": "^1.12.1",
     "axios": "^0.18.0",
     "css-loader": "^2.1.0",
     "electron": "^4.0.5",