[GH-ISSUE #101] Tray Support

gitea-mirror commented

2026-05-05 11:35:52 -06:00

Owner

Originally created by @JackPyro on GitHub (May 4, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/101

Is Tray supported or gonna be supported in future versions?

Originally created by @JackPyro on GitHub (May 4, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/101 Is Tray supported or gonna be supported in future versions?

gitea-mirror

2026-05-05 11:35:52 -06:00

closed this issue
added the
wait for libui implementation
label

gitea-mirror commented

2026-05-05 11:35:59 -06:00

Author

Owner

@parro-it commented on GitHub (May 4, 2018):

Actually libui-node does not support them, because they are not implemented in libui (see this issue there: https://github.com/andlabs/libui/issues/216).

You can try to 👍🏻 that issue to get them implemented there.
Or alternatively, we can use other existing npm packages to implement it?
@kusti8 any thoughts?

@parro-it commented on GitHub (May 4, 2018): Actually [libui-node](https://github.com/parro-it/libui-node) does not support them, because they are not implemented in [libui](https://github.com/andlabs/libui) (see this issue there: https://github.com/andlabs/libui/issues/216). You can try to 👍🏻 that issue to get them implemented there. Or alternatively, we can use other existing npm packages to implement it? @kusti8 any thoughts?

gitea-mirror commented

2026-05-05 11:36:01 -06:00

Author

Owner

@kusti8 commented on GitHub (May 4, 2018):

I don't think working with other node packages is going to work that well. I looked quickly and there doesn't seem to be anything cross platform and I assume all the solutions have their own blocking event loop and implementation into JSX is going to be non trivial.

@kusti8 commented on GitHub (May 4, 2018): I don't think working with other node packages is going to work that well. I looked quickly and there doesn't seem to be anything cross platform and I assume all the solutions have their own blocking event loop and implementation into JSX is going to be non trivial.

gitea-mirror commented

2026-05-05 11:36:03 -06:00

Author

Owner

@parro-it commented on GitHub (May 4, 2018):

I looked quickly and there doesn't seem to be anything cross platform and I assume all the solutions have their own blocking event loop and implementation into JSX is going to be non trivial.

If libui does not want to implement it, I could write a new package that leverage the event loop of libui-node

@parro-it commented on GitHub (May 4, 2018): > I looked quickly and there doesn't seem to be anything cross platform and I assume all the solutions have their own blocking event loop and implementation into JSX is going to be non trivial. If `libui` does not want to implement it, I could write a new package that leverage the event loop of libui-node

gitea-mirror commented

2026-05-05 11:36:04 -06:00

Author

Owner

@kusti8 commented on GitHub (May 4, 2018):

I don't think that would be that good and it could get out of hand quickly. @JackPyro what exactly do you mean by tray? There's this https://github.com/mikaelbr/node-notifier which can send notifications. But if you want a tray icon it doesn't seem like there's anything good that works.

@kusti8 commented on GitHub (May 4, 2018): I don't think that would be that good and it could get out of hand quickly. @JackPyro what exactly do you mean by tray? There's this https://github.com/mikaelbr/node-notifier which can send notifications. But if you want a tray icon it doesn't seem like there's anything good that works.

gitea-mirror commented

2026-05-05 11:36:06 -06:00

Author

Owner

@thormengkheang commented on GitHub (May 10, 2018):

Would be nice if it has system tray support

@thormengkheang commented on GitHub (May 10, 2018): Would be nice if it has system tray support

gitea-mirror commented

2026-05-05 11:36:07 -06:00

Author

Owner

@JackPyro commented on GitHub (May 10, 2018):

@kusti8 More like this:

I've got my answer, so feel free to close this issue.

@JackPyro commented on GitHub (May 10, 2018): @kusti8 More like this: ![image](https://user-images.githubusercontent.com/5402106/39887690-87a0ca88-549b-11e8-9da5-58558a68f293.png) I've got my answer, so feel free to close this issue.

gitea-mirror commented

2026-05-05 11:36:10 -06:00

Author

Owner

@Darkle commented on GitHub (Jun 5, 2018):

What about using https://github.com/zaaack/node-systray?

@Darkle commented on GitHub (Jun 5, 2018): What about using https://github.com/zaaack/node-systray?

gitea-mirror commented

2026-05-05 11:36:13 -06:00

Author

Owner

@parro-it commented on GitHub (Jun 5, 2018):

What about using https://github.com/zaaack/node-systray?

Seems nice

@parro-it commented on GitHub (Jun 5, 2018): > What about using https://github.com/zaaack/node-systray? Seems nice

gitea-mirror commented

2026-05-05 11:36:16 -06:00

Author

Owner

@parro-it commented on GitHub (Jun 5, 2018):

But there's not C++ code, neither C, how could it work?

@parro-it commented on GitHub (Jun 5, 2018): But there's not C++ code, neither C, how could it work?

gitea-mirror commented

2026-05-05 11:36:17 -06:00

Author

Owner

@kusti8 commented on GitHub (Jun 5, 2018):

Seems like it uses https://github.com/zaaack/systray-portable which is Go
code.

On Tue, Jun 5, 2018, 7:01 AM Andrea Parodi notifications@github.com wrote:

But there's not C++ code, neither C, how could it work?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/kusti8/proton-native/issues/101#issuecomment-394668382,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJW73Hiaymuu6SHgH8XNQLbOKFAQndXHks5t5mUZgaJpZM4TyV7S
.

@kusti8 commented on GitHub (Jun 5, 2018): Seems like it uses https://github.com/zaaack/systray-portable which is Go code. On Tue, Jun 5, 2018, 7:01 AM Andrea Parodi <notifications@github.com> wrote: > But there's not C++ code, neither C, how could it work? > > — > You are receiving this because you were mentioned. > > > Reply to this email directly, view it on GitHub > <https://github.com/kusti8/proton-native/issues/101#issuecomment-394668382>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AJW73Hiaymuu6SHgH8XNQLbOKFAQndXHks5t5mUZgaJpZM4TyV7S> > . >

gitea-mirror commented

2026-05-05 11:36:19 -06:00

Author

Owner

@parro-it commented on GitHub (Jun 5, 2018):

ah ok not it make sense

@parro-it commented on GitHub (Jun 5, 2018): ah ok not it make sense

gitea-mirror commented

2026-05-05 11:36:20 -06:00

Author

Owner

@Darkle commented on GitHub (Jun 5, 2018):

https://github.com/zaaack/systray-portable seems to include precompiled binaries for each OS though. Would it be possible to include the binary when libui is compiled?

@Darkle commented on GitHub (Jun 5, 2018): https://github.com/zaaack/systray-portable seems to include precompiled binaries for each OS though. Would it be possible to include the binary when libui is compiled?

gitea-mirror commented

2026-05-05 11:36:21 -06:00

Author

Owner

@parro-it commented on GitHub (Jun 5, 2018):

@Darkle, if you mean in libui-node:

Actually libui-node does not support them, because they are not implemented in libui (see this issue there: andlabs/libui#216).

libui-node is and will remain only a binding library to what libui implements. But what's wrong using systray-portable directly in app code?

@parro-it commented on GitHub (Jun 5, 2018): @Darkle, if you mean in libui-node: > Actually libui-node does not support them, because they are not implemented in libui (see this issue there: andlabs/libui#216). libui-node is and will remain only a binding library to what libui implements. But what's wrong using systray-portable directly in app code?

gitea-mirror commented

2026-05-05 11:36:23 -06:00

Author

Owner

@kusti8 commented on GitHub (Jun 5, 2018):

Once you get down the road of adding random binaries to stuff like libui-node or proton native, it gets to be a mess, not just because you have to manage one more build scheme, but also because you end up bloating it with people asking why not this binary also.

I'll make a page in the docs to address third party solutions such as this, but they should be separate.

@kusti8 commented on GitHub (Jun 5, 2018): Once you get down the road of adding random binaries to stuff like libui-node or proton native, it gets to be a mess, not just because you have to manage one more build scheme, but also because you end up bloating it with people asking why not this binary also. I'll make a page in the docs to address third party solutions such as this, but they should be separate.

gitea-mirror commented

2026-05-05 11:36:24 -06:00

Author

Owner

@parro-it commented on GitHub (Jun 5, 2018):

I'll make a page in the docs to address third party solutions such as this, but they should be separate.

We should start an awesome-desktop-js list...

@parro-it commented on GitHub (Jun 5, 2018): > I'll make a page in the docs to address third party solutions such as this, but they should be separate. We should start an awesome-desktop-js list...

gitea-mirror commented

2026-05-05 11:36:25 -06:00

Author

Owner

@Darkle commented on GitHub (Jun 5, 2018):

We should start an awesome-desktop-js list...

Here are some links I have stored in Evernote related to js and desktop app dev:

(some might be a little old)

@Darkle commented on GitHub (Jun 5, 2018): > We should start an awesome-desktop-js list... Here are some links I have stored in Evernote related to js and desktop app dev: - https://github.com/BrigJS/brig - Node exe packagers: - https://github.com/nexe/nexe - https://github.com/pmq20/node-packer - http://nectarjs.com/ - https://github.com/zeit/pkg - http://thecodebarbarian.com/standalone-express-apis-binaries-with-pkg.html - https://www.npmjs.com/package/lone - https://github.com/parro-it/libui-node - https://github.com/parro-it/libui-node/blob/master/docs/initialization.md - https://github.com/nacmartin/nodetcltk - https://github.com/trueinteractions/tint2 - https://github.com/joeferner/wxNode - https://github.com/sindresorhus/trayballoon - https://github.com/breach/thrust/ - https://news.ycombinator.com/item?id=8604716 - http://quaxe.org/ - https://livecode.com - https://github.com/HackPlan/quark-shell-mac - https://github.com/glennw/servo-shell - https://github.com/ocornut/imgui - https://github.com/pojala/electrino - https://github.com/WebReflection/jsgtk - https://github.com/Shouqun/node-skia - https://github.com/facebook/yoga - http://libyue.com/docs/latest/js/guides/getting_started.html - https://github.com/kusti8/proton-native (some might be a little old)

gitea-mirror commented

2026-05-05 11:36:27 -06:00

Author

Owner

@khanhas commented on GitHub (Jun 5, 2018):

Electron supports creating Tray menu out of the box.
Tray as well as toast notification are basic elements of what we calls "Apps" nowadays.
Using third-party package is fine but I think you guys should aim proton-native as a one-go solution to create a complete app.

@khanhas commented on GitHub (Jun 5, 2018): Electron supports creating Tray menu out of the box. Tray as well as toast notification are basic elements of what we calls "Apps" nowadays. Using third-party package is fine but I think you guys should aim proton-native as a one-go solution to create a complete app.

gitea-mirror commented

2026-05-05 11:36:31 -06:00

Author

Owner

@mischnic commented on GitHub (Jun 5, 2018):

Example for node-systray with proton-native:
The only glue code needed is calling the kill method from node-systray.

import React, { Component } from 'react';
import SysTray from 'systray';
import fs from "fs";

import { render, Window, App, Box, TextInput, Menu } from 'proton-native';

const systray = new SysTray({
    menu: {
        // you should using .png icon in macOS/Linux, but .ico format in windows
        icon: new Buffer(fs.readFileSync("/.../icon.png")).toString('base64'),
        title: "Test",
        tooltip: "Tips",
        items: [{
            title: "Item",
            tooltip: "Item Tooltip",
            enabled: true
        }, {
            title: "Exit",
            tooltip: "bb",
            enabled: true
        }]
    },
    debug: false,
    copyDir: true
})

systray.onClick(action => {
    if (action.seq_id === 0) {
      console.log("Hi!");
    } else if (action.seq_id === 1) {
      systray.kill()
    }
});

const stop = ()=>{
  systray.kill(false)
};

class Example extends Component {
  render() {
    return (
      <App onShouldQuit={stop}>
        <Menu>
          <Menu.Item type="Quit"/>
        </Menu>
        <Window onClose={stop} title="Proton Native Rocks!" size={{w: 400, h: 400}} menuBar={false}>
            <Box>
            	<TextInput>Hi</TextInput>
            </Box>
        </Window>
      </App>
    );
  }
}

render(<Example />);

@mischnic commented on GitHub (Jun 5, 2018): Example for node-systray with proton-native: The only glue code needed is calling the `kill` method from node-systray. ```js import React, { Component } from 'react'; import SysTray from 'systray'; import fs from "fs"; import { render, Window, App, Box, TextInput, Menu } from 'proton-native'; const systray = new SysTray({ menu: { // you should using .png icon in macOS/Linux, but .ico format in windows icon: new Buffer(fs.readFileSync("/.../icon.png")).toString('base64'), title: "Test", tooltip: "Tips", items: [{ title: "Item", tooltip: "Item Tooltip", enabled: true }, { title: "Exit", tooltip: "bb", enabled: true }] }, debug: false, copyDir: true }) systray.onClick(action => { if (action.seq_id === 0) { console.log("Hi!"); } else if (action.seq_id === 1) { systray.kill() } }); const stop = ()=>{ systray.kill(false) }; class Example extends Component { render() { return ( <App onShouldQuit={stop}> <Menu> <Menu.Item type="Quit"/> </Menu> <Window onClose={stop} title="Proton Native Rocks!" size={{w: 400, h: 400}} menuBar={false}> <Box> <TextInput>Hi</TextInput> </Box> </Window> </App> ); } } render(<Example />); ```

gitea-mirror commented

2026-05-05 11:36:33 -06:00

Author

Owner

@styfle commented on GitHub (Jun 5, 2018):

@Darkle Do you mind if I make the awesome list starting with your notes?

@styfle commented on GitHub (Jun 5, 2018): @Darkle Do you mind if I make the awesome list starting with your notes?

gitea-mirror commented

2026-05-05 11:36:36 -06:00

Author

Owner

@Darkle commented on GitHub (Jun 5, 2018):

@styfle Yeah sure thing.

@Darkle commented on GitHub (Jun 5, 2018): @styfle Yeah sure thing.

gitea-mirror commented

2026-05-05 11:36:38 -06:00

Author

Owner

@parro-it commented on GitHub (Jun 5, 2018):

@styfle I also have a gist where I collected link, articles and interesting snippets of code, mainly about libuv and GUI event loops https://gist.github.com/parro-it/842ff46a86142c30b1f94f97bb738418.
Really caotic, but something could be useful...

@parro-it commented on GitHub (Jun 5, 2018): @styfle I also have a gist where I collected link, articles and interesting snippets of code, mainly about libuv and GUI event loops https://gist.github.com/parro-it/842ff46a86142c30b1f94f97bb738418. Really caotic, but something could be useful...

gitea-mirror commented

2026-05-05 11:36:40 -06:00

Author

Owner

@Darkle commented on GitHub (Jun 5, 2018):

@mischnic re:
https://zaaack.github.io/node-systray/classes/index.systray.html#kill

const stop = ()=>{
  systray.kill(false)
};

Why would you kill systray here, but not the node process?

@Darkle commented on GitHub (Jun 5, 2018): @mischnic re: https://zaaack.github.io/node-systray/classes/_index_.systray.html#kill ``` const stop = ()=>{ systray.kill(false) }; ``` Why would you kill systray here, but not the node process?

gitea-mirror commented

2026-05-05 11:36:41 -06:00

Author

Owner

@kusti8 commented on GitHub (Jun 5, 2018):

@Darkle because this is called when the window or app is closed, so the node process is already stopping, so the last thing we need to stop is the systray. The event loop gets stopped when you have a last Window left or the app quits through Menu.

@kusti8 commented on GitHub (Jun 5, 2018): @Darkle because this is called when the window or app is closed, so the node process is already stopping, so the last thing we need to stop is the systray. The event loop gets stopped when you have a last Window left or the app quits through Menu.

gitea-mirror commented

2026-05-05 11:36:43 -06:00

Author

Owner

@Darkle commented on GitHub (Jun 5, 2018):

because this is called when the window or app is closed, so the node process is already stopping, so the last thing we need to stop is the systray. The event loop gets stopped when you have a last Window left or the app quits through Menu.

Ah ok. There might be some people that are expecting different behaviour though. It's fairly common for apps that have a system tray icon to remain open after you close their apps main window.

When you add info to the proton-native docs about this systray module, it might be a good idea to mention this as well, in case people expect their app to stick around after the window closes because of the systray icon.

@Darkle commented on GitHub (Jun 5, 2018): > because this is called when the window or app is closed, so the node process is already stopping, so the last thing we need to stop is the systray. The event loop gets stopped when you have a last Window left or the app quits through Menu. Ah ok. There might be some people that are expecting different behaviour though. It's fairly common for apps that have a system tray icon to remain open after you close their apps main window. When you add info to the proton-native docs about this systray module, it might be a good idea to mention this as well, in case people expect their app to stick around after the window closes because of the systray icon.

gitea-mirror commented

2026-05-05 11:36:44 -06:00

Author

Owner

@styfle commented on GitHub (Jun 6, 2018):

@Darkle @parro-it I got a list started here: https://github.com/styfle/awesome-desktop-js

Feel free to send a PR 👍

@styfle commented on GitHub (Jun 6, 2018): @Darkle @parro-it I got a list started here: https://github.com/styfle/awesome-desktop-js Feel free to send a PR 👍

gitea-mirror referenced this issue

2026-05-05 11:56:49 -06:00

[PR #63] [MERGED] Fix package.json files #248

Rows
Columns

[GH-ISSUE #101] Tray Support #62