How can you make a dialog modal? #7147
Unanswered
dirkeinecke
asked this question in
Q&A
Replies: 1 comment
-
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"));
}
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi!
How can you make a dialog modal? That is, ensuring the rest of the app is blocked while the dialog is open.
Dirk
Beta Was this translation helpful? Give feedback.
All reactions