TODO:

  1. Create first window.
  2. Add it to Tray.
  3. Add to this window tray-like behavior ( We should hide it on blur. Do not include it into Apps ( Alt+Tab should not display it ). Do not display it in Dock.)
  4. Add ability to close app from this window.

IMAGE: Dock without app icon

IMAGE: Close button from tray window

Lets create file: index.js ( The entry point into our application )

electon-app/js/index.js

const electron = require('electron');
const {app, ipcMain} = electron;

// This is two custom classes that we created only for our comfort.
const TrayWindow  = require('../windows/TrayWindow');
const TrayIcon = require('./TrayIcon');

let tray = null;
let trayIcon = null;

// We hide dock, because we do not want to show our app as common app. We want to display our app as a Tray-like app. ( Like Dropbox, Skitch or ets )
app.dock.hide();

// This event will be emitted when Electron has finished initialization.
app.on('ready', function () {
  tray = new TrayWindow();
  trayIcon = new TrayIcon(tray.window);
})

// Custom event created to close the app from Tray window.
// The ipcMain module is used to handles events from a renderer process (web page).

ipcMain.on('quit-app', function() {
  tray.window.close(); // Standart Event of the BrowserWindow object.
  app.quit(); // Standart event of the app - that will close our app.
});

electron-app/windows/TrayWindow.js

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

class TrayWindow {
  constructor() {
    // Link to the HTML file that will render app window.
    let htmlPath = 'file://' + path.join(__dirname, '..') + '/pages/tray_page.html'

    // Creation of the mew window.
    this.window = new BrowserWindow({
      show: false, // Initially, we should hide it, in such way we will remove blink-effect. 
      height: 210,
      width: 225,
      frame: false,  // This option will remove frame buttons. By default window has standart chrome header buttons (close, hide, minimize). We should change this option because we want to display our window like tray window not like common chrome-like window.
      backgroundColor: '#E4ECEF',
      resizable: false
    });

    this.window.loadURL(htmlPath);

    // Object BrowserWindow has a lot of standart events/
    // We will hide tray window on blur. To emulate standart behavior of the tray-like apps.
    this.window.on('blur', () => {
      this.window.hide();
    });
  }
}

module.exports = TrayWindow;

HTML file that we use to render TrayWindow:

electron-app/pages/tray_page.html

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript'>
      // In such way we connect ipcRenderer to our page.
      window.ipcRenderer = require('electron').ipcRenderer;
      // The ipcRenderer module provides a few methods so you can send events from the render process (web page) to the main process.
    </script>
  </head>

  <!-- no-drag option makes our new window non-draggable -->
  <body style='-webkit-app-region: no-drag'>
    <button id='my-button'>X</button>

    <script type='text/javascript'>
      // On click we should send event to close window.
      document.getElementById("my-button").addEventListener("click", function (e) {
        ipcRenderer.send('quit-app');
      });
    </script>

  </body>
</html>

We should add icon of the app into icons folder. This icon will appear in the Tray.

electron-app/icons/icon-22.png

electon-app/js/TrayIcon.js

const path = require('path');
const { BrowserWindow, Tray } = require('electron');
// Electron-positioner - npm package for positioning of the Tray window. Our tray window should appear under the Tray icon.

const Positioner = require('electron-positioner');

class TrayIcon {
  constructor(trayWindow) {
    // Path to the app icon that will be displayed in the Tray (icon size: 22px)
    let iconPath = path.join(__dirname, '../icons/icon-22.png')

    this.trayIcon = new Tray(iconPath);
    this.trayIcon.setToolTip('Time Tracker'); // This tooltip will shows up, when user will hover our tray-icon.

    // By clicking on the icon we have to show Tray Window and position it in the middle under the tray icon. ( Initialy this window is hidden )

    this.trayIcon.on('click', (e, bounds) => {
      if ( trayWindow.isVisible() ) {
        trayWindow.hide();
      } else {
        let positioner = new Positioner(trayWindow);
        positioner.move('trayCenter', bounds)

        trayWindow.show();
      }
    });
  }
}

module.exports = TrayIcon;

Now we have to launch our app:

npm run electron

VIDEO: Tray window

results matching ""

    No results matching ""