+ main menu support

+ about info

assets/styles/style.css

@@ -116,10 +116,15 @@ body.pg-loaded > .inner {
 #dlgGeneralConfirm .modalBody {
   height: 100px;
 }
+
 #dlgDeleteAddressConfirm .modalBody {
   height: 100px;
 }
 
+#dlgAboutInfo .modalBody {
+  height: 180px;
+}
+
 #dlgCreateWalletPassword .modalBody,
 #dlgCreateAddressAndName .modalBody {
     height: 200px;
@@ -375,3 +380,13 @@ div.noAddressWrapper {
 #btnAddToAddressBook {
   margin-right: 3px;
 }
+
+.infoText {
+  margin: 3px;
+}
+
+#aboutInfoWallet {
+  font-size: 1.5em;
+  text-decoration: underline;
+  margin-bottom: 10px;
+}

index.html

@@ -108,13 +108,26 @@
 
     <!-- The modal for general confirmation -->
     <div id="dlgGeneralConfirm" class="modalDialog" data-iziModal-title="Confirmation" data-iziModal-subtitle="" data-iziModal-icon="icon-home">
-        <div class="modalBody">
+      <div class="modalBody">
-          <div class="form-group">
+        <div class="form-group">
-            <span id="txtGeneralConfirm"></span>
+          <span id="txtGeneralConfirm"></span>
-          </div>
-          <button type="button" class="btn btn-etho btn-dialog-cancel" id="btnGeneralConfirmNo">No</button>
-          <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnGeneralConfirmYes">Yes</button>
         </div>
+        <button type="button" class="btn btn-etho btn-dialog-cancel" id="btnGeneralConfirmNo">No</button>
+        <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnGeneralConfirmYes">Yes</button>
       </div>
-    </body>
+    </div>
+
+    <!-- The modal for about info -->
+    <div id="dlgAboutInfo" class="modalDialog" data-iziModal-title="About Ether1 Wallet" data-iziModal-icon="icon-home">
+      <div class="modalBody">
+        <div class="aboutInfo">
+          <div class="infoText" id="aboutInfoWallet">Ether1 Wallet</div>
+          <div class="infoText" id="aboutInfoGitHub">GitHub: <a id="urlOpenGitHub" href="https://github.com/taeguscromis/Ether1DesktopWallet">https://github.com/taeguscromis/Ether1DesktopWallet</a></div>        
+          <div class="infoText" id="aboutInfoLicence">Made under <a id="urlOpenLicence" href="https://choosealicense.com/licenses/gpl-3.0">GPL v3.0</a> licence</div>
+          <div class="infoText" id="aboutInfoVersion">Version: <span id="versionNumber"></span></div>
+        </div>
+        <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnAboutInfoClose">Close</button>
+      </div>
+    </div>
+  </body>
 </html>

main.js

@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const {app, ipcMain, BrowserWindow} = require('electron');
+const {app, Menu, ipcMain, BrowserWindow} = require('electron');
 const singleInstance = require('single-instance');
 const path = require('path');
 const fs = require('fs');
@@ -9,7 +9,7 @@ var locker = new singleInstance('Ether1DesktopWallet');
 locker.lock().then(function() {
   // Keep a global reference of the window object, if you don't, the window will
   // be closed automatically when the JavaScript object is garbage collected.
-  let mainWindow
+  mainWindow = null;
 
   function createWindow () {
     // Create the browser window.
@@ -35,7 +35,9 @@ locker.lock().then(function() {
       // in an array if your app supports multi windows, this is the time
       // when you should delete the corresponding element.    
       mainWindow = null
-    })
+    });
+
+    require('./modules/menu.js');
   }
 
   // This method will be called when Electron has finished

modules/menu.js

@@ -0,0 +1,202 @@
+const {app, Menu, ipcMain} = require('electron');
+const open = require("open");
+
+const template = [
+    {
+        label: 'File',
+        submenu: [
+          {
+            label:'Exit', 
+            click() { 
+                app.quit() 
+            }           }
+        ]
+      },
+      {
+    label: 'Edit',
+    submenu: [
+      {
+        role: 'undo'
+      },
+      {
+        role: 'redo'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'cut'
+      },
+      {
+        role: 'copy'
+      },
+      {
+        role: 'paste'
+      },
+      {
+        role: 'delete'
+      },
+      {
+        role: 'selectall'
+      }
+    ]
+  },
+  {
+    label: 'View',
+    submenu: [
+      {
+        label: 'Reload',
+        accelerator: 'CmdOrCtrl+R',
+        click (item, focusedWindow) {
+          if (focusedWindow) focusedWindow.reload()
+        }
+      },
+      {
+        label: 'Toggle Developer Tools',
+        accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+        click (item, focusedWindow) {
+          if (focusedWindow) focusedWindow.webContents.toggleDevTools()
+        }
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'resetzoom'
+      },
+      {
+        role: 'zoomin'
+      },
+      {
+        role: 'zoomout'
+      },      
+      {
+        type: 'separator'
+      },
+      {
+        role: 'togglefullscreen'
+      }
+    ]
+  },
+  {
+    role: 'window',
+    submenu: [
+      {
+        role: 'minimize'
+      },
+      {
+        role: 'close'
+      }
+    ]
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'About Ether1 wallet',
+        click () { 
+            var infoData = {};
+            infoData.version = app.getVersion();
+            mainWindow.webContents.send('showAboutDialog', infoData);
+        }
+      },
+      {
+        label: 'Ether1 documentation',
+        click () { 
+            open("https://docs.ether1.org");
+        }
+      },
+      {
+        label: 'Report issue on GitHub',
+        click () { 
+            open("https://github.com/taeguscromis/Ether1DesktopWallet/issues");
+        }
+      }
+    ]
+  }
+]
+
+if (process.platform === 'darwin') {
+  const name = app.getName()
+  template.unshift({
+    label: name,
+    submenu: [
+      {
+        role: 'about'
+      },
+      {
+        type: 'separator'
+      },
+      {
+        role: 'services',
+        submenu: []
+      },
+      {
+        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 = [
+    {
+      label: 'Close',
+      accelerator: 'CmdOrCtrl+W',
+      role: 'close'
+    },
+    {
+      label: 'Minimize',
+      accelerator: 'CmdOrCtrl+M',
+      role: 'minimize'
+    },
+    {
+      label: 'Zoom',
+      role: 'zoom'
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Bring All to Front',
+      role: 'front'
+    }
+  ]
+}
+
+ipcMain.on('openURL', (event, arg) => {
+    open(arg);
+});
+  
+const menu = Menu.buildFromTemplate(template)
+Menu.setApplicationMenu(menu)

package.json

@@ -49,6 +49,7 @@
     "handlebars": "^4.0.12",
     "moment": "^2.23.0",
     "nedb": "^1.8.0",
+    "open": "0.0.5",
     "single-instance": "0.0.1"
   },
   "devDependencies": {

renderer/maingui.js

@@ -64,6 +64,23 @@ class MainGUI {
         });
     }
 
+    showAboutDialog(infoData) {
+        $("#versionNumber").html(infoData.version);
+
+        // create and open the dialog
+        $("#dlgAboutInfo").iziModal();
+        $('#dlgAboutInfo').iziModal('open'); 
+
+        $("#urlOpenLicence, #urlOpenGitHub").off("click").on("click", function(even) {
+            event.preventDefault();
+            ipcRenderer.send('openURL', $(this).attr("href"));
+        });
+
+        $("#btnAboutInfoClose").off("click").on("click", function(even) {
+            $('#dlgAboutInfo').iziModal('close'); 
+        });
+    }
+
     renderTemplate(template, data, container) {
         var template = Handlebars.compile(ipcRenderer.sendSync('getTemplateContent', template)); 
         
@@ -84,6 +101,10 @@ class MainGUI {
     }
 }
 
+ipcRenderer.on('showAboutDialog', function(event, message) {
+    EthoMainGUI.showAboutDialog(message);
+});
+
 $("#mainNavBtnTransactions").click(function() {
     EthoTransactions.clearFilter();
     EthoMainGUI.changeAppState("transactions");