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