Skip to content

Custom MessageBox

Jump to bottom
phicore edited this page Nov 5, 2020 · 4 revisions

Would like to tweak the basic way to do modals to be able to reach something like this:

Step 1: Out of box Dear ImGui

            ImGui::Begin("--");
            ImGui::Text("Do you wan to save the changes");
            ImGui::Text("made to the document ?\n");

            ImGui::Text("You can revert to undo the changes");

            ImGui::Button("Save");
            ImGui::Button("Revert Changes");
            ImGui::Button("Cancel");
                
            ImGui::End();

Step 2: Button spanning width and height adjusted

            ImGui::Begin("--");
            ImGui::Text("Do you wan to save the changes");
            ImGui::Text("made to the document ?\n");

            ImGui::Text("You can revert to undo the changes");

            ImGuiContext& g = *GImGui;

            float margin = (g.Style.WindowPadding.x)* 2.0f;
            float w = ImGui::GetWindowWidth() - margin;
            float h = 25.0f;
            ImGui::Button("Save", ImVec2(w, h));
            ImGui::Button("Revert Changes", ImVec2(w, h));
            ImGui::Button("Cancel", ImVec2(w, h));

            ImGui::End();

Step 3: Button rounding, margin and vertical spacing

            ImGuiContext& g = *GImGui;
            const ImGuiStyle& style = g.Style;
            const ImVec2 p = ImVec2(24.0f, 24.0f);

            ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, p);
            ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding,10.0f);
            ImGui::Begin("##1");

            ImGui::Text("Do you wan to save the changes");
            ImGui::Text("made to the document ?\n");

            ImGui::Text("You can revert to undo the changes");

            float margin = (style.WindowPadding.x)* 2.0f;
            float w = ImGui::GetWindowWidth() - margin;
            float h = 35.0f;

            ImGui::Button("Save", ImVec2(w, h));
            
            const ImVec2 spc = ImVec2(7.0f, 16.0f);
            ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, spc);

            ImGui::Button("Revert Changes", ImVec2(w, h));
            ImGui::Button("Cancel", ImVec2(w, h));
            ImGui::PopStyleVar(1);

            ImGui::End();
            ImGui::PopStyleVar(2);

Step 4: More vertical spacing

            ImGuiContext& g = *GImGui;
            const ImGuiStyle& style = g.Style;
            const ImVec2 p = ImVec2(24.0f, 24.0f);

            ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, p);
            ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 10.0f);
            ImGui::Begin("##1");

            ImGui::Text("Do you wan to save the changes");
            ImGui::Text("made to the document ?\n");

            ImVec2 spc = ImVec2(7.0f, 16.0f);
            ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, spc);

            ImGui::Text("You can revert to undo the changes");

            float margin = (style.WindowPadding.x)* 2.0f;
            float w = ImGui::GetWindowWidth() - margin;
            float h = 35.0f;

            ImGui::PopStyleVar(1);
            ImGui::Button("Save", ImVec2(w, h));
            
            spc = ImVec2(7.0f, 16.0f);
            ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, spc);

            ImGui::Button("Revert Changes", ImVec2(w, h));
            ImGui::Button("Cancel", ImVec2(w, h));
            ImGui::PopStyleVar(1);

            ImGui::End();
            ImGui::PopStyleVar(2);

Step 5: Removed title bar and homemade centered text

{
            ImGuiContext& g = *GImGui;
            const ImGuiStyle& style = g.Style;
            const ImVec2 p = ImVec2(24.0f, 24.0f);
                       
            ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, p);
            ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 10.0f);
                       
            ImGui::Begin("##1", &show_another_window, ImGuiWindowFlags_NoTitleBar );

            // Compute button size
            float margin = (style.WindowPadding.x) * 2.0f;
            float w = ImGui::GetWindowWidth() - margin;
            float h = 35.0f;

            ImGui::CenteredText("Do you want to save the changes",ImVec2(w,20));
            ImGui::CenteredText("made to the document ?", ImVec2(w, 20));
            ImGui::CenteredText("\nYou can revert to undo the changes\n \n", ImVec2(w, 40));

            ImGui::Button("Save", ImVec2(w, h));
     
            const ImVec2 spc = ImVec2(7.0f, 16.0f);
            ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, spc);

            ImGui::Button("Revert Changes", ImVec2(w, h));
            ImGui::Button("Cancel", ImVec2(w, h));
            ImGui::PopStyleVar(1);

            ImGui::End();
            ImGui::PopStyleVar(2);            
        }

with

namespace ImGui
{

    void CenteredText(const char* label, const ImVec2& size_arg)
    {
        ImGuiWindow* window = GetCurrentWindow();
        
        ImGuiContext& g = *GImGui;
        const ImGuiStyle& style = g.Style;
        const ImGuiID id = window->GetID(label);
        const ImVec2 label_size = CalcTextSize(label, NULL, true);

        ImVec2 pos = window->DC.CursorPos;
        ImVec2 size = CalcItemSize(size_arg, label_size.x + style.FramePadding.x * 2.0f, label_size.y + style.FramePadding.y * 2.0f);

        const ImVec2 pos2 = ImVec2((pos.x + size.x), (pos.y + size.y));
        const ImRect bb(pos, pos2);

        ItemSize(size, style.FramePadding.y);

        const ImVec2 pos_min = ImVec2((bb.Min.x + style.FramePadding.x), (bb.Min.y + style.FramePadding.y));
        const ImVec2 pos_max = ImVec2((bb.Max.x - style.FramePadding.x), (bb.Max.y - style.FramePadding.y));

        RenderTextClipped(pos_min, pos_max, label, NULL, &label_size, style.ButtonTextAlign, &bb);
    }
}

Step 6: Colors

            ImGuiContext& g = *GImGui;
            const ImGuiStyle& style = g.Style;
            const ImVec2 p = ImVec2(24.0f, 24.0f);
                       
            ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, p);
            ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 10.0f);
            ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(56.0 / 255.0, 54.0 / 255.0, 50.0 / 255.0, 1.0f));

            ImGui::Begin("##1", &show_another_window, ImGuiWindowFlags_NoTitleBar );

            // Compute button size
            float margin = (style.WindowPadding.x) * 2.0f;
            float w = ImGui::GetWindowWidth() - margin;
            float h = 35.0f;

            ImGui::CenteredText("Do you want to save the changes",ImVec2(w,20));
            ImGui::CenteredText("made to the document ?", ImVec2(w, 20));
            ImGui::CenteredText("\nYou can revert to undo the changes\n \n", ImVec2(w, 40));

            ImGui::PushStyleColor(ImGuiCol_Button,  ImVec4(199.0/255.0, 195.0/255.0, 190.0/255.0, 1.0f));

            ImGui::Button("Save", ImVec2(w, h));
            ImGui::PopStyleColor();

            const ImVec2 spc = ImVec2(7.0f, 16.0f);
            ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, spc);

            ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(116.0 / 255.0, 114.0 / 255.0, 109.0 / 255.0, 1.0f));
            ImGui::Button("Revert Changes", ImVec2(w, h));
            ImGui::Button("Cancel", ImVec2(w, h));
            ImGui::PopStyleColor();

            ImGui::PopStyleVar(1);

            ImGui::End();
            ImGui::PopStyleVar(2);
            ImGui::PopStyleColor();

Step 7: Fonts

            ImGuiContext& g = *GImGui;
            const ImGuiStyle& style = g.Style;
            const ImVec2 p = ImVec2(24.0f, 24.0f);
                       
            ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, p);
            ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 10.0f);
            ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(56.0 / 255.0, 54.0 / 255.0, 50.0 / 255.0, 1.0f));
            ImGui::PushFont(font_Bold);
            ImGui::Begin("##1", &show_another_window, ImGuiWindowFlags_NoTitleBar );

            // Compute button size
            float margin = (style.WindowPadding.x) * 2.0f;
            float w = ImGui::GetWindowWidth() - margin;
            float h = 35.0f;

            ImGui::CenteredText("Do you want to save the changes",ImVec2(w,20));
            ImGui::CenteredText("made to the document ?", ImVec2(w, 20));
            ImGui::PopFont();
            ImGui::PushFont(font);
            ImGui::CenteredText("\nYou can revert to undo the changes\n \n", ImVec2(w, 40));
            ImGui::PopFont();

            ImGui::PushFont(font_Medium);

            ImGui::PushStyleColor(ImGuiCol_Button,  ImVec4(199.0/255.0, 195.0/255.0, 190.0/255.0, 1.0f));
            ImGui::Button("Save", ImVec2(w, h));
            ImGui::PopStyleColor();

            const ImVec2 spc = ImVec2(7.0f, 16.0f);
            ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, spc);

            ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(116.0 / 255.0, 114.0 / 255.0, 109.0 / 255.0, 1.0f));
            ImGui::Button("Revert Changes", ImVec2(w, h));
            ImGui::Button("Cancel", ImVec2(w, h));
            ImGui::PopStyleColor();

            ImGui::PopStyleVar(1);

            ImGui::PopFont();

            ImGui::End();
            ImGui::PopStyleVar(2);
            ImGui::PopStyleColor();

Step 8 : making it act as a modal message box

        if (ImGui::Button("Modal.."))
            ImGui::OpenPopup("Delete?");

        // Always center this window when appearing
        ImVec2 center(ImGui::GetIO().DisplaySize.x * 0.5f, ImGui::GetIO().DisplaySize.y * 0.5f);
        ImGui::SetNextWindowPos(center, ImGuiCond_Appearing, ImVec2(0.5f, 0.5f));
        
        const ImVec2 p = ImVec2(24.0f, 24.0f);
        ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, p);
        ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 10.0f);
        ImGui::PushStyleColor(ImGuiCol_PopupBg, ImVec4(56.0 / 255.0, 54.0 / 255.0, 50.0 / 255.0, 1.0f));

        if (ImGui::BeginPopupModal("Delete?", NULL, ImGuiWindowFlags_AlwaysAutoResize | ImGuiWindowFlags_NoTitleBar))
        {
            ImGui::PushFont(font_Bold);

            // Compute button size
            ImGuiContext& g = *GImGui;
            const ImGuiStyle& style = g.Style;
            float margin = (style.WindowPadding.x) * 2.0f;
            float w = ImGui::GetWindowWidth() - margin;
            float h = 35.0f;

            ImGui::CenteredText("Do you want to save the changes", ImVec2(w, 20));
            ImGui::CenteredText("made to the document ?", ImVec2(w, 20));
            ImGui::PopFont();
            ImGui::PushFont(font);
            ImGui::CenteredText("\nYou can revert to undo the changes\n \n", ImVec2(w, 40));
            ImGui::PopFont();

            ImGui::PushFont(font_Medium);

            ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(199.0 / 255.0, 195.0 / 255.0, 190.0 / 255.0, 1.0f));
            if (ImGui::Button("Save", ImVec2(w, h)))
            {
                ImGui::CloseCurrentPopup();
            }
            ImGui::PopStyleColor();

            const ImVec2 spc = ImVec2(7.0f, 16.0f);
            ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, spc);

            ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(116.0 / 255.0, 114.0 / 255.0, 109.0 / 255.0, 1.0f));
            if(ImGui::Button("Revert Changes", ImVec2(w, h)))
            {
                ImGui::CloseCurrentPopup();
            }

            if(ImGui::Button("Cancel", ImVec2(w, h)))
            {
                ImGui::CloseCurrentPopup();
            }

            ImGui::PopStyleColor();

            ImGui::PopStyleVar(1);
            ImGui::PopFont();
            ImGui::EndPopup();
        }

        ImGui::PopStyleColor();
        ImGui::PopStyleVar(2);

After clicking on Modal.., the background is dimmed and the modal appears centered, any button click dismisses the modal dialog.

.

Clone this wiki locally