nwjs / nw.js

Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.
https://nwjs.io
MIT License
40.35k stars 3.88k forks source link

Yosemite blurred transparency #2817

Open tommoor opened 9 years ago

tommoor commented 9 years ago

In relation to: https://github.com/rogerwang/node-webkit/pull/2463

It would be nice to support the blurred transparency effect that is now included in Yosemite, perhaps this could be an option of the transparency mode?

cc @jtg-gg

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

jtg-gg commented 9 years ago

@tommoor , I'll look into it when I have time, most likely after new year

fathyb commented 9 years ago

I've done it by setting NSVisualEffectView as window content view in native_window_mac.mm at NativeWindowCocoa constructor :

  ShellNSWindow* shell_window;
  if (has_frame_) {
    shell_window = [[ShellNSWindow alloc]
        initWithContentRect:cocoa_bounds
                  styleMask:style_mask
                    backing:NSBackingStoreBuffered
                      defer:NO];
  } else {
    shell_window = [[ShellFramelessNSWindow alloc]
        initWithContentRect:cocoa_bounds
                  styleMask:style_mask
                    backing:NSBackingStoreBuffered
                      defer:NO];
    Class visualEffectView = NSClassFromString(@"NSVisualEffectView");

    if(visualEffectView) {
        NSView *veView = [[visualEffectView alloc] initWithFrame:cocoa_bounds];
        veView.appearance = [NSAppearance appearanceNamed:@"NSAppearanceNameVibrantDark"];

        [shell_window setStyleMask  : NSBorderlessWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask];
        [shell_window setContentView:veView];
    }
  }

And adding that to ShellFramelessNSWindow :

- (BOOL)canBecomeKeyWindow {
    return YES;
}

- (BOOL)canBecomeMainWindow {
    return YES;
}

Result : capture d ecran 2015-04-03 a 13 32 10

But native window can't be closed using window.close() unless you use gui.App.quit(), even with the NSClosableWindowMask, and the best would be to use a native window property to change content view appearance to be opaque, vibrant light or dark.

kisPocok commented 9 years ago

+1 for upvote

ghost commented 9 years ago

Ya On Jul 7, 2015 9:46 AM, "David Schneidhoffer" notifications@github.com wrote:

+1

— Reply to this email directly or view it on GitHub https://github.com/nwjs/nw.js/issues/2817#issuecomment-119205954.

sphw commented 9 years ago

Im trying to do something very similar to this in Electron, and Im wondering how you achieved zero transparency on the white checkerboard, as in mine I can't see to figure out how to not have vibrancy. Any help would be appreciated.

evgenyzinoviev commented 9 years ago

@wisesascha, did you figured out how to do this in Electron? (sorry everyone if it's off-topic)

sphw commented 9 years ago

I have it half figured out. You basically stick the code shown above in the native_window_mac.mm class (make sure to rename the variables to be the correct ones). The issue is that then everything is effected by the transparency, and I have no idea how to disable it in certain regions. My first thought was to somehow add a method on the BrowserWindow class that could change the area effected by the VisualEfffectView, but that would have some serious performance issues. So now I have no idea what to do.

evgenyzinoviev commented 8 years ago

@wisesascha, if you still interested in how to correctly implement it in Electron, I can create a demo repository with an example. I just did it and it works perfectly (yes, it's been almost 2 months since my question but I engaged in this task only today :)

grinich commented 8 years ago

@evgenyzinoviev I'm interested as well. Can you push a fork of Electron where this is implemented? I'm hacking around with it to add support to https://github.com/nylas/n1

evgenyzinoviev commented 8 years ago

@grinich ok, I'll do it in few hours

grinich commented 8 years ago

@evgenyzinoviev :cool: :sunglasses:

evgenyzinoviev commented 8 years ago

@grinich https://github.com/evgenyzinoviev/electron-vibrancy-demo/

fritx commented 8 years ago

@grinich what was your hack to make the blurred background?

MikeLP commented 8 years ago

Any updates? Come on guys!

blaremc commented 7 years ago

+1

MikeLP commented 7 years ago

Here is example like was implemented on mac and windows for electron - https://github.com/arkenthera/electron-vibrancy

rogerwang commented 7 years ago

CC @jtg-gg who maintains the transparency feature.

jtg-gg commented 7 years ago

Sorry guys, I don't have resources to implement this feature but I'm willing to review / test the code if someone has the implementation, @fathyb do still maintain this up to nw20 ?

fathyb commented 7 years ago

@jtg-gg No I stopped working on nw since nw13, but I will soon start to use it again, I can try to maintain it and port it to nw20

MikeLP commented 7 years ago

Hey guys! Any updates?

MikeLP commented 6 years ago

Guys?

rogerwang commented 6 years ago

ping @sunlin-link , please give status update.

MikeLP commented 6 years ago

4 years no updates :(

SupertigerDev commented 4 years ago

6 years wao

YodaLightsabr commented 3 years ago

7 years.