I have an Electron app and from within it I want to be able to open a native application (i.e Spotify) in a frame. I want to be able to control the layer and position of the window -- is this possible?
Here's a visual.
Is it possible in Electron to put custom components into the native application header?
For example, to achieve a design as such:
Currently my app just has the default one with just the title text
Is there a way to make it bigger and put content in there? Or do I have to somehow hide the native header and recreate the native buttons myself?
I suspect it's the latter, but in that case, how do I hide the native one and hook up ability to drag the window with it?
Or is this design entirely not possible in Electron?
The design you're looking for can be achieved, but only on macOS, by using the titleBarStyle property set to either hidden, hiddenInset, or even customButtonsOnHover, in the options passed to new BrowserWindow().
This is explained in more detail in Alternatives on macOS:
There's an alternative way to specify a chromeless window. Instead of
setting frame to false which disables both the titlebar and window
controls, you may want to have the title bar hidden and your content
extend to the full window size, yet still preserve the window controls
("traffic lights") for standard window actions.
There might still be a few issues, such as not being able to drag around the window from its title bar any more, but they are documented in the Frameless Window page; for instance, this specific problem can be solved by adding -webkit-app-region: drag; to the CSS relative to the region(s) you wish to make draggable.
In Electron, I am using app.dock.hide() to keep my app out of the dock and out of the (cmd-tab) app-switcher. However, I've now created another window (for preferences) and I'd like this to behave like any other normal window. Is there a way to hide a window from the dock (and hence the app-switcher) on a per-window basis?
Is it possible to use forge functions like request.ajax() and prefs.get() inside tabs.openWithOptions() opening a local html file ?
No, the modal view that opens when using the tabs module is designed to act more like a browser window and not allow access to forge methods.
Is there a reason you want to open a local page in a modal view? You should be able to use Javascript/CSS to display a modal dialog in your app without navigating to a different page.
I am using Jquery Window plugin v5.03 for my web application. I have to open the multiple windows on screen. But when I call the function to create a window they all open up in the center of the screen and overlap on one another such that previously opened screens are not visible.
I want the windows to open in such a way that at least the title bar and the cross icon is visible on top of the previously opened window. So that the user can know that another window is opened and previous windows are cascaded at the back and are slightly visible.
Please help.