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.
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();
} }
]);