Combo old & new style #2235

New issue

Open

opened 2018-12-11 19:32:51 +00:00 by codz01 · 5 comments

codz01 commented

2018-12-11 19:32:51 +00:00

(Migrated from github.com)

Hi
seems the combo widget has an old style ( the arrow button ) , i hope you consider change it ;)
like this :

Hi seems the combo widget has an old style ( the arrow button ) , i hope you consider change it ;) like this : ![combo_box_collapsed](https://user-images.githubusercontent.com/10813427/49825038-bdb37d00-fd83-11e8-8f1c-bb9b8fb0c065.png)

ocornut commented

2018-12-17 09:34:56 +00:00

(Migrated from github.com)

I am not sure why you employ "old style" vs "new style" here.

I'll probably revisit this when doing a larger pass on the styling system but this is not really something that I expect to be looking at super soon.

If you need it, feel free to create yourself a custom BeginCombo or modify ArrowButton.

I am not sure why you employ "old style" vs "new style" here. I'll probably revisit this when doing a larger pass on the styling system but this is not really something that I expect to be looking at super soon. If you need it, feel free to create yourself a custom `BeginCombo` or modify `ArrowButton`.

codz01 commented

2018-12-17 14:56:17 +00:00

(Migrated from github.com)

it just remind me about the old windows combobox , never mind i just
imagining imgui would be looking good with this combo style.
if i had time i'll try to create this combo

it just remind me about the old windows combobox , never mind i just imagining imgui would be looking good with this combo style. if i had time i'll try to create this combo

ocornut commented

2018-12-17 14:59:54 +00:00

(Migrated from github.com)

I agree it would be a good look but we need to tackle this at a higher scope that just looking at the combo box. I appreciate this sort of concrete example case, this can be one target to achieve for styling v2.

zejal commented

2019-02-03 20:37:55 +00:00

(Migrated from github.com)

Tried changing locally ImGui::RenderArraw to experiment:

{
    ImGuiContext& g = *GImGui;

    const float h = g.FontSize * 1.00f;
    float r = h * 0.40f * scale;
    ImVec2 center = p_min + ImVec2(h * 0.50f, h * 0.50f * scale);

    ImVec2 a, b, c;
    switch (dir)
    {
    case ImGuiDir_Up:
    case ImGuiDir_Down:
        if (dir == ImGuiDir_Up) r = -r;
        b = ImVec2(+0.000f,+0.750f) * r;
        a = ImVec2(-0.750f,-0.00f) * r;
        c = ImVec2(+0.750f,-0.00f) * r;
        break;
    case ImGuiDir_Left:
    case ImGuiDir_Right:
        if (dir == ImGuiDir_Left) r = -r;
        b = ImVec2(+0.750f,+0.000f) * r;
        c = ImVec2(-0.000f,+0.750f) * r;
        a = ImVec2(-0.000f,-0.750f) * r;
        break;
    case ImGuiDir_None:
    case ImGuiDir_COUNT:
        IM_ASSERT(0);
        break;
    }

    g.CurrentWindow->DrawList->AddTriangle2(center + a, center + b, center + c, GetColorU32(ImGuiCol_Text), 2.0f);
}

With AddTriangle2 (dummy name for sure)

{
	if ((col & IM_COL32_A_MASK) == 0)
		return;

	PathLineTo(a);
	PathLineTo(b);
	PathLineTo(c);
	PathStroke(col, false, thickness);
}

Tried changing locally `ImGui::RenderArraw` to experiment: ```void ImGui::RenderArrow(ImVec2 p_min, ImGuiDir dir, float scale) { ImGuiContext& g = *GImGui; const float h = g.FontSize * 1.00f; float r = h * 0.40f * scale; ImVec2 center = p_min + ImVec2(h * 0.50f, h * 0.50f * scale); ImVec2 a, b, c; switch (dir) { case ImGuiDir_Up: case ImGuiDir_Down: if (dir == ImGuiDir_Up) r = -r; b = ImVec2(+0.000f,+0.750f) * r; a = ImVec2(-0.750f,-0.00f) * r; c = ImVec2(+0.750f,-0.00f) * r; break; case ImGuiDir_Left: case ImGuiDir_Right: if (dir == ImGuiDir_Left) r = -r; b = ImVec2(+0.750f,+0.000f) * r; c = ImVec2(-0.000f,+0.750f) * r; a = ImVec2(-0.000f,-0.750f) * r; break; case ImGuiDir_None: case ImGuiDir_COUNT: IM_ASSERT(0); break; } g.CurrentWindow->DrawList->AddTriangle2(center + a, center + b, center + c, GetColorU32(ImGuiCol_Text), 2.0f); } ``` With `AddTriangle2` (dummy name for sure) ```void ImDrawList::AddTriangle2(const ImVec2& a, const ImVec2& b, const ImVec2& c, ImU32 col, float thickness) { if ((col & IM_COL32_A_MASK) == 0) return; PathLineTo(a); PathLineTo(b); PathLineTo(c); PathStroke(col, false, thickness); } ```

Nehon commented

2020-03-22 15:59:18 +00:00

(Migrated from github.com)

I made some changes so that it looks more like font awesome caret_down/up/right/left, and I think it looks better ( Absolutely biased opinion...). I've included a tab with a font_awesome caret_down as reference in this shot.

Here a glimpse at the smallest ones in TreeNodes

Compared to the regular one

the code change is super light, it's just adjusting the values in the DrawArrow function.

...
    case ImGuiDir_Down:
        if (dir == ImGuiDir_Up) r = -r;
        a = ImVec2(+0.000f, +0.450f) * r;
        b = ImVec2(-0.800f, -0.450f) * r;
        c = ImVec2(+0.800f, -0.450f) * r;
        break;
    case ImGuiDir_Left:
    case ImGuiDir_Right:
        if (dir == ImGuiDir_Left) r = -r;
        a = ImVec2(+0.450f, +0.000f) * r;
        b = ImVec2(-0.450f, +0.800f) * r;
        c = ImVec2(-0.450f, -0.800f) * r;
        break;
    case ImGuiDir_None:
...

The thing is I'm very reluctant to change imgui code, just for this and have to patch the lib with every update etc..
Of course I understand this is a very minor issue compared to everything else, and that's super low priority. But I'm ready to help. I'd happily submit a PR, but I need some directions first, because it can be addressed in many ways.

"This is OSSOM, just submit the PR like this, everybody will love that arrow".
I don't have universal taste and it's very likely that people will want to customize this arrow to their liking. So I could
- Add a way to customize this arrow with just 2 floats in the ImGuiStyle (like ArrowBase and ArrowTip, here would be respectively 0.8 and 0.45), But that wouldn't cover the OP request.
- Add a way for users to plug in their own implem of DrawArrow. This one is a bit more complex though and I'd need more guidance. Maybe a define based macro like for custom allocators IM_ALLOC, etc...
"No"

Thanks.

Hello, I'm trying to make a custom ImGui style, that would look "production ready" (whatever that means). Imgui suffers from this idea, people have, that it's only made for debug UI. So when trying to convince UX designers (or my boss) that it can be used in production and look good, strangely, it's the small details like this arrow that get in the way, and tend to make the conversation shorter... This arrow is literally everywhere in the UI, and it's one of the rare things you can't really override or customize without changing the library code. I made some changes so that it looks more like font awesome caret_down/up/right/left, and I think it looks better ( Absolutely biased opinion...). I've included a tab with a font_awesome caret_down as reference in this shot. ![ImguiCustomArrow](https://user-images.githubusercontent.com/3286588/77253409-4e049100-6c5a-11ea-847f-2648d25e3f82.png) Here a glimpse at the smallest ones in TreeNodes ![ImguiCustomArrowSmall](https://user-images.githubusercontent.com/3286588/77253444-902dd280-6c5a-11ea-95d5-90869629177d.png) Compared to the regular one ![ImguiRegularArrow](https://user-images.githubusercontent.com/3286588/77253465-c2d7cb00-6c5a-11ea-99d7-44ca196acf3f.png) the code change is super light, it's just adjusting the values in the DrawArrow function. ``` ... case ImGuiDir_Down: if (dir == ImGuiDir_Up) r = -r; a = ImVec2(+0.000f, +0.450f) * r; b = ImVec2(-0.800f, -0.450f) * r; c = ImVec2(+0.800f, -0.450f) * r; break; case ImGuiDir_Left: case ImGuiDir_Right: if (dir == ImGuiDir_Left) r = -r; a = ImVec2(+0.450f, +0.000f) * r; b = ImVec2(-0.450f, +0.800f) * r; c = ImVec2(-0.450f, -0.800f) * r; break; case ImGuiDir_None: ... ``` The thing is I'm very reluctant to change imgui code, just for this and have to patch the lib with every update etc.. Of course I understand this is a very minor issue compared to everything else, and that's super low priority. But I'm ready to help. I'd happily submit a PR, but I need some directions first, because it can be addressed in many ways. 1. "This is OSSOM, just submit the PR like this, everybody will love that arrow". 2. I don't have universal taste and it's very likely that people will want to customize this arrow to their liking. So I could - Add a way to customize this arrow with just 2 floats in the ImGuiStyle (like ArrowBase and ArrowTip, here would be respectively 0.8 and 0.45), But that wouldn't cover the OP request. - Add a way for users to plug in their own implem of DrawArrow. This one is a bit more complex though and I'd need more guidance. Maybe a define based macro like for custom allocators IM_ALLOC, etc... 3. "No" Thanks.

👍 5