diff --git a/src/Library/demos/Dialogs/main.blp b/src/Library/demos/Dialogs/main.blp new file mode 100644 index 000000000..e35e6d42d --- /dev/null +++ b/src/Library/demos/Dialogs/main.blp @@ -0,0 +1,40 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Dialogs"; + description: _("Present options, choices or information to users"); + + Box { + orientation: vertical; + halign: center; + + Button button_confirmation { + label: "Confirmation Dialog"; + margin-bottom: 30; + styles ["pill"] + } + + Button button_error { + label: "Error Dialog"; + margin-bottom: 30; + styles ["pill"] + } + + Button button_advanced { + label: "Advanced Error Dialog"; + margin-bottom: 30; + styles ["pill"] + } + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.2/class.MessageDialog.html"; + } + + LinkButton { + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/feedback/dialogs.html"; + } + } +} diff --git a/src/Library/demos/Dialogs/main.js b/src/Library/demos/Dialogs/main.js new file mode 100644 index 000000000..f839ec193 --- /dev/null +++ b/src/Library/demos/Dialogs/main.js @@ -0,0 +1,86 @@ +import Adw from "gi://Adw"; +import Gtk from "gi://Gtk"; + +const button_confirmation = workbench.builder.get_object("button_confirmation"); +const button_error = workbench.builder.get_object("button_error"); +const button_advanced = workbench.builder.get_object("button_advanced"); +const window = button_confirmation.get_ancestor(Gtk.Window); + +function createConfirmationDialog() { + let dialog = new Adw.MessageDialog({ + heading: "Replace File?", + body: 'A file named "example.png" already exists. Do you want to replace it?', + close_response: "cancel", + modal: true, + transient_for: window, + }); + + dialog.add_response("cancel", "Cancel"); + dialog.add_response("replace", "Replace"); + + // Use DESTRUCTIVE appearance to draw attention to the potentially damaging consequences of this action + dialog.set_response_appearance("replace", Adw.ResponseAppearance.DESTRUCTIVE); + + dialog.connect("response", (dialog, response) => { + console.log(`Selected "${response}" response.`); + }); + + dialog.present(); +} + +function createErrorDialog() { + let dialog = new Adw.MessageDialog({ + heading: "Critical Error", + body: "You did something you should not have", + close_response: "okay", + modal: true, + transient_for: window, + }); + + dialog.add_response("okay", "Okay"); + + dialog.connect("response", (dialog, response) => { + console.log(`Selected "${response}" response.`); + }); + + dialog.present(); +} + +//Creates a message dialog with an extra child +function createAdvancedDialog() { + let dialog = new Adw.MessageDialog({ + heading: "Login", + body: "A valid password is needed to continue", + close_response: "cancel", + modal: true, + transient_for: window, + }); + + dialog.add_response("cancel", "Cancel"); + dialog.add_response("login", "Login"); + + // Use SUGGESTED appearance to mark important responses such as the affirmative action + dialog.set_response_appearance("login", Adw.ResponseAppearance.SUGGESTED); + + let entry = new Gtk.PasswordEntry({ + show_peek_icon: true, + }); + + dialog.set_extra_child(entry); + + dialog.connect("response", (dialog, response) => { + if (dialog.get_response_label(response) === "Login") { + console.log( + `Selected "${response}" response with password "${entry.get_text()}"`, + ); + } else { + console.log(`Selected "${response}" response.`); + } + }); + + dialog.present(); +} + +button_confirmation.connect("clicked", createConfirmationDialog); +button_error.connect("clicked", createErrorDialog); +button_advanced.connect("clicked", createAdvancedDialog); diff --git a/src/Library/demos/Dialogs/main.json b/src/Library/demos/Dialogs/main.json new file mode 100644 index 000000000..b39ef0af9 --- /dev/null +++ b/src/Library/demos/Dialogs/main.json @@ -0,0 +1,10 @@ +{ + "name": "Dialogs", + "category": "user_interface", + "description": "Present options, choices or information to users", + "panels": [ + "code", + "preview" + ], + "autorun": true +} \ No newline at end of file diff --git a/src/Library/demos/Dialogs/main.vala b/src/Library/demos/Dialogs/main.vala new file mode 100644 index 000000000..6d4e9aa68 --- /dev/null +++ b/src/Library/demos/Dialogs/main.vala @@ -0,0 +1,89 @@ +#! /usr/bin/env -S vala workbench.vala --pkg gtk4 --pkg libadwaita-1 + +public void main() { + var button_confirmation = workbench.builder.get_object("button_confirmation") as Gtk.Button; + var button_error = workbench.builder.get_object("button_error") as Gtk.Button; + var button_advanced = workbench.builder.get_object("button_advanced") as Gtk.Button; + + button_confirmation.clicked.connect(_create_confirmation_dialog); + button_error.clicked.connect(_create_error_dialog); + button_advanced.clicked.connect(_create_advanced_dialog); +} + +private void _create_confirmation_dialog (Gtk.Button button) { + // Get the parent window + var window_type = GLib.Type.from_name("GtkWindow"); + Gtk.Window window = button.get_ancestor(window_type) as Gtk.Window; + + Adw.MessageDialog dialog = new Adw.MessageDialog + (window, + "Replace File?", + """A file named "example.png" already exists. Do you want to replace it?"""); + + dialog.close_response = "replace"; + + dialog.add_response("cancel", "Cancel"); + dialog.add_response("replace", "Replace"); + + //Use DESTRUCTIVE to draw attention to the potentially damaging consequences of using response. + dialog.set_response_appearance("replace", Adw.ResponseAppearance.DESTRUCTIVE); + + dialog.response.connect((response) => { + message("Selected \"%s\" response.\n", response); + }); + +dialog.present(); + +} + +private void _create_error_dialog (Gtk.Button button) { + // Get the parent window + var window_type = GLib.Type.from_name("GtkWindow"); + Gtk.Window window = button.get_ancestor(window_type) as Gtk.Window; + + Adw.MessageDialog dialog = new Adw.MessageDialog + (window, + "Critical Error", + "You did something you should not have"); + + dialog.close_response = "okay"; + + dialog.add_response("okay", "Okay"); + + dialog.response.connect((response) => { + message("Selected \"%s\" response.\n", response); + }); + +dialog.present(); + +} + +private void _create_advanced_dialog(Gtk.Button button) { + // Get the parent window + var window_type = GLib.Type.from_name("GtkWindow"); + Gtk.Window window = button.get_ancestor(window_type) as Gtk.Window; + + Adw.MessageDialog dialog = new Adw.MessageDialog ( + window, + "Login", + "A valid password is needed to continue"); + + dialog.close_response = "cancel"; + dialog.add_response("cancel", "Cancel"); + dialog.add_response("login", "Login"); + dialog.set_response_appearance("login", Adw.ResponseAppearance.SUGGESTED); + + var entry = new Gtk.PasswordEntry() {show_peek_icon = true}; + + dialog.set_extra_child(entry); + + dialog.response.connect((response) => { + if (dialog.get_response_label(response) == "Login") { + message("Selected \"%s\" response with password \"%s\".", response, entry.get_text()); + } else { + message("Selected \"%s\" response.", response); + } + }); + + dialog.present(); +}