node-notifier icon indicating copy to clipboard operation
node-notifier copied to clipboard

Notifications like Slack (Windows)

Open Nealsoni00 opened this issue 4 years ago • 6 comments

Hey!

On windows, it's very likely that the user does not have notifications enabled. As a workaround, slack creates a custom notification window (see screenshot). I was wondering if anyone knows how to approach making this type of notification (other than creating a smaller browser window located at the bottom right of the screen). Ideally wouldn't have to spin up a custom notification window -- the slack window does not appear on the windows taskbar when visible (I don't think there is an electron setting to prevent showing a visible browser window in the taskbar).

Slack Notification

Thanks in advance!

Nealsoni00 avatar Jan 20 '21 22:01 Nealsoni00

I also looking for the same, like colors and other stuff. any luck?

mkgareja avatar Feb 12 '21 04:02 mkgareja

@Nealsoni00 do those notifications only exist in the Electron app? I believe what they're doing is creating a transparent window to emulate a notification window - so the actual window is larger than what is shown but the transparent area ignores clicks. Does that sound accurate?

Nantris avatar Feb 28 '21 23:02 Nantris

@Nealsoni00 do those notifications only exist in the Electron app? I believe what they're doing is creating a transparent window to emulate a notification window - so the actual window is larger than what is shown but the transparent area ignores clicks. Does that sound accurate?

The notifications exist outside a main slack window (and are displayed from a background toolbar task). A transparent browser window would work but slack's icon does not appear on the taskbar as a transparent browser window would — so either there is a configuration variable to prevent that from happening or they have a new way to do it. It also enters from the right of the screen like a normal notification.

Nealsoni00 avatar Mar 04 '21 21:03 Nealsoni00

slack's icon does not appear on the toolbar as a transparent browser window would

I'm confused by what you mean.

It also enters from the right of the screen like a normal notification.

Once you have a transparent window in place that's trivial - just a normal CSS animation moving the div containing the notification within the bounds of the transparent window. I've not done this personally - this is just how I imagine this is being solved by Slack, Discord, etc.

Nantris avatar Mar 04 '21 21:03 Nantris

Apologies, meant to say that the slack icon does not appear on the Windows 10 taskbar — a transparent browser window would appear on the taskbar.

That animation makes sense and would be super easy to do — thank you!

Nealsoni00 avatar Mar 04 '21 21:03 Nealsoni00

@Nealsoni00 actually it need not appear on the taskbar either! Electron is pretty damn cool.

Check the skipTaskbar option.

Nantris avatar Mar 04 '21 22:03 Nantris