Style system tray with node-webkit application

Question

I'm building a background windows application using node-webkit that has a system-tray menu. I'd like to be able to build a system tray menu that is more complex than a dropdown with checkboxes; something more akin to dropbox:

There is no mention of styling the system tray in nw.js's docs. How can I do this with nw.js?

If not nw.js, what other languages/frameworks would be a good fit to do something like this?

Explained here http://stackoverflow.com/questions/28768476/create-window-like-menu-on-os-x You need to create transparent borderless window and set position near tray icon — Pavel Evstigneev, Mar 06 '15 at 18:02

score 3 · Accepted Answer · edited May 23 '17 at 12:13

First Create a window. And on tray click have this window appear over there.

var gui = require('nw.gui');
var tray = new gui.Tray({
    title: '',
    icon: 'assets/css/images/menu_icon.png',
    alticon: 'assets/css/images/menu_alticon.png',
    iconsAreTemplates: false
});

//Then need create hidden window and show it on click in tray:

// create window

var params = {toolbar: app.devMode, frame: false, transparent: true, resizable: false, show: false};
window = gui.Window.open('templates/panel.html', params);

function showPopup (x, y) {
  window.on('document-end', function(){
    window.moveTo(x - (window.window.width / 2) - 6, y);
    window.show();
    window.focus();
  });
}

// show panel when click in tray
tray.on('click', function (evt) {
  showPopup(evt.x, evt.y);
});

Hope this works!

Ref: Create window-like menu on OS X

Style system tray with node-webkit application

1 Answers1