Style request: close button on the left

[neclepsio]

Version/Branch of Dear ImGui:

Version: 1.85WIP
Branch: master

My Issue/Question:

Please provide a flag to draw the close button on the left, to keep consistency when using macOS or Ubuntu.

[ocornut]

Hello,
No plan to do so for now, sorry.

[neclepsio]

Thank you for your promptly replies. Would you accept a PR for this?

[ocornut]

Depends what kind of extra complexity it adds to the code. That part of the code is a bit too complicated already.

[neclepsio]

Let me work that out in the weekend, it seems to me a contribution I can try.

[ocornut]

This is smelly code that needs a refactor ihmo (there's even a FIXME stating that).

The problem is the semi duplicate code, there's RenderWindowTitleBarContents() and then in docking branch there's DockNodeCalcTabBarLayout() that does similar stuff. Need to come up with a friendly helper to do that nicely everywhere.

In theory once we have WorkRect api and right-to-left layout (pending on the rework of ItemAdd/ItemSize API) this should be neat and trivial but we don't have those stuff yet.

TL;DR; it might be a little too much to chew as at core this need a bit of refactor, but looking at it I agree it would be healthy to do that rework so I may be tempted to do it at some point.

[neclepsio]

Thank you. I'm not using docking branch, that's why I thought it was simpler. I'll try anyway.

[mgood7123]

you might be able to get away with using an undecorated window, and then manually drawing and implementing the decoration yourself, with appropriate content padding/clipping such that the content does not overlap the decoration such as the title bar or border

[neclepsio]

I'm not sure I've correctly understood the problem with DockNodeCalcTabBarLayout().

Do you think that if close button is on the left for windows, it should be so for tabs also? This is what macOS does (at least in Safari, looking at the screenshots) but not what happens with Ubuntu: close buttons on windows can be made left-aligned (but it's no longer the default), but close buttons on tab are always on the right.

In my opinion, there should be a style settings for windows and a separate style setting for close button position on tabs, which should apply to both "normal" tabs and docking windows tabs.

I would work only to the first problem for now, so close button on left for windows. In a second moment, I could also try to work on tabs also, if you think it's appropriate.

PS: at least in Ubuntu 20.04 with glfw3 from Ubuntu repository, working with docking branch is difficult because there is a big vertical offset between real and imgui-perceived mouse position as soon as an imgui window gets it own OS window: are you aware or should I open a different issue?

[ocornut]

I'm not sure I've correctly understood the problem with DockNodeCalcTabBarLayout().

The problem is that code is essentially duplicated in RenderWindowTitleBarContents()

Do you think that if close button is on the left for windows, it should be so for tabs also?

Yes I believe it should be.

PS: at least in Ubuntu 20.04 with glfw3 from Ubuntu repository, working with docking branch is difficult because there is a big vertical offset between real and imgui-perceived mouse position as soon as an imgui window gets it own OS window: are you aware or should I open a different issue?

We're aware of a million problems on Linux (see #2117) for variety of reasons. I'm not a Linux users so things tend to not get fixed there (they will eventually be), but I'm also pretty sure many people are successfully using GLFW3 with multi-viewports.
Either way you can disable the multi-viewports enable configuration flag and just keep the docking one and I assume it'll work for you.

[ocornut]

I apologize, i had misread your question about Tabs.
My answer was for the close button of a TabBar, not within a Tab. But I understand both options are valid.

I worry if we take on that path of trying to mimic native OS behaviors this is going to generally be more work and it's going to dillute the idea of Dear ImGui being its own platform, so I admit I am not super excited about adding countless new styles options. Would rather have us focus on making things more pretty and less configurable, rather than shallowly configurable.

Shouldn't TabCloseButtonPosition and WindowTabCloseButtonPosition be the same thing?

[neclepsio]

In my use case, I'm not mimicking the native OS: I'm creating a sort of moveable popup, a normal window with close button that appears on bottom right of a button when clicked. With a close button on the left, it's easier to close that popup-like window if you open it for error.

When I opened the issue, I though the motivation of consistency was stronger. However, choosing to have close buttons on left is not entirely a styling choice, but also usability improvement. My brain is somewhat "wired" to look for close button on the left while on Ubuntu, and on the right when using Windows. So, every time I have to close an ImGui window on Ubuntu, I move the mouse on the left, then realize there's nothing there, then move on the right. I don't think I'm the only one.

As for tabs, I didn't need them, but misinterpreted your request. I think the brain "wiring" thing could be applied there also, but for macOS users.

I don't use macOS, so I don't know if TabCloseButtonPosition and WindowTabCloseButtonPosition should be the same. Probably yes, but I didn't even find screenshots if not for Safari (where tabs can be undocked to windows and have close button on the left, so like WindowTabCloseButtonPosition). I made it this way because it was easier for you to join them than to split.