How can you make a dialog modal?

[dirkeinecke]

Hi!

How can you make a dialog modal? That is, ensuring the rest of the app is blocked while the dialog is open.

Dirk

[asuper0]

I just wrote a message box yesterday. The code is a bit long.

import { Button } from "std-widgets.slint";
export enum MsgBoxButton {
    Ok,
    OkCancel,
    YesNo,
}

export enum MsgBoxType {
    Info,
    Warning,
    Error,
}

export component MessageBox {
    in-out property <string> title;
    in-out property <string> content;
    in-out property <image> icon;
    in property <MsgBoxButton> buttons : MsgBoxButton.YesNo;

    padding: 8px;
    in property <length> spacing : 6px;

    in property <brush> border-color : #10404040;
    in property <length> border-width : 2px;
    in property <length> border-radius : 8px;
    in property <brush> mask-background : #8888;
    in property <brush> dialog-background : #ddd;

    visible: false;

    public function show() {
        root.visible = true;
        btn-ok.focus();
    }

    function btn-clicked(result : bool) {
        root.visible = false;
        root.close(result);
    }

    callback close(bool);

    states [
        only-ok when buttons == MsgBoxButton.Ok : {
            btn-ok.text: @tr("Ok");
            btn-cancel.visible: false;

            btn-ok.x: (i-buttons.width - btn-ok.width) / 2;
        }
        ok-cancel when buttons == MsgBoxButton.OkCancel : {
            btn-ok.text: @tr("Ok");
            btn-cancel.text: @tr("Cancel");
            btn-cancel.visible: true;
            btn-ok.x: (i-buttons.width - btn-ok.width * 2 - 2rem) / 2;
            btn-cancel.x: btn-ok.x + btn-ok.width + 2rem;
        }
        yes-no when buttons == MsgBoxButton.YesNo : {
            btn-ok.text: @tr("Yes");
            btn-cancel.text: @tr("No");
            btn-cancel.visible: true;
            btn-ok.x: (i-buttons.width - btn-ok.width * 2 - 2rem) / 2;
            btn-cancel.x: btn-ok.x + btn-ok.width + 2rem;
        }
    ]

    i-background := Rectangle {
        background: root.mask-background;
        width: root.width;
        height: root.height;

        TouchArea {}
    }

    HorizontalLayout {
        Rectangle {}
        VerticalLayout {
            min-width: 300px;
            Rectangle {}

            i-container := Rectangle {
                border-color: root.border-color;
                border-width: root.border-width;
                border-radius: root.border-radius;
                background: root.dialog-background;

                VerticalLayout {
                    spacing: root.spacing;
                    padding: root.padding;

                    i-title-bar := HorizontalLayout {
                        height: 36px;
                        spacing: root.spacing;
                        i-icon := Image { width: self.height; source: root.icon; }
                        i-title-text := Text { text: root.title; font-size: 1.5rem; vertical-alignment: center; }
                    }

                    Rectangle { height: 1px; border-color: root.border-color; border-width: root.border-width;}

                    i-content-text := Text {
                        text: root.content;
                        wrap: word-wrap;
                        max-width: 48rem;
                    }

                    i-buttons := Rectangle {
                        max-height: max(32px, 2rem);

                        btn-ok := Button {
                            text: @tr("Ok");
                            min-width: 8rem;
                            max-width: 12rem;
                            height: parent.height;
                            clicked => { root.btn-clicked(true); }
                            changed has-focus => {
                                // ensure back widgets don't get focus
                                if !self.has-focus {
                                    if btn-cancel.visible {
                                        btn-cancel.focus();
                                    } else {
                                        self.focus();
                                    }
                                }
                            }
                        }
                        btn-cancel := Button {
                            text: @tr("Cancel");
                            min-width: 8rem;
                            max-width: 12rem;
                            height: parent.height;
                            clicked => { root.btn-clicked(false); }
                            changed has-focus => {
                                // ensure back widgets don't get focus
                                if !self.has-focus {
                                    btn-ok.focus();
                                }
                            }
                        }
                    }
                } 
            }

            Rectangle {}
        }
        Rectangle {}
    }
    Rectangle {}
}

And here is a demo.

component TestMsgBox inherits Window {
    title: "test it";

    public function show-message-box(content: string, button-type: MsgBoxButton, msg-type: MsgBoxType) {
        msg-box.content = content;
        msg-box.buttons = button-type;

        if msg-type == MsgBoxType.Info {
            msg-box.icon = @image-url("../icons/info.svg");
            msg-box.title = @tr("Info");
        } else if msg-type == MsgBoxType.Warning {
            msg-box.icon = @image-url("../icons/warning.svg");
            msg-box.title = @tr("Warning");
        } else if msg-type == MsgBoxType.Error {
            msg-box.icon = @image-url("../icons/error.svg");
            msg-box.title = @tr("Error");
        }

        msg-box.show();
    }

    HorizontalLayout {
        Text { text: "123"; }
        VerticalLayout {
            Text { text: "123"; }
            Button {
                text: "show info";
                clicked => {
                    show-message-box("hahahahahahahaakkkkkkkkkkkkkkkkkkkkkkkkkkkk", MsgBoxButton.Ok, MsgBoxType.Info);
                }
            }
            Button {
                text: "show warning";
                clicked => {
                    show-message-box("hahahahah\nahahaakkkkkkkkkkkk\nkkkkkkkkkkkkkkkk", MsgBoxButton.YesNo, MsgBoxType.Warning);
                }
            }
            Button {
                text: "show error";
                clicked => {
                    show-message-box("hahahah\nahahahaakkkkkkkkkkkkkkkkkkkkkkkkkkkk", MsgBoxButton.OkCancel, MsgBoxType.Error);
                }
            }
            Text { text: "123"; }
            Rectangle {}
        }
    }

    msg-box := MessageBox {
        width: 100%;
        height: 100%;

        close(result) => {
            debug("user select " + (result ? "ok": "cancel"));
        }
    }
}