Skip to content

ImGuiTabBarFlags_NoSeparator flag - #6820

Closed
mewiof wants to merge 3 commits into
ocornut:dockingfrom
mewiof:docking
Closed

ImGuiTabBarFlags_NoSeparator flag#6820
mewiof wants to merge 3 commits into
ocornut:dockingfrom
mewiof:docking

Conversation

@mewiof

@mewiof mewiof commented Sep 14, 2023

Copy link
Copy Markdown

👋.

The problem
Tab bars in dock nodes draw the bottom line (separator). Tabs trim the top and bottom pixels.
image

The only solution for disabling that I could find was to hide the bottom line (separator) by pushing a transparent color (see #4859, #5022, and #5239). This doesn't remove trimming, leaving 2 pixels of space at the top and bottom, and adds unnecessary calls, "drawing" a transparent line.

The solution

  • Added a new public flag, "ImGuiTabBarFlags_NoSeparator";
  • An internal ("ImGuiTabItemFlags_Preview") flag already existed and was used once to remove trimming by "DockNodePreviewDockRender". It was renamed to "ImGuiTabItemFlags_NoTrimming" and is now also assigned by "TabItemEx" when the new "ImGuiTabBarFlags_NoSeparator" flag is present at its tab bar;
  • The "ImGuiTabBarFlags_NoSeparator" flag is assigned to tab bars in dock nodes for a better user experience. Previously, users who wanted to disable the line could not do it normally. Now users who want to keep the line can draw it themselves, as shown in the screenshot above.

Result
image

Thanks for your time~

@ocornut ocornut changed the title "ImGuiTabBarFlags_NoSeparator" flag ImGuiTabBarFlags_NoSeparator flag Sep 15, 2023
@ocornut ocornut added tabs tab bars, tabs style labels Sep 15, 2023
@ocornut

ocornut commented Sep 15, 2023

Copy link
Copy Markdown
Owner

I would rather ensure that style-related parameters are all based on shared Style data rather than per-instance, hence my past answer in the styles you linked above.

I believe it can be realized in a more simple manner by:

// new field in ImGuiTabBar
bool                VisibleSeparator;

// in BeginTabBar()
tab_bar->VisibleSeparator = (col & IM_COL32_A_MASK) != 0.0f;

// in TabItem()
if (tab_bar->VisibleSeparator == false)
    flags |= ImGuiTabItemFlags_Preview;

What do you think?
This doesn't create unnecessary draw commands as the commands with Alpha=0 are stripped.

I also agree that in this case ImGuiTabItemFlags_Preview should be renamed to e.g. ImGuiTabItemFlags_HeightForNoTabBarSeparator. I'll do that separately if you agree on the premise of my proposed change.

Let me know.

@mewiof

mewiof commented Sep 15, 2023

Copy link
Copy Markdown
Author

This seems more reasonable and preferable.

However, unfortunately, it appears that for detached windows, the pushed colors are not considered. I used the following solution to one of the issues mentioned above:

ImGui::PushStyleColor(ImGuiCol_TabActive, ImVec4());
ImGui::PushStyleColor(ImGuiCol_TabUnfocusedActive, ImVec4());
ImGui::DockSpaceOverViewport(..., ...);
ImGui::PopStyleColor(2);

Not very familiar with the source code, but my guess is that the detached windows are drawn in "NewFrame" before the user code is called (see "DockContextNewFrameUpdateDocking")~

@ocornut

ocornut commented Sep 15, 2023

Copy link
Copy Markdown
Owner

Not very familiar with the source code, but my guess is that the detached windows are drawn in "NewFrame" before the user code is called,

Correct, the solution is currently to modify that style when calling NewFrame().

ocornut added a commit that referenced this pull request Sep 18, 2023
…Var_TabBarBorderSize. (#6820, #4859, #5022, #5239)

Removed ImGuiTabItemFlags_Preview. Will need cherry-picking in master.
ocornut added a commit that referenced this pull request Sep 18, 2023
@ocornut

ocornut commented Sep 18, 2023

Copy link
Copy Markdown
Owner

I decided to solve this differently and added a style.TabBarBorderSize variable.
master : ef8ff1b, docking : 64b1e44
Removed ImGuiTabItemFlags_Preview.

Thanks for the feedback and help!

@ocornut ocornut closed this Sep 18, 2023
@mewiof

mewiof commented Sep 18, 2023

Copy link
Copy Markdown
Author

What about the top pixel (see the first screenshot here)?

@ocornut

ocornut commented Sep 18, 2023

Copy link
Copy Markdown
Owner

Presently it is being too distracting to add minor/custom styling features for everything. Best to wait until a larger refactor of the styling system.

ocornut added a commit that referenced this pull request Jul 31, 2025
#4859, #5022, #5239)

Fix ef8ff1b which accidentally meant we are using BarRect after it may have been modified by TabBarScrollingButtons().
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

style tabs tab bars, tabs

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants