Inset titlebar like in Electron

Hey guys, I trying to build a cross-platform desktop app using GLFW, OpenGL and C++. Previously I used Electron. In Electron, there is an option to remove the titlebar but keep the native window buttons (the close, minimize, restore buttons). I want to do the same thing in GLFW but I couldn’t find any resources. I’m not that experienced in C++ so any help would be greatly appreciated. Thanks :slight_smile:

Hi @anantrng,

This option doesn’t exist in GLFW, so you’d have to user the GLFW native access API and modify the Window styling yourself on those systems which support this.

I don’t know how to achieve this myself, but if you search through the electron code you can probably work out how they do it for the hidden titleBarstyle:

Cheers,

Doug.

Thx man! I’ll definitely check it out although I may take some time because I’m relatively new to C++. :slight_smile:

Hey, I checked out what you said but I couldn’t find anything useful in the Electron repo. There probably is something, but I can’t seem to find it. May have to disable the titlebar and create my own. Thx anyway :slight_smile:

I am not entirely sure, but my assumption for Flutter and Electron is that they simply have a non-title bar window and fully recreate the title bar look with UI widgets/components, which allows them to have things displayed in the title bar or the title bar removed completely with only the minimize, maximize, and close buttons visible. But I don’t know for sure and could be totally wrong on this.

However, this is an approach that could work for GLFW.

Well, maybe not with built-in GLFW window hints. I was thinking you could remove the title bar by setting GLFW_DECORATED to false, but that would make the window non-resizable it seems.

You’re probably right. As for the non-resizable problem, you can create a drag area and the get the mouse drag amount and add it to the window size. I think I’m going to have to create my own titlebar. I’ll let you know how it goes.

If you’re looking into creating your own resize and drag handles you should take a look at the Dear ImGui Docking Branch whose child windows use this approach: https://github.com/ocornut/imgui/issues/2109

I think this is functionality provided directly by Cocoa, so at least one of the platforms should have a good basis for building this functionality into GLFW.

@dougbinks I’m going to look into that branch, but I just wondered, beforehand, if this functionality is available on MacOS. I made a PR to GLFW a while ago, that allowed configuration of window tabbing on MacOS, but ImGUI seems to be drawing a custom title bar in that image you provided (and the preview on GH), and the PR for user-invoked window dragging for GLFW has no MacOS implementation, as this was not trivial to implement. So, unless ImGUI resorts to native window tabs on MacOS, I assume this functionality is unavailable there?

@ws909 Dear ImGui uses it’s own UI for the docking branch child window controls, not native window controls.

I’ll definitely try that. Thx :slight_smile:

@dougbinks Yes, that’s what I noticed, but as you’re using that branch for your projects, I was wondering if it works on MacOS. If you’re unknown with its state on MacOS, that’s fine. I’ll dig into the code nonetheless, and it’s not directly relevant to this thread.

@ws909 Ah, I misunderstood and thought you were asking if it was using MacOS specific functionality. It’s all using it’s own UI and this works cross platform including MacOS via a number of different backends including GLFW, SDL, and custom ones.

Thanks for the information. :slight_smile: That means there might be a solution for glfwDragWindow on MacOS somewhere in there.