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?
Related
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.
Well, this sounds a like newbie question, but somehow I couldn't get the accelerator keys appears for the standard TPopupMenu items, how to fix that?
Below are two screenshots I created by creating a new VCL forms application without any coding.
Design time, OK:
Run time, no underlines:
The system is win7 Home with latest updates.
This is the default behaviour of Windows. Accelerator keys are hidden so long as you interact with menus using the mouse. Once you start using the keyboard to interact with them then the accelerator keys will be displayed.
You can see this in action by invoking the menu using the popup menu key that is typically found to the right of the space bar. Alternatively Shift + F10 can be used to invoke the popup menu from the keyboard. Main menus behave in the same way, this is not limited to popup menus.
There is a Windows setting that allows this behaviour to be changed. This setting allows you to request that accelerator keys are always show, irrespective of how the menu was invoked.
My application is an overlay (alwaysOnTop) for a full screen game and when the user clicks on my overlay it takes focus and shows the taskbar on top of their game as well. Taking focus is fine, but I can't have the taskbar show.
It says in the BrowserWindow docs:
not a toolbox window which can not be focused on
Implying that it is possible to create a window which cannot be focused on.
Does anyone know how to create a toolbox window, or to simply avoid having the taskbar showing when clicking on the electron window?
I should mention I've tried setAlwaysOnTop and skipTaskbar. I also have transparent: true and frame: false.
The overlay I've created is the "Safelane, Midlane, Offlane" buttons. When I run the application it shows on top of the full screen app (Dota 2) like this:
After clicking on the interface the taskbar appears. It would be fine that the full screen app (Dota) loses focus, the task bar appears on top which breaks the continuity of the experience:
I would like the experience to stay like the first image--when the user clicks on anything in my overlay, the taskbar should not show.
Electron GitHub Issue
Additional Solution Info -- After using Gaafar's solution below
Setting kiosk: true in the setup does not seem to allow it to render transparent. Using setKiosk(true) within a setTimeout after the window has been opened seemed to work.
I also found that any windows using kiosk or fullscreen with transparency had rendering issue. It would render multiple times on top of itself and could not unrender items (display: none in css would do nothing). The way I fixed this was by using Electron Window Manager creating a single kiosk window with nothing in it and creating other non-kiosk windows with the HTML / CSS interfaces. The result:
All of the interfaces can be interacted with, mouse and keyboard.
Rendering happens as it does regularly in electron.
The fullscreen application below receives input through any transparent areas.
Taskbar never shows up on any input.
skipTaskbar: true is to prevent showing your app in the taskbar.
To hide the taskbar altogether use fullscreen or kiosk mode instead
fullscreen: true
or
kiosk: true
EDIT:
There are some issues open where fullscreen or kiosk modes prevent the transparency of the window.
A solution that works for me is to run with these flags --enable-transparent-visuals --disable-gpu
issue & solution: https://github.com/electron/electron/issues/2170#issuecomment-145942717
showInActive();
set your BrowserWindows, focusable: false
Im gonna post a solution some might be facing with full screening, I was facing this issue and wandering here and there, this StackOverflow post kept coming up.
So Im posting it here so people getting similar problems can get help.
When fullscreening taskbar getting in way.
When you fullscreen using mainWindow.setFullScreen(true) taskbar will get in way when you are on home (all windows minimized) in windows.
Here is the solution:
ipcMain.on("fullscreenon",()=>{
mainWindow.setAlwaysOnTop(true, 'screen-saver');
mainWindow.setFullScreen(true);
})
//The order of the commands is important below
//don't setAlwaysOnTop() before getting out of fullscreen.
ipcMain.on("fullscreenoff",()=>{
mainWindow.setFullScreen(false);
mainWindow.setAlwaysOnTop(true, 'floating')
})
Basically, by default setFullscreen uses the level: "floating". We need a higher level, "screen-saver" is the highest level I think.
Within the IDE, when F12 toggles between code and form,
the forms are displayed outside the monitor borders,
and therefore not visible.
This happens after a multi monitor setup has changed,
and the forms no longer open within the available new monitor screen areas.
One way to resolve this is to use the property inspector and
set the Top/Left properties to 4 to make the forms visible.
This is however a lot of work,
especially if many forms and possibly many projects are involved.
Is there a better way to reset the form locations once and for all,
so they are all visible with the new monitor setup?
There is nothing (AFAIK) in Delphi 6 IDE that would help. But assuming you are using Windows, the help is near, (tested on Windows 7):
Right-click on taskbar and select 'Cascade windows', this affects all windows in one go.
or
Alt-Tab to the window, press Alt-Space and then M (for move). Move the window with the arrow keys. This you would have to do seperately for each window.
Close your Delphi IDE. Then, if your current project group file is xyz.groupproj, open the file xyz.dsk with an text editor. Look for section [UndockedDesigner] entry "Count" and change its value to zero.
[UndockedDesigner]
Count=0
That will force all design window positions to 0,0 on your main monitor.
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.