nw.js icon indicating copy to clipboard operation
nw.js copied to clipboard

Frameless window has no shadow

Open lucienimmink opened this issue 10 years ago • 22 comments

In recent node-webkit versions the window of a frameless window has no shadow anymore (windows 7+); is it possible to get it back (as an option?)

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

lucienimmink avatar Jan 06 '15 15:01 lucienimmink

I am personally using 0.11.1 because of this but I would like to see an option for this.

ghost avatar Jan 06 '15 22:01 ghost

Possibly related to https://github.com/rogerwang/node-webkit/issues/2786

tommoor avatar Jan 07 '15 01:01 tommoor

This is probably related to the addition of transparency. I've never seen OS default shadows on any application platform where transparent windows were allowed (Adobe AIR and appJS [when it was still alive]).

As a workaround (not as good as the OS default), you can use box-shadow or maybe the dropshadow filter on any element inside of the body tag (like a main application element) and the shadow will show.

You'll have to add padding to the element and also enable transparency so the shadow isn't clipped and isn't on a background.

You'll also have to manage the padding and/or shadow when maximizing or going fullscreen.

studiochris avatar Jan 08 '15 07:01 studiochris

I also think this bug is in relation to the introduction of the transparent property but it should be possible to enable the shadow again for non transparent windows (as before). This should be possible with something similar to

MARGINS borderless = {1,1,1,1}; DwmExtendFrameIntoClientArea(hwnd, &borderless);

(see http://stackoverflow.com/a/17713810/2282732).

@studiochris Your workaround would also disable resizing and the native platform features like aero snap on windows.

ghost avatar Jan 08 '15 09:01 ghost

@xomz You are correct about resizing and other native features.

studiochris avatar Jan 08 '15 09:01 studiochris

I found the shadow appear when I add the code as following:

var gui = require('nw.gui');
var win = gui.Window.get();
win.minimize();
win.restore();

Before the official fix this bug, we can try to solve this problem by this way.

zzbo avatar Mar 04 '15 05:03 zzbo

:+1:

EladBezalel avatar Mar 08 '15 23:03 EladBezalel

I have this problem too,expect to solved this problem as soon as possible。

sean220 avatar Mar 19 '15 14:03 sean220

:+1:

SSilence avatar Apr 14 '15 12:04 SSilence

I didn't care for the window minimize / restore, so this hack just toggles the transparency - works for me.

var gui = require('nw.gui'); var win = gui.Window.get(); win.setTransparent(!win.isTransparent); win.setTransparent(!win.isTransparent);

jwjames83 avatar Jun 01 '15 06:06 jwjames83

jwjames83's workaround is better.

Andrew-Gee avatar Jun 09 '15 12:06 Andrew-Gee

I just tried, jwjames83's workaround create shadow looks deeper, but I like lighter.

zzbo avatar Jun 11 '15 02:06 zzbo

jwjames83's work-around doesn't work for me. I'm using 0.11.6. Anybody know if there is a way to get shadows back on 0.11.6?

tphalp avatar Jun 15 '15 17:06 tphalp

I come to meet the same problem with latest nw version: 0.12.2, jwjames83's work-around works fine for me.

latel avatar Jul 27 '15 08:07 latel

I come to meet the same problem with latest nw version: 0.12.2, jwjames83's work-around works fine for me.

latel avatar Jul 27 '15 08:07 latel

I tried all of the workarounds, nothing worked for me. Furthermore I can also not use box-shadow because users can not resize the window correctly. I see this as prio1 feature, since a program without shadow will look strange on a background with the same color.

julkue avatar Aug 07 '15 08:08 julkue

I don't see this as a priority 1 feature. Different people have different priorities though. Maybe you could go into the source and address the issue? If that's not possible, maybe worth posting a bounty for this to be fixed proportionate with how important it is for you?

jgoalby avatar Aug 07 '15 17:08 jgoalby

@zzbo cool works for me and the shadow is lighter..

fritx avatar Aug 10 '15 07:08 fritx

While @jwjames83 solution worked for me I opted for box-shadow option where you can control your shadow however you like.

Body tag got padding 20px, and the inner container the white background and box-shadow, just like regular html/css.

Then I've setup on focus/blur events on the window object to change the style of that shadow, like the native Windows windows are doing.

mnemanja avatar Aug 20 '15 20:08 mnemanja

@mnemanja yeah i had also tried your way.. it is how we can take full control of the shadow :+1:

fritx avatar Aug 21 '15 01:08 fritx

:+1: by the way I'm on the version 0.12.3

mnemanja avatar Aug 21 '15 07:08 mnemanja

@mnemanja @fritx Note that this will add the resize cursor to the edge of the shadow, not to the inner container. As I described, this is the reason why I can't use it. @jgoalby How to post a bounty?

julkue avatar Feb 04 '16 08:02 julkue