Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Electron.js How to minimize/close window to system tray and restore window back from tray?

I want my Electron.js application to live on system tray and whenever the user wants to do something they can restore from the system tray do something and minimize/close it back to system tray. How do i do that?

I've seen the tray section from the documentation but doesn't help much to achieve what i want.

Here is what i got so far on the main.js file

var application = require('app'),     BrowserWindow = require('browser-window'),     Menu = require('menu'),      Tray = require('tray');  application.on('ready', function () {     var mainWindow = new BrowserWindow({         width: 650,         height: 450,         'min-width': 500,         'min-height': 200,         'accept-first-mouse': true,         // 'title-bar-style': 'hidden',         icon:'./icon.png'     });     mainWindow.loadUrl('file://' + __dirname + '/src/index.html');     mainWindow.on('closed', function () {         mainWindow = null;     });     mainWindow.setMenu(null);      var appIcon = null;     appIcon = new Tray('./icon-resized.png');     var contextMenu = Menu.buildFromTemplate([         { label: 'Restore', type: 'radio' }     ]);     appIcon.setToolTip('Electron.js App');     appIcon.setContextMenu(contextMenu); }); 

UPDATE:

I found this menubar repo, but it won't work as expected on linux.

like image 275
ShegaMike Avatar asked Jun 15 '16 07:06

ShegaMike


People also ask

What is tray in electron JS?

Advertisements. System tray is a menu outside of your application window. On MacOS and Ubuntu, it is located on the top right corner of your screen. On Windows it is on the bottom right corner. We can create menus for our application in system trays using Electron.


1 Answers

I actually figured it out a long time ago but for folks who encounter the same problem here is one way you could achieve minimizing to tray and restoring from tray. The trick is to catch the close and minimize events.

var BrowserWindow = require('browser-window'),  var mainWindow = new BrowserWindow({     width: 850,     height: 450,     title: "TEST",     icon:'./icon.png' });  mainWindow.on('minimize',function(event){     event.preventDefault();     mainWindow.hide(); });  mainWindow.on('close', function (event) {     if(!application.isQuiting){         event.preventDefault();         mainWindow.hide();     }      return false; }); 

and restoring from Tray

var contextMenu = Menu.buildFromTemplate([     { label: 'Show App', click:  function(){         mainWindow.show();     } },     { label: 'Quit', click:  function(){         application.isQuiting = true;         application.quit();     } } ]); 
like image 79
ShegaMike Avatar answered Oct 01 '22 01:10

ShegaMike