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?

Answer 1

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