TODO:

  1. Create Menu bar.

As you may have noticed, when you open the About window our Menu does not appear.

Let's create a Menu and add the following options: Copy/Paste/Open link ( Github )/ Open page About.

We will create our menu only for specific page ( Main Page ). We do not want to show menu bar when user opens tray window.

Lets create Main page ( In same way as About/Tray page ):

electron-app/js/index.js

  ...
  const MainWindow  = require('../windows/MainWindow');
  const menuTemplate = require('./menuTemplate');
  ...
  // Extract Menu module from electron
  const {app, ipcMain, Menu} = electron;
  ...
  let main = null;
  ...
  app.on('ready', function () {
    ...
    main = new MainWindow();
    // We will create menu based on template
    // menuTemplate - is just a function that returns array (that just extracted into separate file)
    Menu.setApplicationMenu( Menu.buildFromTemplate( menuTemplate() ));
    ...
  })

  ipcMain.on('quit-app', function() {
    ...
    main.window.close();
  })

  // Lets add event that will open our main page. ( From tray window )
  ipcMain.on('show-main-window-event', function() {
    main.window.show();
    app.dock.show(); // Do not forget to show dock - because only with dock - menu is appear.
  });

electron-app/js/menuTemplate.js

const electron = require('electron');

const {app, shell, ipcMain} = electron;

let menuTemplate = function() {
  return [
    {
      label: 'Application',
      submenu: [
        {
          label: 'Quit', accelerator: 'Command+Q',
          click: function () {
            app.quit()  // This is standart function to quit app.
          }
        }
      ]
    },
    {
      label: 'View',
      submenu: [
        {
          label: 'About App',
          click: function () {
            ipcMain.emit('show-about-window-event') // In such way we can trigger function in the main process
          }
        },
        {
          label: 'Reload', accelerator: 'CmdOrCtrl+R',
          click: function (item, focusedWindow) {
            focusedWindow.reload(); // reload the page
          }
        }
      ]
    },
    {
      label: 'Edit',
      submenu: [
        { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
        { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
        { type: 'separator' },
        { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
        { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
        { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
        { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' }
      ]
    },
    {
      label: 'Help',
      submenu: [
        {
          label: 'View Licence',
          click: function() {
            shell.openExternal('https://github.com/DmytroVasin/TimeTracker/blob/master/LICENSE');
          }
        },
        { type: 'separator' },
        { label: 'Version 1.0.0-alpha.6', enabled: 'FALSE' }
      ]
    }
  ]
}

module.exports = menuTemplate

Lets add buttons to tray window that will show our main page:

<!DOCTYPE html>
<html>
  <head>
  ...
  </head>

  <body>
    ...
    <button id='main'>Open Main</button>

    <script type='text/javascript'>
      ...
      document.getElementById("main").addEventListener("click", function (e) {
        ipcRenderer.send('show-main-window-event');
      });
    </script>
  </body>
</html>

MainWindow does not contain nothing new:

electron-app/windows/MainWindow.js

const path = require('path');
const { BrowserWindow } = require('electron');

class MainWindow {
  constructor() {
    let htmlPath = 'file://' + path.join(__dirname, '..') + '/pages/main_page.html'

    this.window = new BrowserWindow({
      show: false,
      width: 400,
      height: 400,
      frame: false,
      minWidth: 800,
      minHeight: 600,
      backgroundColor: '#E4ECEF',
    })

    this.window.loadURL(htmlPath);
  }
}

module.exports = MainWindow;

electron-app/pages/main_page.html

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    MAIN APP PAGE
  </body>
</html>

Lets launch npm run electron and we will receive next result:

Do not worry about icon(inside dock bar) and name of the app(inside menu). When we build our app as packaged version they will be changed.

VIDEO: Menu

results matching ""

    No results matching ""