Buttons' Look in a Gtk.MessageDialog

Question

Elementary's human interface guidelines specify how dialogs should look:

In Valadoc, there is a minimal example on how Gtk.MessageDialog is to be used:

Gtk.MessageDialog msg = new Gtk.MessageDialog (this,
                                               Gtk.DialogFlags.MODAL,
                                               Gtk.MessageType.WARNING,
                                               Gtk.ButtonsType.OK_CANCEL,
                                               "My message!");
msg.show();

However, when I do this, I get a dialog which doesn't conform to the Look & Feel of Elementary: Its buttons are too large and particularly without spacing. Also, how do I add a color highlight to one of the buttons ?

Here is the result, which I get, though I'm using the dark theme:

As you can see, the buttons are uglily "stacked", i.e. the blue highlight border of the focused button is overlapped by another button on one side.

Question: How do I create a dialog which looks like the one in the guidelines? Is that even possible using Gtk.MessageDialog?

Answer 1

I believe you'll need a Granite.MessageDialog. This a sample of how I used it to achieve something similar:

public class Server.Dialog : Granite.MessageDialog {

    public Dialog (Gee.ArrayList<Server.Model> serversList) {
        Object (
            primary_text : "Welcome to Torrential Remote!",
            secondary_text : "Start by connecting to a server.",
            image_icon : GLib.Icon.new_for_string ("application-default-icon"),
            buttons : Gtk.ButtonsType.NONE
        );

        set_modal (true); // forces user interaction
        set_transient_for (null); // sets no parent window
        add_buttons ("Cancel", Gtk.ResponseType.CANCEL, "Save", Gtk.ResponseType.ACCEPT, null);

        Gtk.Grid grid = new Gtk.Grid ();
        grid.set_column_spacing (10);
        grid.set_row_spacing (10);

        Gtk.Entry nameEntry = new Gtk.Entry ();
        nameEntry.set_hexpand (true);
        Gtk.Label nameLabel = new Gtk.Label ("Name:");
        nameLabel.set_halign(Gtk.Align.END);
        grid.attach(nameLabel, 0, 1, 1, 1);
        grid.attach(nameEntry, 1, 1, 3, 1);

        Gtk.Entry hostEntry = new Gtk.Entry ();
        hostEntry.set_hexpand (true);
        Gtk.Label hostLabel = new Gtk.Label ("Host:");
        hostLabel.set_halign(Gtk.Align.END);;
        grid.attach(hostLabel, 0, 2, 1, 1);
        grid.attach(hostEntry, 1, 2, 3, 1);

        custom_bin.add (grid);

        get_widget_for_response (Gtk.ResponseType.ACCEPT).can_default = true;
        set_default_response (Gtk.ResponseType.ACCEPT);
        grid.show_all();


        int response = run ();
        if (response == Gtk.ResponseType.ACCEPT) {
            string name = nameEntry.text;
            string host = hostEntry.text;
            // Do your logic here
        }

        destroy ();
    }
}