From b60c9e0dfd0faa44987456e156d19750d29d7971 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sun, 4 Jun 2023 11:53:17 +0530 Subject: [PATCH 001/116] Added Adw.Clamp Demo --- src/Library/demos/Clamp/main.blp | 51 +++++++++++++++++++++++++++++++ src/Library/demos/Clamp/main.js | 32 +++++++++++++++++++ src/Library/demos/Clamp/main.json | 7 +++++ 3 files changed, 90 insertions(+) create mode 100644 src/Library/demos/Clamp/main.blp create mode 100644 src/Library/demos/Clamp/main.js create mode 100644 src/Library/demos/Clamp/main.json diff --git a/src/Library/demos/Clamp/main.blp b/src/Library/demos/Clamp/main.blp new file mode 100644 index 000000000..a18c4f64b --- /dev/null +++ b/src/Library/demos/Clamp/main.blp @@ -0,0 +1,51 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Clamp"; + description: "A widget constraining its child to a given size."; + + Box { + orientation: vertical; + halign: center; + + Adw.Clamp clamp { + maximum-size: 600; + tightening-threshold: 400; + margin-bottom: 24; + + TextView { + height-request: 180; + width-request: 60; + editable: true; + bottom-margin: 12; + wrap-mode: char; + buffer: Gtk.TextBuffer { + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; + } + } + } + + FlowBox { + halign: center; + orientation: vertical; + + Button increase { + icon-name: "plus"; + halign: center; + + } + + Button decrease { + icon-name: "minus"; + halign: center; + } + + } + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html"; + } + } +} diff --git a/src/Library/demos/Clamp/main.js b/src/Library/demos/Clamp/main.js new file mode 100644 index 000000000..0c4a2ff28 --- /dev/null +++ b/src/Library/demos/Clamp/main.js @@ -0,0 +1,32 @@ +import Gtk from "gi://Gtk"; +import Gio from "gi://Gio"; +import Adw from "gi://Adw"; + +const increase = workbench.builder.get_object("increase"); +const decrease = workbench.builder.get_object("decrease"); +const clamp = workbench.builder.get_object("clamp"); + +function handleIncrease() { + const current_size = clamp.get_maximum_size(); + const current_threshold = clamp.get_tightening_threshold(); + clamp.maximum_size = current_size + 300; + clamp.tightening_threshold = current_threshold + 200; + + if (clamp.tightening_threshold === 1000) { + console.log("Maximum size reached"); + } +} + +function handleDecrease() { + const current_size = clamp.get_maximum_size(); + const current_threshold = clamp.get_tightening_threshold(); + clamp.maximum_size = current_size - 300; + clamp.tightening_threshold = current_threshold - 200; + + if (clamp.tightening_threshold === 0) { + console.log("Minimum size reached"); + } +} + +increase.connect("clicked", handleIncrease); +decrease.connect("clicked", handleDecrease); diff --git a/src/Library/demos/Clamp/main.json b/src/Library/demos/Clamp/main.json new file mode 100644 index 000000000..5d69740c9 --- /dev/null +++ b/src/Library/demos/Clamp/main.json @@ -0,0 +1,7 @@ +{ + "name": "Clamp", + "category": "user_interface", + "description": "A widget constraining its child to a given size.", + "panels": ["ui", "preview"], + "autorun": true +} From 20e2645827f098b74e23d3df88b49c579801871e Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Tue, 6 Jun 2023 14:59:08 +0530 Subject: [PATCH 002/116] Made Changes and fixed error --- src/Library/demos/Clamp/main.blp | 24 +++++++++++------------- src/Library/demos/Clamp/main.js | 4 ---- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/src/Library/demos/Clamp/main.blp b/src/Library/demos/Clamp/main.blp index a18c4f64b..b57a1abc6 100644 --- a/src/Library/demos/Clamp/main.blp +++ b/src/Library/demos/Clamp/main.blp @@ -10,20 +10,16 @@ Adw.StatusPage { halign: center; Adw.Clamp clamp { - maximum-size: 600; - tightening-threshold: 400; + maximum-size: 400; + tightening-threshold: 200; margin-bottom: 24; - TextView { - height-request: 180; - width-request: 60; - editable: true; - bottom-margin: 12; - wrap-mode: char; - buffer: Gtk.TextBuffer { - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; - } - } + Label label { + wrap: true; + label: _("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "); + + } + } FlowBox { @@ -45,7 +41,9 @@ Adw.StatusPage { LinkButton { label: "API Reference"; - uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/index.html"; } } } + + diff --git a/src/Library/demos/Clamp/main.js b/src/Library/demos/Clamp/main.js index 0c4a2ff28..f4193c6cb 100644 --- a/src/Library/demos/Clamp/main.js +++ b/src/Library/demos/Clamp/main.js @@ -1,7 +1,3 @@ -import Gtk from "gi://Gtk"; -import Gio from "gi://Gio"; -import Adw from "gi://Adw"; - const increase = workbench.builder.get_object("increase"); const decrease = workbench.builder.get_object("decrease"); const clamp = workbench.builder.get_object("clamp"); From 57a21645d8583b11d79c3625be6526d6e5ffa26e Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Tue, 6 Jun 2023 16:06:48 +0530 Subject: [PATCH 003/116] Updated Link --- src/Library/demos/Clamp/main.blp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Library/demos/Clamp/main.blp b/src/Library/demos/Clamp/main.blp index b57a1abc6..1e0197530 100644 --- a/src/Library/demos/Clamp/main.blp +++ b/src/Library/demos/Clamp/main.blp @@ -41,7 +41,7 @@ Adw.StatusPage { LinkButton { label: "API Reference"; - uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/index.html"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.Clamp.html"; } } } From 094a90e534165b4e3f505f56dcf798005249f335 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam <96797205+SoNiC-HeRE@users.noreply.github.com> Date: Sat, 3 Jun 2023 17:20:26 +0530 Subject: [PATCH 004/116] library: Add Font Dialog Entry (#244) --- src/Library/demos/Font Dialog/main.blp | 61 +++++++++++++++++++++++++ src/Library/demos/Font Dialog/main.js | 46 +++++++++++++++++++ src/Library/demos/Font Dialog/main.json | 10 ++++ 3 files changed, 117 insertions(+) create mode 100644 src/Library/demos/Font Dialog/main.blp create mode 100644 src/Library/demos/Font Dialog/main.js create mode 100644 src/Library/demos/Font Dialog/main.json diff --git a/src/Library/demos/Font Dialog/main.blp b/src/Library/demos/Font Dialog/main.blp new file mode 100644 index 000000000..23e8a03bd --- /dev/null +++ b/src/Library/demos/Font Dialog/main.blp @@ -0,0 +1,61 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Font Dialog"; + description: _("Show a dialog to select a font"); + + Box { + orientation: vertical; + halign: center; + spacing: 42; + + Box{ + orientation: vertical; + + Label { + label: _("Dialog Button"); + margin-bottom: 12; + styles ["title-4"] + } + + FontDialogButton font_dialog_button { + halign: center; + margin-bottom: 12; + use-font: true; + use-size: true; + } + + + LinkButton { + label: _("API Reference"); + uri: "https://docs.gtk.org/gtk4/class.FontDialogButton.html"; + } + } + + Box{ + orientation: vertical; + + Label { + label: _("Dialog with Custom Button"); + margin-bottom: 12; + styles ["title-4"] + } + + Button custom_button { + label: _("Select Font…"); + halign: center; + margin-bottom: 12; + styles ["pill"] + } + + LinkButton { + label: _("API Reference"); + uri: "https://docs.gtk.org/gtk4/class.FontDialog.html"; + } + } + } +} + + + diff --git a/src/Library/demos/Font Dialog/main.js b/src/Library/demos/Font Dialog/main.js new file mode 100644 index 000000000..166c1d83c --- /dev/null +++ b/src/Library/demos/Font Dialog/main.js @@ -0,0 +1,46 @@ +import Gtk from "gi://Gtk"; +import Gio from "gi://Gio"; + +Gio._promisify( + Gtk.FontDialog.prototype, + "choose_font_and_features", + "choose_font_and_features_finish", +); + +Gio._promisify( + Gtk.FontDialog.prototype, + "choose_family", + "choose_family_finish", +); + +const font_dialog_button = workbench.builder.get_object("font_dialog_button"); +const custom_button = workbench.builder.get_object("custom_button"); + +const dialog_standard = new Gtk.FontDialog({ + title: "Select a Font", + modal: true, +}); +font_dialog_button.set_dialog(dialog_standard); + +font_dialog_button.connect("notify::font-desc", () => { + const font_name = font_dialog_button.get_font_desc().to_string(); + console.log(`Font: ${font_name}`); +}); + +const dialog_custom = new Gtk.FontDialog({ + title: "Select a Font Family", + modal: true, +}); + +async function onClicked() { + let result; + try { + result = await dialog_custom.choose_family(workbench.window, null, null); + } catch (err) { + logError(err); + return; + } + console.log(`Font Family: ${result.get_name()}`); +} + +custom_button.connect("clicked", onClicked); diff --git a/src/Library/demos/Font Dialog/main.json b/src/Library/demos/Font Dialog/main.json new file mode 100644 index 000000000..3e8e89f46 --- /dev/null +++ b/src/Library/demos/Font Dialog/main.json @@ -0,0 +1,10 @@ +{ + "name": "Font Dialog", + "category": "controls", + "description": "Show a dialog to select a font", + "panels": [ + "ui", + "preview" + ], + "autorun": true +} From fe0ba61f6a6afb4718039efc871d0db4609b6c5c Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Sat, 3 Jun 2023 13:27:23 -0500 Subject: [PATCH 005/116] library: add PreferencesWindow entry (#297) --- src/Library/demos/Preferences Window/main.blp | 182 ++++++++++++++++++ src/Library/demos/Preferences Window/main.js | 37 ++++ .../demos/Preferences Window/main.json | 7 + 3 files changed, 226 insertions(+) create mode 100644 src/Library/demos/Preferences Window/main.blp create mode 100644 src/Library/demos/Preferences Window/main.js create mode 100644 src/Library/demos/Preferences Window/main.json diff --git a/src/Library/demos/Preferences Window/main.blp b/src/Library/demos/Preferences Window/main.blp new file mode 100644 index 000000000..9dde9a994 --- /dev/null +++ b/src/Library/demos/Preferences Window/main.blp @@ -0,0 +1,182 @@ +using Gtk 4.0; +using Adw 1; + +Adw.PreferencesWindow pref_window { + default-width: 800; + default-height: 600; + title: _("Preferences"); + + Adw.PreferencesPage appearance_page { + title: _("Appearance"); + icon-name: "brush-monitor-symbolic"; + + Adw.PreferencesGroup { + title: _("Color Settings"); + description: _("Change the color-scheme of the application."); + + Adw.ActionRow { + title: _("Use Dark Mode"); + activatable-widget: dm_switch; + + [suffix] + Switch dm_switch { + halign: center; + valign: center; + } + } + } + + Adw.PreferencesGroup { + title: _("Text Settings"); + description: _("Customize the appearance of text in the application."); + + Adw.ActionRow { + title: _("Font Size"); + + [suffix] + Gtk.SpinButton { + halign: center; + valign: center; + adjustment: + Gtk.Adjustment { + lower: 5; + upper: 20; + step-increment: 1; + value: 11; + }; + } + } + + Adw.ActionRow { + title: _("Font Color"); + + [suffix] + Gtk.ColorDialogButton { + halign: center; + valign: center; + dialog: ColorDialog {}; + } + } + } + + Adw.PreferencesGroup { + title: _("API References"); + + Box { + orientation: horizontal; + margin-top: 12; + + LinkButton { + label: _("PreferencesWindow"); + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.PreferencesWindow.html"; + } + + LinkButton { + label: _("PreferencesPage"); + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.PreferencesPage.html"; + } + + LinkButton { + label: _("PreferencesGroup"); + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.PreferencesGroup.html"; + } + + LinkButton { + label: _("PreferencesRow"); + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.PreferencesRow.html"; + } + } + } + } + + Adw.PreferencesPage { + title: _("Behavior"); + icon-name: "settings-symbolic"; + + Adw.PreferencesGroup { + title: _("Interaction Settings"); + description: _("Change how the app behaves during user interaction."); + + // Adw.PreferencesGroup can have suffix widgets like Adw.ActionRows + [header-suffix] + Button{ + halign: center; + valign: center; + icon-name: "settings-symbolic"; + } + + Adw.ActionRow { + title: _("Run on Startup"); + activatable-widget: startup_switch; + + [suffix] + Switch startup_switch { + halign: center; + valign: center; + } + } + + Adw.ActionRow { + title: _("Show Toast"); + activatable-widget: toast_button; + + [suffix] + Button toast_button { + halign: center; + valign: center; + label: _("show toast"); + icon-name: "bread-symbolic"; + } + } + } + + Adw.PreferencesGroup { + title: _("Data Settings"); + description: _("Manage user data related settings."); + + Adw.ActionRow { + title: _("Enable Telemetry"); + activatable-widget: telemetry_switch; + + [suffix] + Switch telemetry_switch{ + halign: center; + valign: center; + } + } + + Adw.ActionRow { + title: _("Enable Auto-Updates"); + activatable-widget: update_switch; + + [suffix] + Switch update_switch { + halign: center; + valign: center; + } + } + + Adw.ActionRow subpage_row { + title: _("Additional Preferences"); + activatable: true; + + [suffix] + Gtk.Image { + icon-name: "go-next-symbolic"; + styles ["dim-label"] + } + } + } + } +} + +Adw.StatusPage subpage { + description: _("Custom Subpage"); + + Gtk.Button subpage_button { + label: _("Go back"); + halign: center; + valign: center; + styles ["suggested-action", "pill"] + } +} diff --git a/src/Library/demos/Preferences Window/main.js b/src/Library/demos/Preferences Window/main.js new file mode 100644 index 000000000..67a19e8cd --- /dev/null +++ b/src/Library/demos/Preferences Window/main.js @@ -0,0 +1,37 @@ +import Adw from "gi://Adw"; + +const pref_window = workbench.builder.get_object("pref_window"); +const dm_switch = workbench.builder.get_object("dm_switch"); +const subpage = workbench.builder.get_object("subpage"); +const subpage_row = workbench.builder.get_object("subpage_row"); +const subpage_button = workbench.builder.get_object("subpage_button"); +const toast_button = workbench.builder.get_object("toast_button"); +const style_manager = Adw.StyleManager.get_default(); + +dm_switch.active = style_manager.dark; + +dm_switch.connect("notify::active", () => { + // When the Switch is toggled, set the color scheme + if (dm_switch.active) { + style_manager.color_scheme = Adw.ColorScheme.FORCE_DARK; + } else { + style_manager.color_scheme = Adw.ColorScheme.FORCE_LIGHT; + } +}); + +// Preferences windows can display subpages +subpage_row.connect("activated", () => { + pref_window.present_subpage(subpage); +}); + +subpage_button.connect("clicked", () => { + pref_window.close_subpage(); +}); + +toast_button.connect("clicked", () => { + const toast = new Adw.Toast({ + title: "Preferences windows can display toasts", + }); + + pref_window.add_toast(toast); +}); diff --git a/src/Library/demos/Preferences Window/main.json b/src/Library/demos/Preferences Window/main.json new file mode 100644 index 000000000..59727ec0a --- /dev/null +++ b/src/Library/demos/Preferences Window/main.json @@ -0,0 +1,7 @@ +{ + "name": "Preferences Window", + "category": "user_interface", + "description": "A window containing an application's preferences", + "panels": ["ui", "preview"], + "autorun": true +} From 071969089c5e1bf40e548a2b81d35e8dca4696a0 Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Sun, 4 Jun 2023 00:20:52 +0530 Subject: [PATCH 006/116] library: Add WebView entry (#299) --- src/Library/demos/Web View/main.blp | 70 ++++++++++++++++++++++ src/Library/demos/Web View/main.js | 90 ++++++++++++++++++++++++++++ src/Library/demos/Web View/main.json | 7 +++ 3 files changed, 167 insertions(+) create mode 100644 src/Library/demos/Web View/main.blp create mode 100644 src/Library/demos/Web View/main.js create mode 100644 src/Library/demos/Web View/main.json diff --git a/src/Library/demos/Web View/main.blp b/src/Library/demos/Web View/main.blp new file mode 100644 index 000000000..163b3f607 --- /dev/null +++ b/src/Library/demos/Web View/main.blp @@ -0,0 +1,70 @@ +using Gtk 4.0; +using Adw 1; + +Adw.Clamp { + maximum-size: 700; + + Box { + orientation: vertical; + + Box { + orientation: vertical; + margin-top: 12; + margin-bottom: 12; + spacing: 6; + + Label { + label: "Web View"; + + styles ["title-1"] + } + + Label { + label: "Load and display webpages and HTML"; + } + } + + Box controls { + spacing: 6; + + Button button_back { + icon-name: "arrow1-left-symbolic"; + tooltip-text: _("Back"); + } + + Button button_forward { + icon-name: "arrow1-right-symbolic"; + tooltip-text: _("Forward"); + } + + Entry url_bar { + input-purpose: url; + hexpand: true; + } + + Button button_reload { + icon-name: "refresh-symbolic"; + tooltip-text: _("Reload"); + } + + Button button_stop { + icon-name: "stop-sign-symbolic"; + tooltip-text: _("Stop"); + } + } + + Adw.Bin container { + margin-top: 18; + margin-bottom: 18; + vexpand: true; + hexpand: true; + styles ["view"] + } + + LinkButton { + margin-bottom: 12; + label: "API Reference"; + uri: "https://webkitgtk.org/reference/webkit2gtk/stable/class.WebView.html"; + } + } +} diff --git a/src/Library/demos/Web View/main.js b/src/Library/demos/Web View/main.js new file mode 100644 index 000000000..a680dad6f --- /dev/null +++ b/src/Library/demos/Web View/main.js @@ -0,0 +1,90 @@ +import WebKit from "gi://WebKit?version=6.0"; +import GObject from "gi://GObject"; +import GLib from "gi://GLib"; + +const container = workbench.builder.get_object("container"); +const button_back = workbench.builder.get_object("button_back"); +const button_forward = workbench.builder.get_object("button_forward"); +const button_reload = workbench.builder.get_object("button_reload"); +const button_stop = workbench.builder.get_object("button_stop"); +const url_bar = workbench.builder.get_object("url_bar"); +const web_view = new WebKit.WebView({ + zoom_level: 0.8, +}); +container.child = web_view; + +// URL bar displays the current loaded page +web_view.bind_property( + "uri", + url_bar.buffer, + "text", + GObject.BindingFlags.DEFAULT, +); + +web_view.load_uri("https://www.gnome.org/"); + +url_bar.connect("activate", () => { + let url = url_bar.buffer.text; + const scheme = GLib.Uri.peek_scheme(url); + if (scheme == null) { + url = `http://${url}`; + } + web_view.load_uri(url); +}); + +button_forward.connect("clicked", () => { + web_view.go_forward(); +}); + +button_back.connect("clicked", () => { + web_view.go_back(); +}); + +button_reload.connect("clicked", () => { + web_view.reload(); +}); + +button_stop.connect("clicked", () => { + web_view.stop_loading(); +}); + +web_view.connect("load-changed", (view, load_event) => { + switch (load_event) { + case WebKit.LoadEvent.STARTED: + console.log("Page loading started"); + break; + case WebKit.LoadEvent.FINISHED: + console.log("Page loading has finished "); + break; + } +}); + +web_view.connect("load-failed", (view, load_event, fail_url, error) => { + // Dont display error page if it is caused by stop_loading() + if (error.code !== WebKit.NetworkError.CANCELLED) { + web_view.load_alternate_html( + error_page(fail_url, error.message), + fail_url, + null, + ); + } +}); + +web_view.connect("notify::estimated-load-progress", () => { + url_bar.progress_fraction = web_view.estimated_load_progress; + if (url_bar.progress_fraction === 1) { + setTimeout(() => { + url_bar.progress_fraction = 0; + }, 500); + } +}); + +function error_page(fail_url, msg) { + const error = ` +
+

An error occurred while loading ${fail_url}

+

${msg}

+
+ `; + return error; +} diff --git a/src/Library/demos/Web View/main.json b/src/Library/demos/Web View/main.json new file mode 100644 index 000000000..5eef92941 --- /dev/null +++ b/src/Library/demos/Web View/main.json @@ -0,0 +1,7 @@ +{ + "name": "Web View", + "category": "network", + "description": "Load and display webpages and HTML", + "panels": ["code", "preview"], + "autorun": true +} From 76a9e6c5aad514ef65ef7c6964a98fd925b8e80b Mon Sep 17 00:00:00 2001 From: Karol Lademan Date: Sat, 3 Jun 2023 22:10:44 +0200 Subject: [PATCH 007/116] library: Add Boxed lists entry (#210) --- src/Library/demos/Boxed Lists/main.blp | 74 +++++++++++++++++++++++++ src/Library/demos/Boxed Lists/main.json | 10 ++++ src/about.js | 1 + 3 files changed, 85 insertions(+) create mode 100644 src/Library/demos/Boxed Lists/main.blp create mode 100644 src/Library/demos/Boxed Lists/main.json diff --git a/src/Library/demos/Boxed Lists/main.blp b/src/Library/demos/Boxed Lists/main.blp new file mode 100644 index 000000000..474bb44e7 --- /dev/null +++ b/src/Library/demos/Boxed Lists/main.blp @@ -0,0 +1,74 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Boxed Lists"); + description: _("List to present both controls and information"); + + Adw.Clamp { + maximum-size: 500; + + Box { + orientation: vertical; + + ListBox { + selection-mode: none; + styles ["boxed-list"] + + Adw.ActionRow { + title: _("ActionRow can have a prefix child"); + + [prefix] + CheckButton checkbox { + active: true; + } + } + + Adw.ActionRow { + title: _("ActionRow can have a suffix child"); + subtitle: _("The checkbox above controls the spinner"); + + [suffix] + Spinner { + spinning: bind checkbox.active; + } + } + + Adw.EntryRow { + title: _("A row can be an entry"); + } + + Adw.ComboRow { + title: _("Choose an item"); + subtitle: _("ComboRow can have a drop down list"); + model: StringList list { + strings ["this", "is", "a", "string", "list"] + }; + } + + Adw.ExpanderRow { + title: _("Rows can be expandable"); + show-enable-switch: true; + + Adw.ActionRow { + title: _("First row"); + } + Adw.ActionRow { + title: _("Second row"); + } + } + } + + LinkButton { + margin-top: 24; + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/boxed-lists.html"; + } + + LinkButton { + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/containers/boxed-lists.html"; + } + } + } +} diff --git a/src/Library/demos/Boxed Lists/main.json b/src/Library/demos/Boxed Lists/main.json new file mode 100644 index 000000000..cd9a19b2a --- /dev/null +++ b/src/Library/demos/Boxed Lists/main.json @@ -0,0 +1,10 @@ +{ + "name": "Boxed Lists", + "category": "user_interface", + "description": "List to present both controls and information", + "panels": [ + "preview", + "ui" + ], + "autorun": true +} diff --git a/src/about.js b/src/about.js index ddcbfd5ae..ce8ed3d88 100644 --- a/src/about.js +++ b/src/about.js @@ -59,6 +59,7 @@ ${getBlueprintVersion()} "Angelo Verlain https://www.vixalien.com", "bazylevnik0 https://github.com/bazylevnik0", "Felipe Kinoshita https://mastodon.social/@fkinoshita", + "Karol Lademan https://github.com/karl0d", "Nasah Kuma https://www.mantohnasah.com/", // Add yourself as // "John Doe", From 53089583d22c9b9a7349813accf80ede2d534830 Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Tue, 6 Jun 2023 22:09:03 -0500 Subject: [PATCH 008/116] Library: add Drag-and-Drop entry (#253) Add a basic example of Drag-and-Drop, with re-orderable list box rows. --- src/Library/demos/Drag and Drop/main.blp | 78 ++++++++++++++++++++ src/Library/demos/Drag and Drop/main.js | 87 +++++++++++++++++++++++ src/Library/demos/Drag and Drop/main.json | 7 ++ 3 files changed, 172 insertions(+) create mode 100644 src/Library/demos/Drag and Drop/main.blp create mode 100644 src/Library/demos/Drag and Drop/main.js create mode 100644 src/Library/demos/Drag and Drop/main.json diff --git a/src/Library/demos/Drag and Drop/main.blp b/src/Library/demos/Drag and Drop/main.blp new file mode 100644 index 000000000..2f2a1dba4 --- /dev/null +++ b/src/Library/demos/Drag and Drop/main.blp @@ -0,0 +1,78 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Drag and Drop"); + description: _("A User interaction pattern where users drag a UI element from one place to another"); + + Box { + orientation: vertical; + + Adw.Clamp { + maximum-size: 400; + + ListBox list { + styles ["boxed-list"] + + Adw.ActionRow { + title: _("Row 1"); + + [prefix] + Image { + styles ["dim-label"] + icon-name: "list-drag-handle-symbolic"; + } + } + + Adw.ActionRow { + title: _("Row 2"); + + [prefix] + Image { + styles ["dim-label"] + icon-name: "list-drag-handle-symbolic"; + } + } + + Adw.ActionRow { + title: _("Row 3"); + + [prefix] + Image { + styles ["dim-label"] + icon-name: "list-drag-handle-symbolic"; + } + } + + Adw.ActionRow { + title: _("Row 4"); + + [prefix] + Image { + styles ["dim-label"] + icon-name: "list-drag-handle-symbolic"; + } + } + + Adw.ActionRow { + title: _("Row 5"); + + [prefix] + Image { + styles ["dim-label"] + icon-name: "list-drag-handle-symbolic"; + } + } + } + } + + LinkButton { + label: "API Reference"; + uri: "https://docs.gtk.org/gtk4/drag-and-drop.html"; + margin-top: 24; + } + } +} + + + diff --git a/src/Library/demos/Drag and Drop/main.js b/src/Library/demos/Drag and Drop/main.js new file mode 100644 index 000000000..ce96fe0a6 --- /dev/null +++ b/src/Library/demos/Drag and Drop/main.js @@ -0,0 +1,87 @@ +import Gtk from "gi://Gtk"; +import Adw from "gi://Adw"; +import Gdk from "gi://Gdk"; +import GObject from "gi://GObject"; + +const list = workbench.builder.get_object("list"); +const drop_target = Gtk.DropTarget.new(Gtk.ListBoxRow, Gdk.DragAction.MOVE); + +list.add_controller(drop_target); + +// Iterate over ListBox children +for (const row of list) { + let drag_x; + let drag_y; + + const drop_controller = new Gtk.DropControllerMotion(); + + const drag_source = new Gtk.DragSource({ + actions: Gdk.DragAction.MOVE, + }); + + row.add_controller(drag_source); + row.add_controller(drop_controller); + + // Drag handling + drag_source.connect("prepare", (_source, x, y) => { + drag_x = x; + drag_y = y; + + const value = new GObject.Value(); + value.init(Gtk.ListBoxRow); + value.set_object(row); + + return Gdk.ContentProvider.new_for_value(value); + }); + + drag_source.connect("drag-begin", (_source, drag) => { + const allocation = row.get_allocation(); + const drag_widget = new Gtk.ListBox(); + + drag_widget.set_size_request(allocation.width, allocation.height); + drag_widget.add_css_class("boxed-list"); + + const drag_row = new Adw.ActionRow({ title: row.title }); + drag_row.add_prefix( + new Gtk.Image({ + icon_name: "list-drag-handle-symbolic", + css_classes: ["dim-label"], + }), + ); + + drag_widget.append(drag_row); + drag_widget.drag_highlight_row(drag_row); + + const icon = Gtk.DragIcon.get_for_drag(drag); + icon.child = drag_widget; + + drag.set_hotspot(drag_x, drag_y); + }); + + // Update row visuals during DnD operation + drop_controller.connect("enter", () => { + list.drag_highlight_row(row); + }); + + drop_controller.connect("leave", () => { + list.drag_unhighlight_row(); + }); +} + +// Drop Handling +drop_target.connect("drop", (_drop, value, _x, y) => { + const target_row = list.get_row_at_y(y); + const target_index = target_row.get_index(); + + // If value or the target row is null, do not accept the drop + if (!value || !target_row) { + return false; + } + + list.remove(value); + list.insert(value, target_index); + target_row.set_state_flags(Gtk.StateFlags.NORMAL, true); + + // If everything is successful, return true to accept the drop + return true; +}); diff --git a/src/Library/demos/Drag and Drop/main.json b/src/Library/demos/Drag and Drop/main.json new file mode 100644 index 000000000..3f1e880c3 --- /dev/null +++ b/src/Library/demos/Drag and Drop/main.json @@ -0,0 +1,7 @@ +{ + "name": "Drag and Drop", + "category": "user_interface", + "description": "A User interaction pattern where users drag a UI element from one place to another", + "panels": ["code", "ui", "preview"], + "autorun": false +} From f1b55ad40f27e5da738479b9cf014faabeb9c159 Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Wed, 7 Jun 2023 15:50:38 +0530 Subject: [PATCH 009/116] library: Add TabView entry (#304) --- src/Library/Library.blp | 4 ++ src/Library/demos/Tab View/main.blp | 66 +++++++++++++++++++++++ src/Library/demos/Tab View/main.js | 39 ++++++++++++++ src/Library/demos/Tab View/main.json | 7 +++ src/Library/demos/View Switcher/main.json | 2 +- 5 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 src/Library/demos/Tab View/main.blp create mode 100644 src/Library/demos/Tab View/main.js create mode 100644 src/Library/demos/Tab View/main.json diff --git a/src/Library/Library.blp b/src/Library/Library.blp index 625288e93..901a982e9 100644 --- a/src/Library/Library.blp +++ b/src/Library/Library.blp @@ -39,6 +39,10 @@ Adw.PreferencesWindow library { title: _("Feedback"); } + Adw.PreferencesGroup library_navigation { + title: _("Navigation"); + } + Adw.PreferencesGroup library_user_interface { title: "User Interface"; } diff --git a/src/Library/demos/Tab View/main.blp b/src/Library/demos/Tab View/main.blp new file mode 100644 index 000000000..9a55fde0f --- /dev/null +++ b/src/Library/demos/Tab View/main.blp @@ -0,0 +1,66 @@ +using Gtk 4.0; +using Adw 1; + +Adw.Window { + default-height: 600; + default-width: 800; + title: _("Tab View Demo"); + Adw.TabOverview overview{ + enable-new-tab: true; + view: tab_view; + Box { + orientation: vertical; + Adw.HeaderBar { + Button button_new_tab{ + icon-name: "tab-new-filled-symbolic"; + } + Button button_overview { + icon-name: "grid-filled-symbolic"; + } + } + Adw.TabBar { + view: tab_view; + } + Adw.TabView tab_view{ + Adw.TabPage main_tab_page{ + title: _("Main Page"); + child: + Adw.StatusPage { + hexpand: true; + vexpand: true; + title: _("Tab View"); + description: _("A dynamic tabbed container"); + + Box { + spacing: 6; + orientation: vertical; + Label { + label: _("API References"); + } + Box{ + halign: center; + LinkButton { + label: "Tab View"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.TabView.html"; + } + LinkButton { + label: "Tab Bar"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.TabBar.html"; + } + LinkButton { + label: "Tab Overview"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.TabOverview.html"; + } + } + LinkButton { + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/nav/tabs.html"; + } + } + }; + } + } + } + } +} + diff --git a/src/Library/demos/Tab View/main.js b/src/Library/demos/Tab View/main.js new file mode 100644 index 000000000..8dde8a91d --- /dev/null +++ b/src/Library/demos/Tab View/main.js @@ -0,0 +1,39 @@ +import Gtk from "gi://Gtk"; +import Adw from "gi://Adw"; + +const tab_view = workbench.builder.get_object("tab_view"); +const button_new_tab = workbench.builder.get_object("button_new_tab"); +const overview = workbench.builder.get_object("overview"); +const button_overview = workbench.builder.get_object("button_overview"); +let tab_count = 1; + +overview.connect("create-tab", () => { + return add_page(); +}); + +button_overview.connect("clicked", () => { + overview.open = true; +}); + +button_new_tab.connect("clicked", () => { + add_page(); +}); + +function add_page() { + const title = `Tab ${tab_count}`; + const page = create_page(title); + const tab_page = tab_view.append(page); + tab_page.title = title; + tab_page.live_thumbnail = true; + + tab_count += 1; + return tab_page; +} + +function create_page(title) { + const page = new Adw.StatusPage({ + title: title, + vexpand: true, + }); + return page; +} diff --git a/src/Library/demos/Tab View/main.json b/src/Library/demos/Tab View/main.json new file mode 100644 index 000000000..94ea9806c --- /dev/null +++ b/src/Library/demos/Tab View/main.json @@ -0,0 +1,7 @@ +{ + "name": "Tab View", + "category": "navigation", + "description": "A dynamic tabbed container", + "panels": ["ui", "preview"], + "autorun": true +} diff --git a/src/Library/demos/View Switcher/main.json b/src/Library/demos/View Switcher/main.json index 6ec6243ee..d3c4aa112 100644 --- a/src/Library/demos/View Switcher/main.json +++ b/src/Library/demos/View Switcher/main.json @@ -1,6 +1,6 @@ { "name": "View Switcher", - "category": "user_interface", + "category": "navigation", "description": "View Switchers allow users to switch between different predefined pages", "panels": ["code", "ui", "preview"], "autorun": true From c42cf4f4fe50d52a32410f01797f96701d3e9bd4 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Wed, 7 Jun 2023 13:38:46 +0300 Subject: [PATCH 010/116] Library: Add Drawing area (#261) --- src/Library/demos/Drawing Area/main.blp | 29 ++++++++ src/Library/demos/Drawing Area/main.js | 85 ++++++++++++++++++++++++ src/Library/demos/Drawing Area/main.json | 10 +++ 3 files changed, 124 insertions(+) create mode 100644 src/Library/demos/Drawing Area/main.blp create mode 100644 src/Library/demos/Drawing Area/main.js create mode 100644 src/Library/demos/Drawing Area/main.json diff --git a/src/Library/demos/Drawing Area/main.blp b/src/Library/demos/Drawing Area/main.blp new file mode 100644 index 000000000..4d6fb361a --- /dev/null +++ b/src/Library/demos/Drawing Area/main.blp @@ -0,0 +1,29 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Drawing Area"; + description: _("Programmatically draw onto a surface."); + + Box { + halign: center; + orientation: vertical; + + DrawingArea drawing_area { + content-width: 300; + content-height: 300; + } + + Scale scale { + orientation: horizontal; + width-request: 300; + draw-value: true; + adjustment: Gtk.Adjustment { + lower: -25; + upper: 25; + value: 0; + }; + } + } +} +//https://docs.gtk.org/gtk4/class.DrawingArea.html diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js new file mode 100644 index 000000000..ecbf1ece4 --- /dev/null +++ b/src/Library/demos/Drawing Area/main.js @@ -0,0 +1,85 @@ +import Cairo from "cairo"; +import Gtk from "gi://Gtk?version=4.0"; +Gtk.init(); + +const drawingArea = workbench.builder.get_object("drawing_area"); +const scaleRotate = workbench.builder.get_object("scale"); + +let triangle = [3]; +triangle[0] = [2]; +triangle[0][0] = 100; +triangle[0][1] = 100; +triangle[1] = [2]; +triangle[1][0] = 0; +triangle[1][1] = -100; +triangle[2] = [2]; +triangle[2][0] = -100; +triangle[2][1] = 100; +let triangle_original = [3]; +for (let i = 0; i < 3; i++) { + let temp = [2]; + temp[0] = triangle[i][0]; + temp[1] = triangle[i][1]; + triangle_original[i] = temp; +} + +drawingArea.set_draw_func((area, cr, width, height) => { + // Draw triangle in context + cr.moveTo(150 + triangle[0][0], 150 + triangle[0][1]); + cr.lineTo(150 + triangle[1][0], 150 + triangle[1][1]); + cr.lineTo(150 + triangle[2][0], 150 + triangle[2][1]); + cr.lineTo(150 + triangle[0][0], 150 + triangle[0][1]); + + cr.setSourceRGBA(1, 0, 1, 1); + cr.stroke(); + // Freeing the context before returning from the callback + cr.$dispose(); +}); + +scaleRotate.connect("value-changed", () => { + // Recalculate value of points of triangle + for (let i = 0; i < 3; i++) { + // Calculate original angle + let x = triangle_original[i][0]; + let y = triangle_original[i][1]; + let angle = Math.atan(Math.abs(y) / Math.abs(x)); + if (x > 0 && y > 0) { + angle = angle; + } + if (x < 0 && y > 0) { + angle = Math.PI - angle; + } + if (x < 0 && y < 0) { + angle = Math.PI + angle; + } + if (x > 0 && y < 0) { + angle = Math.PI * 2 - angle; + } + if (x === 0) { + if (y > 0) { + angle = angle; + } + if (y < 0) { + angle = -1 * angle; + } + } + if (y === 0) { + if (x > 0) { + angle = angle; + } + if (x < 0) { + angle = M_PI; + } + } + // Add to original angle scale value + angle += (scaleRotate.get_value() * Math.PI) / 180; + // Set new value to triangle + let radius = Math.sqrt(x * x + y * y); + + triangle[i][0] = radius * Math.cos(angle); + triangle[i][1] = radius * Math.sin(angle); + } + // Redraw drawing_area + drawingArea.queue_draw(); +}); +//https://www.cairographics.org/tutorial/ diff --git a/src/Library/demos/Drawing Area/main.json b/src/Library/demos/Drawing Area/main.json new file mode 100644 index 000000000..fda5be0e1 --- /dev/null +++ b/src/Library/demos/Drawing Area/main.json @@ -0,0 +1,10 @@ +{ + "name": "Drawing Area", + "category": "user_interface", + "description": "Programmatically draw onto a surface.", + "panels": [ + "ui", + "code" + ], + "autorun": true +} From 0717088e2b318ae31ba6757d13323a774e69aeee Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Sat, 10 Jun 2023 05:18:20 -0500 Subject: [PATCH 011/116] Add Jose as a contributor (#310) --- src/about.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/about.js b/src/about.js index ce8ed3d88..e85aa8594 100644 --- a/src/about.js +++ b/src/about.js @@ -61,6 +61,7 @@ ${getBlueprintVersion()} "Felipe Kinoshita https://mastodon.social/@fkinoshita", "Karol Lademan https://github.com/karl0d", "Nasah Kuma https://www.mantohnasah.com/", + "Jose Hunter https://github.com/halfmexican/", // Add yourself as // "John Doe", // or From 3c8e02aa6202a49fcd2199cff8e3bd4fdcf42ea0 Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Sat, 10 Jun 2023 18:44:52 +0530 Subject: [PATCH 012/116] library: Add Advanced Buttons entry (#300) --- src/Library/demos/Advanced Buttons/main.blp | 208 +++++++++++++++++++ src/Library/demos/Advanced Buttons/main.css | 3 + src/Library/demos/Advanced Buttons/main.json | 7 + 3 files changed, 218 insertions(+) create mode 100644 src/Library/demos/Advanced Buttons/main.blp create mode 100644 src/Library/demos/Advanced Buttons/main.css create mode 100644 src/Library/demos/Advanced Buttons/main.json diff --git a/src/Library/demos/Advanced Buttons/main.blp b/src/Library/demos/Advanced Buttons/main.blp new file mode 100644 index 000000000..3ed0feb82 --- /dev/null +++ b/src/Library/demos/Advanced Buttons/main.blp @@ -0,0 +1,208 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Advanced Buttons"); + description: _("Complex buttons with menus and icons"); + + Box { + orientation: vertical; + halign: center; + spacing: 6; + + Box { + spacing: 6; + halign: center; + orientation: vertical; + + Label { + label: _("Split Button"); + + styles ["title-4"] + } + + Label { + label: _("A combined button and dropdown widget"); + } + + Box { + halign: center; + margin-top: 12; + homogeneous: true; + spacing: 18; + + Box { + margin-top: 6; + margin-bottom: 6; + orientation: vertical; + spacing: 6; + + Adw.SplitButton { + halign: center; + icon-name: "execute-from-symbolic"; + menu-model: button_run_menu; + } + + Label { + label: _("Menu Model"); + } + } + + Box { + margin-top: 6; + margin-bottom: 6; + orientation: vertical; + spacing: 6; + + Adw.SplitButton { + label: _("Open"); + popover: button_popover; + } + + Label { + label: _("Popover"); + } + } + } + } + + LinkButton { + margin-bottom: 36; + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.SplitButton.html"; + } + + Box { + spacing: 6; + halign: center; + orientation: vertical; + + Label { + label: _("Button Content"); + + styles ["title-4"] + } + + Label { + label: _("A helper widget to create buttons with icons and labels"); + } + + Box { + halign: center; + margin-top: 12; + homogeneous: true; + spacing: 18; + + Box { + margin-top: 6; + margin-bottom: 6; + orientation: vertical; + spacing: 6; + + Button { + Adw.ButtonContent { + label: _("Edit"); + icon-name: "document-edit-symbolic"; + } + } + + Label { + label: _("Button"); + } + } + + Box { + margin-top: 6; + margin-bottom: 6; + orientation: vertical; + spacing: 6; + + MenuButton { + menu-model: button_new_menu; + + Adw.ButtonContent { + label: _("New"); + icon-name: "plus-symbolic"; + } + } + + Label { + label: _("Menu Button"); + } + } + + Box { + margin-top: 6; + margin-bottom: 6; + orientation: vertical; + spacing: 6; + + ToggleButton { + Adw.ButtonContent { + label: _("Alerts"); + icon-name: "bell-symbolic"; + } + } + + Label { + label: _("Toggle Button"); + } + } + } + } + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.ButtonContent.html"; + } + } +} + +Popover button_popover { + Box { + orientation: vertical; + SearchEntry { + placeholder-text: _("Search documents"); + } + + Adw.StatusPage { + name: "popover_page"; + title: _("No Recent Documents"); + icon-name: "clock-symbolic"; + width-request: 300; + height-request: 300; + styles [ + "compact", + "dim-label", + ] + } + } +} + +menu button_new_menu { + item ("New File") + item ("New Folder") + item ("New Window") +} + +menu button_run_menu { + section { + item ("Run") + item ("Run with Leak Detector") + item ("Run with Debugger") + } + + section { + label: _("Settings"); + submenu { + label: _("Accessibility"); + item ("High Contrast") + + section { + label: _("Text Direction"); + item ("Left-to-Right") + item ("Right-to-Left") + } + } + } +} diff --git a/src/Library/demos/Advanced Buttons/main.css b/src/Library/demos/Advanced Buttons/main.css new file mode 100644 index 000000000..78b163ecc --- /dev/null +++ b/src/Library/demos/Advanced Buttons/main.css @@ -0,0 +1,3 @@ + #popover_page { + min-width: 300px; + } diff --git a/src/Library/demos/Advanced Buttons/main.json b/src/Library/demos/Advanced Buttons/main.json new file mode 100644 index 000000000..0ee106c2e --- /dev/null +++ b/src/Library/demos/Advanced Buttons/main.json @@ -0,0 +1,7 @@ +{ + "name": "Advanced Buttons", + "category": "controls", + "description": "Complex buttons with menus and icons", + "panels": ["ui", "preview"], + "autorun": true +} From c528affffa450f8b39f88f22431f94e9131f03ca Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Sat, 10 Jun 2023 15:15:35 +0200 Subject: [PATCH 013/116] library: Remove unused css file --- src/Library/demos/Advanced Buttons/main.blp | 1 - src/Library/demos/Advanced Buttons/main.css | 3 --- 2 files changed, 4 deletions(-) delete mode 100644 src/Library/demos/Advanced Buttons/main.css diff --git a/src/Library/demos/Advanced Buttons/main.blp b/src/Library/demos/Advanced Buttons/main.blp index 3ed0feb82..3dd444190 100644 --- a/src/Library/demos/Advanced Buttons/main.blp +++ b/src/Library/demos/Advanced Buttons/main.blp @@ -166,7 +166,6 @@ Popover button_popover { } Adw.StatusPage { - name: "popover_page"; title: _("No Recent Documents"); icon-name: "clock-symbolic"; width-request: 300; diff --git a/src/Library/demos/Advanced Buttons/main.css b/src/Library/demos/Advanced Buttons/main.css deleted file mode 100644 index 78b163ecc..000000000 --- a/src/Library/demos/Advanced Buttons/main.css +++ /dev/null @@ -1,3 +0,0 @@ - #popover_page { - min-width: 300px; - } From 8b02eb29bdcdd5a4e270e241dad9ff4c19bff25b Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam <96797205+SoNiC-HeRE@users.noreply.github.com> Date: Wed, 14 Jun 2023 05:08:54 +0530 Subject: [PATCH 014/116] library: Adds Adw.AboutWindow entry (#305) * Adds Adw.AboutWindow Demo * Updated Link * Updated Code * Updated Icon * Added Acknowledgement Section --- src/Library/demos/About Window/main.blp | 25 ++++++++++++++++++++++ src/Library/demos/About Window/main.js | 27 ++++++++++++++++++++++++ src/Library/demos/About Window/main.json | 7 ++++++ 3 files changed, 59 insertions(+) create mode 100644 src/Library/demos/About Window/main.blp create mode 100644 src/Library/demos/About Window/main.js create mode 100644 src/Library/demos/About Window/main.json diff --git a/src/Library/demos/About Window/main.blp b/src/Library/demos/About Window/main.blp new file mode 100644 index 000000000..779ebe2d1 --- /dev/null +++ b/src/Library/demos/About Window/main.blp @@ -0,0 +1,25 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "About Window"; + description: _("A window showing information about the application."); + + Box { + orientation: vertical; + halign: center; + + Button button { + label: _("About"); + margin-bottom: 12; + styles ['pill'] + } + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.AboutWindow.html"; + } + } +} + + diff --git a/src/Library/demos/About Window/main.js b/src/Library/demos/About Window/main.js new file mode 100644 index 000000000..7193d7dc6 --- /dev/null +++ b/src/Library/demos/About Window/main.js @@ -0,0 +1,27 @@ +import Adw from "gi://Adw"; +import Gtk from "gi://Gtk"; + +const parent = workbench.window; +const button = workbench.builder.get_object("button"); + +function handleClick() { + const dialog = new Adw.AboutWindow({ + transient_for: parent, + application_name: "Application", + developer_name: "Developer Name", + license_type: Gtk.License.GPL_3_0_ONLY, + version: "1.2.3", + website: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3", + application_icon: "application-x-executable", + issue_url: "https://gitlab.gnome.org/GNOME/libadwaita/-/issues", + developers: ["Sriyansh Shivam https://linkfree.io/SoNiC-HeRE"], + }); + + dialog.add_acknowledgement_section(_("Support Workbench"), [ + "GitHub https://github.com/sonnyp/Workbench", + ]); + + dialog.present(); +} + +button.connect("clicked", handleClick); diff --git a/src/Library/demos/About Window/main.json b/src/Library/demos/About Window/main.json new file mode 100644 index 000000000..6c5e515cf --- /dev/null +++ b/src/Library/demos/About Window/main.json @@ -0,0 +1,7 @@ +{ + "name": "About Window", + "category": "user_interface", + "description": "A window showing information about the application.", + "panels": ["code", "preview"], + "autorun": true +} From 27ad35e6c282a9d535d5e77178f5e51eddfdf266 Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Wed, 14 Jun 2023 09:15:00 +0530 Subject: [PATCH 015/116] library: Add Animation entry (#306) * library: Add AdwAnimation entry * Animation: Fix CallbackAnimationTarget and add AnimationTarget example * Animation: Add links * Animation: Changes from review * Animation: Update main.css --- src/Library/demos/Animation/main.blp | 139 ++++++++++++++++++++++++++ src/Library/demos/Animation/main.css | 10 ++ src/Library/demos/Animation/main.js | 64 ++++++++++++ src/Library/demos/Animation/main.json | 7 ++ 4 files changed, 220 insertions(+) create mode 100644 src/Library/demos/Animation/main.blp create mode 100644 src/Library/demos/Animation/main.css create mode 100644 src/Library/demos/Animation/main.js create mode 100644 src/Library/demos/Animation/main.json diff --git a/src/Library/demos/Animation/main.blp b/src/Library/demos/Animation/main.blp new file mode 100644 index 000000000..51003c0f6 --- /dev/null +++ b/src/Library/demos/Animation/main.blp @@ -0,0 +1,139 @@ +using Gtk 4.0; +using Adw 1; + +Adw.Clamp { + Box { + margin-top: 30; + margin-bottom: 12; + orientation: vertical; + Box { + spacing: 6; + orientation: vertical; + Label { + label: _("Animation"); + styles ["title-1"] + } + Label { + label: _("Create timed or spring based animations"); + } + } + + Box { + margin-top: 54; + orientation: vertical; + homogeneous: true; + + Box target_container{ + vexpand: true; + spacing: 12; + orientation: vertical; + + Box { + spacing:24; + + Box { + homogeneous: true; + orientation: vertical; + + Label { + halign: start; + label: _("Animation Target"); + + styles ["title-4"] + } + + Label { + halign: start; + label: _("Animate a widget property"); + + styles ["dim-label"] + } + } + + Button button_timed { + hexpand: true; + halign: end; + icon-name: "play-large-symbolic"; + + styles ["circular"] + } + } + + Box { + hexpand: true; + ProgressBar progress_bar{ + hexpand: true; + } + } + } + + Box callback_target_container{ + spacing: 12; + orientation: vertical; + + Box { + spacing:24; + + Box { + homogeneous: true; + orientation: vertical; + + Label { + halign: start; + label: _("Callback Animation Target"); + + styles ["title-4"] + } + + Label { + halign: start; + label: _("Use callbacks to animate a custom property"); + + styles ["dim-label"] + } + } + + Button button_spring { + hexpand: true; + halign: end; + icon-name: "play-large-symbolic"; + + styles ["circular"] + } + } + + Box { + hexpand: true; + Adw.Bin ball { + styles ["ball"] + } + } + } + } + + Box { + orientation: vertical; + + Label { + label: "Tools"; + } + LinkButton { + margin-bottom:12; + label: "Elastic"; + uri: "https://apps.gnome.org/app/app.drey.Elastic/"; + } + Label { + label: "API References"; + } + LinkButton { + label: "Timed Animation"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.TimedAnimation.html"; + } + LinkButton { + label: "Spring Animation"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.SpringAnimation.html"; + } + } + } +} + diff --git a/src/Library/demos/Animation/main.css b/src/Library/demos/Animation/main.css new file mode 100644 index 000000000..51e35a49d --- /dev/null +++ b/src/Library/demos/Animation/main.css @@ -0,0 +1,10 @@ +.ball { + min-height: 50px; + min-width: 50px; + border-radius: 50%; + background-image: linear-gradient(@green_2, @green_5); +} + +.circular { + padding: 6px; +} diff --git a/src/Library/demos/Animation/main.js b/src/Library/demos/Animation/main.js new file mode 100644 index 000000000..ce020f38e --- /dev/null +++ b/src/Library/demos/Animation/main.js @@ -0,0 +1,64 @@ +import Adw from "gi://Adw"; +import Gsk from "gi://Gsk"; +import Graphene from "gi://Graphene"; + +const button_timed = workbench.builder.get_object("button_timed"); +const progress_bar = workbench.builder.get_object("progress_bar"); +const target_timed = Adw.PropertyAnimationTarget.new(progress_bar, "fraction"); + +const animation_timed = new Adw.TimedAnimation({ + widget: progress_bar, + value_from: 0, + value_to: 1, + duration: 1500, + easing: Adw.Easing["EASE_IN_OUT_CUBIC"], + target: target_timed, +}); + +button_timed.connect("clicked", () => { + animation_timed.play(); +}); + +animation_timed.connect("done", () => { + animation_timed.reset(); +}); + +const button_spring = workbench.builder.get_object("button_spring"); +const ball = workbench.builder.get_object("ball"); + +const target_spring = Adw.CallbackAnimationTarget.new(animation_cb); +const params = Adw.SpringParams.new( + // Damping Ratio + 0.5, + // Mass + 1.0, + // Stiffness + 50.0, +); +const animation_spring = new Adw.SpringAnimation({ + widget: ball, + value_from: 0, + value_to: 8.5, + spring_params: params, + target: target_spring, +}); +animation_spring.initial_velocity = 1.0; +// If amplitude of oscillation < epsilon, animation stops +animation_spring.epsilon = 0.001; +animation_spring.clamp = false; + +button_spring.connect("clicked", () => { + animation_spring.play(); +}); + +function animation_cb(value) { + const x = Adw.lerp(0, 60, value); + move_widget(ball, x, 0); +} + +function move_widget(widget, x, y) { + let transform = new Gsk.Transform(); + const p = new Graphene.Point({ x: x, y: y }); + transform = transform.translate(p); + widget.allocate(widget.get_width(), widget.get_height(), -1, transform); +} diff --git a/src/Library/demos/Animation/main.json b/src/Library/demos/Animation/main.json new file mode 100644 index 000000000..16a508d48 --- /dev/null +++ b/src/Library/demos/Animation/main.json @@ -0,0 +1,7 @@ +{ + "name": "Animation", + "category": "user_interface", + "description": "Create timed or spring based animations", + "panels": ["code","preview"], + "autorun": true +} From d4f2030566659eb0be0cc68d7bd3899efec4c014 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam <96797205+SoNiC-HeRE@users.noreply.github.com> Date: Wed, 14 Jun 2023 09:17:43 +0530 Subject: [PATCH 016/116] library: Adds TextView entry (#315) * Added TextView Demo * Updated JS Code * Updated Code * Formatting Changes --- src/Library/demos/TextView/main.blp | 76 ++++++++++++++++++++++++++++ src/Library/demos/TextView/main.js | 63 +++++++++++++++++++++++ src/Library/demos/TextView/main.json | 7 +++ 3 files changed, 146 insertions(+) create mode 100644 src/Library/demos/TextView/main.blp create mode 100644 src/Library/demos/TextView/main.js create mode 100644 src/Library/demos/TextView/main.json diff --git a/src/Library/demos/TextView/main.blp b/src/Library/demos/TextView/main.blp new file mode 100644 index 000000000..0f6e68eb2 --- /dev/null +++ b/src/Library/demos/TextView/main.blp @@ -0,0 +1,76 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "TextView"; + description: _("A widget that enables text-editing"); + + Box { + orientation: vertical; + halign: center; + + Frame { + margin-bottom: 12; + + ScrolledWindow { + height-request: 180; + width-request: 600; + + TextView textview { + bottom-margin: 12; + left-margin: 12; + right-margin: 12; + top-margin: 12; + editable: true; + cursor-visible: true; + wrap-mode: char; + } + } + } + + Box { + orientation: horizontal; + margin-top: 12; + margin-bottom: 12; + halign: center; + spacing: 18; + + Button copy { + label: _("Copy"); + } + + Button paste { + label: _("Paste"); + } + + Button cut { + label: _("Cut"); + } + } + + Box { + orientation: horizontal; + halign: center; + spacing: 18; + margin-bottom: 18; + + Button select { + halign: center; + label: _("Select all"); + } + + Button clear { + halign: center; + label: _("Clear all"); + } + } + + LinkButton{ + label: "API Reference"; + uri: "https://docs.gtk.org/gtk4/class.TextView.html"; + } + } +} + + + diff --git a/src/Library/demos/TextView/main.js b/src/Library/demos/TextView/main.js new file mode 100644 index 000000000..8a5270263 --- /dev/null +++ b/src/Library/demos/TextView/main.js @@ -0,0 +1,63 @@ +import Gtk from "gi://Gtk"; +import Gdk from "gi://Gdk"; + +const textview = workbench.builder.get_object("textview"); +const select = workbench.builder.get_object("select"); +const copy = workbench.builder.get_object("copy"); +const cut = workbench.builder.get_object("cut"); +const clear = workbench.builder.get_object("clear"); +const paste = workbench.builder.get_object("paste"); + +const display = Gdk.Display.get_default(); +const clipboard = display.get_clipboard(); + +const buffer = new Gtk.TextBuffer(); +buffer.set_text( + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel elit scelerisque mauris pellentesque pulvinar. Molestie nunc non blandit massa enim nec dui nunc. Turpis in eu mi bibendum neque egestas congue quisque. Sed velit dignissim sodales ut. Massa tempor nec feugiat nisl pretium fusce id velit. Vitae congue eu consequat ac felis donec et. Ultrices sagittis orci a scelerisque purus semper eget duis at. Habitant morbi tristique senectus et netus et malesuada fames ac. Vitae aliquet nec ullamcorper sit amet risus nullam. Tortor at auctor urna nunc. Eget velit aliquet sagittis id consectetur purus. Libero id faucibus nisl tincidunt eget. Nunc consequat interdum varius sit amet mattis. Enim facilisis gravida neque convallis. Dolor sit amet consectetur adipiscing elit ut aliquam purus. Venenatis tellus in metus vulputate eu scelerisque.Sit amet luctus venenatis lectus magna fringilla urna. Eget nunc lobortis mattis aliquam. Urna duis convallis convallis tellus id interdum velit. Fames ac turpis egestas maecenas. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Eget est lorem ipsum dolor sit amet consectetur. Eget nunc lobortis mattis aliquam faucibus purus in. Iaculis nunc sed augue lacus viverra vitae. Euismod elementum nisi quis eleifend. Et pharetra pharetra massa massa ultricies mi quis. Volutpat odio facilisis mauris sit. Enim ut tellus elementum sagittis vitae et. Volutpat sed cras ornare arcu dui vivamus arcu felis. Arcu vitae elementum curabitur vitae nunc sed. Porttitor rhoncus dolor purus non enim. Scelerisque fermentum dui faucibus in ornare quam viverra. Amet purus gravida quis blandit turpis cursus. Faucibus pulvinar elementum integer enim. Aenean et tortor at risus viverra adipiscing at in.Vitae ultricies leo integer malesuada nunc vel. Quis lectus nulla at volutpat diam ut. Donec ac odio tempor orci dapibus ultrices. Justo eget magna fermentum iaculis eu non diam. Mauris cursus mattis molestie a iaculis at erat pellentesque. Phasellus faucibus scelerisque eleifend donec pretium. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Habitant morbi tristique senectus et netus. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Nulla malesuada pellentesque elit eget. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed. Sollicitudin ac orci phasellus egestas tellus. In hendrerit gravida rutrum quisque non tellus orci ac. Suspendisse ultrices gravida dictum fusce ut placerat. Varius morbi enim nunc faucibus. Tellus elementum sagittis vitae et leo duis ut diam. Velit dignissim sodales ut eu sem integer. Sapien eget mi proin sed libero enim. Odio euismod lacinia at quis risus. Tellus at urna condimentum mattis pellentesque id.", + -1, +); + +textview.buffer = buffer; + +function handleCopy() { + if (buffer.get_has_selection()) { + buffer.copy_clipboard(clipboard); + console.log("Text copied to clipboard"); + } else { + console.log("No text selected to copy"); + } +} + +function handlePaste() { + buffer.paste_clipboard(clipboard, null, true); + console.log("Text pasted"); +} + +function handleCut() { + if (buffer.get_has_selection()) { + buffer.cut_clipboard(clipboard, true); + console.log("Text cut to clipboard"); + } else { + console.log("No text selected to cut"); + } +} + +copy.connect("clicked", handleCopy); +paste.connect("clicked", handlePaste); +cut.connect("clicked", handleCut); +select.connect("clicked", () => { + buffer.select_range(buffer.get_start_iter(), buffer.get_end_iter()); +}); +clear.connect("clicked", () => { + buffer.delete(buffer.get_start_iter(), buffer.get_end_iter()); +}); + +textview.connect("copy-clipboard", () => { + console.log("Text copied to clipboard"); +}); +textview.connect("cut-clipboard", () => { + console.log("Text cut to clipboard"); +}); +textview.connect("paste-clipboard", () => { + console.log("Text pasted"); +}); diff --git a/src/Library/demos/TextView/main.json b/src/Library/demos/TextView/main.json new file mode 100644 index 000000000..2e3c0d3ed --- /dev/null +++ b/src/Library/demos/TextView/main.json @@ -0,0 +1,7 @@ +{ + "name": "TextView", + "category": "controls", + "description": "A widget that enables text-editing", + "panels": ["code", "preview"], + "autorun": true +} From 4af4c78e21f3cc0cc55780b021c3cd6a1997c27c Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Wed, 14 Jun 2023 10:24:54 +0200 Subject: [PATCH 017/116] library: Minor improvements --- src/Library/demos/About Window/main.js | 43 +++++++++++++------ src/Library/demos/Animation/main.blp | 8 +++- src/Library/demos/Animation/main.json | 2 +- .../demos/{TextView => Text View}/main.blp | 36 ++++++++-------- .../demos/{TextView => Text View}/main.js | 1 - .../demos/{TextView => Text View}/main.json | 2 +- 6 files changed, 57 insertions(+), 35 deletions(-) rename src/Library/demos/{TextView => Text View}/main.blp (69%) rename src/Library/demos/{TextView => Text View}/main.js (99%) rename src/Library/demos/{TextView => Text View}/main.json (85%) diff --git a/src/Library/demos/About Window/main.js b/src/Library/demos/About Window/main.js index 7193d7dc6..a716fdfba 100644 --- a/src/Library/demos/About Window/main.js +++ b/src/Library/demos/About Window/main.js @@ -4,24 +4,43 @@ import Gtk from "gi://Gtk"; const parent = workbench.window; const button = workbench.builder.get_object("button"); -function handleClick() { +function openAboutWindow() { const dialog = new Adw.AboutWindow({ transient_for: parent, - application_name: "Application", - developer_name: "Developer Name", - license_type: Gtk.License.GPL_3_0_ONLY, - version: "1.2.3", - website: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3", application_icon: "application-x-executable", - issue_url: "https://gitlab.gnome.org/GNOME/libadwaita/-/issues", - developers: ["Sriyansh Shivam https://linkfree.io/SoNiC-HeRE"], + application_name: "Typeset", + developer_name: "Angela Avery", + version: "1.2.3", + comments: _( + "Typeset is an app that doesn’t exist and is used as an example content for About Window.", + ), + website: "https://example.org", + issue_url: "https://example.org", + support_url: "https://example.org", + copyright: "Β© 2023 Angela Avery", + license_type: Gtk.License.GPL_3_0_ONLY, + developers: ["Angela Avery "], + artists: ["GNOME Design Team"], + translator_credits: _("translator-credits"), }); - dialog.add_acknowledgement_section(_("Support Workbench"), [ - "GitHub https://github.com/sonnyp/Workbench", - ]); + dialog.add_link( + _("Documentation"), + "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutWindow.html", + ); + + dialog.add_legal_section( + _("Fonts"), + null, + Gtk.License.CUSTOM, + _( + "This application uses font data from somewhere.", + ), + ); + + dialog.add_acknowledgement_section(_("Special thanks to"), [_("My cat")]); dialog.present(); } -button.connect("clicked", handleClick); +button.connect("clicked", openAboutWindow); diff --git a/src/Library/demos/Animation/main.blp b/src/Library/demos/Animation/main.blp index 51003c0f6..3522f321b 100644 --- a/src/Library/demos/Animation/main.blp +++ b/src/Library/demos/Animation/main.blp @@ -53,6 +53,7 @@ Adw.Clamp { Button button_timed { hexpand: true; halign: end; + valign: center; icon-name: "play-large-symbolic"; styles ["circular"] @@ -96,6 +97,7 @@ Adw.Clamp { Button button_spring { hexpand: true; halign: end; + valign: center; icon-name: "play-large-symbolic"; styles ["circular"] @@ -116,14 +118,17 @@ Adw.Clamp { Label { label: "Tools"; + styles ["title-2"] } LinkButton { - margin-bottom:12; + margin-bottom: 12; label: "Elastic"; uri: "https://apps.gnome.org/app/app.drey.Elastic/"; } Label { label: "API References"; + margin-top: 12; + styles ["title-2"] } LinkButton { label: "Timed Animation"; @@ -136,4 +141,3 @@ Adw.Clamp { } } } - diff --git a/src/Library/demos/Animation/main.json b/src/Library/demos/Animation/main.json index 16a508d48..49d301a28 100644 --- a/src/Library/demos/Animation/main.json +++ b/src/Library/demos/Animation/main.json @@ -2,6 +2,6 @@ "name": "Animation", "category": "user_interface", "description": "Create timed or spring based animations", - "panels": ["code","preview"], + "panels": ["code", "preview"], "autorun": true } diff --git a/src/Library/demos/TextView/main.blp b/src/Library/demos/Text View/main.blp similarity index 69% rename from src/Library/demos/TextView/main.blp rename to src/Library/demos/Text View/main.blp index 0f6e68eb2..48b0ff80d 100644 --- a/src/Library/demos/TextView/main.blp +++ b/src/Library/demos/Text View/main.blp @@ -2,7 +2,7 @@ using Gtk 4.0; using Adw 1; Adw.StatusPage { - title: "TextView"; + title: "Text View"; description: _("A widget that enables text-editing"); Box { @@ -35,17 +35,17 @@ Adw.StatusPage { halign: center; spacing: 18; - Button copy { - label: _("Copy"); - } + Button copy { + label: _("Copy"); + } - Button paste { - label: _("Paste"); - } + Button paste { + label: _("Paste"); + } - Button cut { - label: _("Cut"); - } + Button cut { + label: _("Cut"); + } } Box { @@ -54,15 +54,15 @@ Adw.StatusPage { spacing: 18; margin-bottom: 18; - Button select { - halign: center; - label: _("Select all"); - } + Button select { + halign: center; + label: _("Select all"); + } - Button clear { - halign: center; - label: _("Clear all"); - } + Button clear { + halign: center; + label: _("Clear all"); + } } LinkButton{ diff --git a/src/Library/demos/TextView/main.js b/src/Library/demos/Text View/main.js similarity index 99% rename from src/Library/demos/TextView/main.js rename to src/Library/demos/Text View/main.js index 8a5270263..d5f2193e4 100644 --- a/src/Library/demos/TextView/main.js +++ b/src/Library/demos/Text View/main.js @@ -16,7 +16,6 @@ buffer.set_text( "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel elit scelerisque mauris pellentesque pulvinar. Molestie nunc non blandit massa enim nec dui nunc. Turpis in eu mi bibendum neque egestas congue quisque. Sed velit dignissim sodales ut. Massa tempor nec feugiat nisl pretium fusce id velit. Vitae congue eu consequat ac felis donec et. Ultrices sagittis orci a scelerisque purus semper eget duis at. Habitant morbi tristique senectus et netus et malesuada fames ac. Vitae aliquet nec ullamcorper sit amet risus nullam. Tortor at auctor urna nunc. Eget velit aliquet sagittis id consectetur purus. Libero id faucibus nisl tincidunt eget. Nunc consequat interdum varius sit amet mattis. Enim facilisis gravida neque convallis. Dolor sit amet consectetur adipiscing elit ut aliquam purus. Venenatis tellus in metus vulputate eu scelerisque.Sit amet luctus venenatis lectus magna fringilla urna. Eget nunc lobortis mattis aliquam. Urna duis convallis convallis tellus id interdum velit. Fames ac turpis egestas maecenas. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Eget est lorem ipsum dolor sit amet consectetur. Eget nunc lobortis mattis aliquam faucibus purus in. Iaculis nunc sed augue lacus viverra vitae. Euismod elementum nisi quis eleifend. Et pharetra pharetra massa massa ultricies mi quis. Volutpat odio facilisis mauris sit. Enim ut tellus elementum sagittis vitae et. Volutpat sed cras ornare arcu dui vivamus arcu felis. Arcu vitae elementum curabitur vitae nunc sed. Porttitor rhoncus dolor purus non enim. Scelerisque fermentum dui faucibus in ornare quam viverra. Amet purus gravida quis blandit turpis cursus. Faucibus pulvinar elementum integer enim. Aenean et tortor at risus viverra adipiscing at in.Vitae ultricies leo integer malesuada nunc vel. Quis lectus nulla at volutpat diam ut. Donec ac odio tempor orci dapibus ultrices. Justo eget magna fermentum iaculis eu non diam. Mauris cursus mattis molestie a iaculis at erat pellentesque. Phasellus faucibus scelerisque eleifend donec pretium. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Habitant morbi tristique senectus et netus. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Nulla malesuada pellentesque elit eget. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed. Sollicitudin ac orci phasellus egestas tellus. In hendrerit gravida rutrum quisque non tellus orci ac. Suspendisse ultrices gravida dictum fusce ut placerat. Varius morbi enim nunc faucibus. Tellus elementum sagittis vitae et leo duis ut diam. Velit dignissim sodales ut eu sem integer. Sapien eget mi proin sed libero enim. Odio euismod lacinia at quis risus. Tellus at urna condimentum mattis pellentesque id.", -1, ); - textview.buffer = buffer; function handleCopy() { diff --git a/src/Library/demos/TextView/main.json b/src/Library/demos/Text View/main.json similarity index 85% rename from src/Library/demos/TextView/main.json rename to src/Library/demos/Text View/main.json index 2e3c0d3ed..35d7de437 100644 --- a/src/Library/demos/TextView/main.json +++ b/src/Library/demos/Text View/main.json @@ -1,5 +1,5 @@ { - "name": "TextView", + "name": "Text View", "category": "controls", "description": "A widget that enables text-editing", "panels": ["code", "preview"], From 194bf064be2d394b852fad0ecf37734391b1a9b2 Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Wed, 14 Jun 2023 03:59:44 -0500 Subject: [PATCH 018/116] library: add css example (#314) --- src/Library/demos/Styling with CSS/main.blp | 83 ++++++++++++++++++++ src/Library/demos/Styling with CSS/main.css | 25 ++++++ src/Library/demos/Styling with CSS/main.js | 3 + src/Library/demos/Styling with CSS/main.json | 7 ++ 4 files changed, 118 insertions(+) create mode 100644 src/Library/demos/Styling with CSS/main.blp create mode 100644 src/Library/demos/Styling with CSS/main.css create mode 100644 src/Library/demos/Styling with CSS/main.js create mode 100644 src/Library/demos/Styling with CSS/main.json diff --git a/src/Library/demos/Styling with CSS/main.blp b/src/Library/demos/Styling with CSS/main.blp new file mode 100644 index 000000000..893cb5574 --- /dev/null +++ b/src/Library/demos/Styling with CSS/main.blp @@ -0,0 +1,83 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: "Styling with CSS"; + description: "Change the appearence of widgets"; + + Box { + orientation: vertical; + halign: center; + + Label { + // Set the name property to style using an id selector #css_text + name: "css_text"; + label: _("This widget is styled with an id selector"); + margin-bottom: 12; + } + + Label { + // Set styles to style using class selector .css_text + styles ["css_text"] + label: _("This widget is styled with a class selector"); + margin-bottom: 12; + } + + Label basic_label { + // Open the Code panel to see how + label: _("Classes can be applied programmatically"); + margin-bottom: 12; + } + + Box { + name: "linked_box"; + margin-top: 24; + styles ["linked"] + halign: center; + + Button { + icon-name: "stop-large-symbolic"; + } + + Button { + icon-name: "play-large-symbolic"; + } + + Button { + icon-name: "playlist-symbolic"; + } + } + + Label { + label: _("Documentation"); + margin-top: 24; + styles ["title-2"] + } + + Box { + orientation: horizontal; + halign: center; + margin-top: 24; + + LinkButton { + label: _("Overview"); + uri: "https://docs.gtk.org/gtk4/css-overview.html"; + } + + LinkButton { + label: _("Properties"); + uri: "https://docs.gtk.org/gtk4/css-properties.html"; + } + + LinkButton { + label: _("Style Classes"); + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/style-classes.html"; + } + + LinkButton { + label: _("Named Colors"); + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/named-colors.html"; + } + } + } +} diff --git a/src/Library/demos/Styling with CSS/main.css b/src/Library/demos/Styling with CSS/main.css new file mode 100644 index 000000000..9cc5c5ea7 --- /dev/null +++ b/src/Library/demos/Styling with CSS/main.css @@ -0,0 +1,25 @@ +#css_text { + color: @blue_1; /* Adwaita Named Color */ +} + +.css_text { + color: @green_1; /* Adwaita Named Color */ +} + +.my_custom_class { + color: @red_1; + font-weight: bold; + text-decoration: underline; +} + +#linked_box > :hover:first-child { + background-color: @destructive_bg_color; +} + +#linked_box > :hover:nth-child(2) { + background-color: @success_bg_color; +} + +#linked_box > :hover:last-child { + background-color: @accent_bg_color; +} diff --git a/src/Library/demos/Styling with CSS/main.js b/src/Library/demos/Styling with CSS/main.js new file mode 100644 index 000000000..c37bbcf48 --- /dev/null +++ b/src/Library/demos/Styling with CSS/main.js @@ -0,0 +1,3 @@ +const basic_label = workbench.builder.get_object("basic_label"); + +basic_label.add_css_class("css_text"); diff --git a/src/Library/demos/Styling with CSS/main.json b/src/Library/demos/Styling with CSS/main.json new file mode 100644 index 000000000..a6ec954a3 --- /dev/null +++ b/src/Library/demos/Styling with CSS/main.json @@ -0,0 +1,7 @@ +{ + "name": "Styling with CSS", + "category": "user_interface", + "description": "Change the appearence of widgets", + "panels": ["ui", "style", "preview"], + "autorun": true +} From e806f328aa2c004ddfcb3b651b197ff3c97ca6b5 Mon Sep 17 00:00:00 2001 From: niko bazylev <42851684+bazylevnik0@users.noreply.github.com> Date: Wed, 14 Jun 2023 15:24:44 +0300 Subject: [PATCH 019/116] Library: Drawing Area, reduce dependencies (#327) --- src/Library/demos/Drawing Area/main.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js index ecbf1ece4..c22efb677 100644 --- a/src/Library/demos/Drawing Area/main.js +++ b/src/Library/demos/Drawing Area/main.js @@ -1,6 +1,4 @@ import Cairo from "cairo"; -import Gtk from "gi://Gtk?version=4.0"; -Gtk.init(); const drawingArea = workbench.builder.get_object("drawing_area"); const scaleRotate = workbench.builder.get_object("scale"); From 612c0b7ee3e934f4a96b648b642ef735dec53714 Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Thu, 15 Jun 2023 03:07:45 +0530 Subject: [PATCH 020/116] library: Add SpinButton entry (#312) * libary: Add SpinButton entry * Spin Button: Add link to tutorial * Spin Button: Changes from review * Spin Button: Translated strings * Spin Button: Add comments for clarity --- src/Library/demos/Spin Button/main.blp | 71 +++++++++++++++++++++++++ src/Library/demos/Spin Button/main.js | 38 +++++++++++++ src/Library/demos/Spin Button/main.json | 10 ++++ 3 files changed, 119 insertions(+) create mode 100644 src/Library/demos/Spin Button/main.blp create mode 100644 src/Library/demos/Spin Button/main.js create mode 100644 src/Library/demos/Spin Button/main.json diff --git a/src/Library/demos/Spin Button/main.blp b/src/Library/demos/Spin Button/main.blp new file mode 100644 index 000000000..48a85d976 --- /dev/null +++ b/src/Library/demos/Spin Button/main.blp @@ -0,0 +1,71 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Spin Button"); + description: _("Let users choose a precise numerical value"); + + Box { + orientation: vertical; + spacing: 12; + + Label { + label: _("Select Time"); + styles ["title-4"] + } + Box{ + halign: center; + spacing: 6; + + SpinButton hours { + halign: center; + orientation: vertical; + wrap: true; + value: 0; + climb-rate: 1; + adjustment: + Adjustment { + lower: 0; + upper: 23; + step-increment: 1; + value: 0; + }; + } + Label { + label: ":"; + } + SpinButton minutes { + halign: center; + orientation: vertical; + wrap: true; + climb-rate: 1; + adjustment: + Adjustment { + lower: 0; + upper: 59; + step-increment: 1; + value: 0; + }; + } + } + + Box { + orientation: vertical; + + LinkButton { + label: "Tutorial"; + uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/spin_button.html"; + } + + LinkButton { + label: "API Reference"; + uri: "https://docs.gtk.org/gtk4/class.SpinButton.html"; + } + + LinkButton { + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/controls/spin-buttons.html"; + } + } + } +} diff --git a/src/Library/demos/Spin Button/main.js b/src/Library/demos/Spin Button/main.js new file mode 100644 index 000000000..03cffdc63 --- /dev/null +++ b/src/Library/demos/Spin Button/main.js @@ -0,0 +1,38 @@ +import Gtk from "gi://Gtk"; +const hours = workbench.builder.get_object("hours"); +const minutes = workbench.builder.get_object("minutes"); + +hours.text = "00"; +minutes.text = "00"; + +hours.connect("value-changed", () => { + console.log(tellTime(hours, minutes)); +}); + +hours.connect("output", () => { + const value = hours.adjustment.value; + const text = value.toString().padStart(2, "0"); + hours.text = text; + return true; +}); + +minutes.connect("output", () => { + const value = minutes.adjustment.value; + const text = value.toString().padStart(2, "0"); + minutes.text = text; + return true; +}); + +minutes.connect("value-changed", () => { + console.log(tellTime(hours, minutes)); +}); + +// This only works for one direction +// Add any extra logic to account for wrapping in both directions +minutes.connect("wrapped", () => { + hours.spin(Gtk.SpinType["SPIN_STEP_FORWARD"], 1); +}); + +function tellTime(hours, minutes) { + return `The time selected is ${hours.text}:${minutes.text}`; +} diff --git a/src/Library/demos/Spin Button/main.json b/src/Library/demos/Spin Button/main.json new file mode 100644 index 000000000..4b6834d2b --- /dev/null +++ b/src/Library/demos/Spin Button/main.json @@ -0,0 +1,10 @@ +{ + "name": "Spin Button", + "category": "controls", + "description": "Let users choose a precise numerical value", + "panels": [ + "ui", + "preview" + ], + "autorun": true +} From c99a39fa22d1507ef45fef8629c799cf2a9730dd Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Thu, 15 Jun 2023 04:48:36 +0530 Subject: [PATCH 021/116] library: Add AdwBanner entry (#313) * library: Add AdwBanner entry * Banner: Translate strings --- src/Library/demos/Banner/main.blp | 48 ++++++++++++++++++++++++++++++ src/Library/demos/Banner/main.js | 23 ++++++++++++++ src/Library/demos/Banner/main.json | 10 +++++++ 3 files changed, 81 insertions(+) create mode 100644 src/Library/demos/Banner/main.blp create mode 100644 src/Library/demos/Banner/main.js create mode 100644 src/Library/demos/Banner/main.json diff --git a/src/Library/demos/Banner/main.blp b/src/Library/demos/Banner/main.blp new file mode 100644 index 000000000..d34039f1a --- /dev/null +++ b/src/Library/demos/Banner/main.blp @@ -0,0 +1,48 @@ +using Gtk 4.0; +using Adw 1; + +Box { + orientation: vertical; + + Adw.Banner banner { + button-label: _("Troubleshoot"); + title: _("An error occurred: Could not resolve host"); + revealed: true; + } + + Adw.ToastOverlay overlay { + Adw.StatusPage { + title: _("Banner"); + description: _("A bar with contextual information"); + vexpand: true; + + Box { + orientation: vertical; + halign: center; + + Button button_show_banner { + halign: center; + label: _("Show Banner"); + + styles ["pill"] + } + + Box { + margin-top: 24; + margin-bottom: 24; + orientation: vertical; + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.Banner.html"; + } + + LinkButton { + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/feedback/banners.html"; + } + } + } + } + } +} diff --git a/src/Library/demos/Banner/main.js b/src/Library/demos/Banner/main.js new file mode 100644 index 000000000..040c318c4 --- /dev/null +++ b/src/Library/demos/Banner/main.js @@ -0,0 +1,23 @@ +import Adw from "gi://Adw"; + +const banner = workbench.builder.get_object("banner"); +const overlay = workbench.builder.get_object("overlay"); +const button_show_banner = workbench.builder.get_object("button_show_banner"); + +function alert() { + const toast = new Adw.Toast({ + title: "Troubleshoot successful!", + timeout: 3, + }); + + overlay.add_toast(toast); +} + +banner.connect("button-clicked", () => { + alert(); + banner.revealed = false; +}); + +button_show_banner.connect("clicked", () => { + banner.revealed = true; +}); diff --git a/src/Library/demos/Banner/main.json b/src/Library/demos/Banner/main.json new file mode 100644 index 000000000..9b8c26228 --- /dev/null +++ b/src/Library/demos/Banner/main.json @@ -0,0 +1,10 @@ +{ + "name": "Banner", + "category": "feedback", + "description": "A bar with contextual information", + "panels": [ + "ui", + "preview" + ], + "autorun": true +} From b07d6e7814f25ef0aeef58e86d84650a856819cc Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Thu, 15 Jun 2023 17:50:01 -0500 Subject: [PATCH 022/116] library: add Carousel entry (#326) * library: add carousel entry * make carousel functional * add main.vala * fix horizontal orientation * fix alignment on prefsrow * main.vala: fix formatting * Apply suggestions from code review Fix formatting and remove stuff Co-authored-by: Andy Holmes <1265208+andyholmes@users.noreply.github.com> * main.blp: fix spacing * remove quotes --------- Co-authored-by: wlhunter Co-authored-by: Andy Holmes <1265208+andyholmes@users.noreply.github.com> --- src/Library/demos/Carousel/main.blp | 77 ++++++++++++++++++++++++++++ src/Library/demos/Carousel/main.js | 62 ++++++++++++++++++++++ src/Library/demos/Carousel/main.json | 8 +++ src/Library/demos/Carousel/main.vala | 68 ++++++++++++++++++++++++ 4 files changed, 215 insertions(+) create mode 100644 src/Library/demos/Carousel/main.blp create mode 100644 src/Library/demos/Carousel/main.js create mode 100644 src/Library/demos/Carousel/main.json create mode 100644 src/Library/demos/Carousel/main.vala diff --git a/src/Library/demos/Carousel/main.blp b/src/Library/demos/Carousel/main.blp new file mode 100644 index 000000000..74fd3d69f --- /dev/null +++ b/src/Library/demos/Carousel/main.blp @@ -0,0 +1,77 @@ +using Gtk 4.0; +using Adw 1; + +Box root_box { + orientation: vertical; + valign: center; + halign: center; + spacing: 12; + + Adw.Carousel carousel { + halign: center; + valign: center; + allow-long-swipes: true; + allow-scroll-wheel: true; + spacing: 12; + + Adw.StatusPage { + title: _("Carousel"); + description: _("Swipe or Scroll to Navigate"); + icon-name: "carousel-symbolic"; + + LinkButton { + label: "API Reference"; + uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1.3/class.Carousel.html"; + margin-top: 12; + } + + } + + Adw.Clamp { + maximum-size: 700; + halign: center; + valign: center; + + Adw.PreferencesGroup { + styles ["boxed-list"] + + Adw.ComboRow orientation_row { + title: _("Carousel Orientation"); + model: StringList { + strings [_("Horizontal"), _("Vertical")] + }; + } + + Adw.ComboRow indicator_row { + title: _("Page Indicators"); + model: StringList { + strings [_("Dots"), _("Lines")] + }; + } + + Adw.ActionRow { + title: _("Scroll Wheel"); + activatable-widget: sw_switch; + + Gtk.Switch sw_switch { + valign: center; + } + } + + Adw.ActionRow { + title: _("Long Swipes"); + activatable-widget: ls_switch; + + Gtk.Switch ls_switch { + valign: center; + } + } + } + } + + Adw.StatusPage { + title: _("Last Page"); + description: _("You've reached the end of the carousel."); + } + } +} diff --git a/src/Library/demos/Carousel/main.js b/src/Library/demos/Carousel/main.js new file mode 100644 index 000000000..40c10d250 --- /dev/null +++ b/src/Library/demos/Carousel/main.js @@ -0,0 +1,62 @@ +import Gtk from "gi://Gtk"; +import Adw from "gi://Adw"; + +const root_box = workbench.builder.get_object("root_box"); +const carousel = workbench.builder.get_object("carousel"); +const ls_switch = workbench.builder.get_object("ls_switch"); +const sw_switch = workbench.builder.get_object("sw_switch"); +const indicator_row = workbench.builder.get_object("indicator_row"); +const orientation_row = workbench.builder.get_object("orientation_row"); +let indicators; + +carousel.connect("page-changed", () => { + console.log("Page Changed"); +}); + +// Scroll Wheel Switch +sw_switch.active = carousel.allow_scroll_wheel; + +sw_switch.connect("notify::active", () => { + carousel.allow_scroll_wheel = sw_switch.active; +}); + +// Long Swipe Switch +ls_switch.active = carousel.allow_long_swipes; + +ls_switch.connect("notify::active", () => { + carousel.allow_long_swipes = ls_switch.active; +}); + +if (indicator_row.get_selected() === 0) { + indicators = new Adw.CarouselIndicatorDots({ carousel: carousel }); +} else { + indicators = new Adw.CarouselIndicatorLines({ carousel: carousel }); +} + +indicators.orientation = carousel.orientation; +root_box.append(indicators); + +indicator_row.connect("notify::selected-item", () => { + root_box.remove(indicators); + + if (indicator_row.get_selected() === 0) { + indicators = new Adw.CarouselIndicatorDots({ carousel: carousel }); + } else { + indicators = new Adw.CarouselIndicatorLines({ carousel: carousel }); + } + + indicators.orientation = carousel.orientation; + root_box.append(indicators); +}); + +orientation_row.connect("notify::selected-item", () => { + if (orientation_row.get_selected() === 0) { + root_box.orientation = Gtk.Orientation.VERTICAL; + carousel.orientation = Gtk.Orientation.HORIZONTAL; + indicators.orientation = Gtk.Orientation.HORIZONTAL; + } else { + root_box.orientation = Gtk.Orientation.HORIZONTAL; + carousel.orientation = Gtk.Orientation.VERTICAL; + indicators.orientation = Gtk.Orientation.VERTICAL; + } +}); diff --git a/src/Library/demos/Carousel/main.json b/src/Library/demos/Carousel/main.json new file mode 100644 index 000000000..8060ccba6 --- /dev/null +++ b/src/Library/demos/Carousel/main.json @@ -0,0 +1,8 @@ +{ + "name": "Carousel", + "category": "user_interface", + "description": "A paginated scrolling widget", + "panels": ["code", "ui", "preview"], + "autorun": false + } + \ No newline at end of file diff --git a/src/Library/demos/Carousel/main.vala b/src/Library/demos/Carousel/main.vala new file mode 100644 index 000000000..569039fc3 --- /dev/null +++ b/src/Library/demos/Carousel/main.vala @@ -0,0 +1,68 @@ +#! /usr/bin/env -S vala workbench.vala --pkg gtk4 --pkg libadwaita-1 + +public void main() { + var root_box = workbench.builder.get_object("root_box") as Gtk.Box; + var carousel = workbench.builder.get_object("carousel") as Adw.Carousel; + var ls_switch = workbench.builder.get_object("ls_switch") as Gtk.Switch; + var sw_switch = workbench.builder.get_object("sw_switch") as Gtk.Switch; + var indicator_row = workbench.builder.get_object("indicator_row") as Adw.ComboRow; + var orientation_row = workbench.builder.get_object("orientation_row") as Adw.ComboRow; + Adw.CarouselIndicatorDots? dots = null; + Adw.CarouselIndicatorLines? lines = null; + + carousel.page_changed.connect(() => { + debug("Page Changed"); + }); + + // Scroll Wheel Switch + sw_switch.active = carousel.allow_scroll_wheel; + sw_switch.notify["active"].connect(() => { + carousel.allow_scroll_wheel = sw_switch.active; + }); + + // Long Swipe Switch + ls_switch.active = carousel.allow_long_swipes; + ls_switch.notify["active"].connect(() => { + carousel.allow_long_swipes = ls_switch.active; + }); + + if (indicator_row.get_selected() == 0) { + dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; + dots.orientation = carousel.orientation; + root_box.append(dots); + } else { + lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; + lines.orientation = carousel.orientation; + root_box.append(lines); + } + + indicator_row.notify["selected-item"].connect(() => { + if (indicator_row.get_selected() == 0) { + root_box.remove(lines); + dots = new Adw.CarouselIndicatorDots() { carousel = carousel }; + dots.orientation = carousel.orientation; + root_box.append(dots); + } else { + root_box.remove(dots); + lines = new Adw.CarouselIndicatorLines() { carousel = carousel }; + lines.orientation = carousel.orientation; + root_box.append(lines); + } + }); + + orientation_row.notify["selected-item"].connect(() => { + if (orientation_row.get_selected() == 0) { + root_box.orientation = Gtk.Orientation.VERTICAL; + carousel.orientation = Gtk.Orientation.HORIZONTAL; + dots.orientation = Gtk.Orientation.HORIZONTAL; + lines.orientation = Gtk.Orientation.HORIZONTAL; + } else { + root_box.orientation = Gtk.Orientation.HORIZONTAL; + carousel.orientation = Gtk.Orientation.VERTICAL; + dots.orientation = Gtk.Orientation.VERTICAL; + lines.orientation = Gtk.Orientation.VERTICAL; + } + }); +} + + From 4ea75beb18d45450485f6afa12648f891cd43ef6 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Fri, 16 Jun 2023 01:07:54 +0200 Subject: [PATCH 023/116] library: Do not use async handlers (#339) Signal handlers have semantic around return values. Let's not encourage developers to use async signal handlers as it can lead to hard to debug issues. Also some other improvements --- src/Library/demos/Avatar/main.js | 16 +++--- src/Library/demos/Banner/main.blp | 18 +++---- src/Library/demos/Box/main.blp | 6 +-- src/Library/demos/Box/main.js | 62 ++++++++++++---------- src/Library/demos/Color Dialog/main.js | 14 ++--- src/Library/demos/Color Dialog/main.json | 2 +- src/Library/demos/Custom Widget/main.js | 4 +- src/Library/demos/Dialogs/main.js | 4 +- src/Library/demos/Dialogs/main.vala | 8 ++- src/Library/demos/Font Dialog/main.js | 16 +++--- src/Library/demos/Grid/main.blp | 14 +++-- src/Library/demos/HTTP Image/main.js | 2 +- src/Library/demos/Text Colors/main.js | 2 +- src/Library/demos/Text View/main.js | 4 +- src/Library/demos/Web View/main.js | 2 +- src/Library/demos/WebSocket Client/main.js | 49 +++++++++-------- src/Library/demos/Welcome/main.js | 28 ++++------ src/Library/demos/Welcome/main.vala | 28 ++++------ src/about.js | 1 + src/init.js | 1 + 20 files changed, 135 insertions(+), 146 deletions(-) diff --git a/src/Library/demos/Avatar/main.js b/src/Library/demos/Avatar/main.js index e8615d18d..f766b5853 100644 --- a/src/Library/demos/Avatar/main.js +++ b/src/Library/demos/Avatar/main.js @@ -18,12 +18,12 @@ const dialog = new Gtk.FileDialog({ default_filter: filter, }); -button.connect("clicked", async () => { - try { - const file = await dialog.open(workbench.window, null); - const texture = Gdk.Texture.new_from_file(file); - avatar_image.set_custom_image(texture); - } catch (err) { - logError(err); - } +button.connect("clicked", () => { + onClicked().catch(logError); }); + +async function onClicked() { + const file = await dialog.open(workbench.window, null); + const texture = Gdk.Texture.new_from_file(file); + avatar_image.set_custom_image(texture); +} diff --git a/src/Library/demos/Banner/main.blp b/src/Library/demos/Banner/main.blp index d34039f1a..4a4e3d249 100644 --- a/src/Library/demos/Banner/main.blp +++ b/src/Library/demos/Banner/main.blp @@ -1,16 +1,16 @@ using Gtk 4.0; using Adw 1; -Box { - orientation: vertical; - - Adw.Banner banner { - button-label: _("Troubleshoot"); - title: _("An error occurred: Could not resolve host"); - revealed: true; - } +Adw.ToastOverlay overlay { + Box { + orientation: vertical; + + Adw.Banner banner { + button-label: _("Troubleshoot"); + title: _("An error occurred: Could not resolve host"); + revealed: true; + } - Adw.ToastOverlay overlay { Adw.StatusPage { title: _("Banner"); description: _("A bar with contextual information"); diff --git a/src/Library/demos/Box/main.blp b/src/Library/demos/Box/main.blp index 7511a5351..d4621290f 100644 --- a/src/Library/demos/Box/main.blp +++ b/src/Library/demos/Box/main.blp @@ -129,7 +129,7 @@ Adw.Clamp { spacing: 36; ToggleButton halign_toggle_fill{ label: _("fill"); - active:true; + active: true; } ToggleButton halign_toggle_start{ label: _("start"); @@ -163,7 +163,7 @@ Adw.Clamp { ToggleButton valign_toggle_fill{ label: _("fill"); - active:true; + active: true; styles ["rotate"] } ToggleButton valign_toggle_start{ @@ -186,7 +186,7 @@ Adw.Clamp { ScrolledWindow { hexpand: true; - vexpand:true; + vexpand: true; has-frame: true; layout { diff --git a/src/Library/demos/Box/main.js b/src/Library/demos/Box/main.js index 803d48479..536cb1d91 100644 --- a/src/Library/demos/Box/main.js +++ b/src/Library/demos/Box/main.js @@ -6,34 +6,9 @@ const button_prepend = workbench.builder.get_object("button_prepend"); const button_remove = workbench.builder.get_object("button_remove"); let count = 0; -button_append.connect("clicked", () => { - const label = new Gtk.Label({ - name: "card", - label: `Item ${count + 1}`, - css_classes: ["card"], - }); - interactive_box.append(label); - count++; -}); - -button_prepend.connect("clicked", () => { - const label = new Gtk.Label({ - name: "card", - label: `Item ${count + 1}`, - css_classes: ["card"], - }); - interactive_box.prepend(label); - count++; -}); - -button_remove.connect("clicked", () => { - if (count) { - interactive_box.remove(interactive_box.get_last_child()); - count--; - } else { - console.log("The box has no child widgets to remove"); - } -}); +button_append.connect("clicked", append); +button_prepend.connect("clicked", prepend); +button_remove.connect("clicked", remove); const toggle_orientation_horizontal = workbench.builder.get_object( "toggle_orientation_horizontal", @@ -103,3 +78,34 @@ valign_toggle_center.connect("toggled", () => { valign_toggle_end.connect("toggled", () => { if (valign_toggle_end.active) interactive_box.valign = Gtk.Align.END; }); + +function append() { + const label = new Gtk.Label({ + name: "card", + label: `Item ${count + 1}`, + css_classes: ["card"], + }); + interactive_box.append(label); + count++; +} + +function prepend() { + const label = new Gtk.Label({ + name: "card", + label: `Item ${count + 1}`, + css_classes: ["card"], + }); + interactive_box.prepend(label); + count++; +} + +function remove() { + if (count) { + interactive_box.remove(interactive_box.get_last_child()); + count--; + } else { + console.log("The box has no child widget to remove"); + } +} + +append(); diff --git a/src/Library/demos/Color Dialog/main.js b/src/Library/demos/Color Dialog/main.js index fb1655aa2..44a9f4e46 100644 --- a/src/Library/demos/Color Dialog/main.js +++ b/src/Library/demos/Color Dialog/main.js @@ -31,11 +31,11 @@ const dialog_custom = new Gtk.ColorDialog({ with_alpha: false, }); -custom_button.connect("clicked", async () => { - try { - const color = await dialog_custom.choose_rgba(workbench.window, null, null); - console.log(`Custom Button: The color selected is ${color.to_string()}`); - } catch (err) { - logError(err); - } +custom_button.connect("clicked", () => { + onClicked().catch(logError); }); + +async function onClicked() { + const color = await dialog_custom.choose_rgba(workbench.window, null, null); + console.log(`Custom Button: The color selected is ${color.to_string()}`); +} diff --git a/src/Library/demos/Color Dialog/main.json b/src/Library/demos/Color Dialog/main.json index 1e5116993..a0d1cb7c0 100644 --- a/src/Library/demos/Color Dialog/main.json +++ b/src/Library/demos/Color Dialog/main.json @@ -2,6 +2,6 @@ "name": "Color Dialog", "category": "controls", "description": "Show a dialog to select color", - "panels": ["ui", "preview"], + "panels": ["code", "ui", "preview"], "autorun": true } diff --git a/src/Library/demos/Custom Widget/main.js b/src/Library/demos/Custom Widget/main.js index 7c2c58891..d1462b848 100644 --- a/src/Library/demos/Custom Widget/main.js +++ b/src/Library/demos/Custom Widget/main.js @@ -1,7 +1,5 @@ import GObject from "gi://GObject"; -import Gtk from "gi://Gtk?version=4.0"; - -Gtk.init(); +import Gtk from "gi://Gtk"; const AwesomeButton = GObject.registerClass( { diff --git a/src/Library/demos/Dialogs/main.js b/src/Library/demos/Dialogs/main.js index 3828f34df..c0733afd6 100644 --- a/src/Library/demos/Dialogs/main.js +++ b/src/Library/demos/Dialogs/main.js @@ -4,12 +4,12 @@ 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); +const window = workbench.window; function createConfirmationDialog() { const dialog = new Adw.MessageDialog({ heading: "Replace File?", - body: 'A file named "example.png" already exists. Do you want to replace it?', + body: "A file named `example.png` already exists. Do you want to replace it?", close_response: "cancel", modal: true, transient_for: window, diff --git a/src/Library/demos/Dialogs/main.vala b/src/Library/demos/Dialogs/main.vala index 6d4e9aa68..31e847885 100644 --- a/src/Library/demos/Dialogs/main.vala +++ b/src/Library/demos/Dialogs/main.vala @@ -13,7 +13,7 @@ public void main() { 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; + Gtk.Window window = workbench.window; Adw.MessageDialog dialog = new Adw.MessageDialog (window, @@ -32,8 +32,7 @@ private void _create_confirmation_dialog (Gtk.Button button) { message("Selected \"%s\" response.\n", response); }); -dialog.present(); - + dialog.present(); } private void _create_error_dialog (Gtk.Button button) { @@ -54,8 +53,7 @@ private void _create_error_dialog (Gtk.Button button) { message("Selected \"%s\" response.\n", response); }); -dialog.present(); - + dialog.present(); } private void _create_advanced_dialog(Gtk.Button button) { diff --git a/src/Library/demos/Font Dialog/main.js b/src/Library/demos/Font Dialog/main.js index 166c1d83c..05318e5c4 100644 --- a/src/Library/demos/Font Dialog/main.js +++ b/src/Library/demos/Font Dialog/main.js @@ -32,15 +32,13 @@ const dialog_custom = new Gtk.FontDialog({ modal: true, }); +custom_button.connect("clicked", () => onClicked().catch(logError)); + async function onClicked() { - let result; - try { - result = await dialog_custom.choose_family(workbench.window, null, null); - } catch (err) { - logError(err); - return; - } + const result = await dialog_custom.choose_family( + workbench.window, + null, + null, + ); console.log(`Font Family: ${result.get_name()}`); } - -custom_button.connect("clicked", onClicked); diff --git a/src/Library/demos/Grid/main.blp b/src/Library/demos/Grid/main.blp index 72a902303..af1e61d0d 100644 --- a/src/Library/demos/Grid/main.blp +++ b/src/Library/demos/Grid/main.blp @@ -8,9 +8,9 @@ Adw.StatusPage { Box { halign: center; Grid { - Button button00 { + Button button00 { name: "button00"; - layout { row: 0; column: 0; } + layout { row: 0; column: 0; } hexpand: false; Image { icon-name: "circle-outline-thick-symbolic"; @@ -18,7 +18,7 @@ Adw.StatusPage { } styles ['cell'] } - + Button button01 { name: "button01"; layout { row: 0; column: 1; } @@ -28,6 +28,7 @@ Adw.StatusPage { } styles ['cell'] } + Button button02 { name: "button02"; layout { row: 0; column: 2; } @@ -37,6 +38,7 @@ Adw.StatusPage { } styles ['cell'] } + Button button10 { name: "button10"; layout { row: 1; column: 0; } @@ -46,6 +48,7 @@ Adw.StatusPage { } styles ['cell'] } + Button button11 { name: "button11"; layout { row: 1; column: 1; } @@ -55,6 +58,7 @@ Adw.StatusPage { } styles ['cell'] } + Button button12 { name: "button12"; layout { row: 1; column: 2; } @@ -64,6 +68,7 @@ Adw.StatusPage { } styles ['cell'] } + Button button20 { name: "button20"; layout { row: 2; column: 0; } @@ -73,6 +78,7 @@ Adw.StatusPage { } styles ['cell'] } + Button button21 { name: "button21"; layout { row: 2; column: 1; } @@ -82,6 +88,7 @@ Adw.StatusPage { } styles ['cell'] } + Button button22 { name: "button22"; layout { row: 2; column: 2; } @@ -94,4 +101,3 @@ Adw.StatusPage { } } } - diff --git a/src/Library/demos/HTTP Image/main.js b/src/Library/demos/HTTP Image/main.js index 07d8cba08..747019414 100644 --- a/src/Library/demos/HTTP Image/main.js +++ b/src/Library/demos/HTTP Image/main.js @@ -1,4 +1,4 @@ -import Soup from "gi://Soup?version=3.0"; +import Soup from "gi://Soup"; import GLib from "gi://GLib"; import Gio from "gi://Gio"; import GdkPixbuf from "gi://GdkPixbuf"; diff --git a/src/Library/demos/Text Colors/main.js b/src/Library/demos/Text Colors/main.js index b88ca5ee0..7a873e398 100644 --- a/src/Library/demos/Text Colors/main.js +++ b/src/Library/demos/Text Colors/main.js @@ -1,6 +1,6 @@ // Pango is a text layout library. It can be used for e.g. formatting text // https://gjs-docs.gnome.org/pango10~1.0/ -import Pango from "gi://Pango?version=1.0"; +import Pango from "gi://Pango"; const label = workbench.builder.get_object("label"); label.connect("notify::label", updateAttributes); diff --git a/src/Library/demos/Text View/main.js b/src/Library/demos/Text View/main.js index d5f2193e4..1175c31a1 100644 --- a/src/Library/demos/Text View/main.js +++ b/src/Library/demos/Text View/main.js @@ -1,4 +1,3 @@ -import Gtk from "gi://Gtk"; import Gdk from "gi://Gdk"; const textview = workbench.builder.get_object("textview"); @@ -11,12 +10,11 @@ const paste = workbench.builder.get_object("paste"); const display = Gdk.Display.get_default(); const clipboard = display.get_clipboard(); -const buffer = new Gtk.TextBuffer(); +const { buffer } = textview; buffer.set_text( "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel elit scelerisque mauris pellentesque pulvinar. Molestie nunc non blandit massa enim nec dui nunc. Turpis in eu mi bibendum neque egestas congue quisque. Sed velit dignissim sodales ut. Massa tempor nec feugiat nisl pretium fusce id velit. Vitae congue eu consequat ac felis donec et. Ultrices sagittis orci a scelerisque purus semper eget duis at. Habitant morbi tristique senectus et netus et malesuada fames ac. Vitae aliquet nec ullamcorper sit amet risus nullam. Tortor at auctor urna nunc. Eget velit aliquet sagittis id consectetur purus. Libero id faucibus nisl tincidunt eget. Nunc consequat interdum varius sit amet mattis. Enim facilisis gravida neque convallis. Dolor sit amet consectetur adipiscing elit ut aliquam purus. Venenatis tellus in metus vulputate eu scelerisque.Sit amet luctus venenatis lectus magna fringilla urna. Eget nunc lobortis mattis aliquam. Urna duis convallis convallis tellus id interdum velit. Fames ac turpis egestas maecenas. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Eget est lorem ipsum dolor sit amet consectetur. Eget nunc lobortis mattis aliquam faucibus purus in. Iaculis nunc sed augue lacus viverra vitae. Euismod elementum nisi quis eleifend. Et pharetra pharetra massa massa ultricies mi quis. Volutpat odio facilisis mauris sit. Enim ut tellus elementum sagittis vitae et. Volutpat sed cras ornare arcu dui vivamus arcu felis. Arcu vitae elementum curabitur vitae nunc sed. Porttitor rhoncus dolor purus non enim. Scelerisque fermentum dui faucibus in ornare quam viverra. Amet purus gravida quis blandit turpis cursus. Faucibus pulvinar elementum integer enim. Aenean et tortor at risus viverra adipiscing at in.Vitae ultricies leo integer malesuada nunc vel. Quis lectus nulla at volutpat diam ut. Donec ac odio tempor orci dapibus ultrices. Justo eget magna fermentum iaculis eu non diam. Mauris cursus mattis molestie a iaculis at erat pellentesque. Phasellus faucibus scelerisque eleifend donec pretium. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Habitant morbi tristique senectus et netus. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Nulla malesuada pellentesque elit eget. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed. Sollicitudin ac orci phasellus egestas tellus. In hendrerit gravida rutrum quisque non tellus orci ac. Suspendisse ultrices gravida dictum fusce ut placerat. Varius morbi enim nunc faucibus. Tellus elementum sagittis vitae et leo duis ut diam. Velit dignissim sodales ut eu sem integer. Sapien eget mi proin sed libero enim. Odio euismod lacinia at quis risus. Tellus at urna condimentum mattis pellentesque id.", -1, ); -textview.buffer = buffer; function handleCopy() { if (buffer.get_has_selection()) { diff --git a/src/Library/demos/Web View/main.js b/src/Library/demos/Web View/main.js index a680dad6f..bb87d9f7b 100644 --- a/src/Library/demos/Web View/main.js +++ b/src/Library/demos/Web View/main.js @@ -1,4 +1,4 @@ -import WebKit from "gi://WebKit?version=6.0"; +import WebKit from "gi://WebKit"; import GObject from "gi://GObject"; import GLib from "gi://GLib"; diff --git a/src/Library/demos/WebSocket Client/main.js b/src/Library/demos/WebSocket Client/main.js index 07e52d934..285e2d796 100644 --- a/src/Library/demos/WebSocket Client/main.js +++ b/src/Library/demos/WebSocket Client/main.js @@ -1,4 +1,4 @@ -import Soup from "gi://Soup?version=3.0"; +import Soup from "gi://Soup"; import GLib from "gi://GLib"; import Gio from "gi://Gio"; @@ -55,39 +55,38 @@ function send(message) { console.log("sent:", message); } -button_connect.connect("clicked", async () => { +button_connect.connect("clicked", () => { + connect().catch(logError); +}); + +button_disconnect.connect("clicked", () => { + connection.close(Soup.WebsocketCloseCode.NORMAL, null); +}); + +button_send.connect("clicked", () => { + const message = entry_message.get_text(); + send(message); +}); + +async function connect() { const session = new Soup.Session(); const message = new Soup.Message({ method: "GET", uri: GLib.Uri.parse(entry_url.get_text(), GLib.UriFlags.NONE), }); - try { - // https://gjs-docs.gnome.org/soup30/soup.session#method-websocket_connect_async - connection = await session.websocket_connect_async( - message, - null, - [], - null, - null, - ); - } catch (err) { - logError(err); - return; - } + // https://gjs-docs.gnome.org/soup30/soup.session#method-websocket_connect_async + connection = await session.websocket_connect_async( + message, + null, + [], + null, + null, + ); connection.connect("closed", onClosed); connection.connect("error", onError); connection.connect("message", onMessage); onOpen(); -}); - -button_disconnect.connect("clicked", () => { - connection.close(Soup.WebsocketCloseCode.NORMAL, null); -}); - -button_send.connect("clicked", () => { - const message = entry_message.get_text(); - send(message); -}); +} diff --git a/src/Library/demos/Welcome/main.js b/src/Library/demos/Welcome/main.js index 98be413a3..c09ef7c82 100644 --- a/src/Library/demos/Welcome/main.js +++ b/src/Library/demos/Welcome/main.js @@ -1,8 +1,7 @@ -import Gtk from "gi://Gtk?version=4.0"; +import Gtk from "gi://Gtk"; +import Adw from "gi://Adw"; -Gtk.init(); - -const subtitle_box = workbench.builder.get_object("subtitle"); +const box = workbench.builder.get_object("subtitle"); // https://gjs-docs.gnome.org/gtk40/gtk.button const button = new Gtk.Button({ @@ -11,27 +10,20 @@ const button = new Gtk.Button({ css_classes: ["suggested-action"], }); button.connect("clicked", greet); -subtitle_box.append(button); +box.append(button); console.log("Welcome to Workbench!"); function greet() { - // https://gjs-docs.gnome.org/gtk40/gtk.messagedialog - const dialog = new Gtk.MessageDialog({ - text: "Hello World!", + // https://gjs-docs.gnome.org/adw1~1/adw.messagedialog + const dialog = new Adw.MessageDialog({ + body: "Hello World!", transient_for: workbench.window, - modal: true, - // https://gjs-docs.gnome.org/gtk40/gtk.buttonstype - buttons: Gtk.ButtonsType.OK, }); - /* - * Gtk.MessageDialog inherits from Gtk.Dialog - * which possess a "response" signal - * https://gjs-docs.gnome.org/gtk40/gtk.dialog#signal-response - */ - dialog.connect("response", () => { - dialog.close(); + dialog.add_response("ok", "OK"); + dialog.connect("response", (self, response) => { + console.log(response); }); dialog.present(); diff --git a/src/Library/demos/Welcome/main.vala b/src/Library/demos/Welcome/main.vala index c4864b763..fd94651f5 100644 --- a/src/Library/demos/Welcome/main.vala +++ b/src/Library/demos/Welcome/main.vala @@ -3,37 +3,29 @@ public void main () { Gtk.init (); - var main = workbench.builder.get_object ("welcome") as Gtk.Box; + var box = workbench.builder.get_object ("subtitle") as Gtk.Box; // https://valadoc.org/gtk4/Gtk.Button.html var button = new Gtk.Button () { label = "Press me", - margin_top = 24 + margin_top = 6, + css_classes = {"suggested-action"} }; button.clicked.connect (greet); - main.append (button); + box.append (button); stdout.printf ("Welcome to Workbench!\n"); } public void greet () { - // https://valadoc.org/gtk4/Gtk.MessageDialog.html - var dialog = new Gtk.MessageDialog ( - workbench.window, - Gtk.DialogFlags.MODAL, - Gtk.MessageType.INFO, - // https://valadoc.org/gtk4/Gtk.ButtonsType.html - Gtk.ButtonsType.OK, - "Hello World!" + // https://valadoc.org/libadwaita-1/Adw.MessageDialog.html + var dialog = new Adw.MessageDialog ( + workbench.window, null, "Hello World!" ); - /* - * Gtk.MessageDialog inherits from Gtk.Dialog - * which possess a "response" signal - * https://valadoc.org/gtk4/Gtk.Dialog.response.html - */ - dialog.response.connect (() => { - dialog.close (); + dialog.add_response ("ok", "OK"); + dialog.response.connect ((self, response) => { + stdout.printf ("%s\n", response); }); dialog.present (); diff --git a/src/about.js b/src/about.js index e85aa8594..0315b0f80 100644 --- a/src/about.js +++ b/src/about.js @@ -62,6 +62,7 @@ ${getBlueprintVersion()} "Karol Lademan https://github.com/karl0d", "Nasah Kuma https://www.mantohnasah.com/", "Jose Hunter https://github.com/halfmexican/", + "Akunne Pascal https://github.com/Kodecheff", // Add yourself as // "John Doe", // or diff --git a/src/init.js b/src/init.js index 269074933..1f6eb288f 100644 --- a/src/init.js +++ b/src/init.js @@ -4,6 +4,7 @@ import "gi://Adw?version=1"; import "gi://Vte?version=3.91"; import "gi://Soup?version=3.0"; import "gi://WebKit?version=6.0"; +import "gi://Pango?version=1.0"; import Gio from "gi://Gio"; import Xdp from "gi://Xdp"; From ed3c64eb67e03b22118629df238d713ba6291e04 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam <96797205+SoNiC-HeRE@users.noreply.github.com> Date: Sat, 17 Jun 2023 22:41:50 +0530 Subject: [PATCH 024/116] library: Adds Color Picker entry (#335) --- src/Library/demos/Color Picker/main.blp | 25 ++++++++++++++++++++++++ src/Library/demos/Color Picker/main.js | 23 ++++++++++++++++++++++ src/Library/demos/Color Picker/main.json | 7 +++++++ 3 files changed, 55 insertions(+) create mode 100644 src/Library/demos/Color Picker/main.blp create mode 100644 src/Library/demos/Color Picker/main.js create mode 100644 src/Library/demos/Color Picker/main.json diff --git a/src/Library/demos/Color Picker/main.blp b/src/Library/demos/Color Picker/main.blp new file mode 100644 index 000000000..635413c98 --- /dev/null +++ b/src/Library/demos/Color Picker/main.blp @@ -0,0 +1,25 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Color Picker"); + description: _("Pick color from anywhere on-screen"); + margin-top: 48; + + Box { + orientation: vertical; + halign: center; + + Button button { + label: _("Select Color"); + margin-bottom: 42; + halign: center; + styles ["suggested-action", "pill"] + } + + LinkButton { + label: "API Reference"; + uri: "https://libportal.org/method.Portal.pick_color.html"; + } + } +} diff --git a/src/Library/demos/Color Picker/main.js b/src/Library/demos/Color Picker/main.js new file mode 100644 index 000000000..a9b5a4b8a --- /dev/null +++ b/src/Library/demos/Color Picker/main.js @@ -0,0 +1,23 @@ +import Gdk from "gi://Gdk"; +import Gio from "gi://Gio"; +import Xdp from "gi://Xdp"; +import XdpGtk from "gi://XdpGtk4"; + +Gio._promisify(Xdp.Portal.prototype, "pick_color", "pick_color_finish"); + +const portal = new Xdp.Portal(); +const parent = XdpGtk.parent_new_gtk(workbench.window); +const button = workbench.builder.get_object("button"); + +async function onClicked() { + // result is a GVariant of the form (ddd), containing red, green and blue components in the range [0,1] + const result = await portal.pick_color(parent, null); + const [r, g, b] = result.deepUnpack(); + + const color = new Gdk.RGBA({ red: r, green: g, blue: b, alpha: 1.0 }); + console.log(`Selected color is: ${color.to_string()}`); +} + +button.connect("clicked", () => { + onClicked().catch(logError); +}); diff --git a/src/Library/demos/Color Picker/main.json b/src/Library/demos/Color Picker/main.json new file mode 100644 index 000000000..ddcd83089 --- /dev/null +++ b/src/Library/demos/Color Picker/main.json @@ -0,0 +1,7 @@ +{ + "name": "Color Picker", + "category": "platform", + "description": "Pick color from anywhere on-screen", + "panels": ["code", "preview"], + "autorun": true +} From 412cfa270faa4c3e4c2a05c6bd7c048922f160d7 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam <96797205+SoNiC-HeRE@users.noreply.github.com> Date: Sat, 17 Jun 2023 22:49:44 +0530 Subject: [PATCH 025/116] library: Add Email Entry (#330) --- src/Library/demos/Email/main.blp | 30 +++++++++++++++++++++++++ src/Library/demos/Email/main.js | 37 +++++++++++++++++++++++++++++++ src/Library/demos/Email/main.json | 7 ++++++ 3 files changed, 74 insertions(+) create mode 100644 src/Library/demos/Email/main.blp create mode 100644 src/Library/demos/Email/main.js create mode 100644 src/Library/demos/Email/main.json diff --git a/src/Library/demos/Email/main.blp b/src/Library/demos/Email/main.blp new file mode 100644 index 000000000..c70c9727a --- /dev/null +++ b/src/Library/demos/Email/main.blp @@ -0,0 +1,30 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Email"); + description: _("Trigger an email"); + margin-top: 48; + + Box { + orientation: vertical; + halign: center; + + Entry entry { + placeholder-text: _("Enter your email address"); + margin-bottom: 18; + } + + Button button { + label: _("Send Email"); + margin-bottom: 42; + halign: center; + styles ["suggested-action", "pill"] + } + + LinkButton { + label: "API Reference"; + uri: "https://libportal.org/method.Portal.compose_email.html"; + } + } +} diff --git a/src/Library/demos/Email/main.js b/src/Library/demos/Email/main.js new file mode 100644 index 000000000..55822b5b9 --- /dev/null +++ b/src/Library/demos/Email/main.js @@ -0,0 +1,37 @@ +import Xdp from "gi://Xdp"; +import XdpGtk from "gi://XdpGtk4"; +import Gio from "gi://Gio"; + +Gio._promisify(Xdp.Portal.prototype, "compose_email", "compose_email_finish"); + +const portal = new Xdp.Portal(); +const parent = XdpGtk.parent_new_gtk(workbench.window); + +const button = workbench.builder.get_object("button"); +const entry = workbench.builder.get_object("entry"); + +async function onClicked() { + const email_address = entry.get_text(); + + const success = await portal.compose_email( + parent, + [email_address], // addresses + null, // cc + null, // bcc + "Email from Workbench", // subject + "Hello World!", // body + null, // attachments + Xdp.EmailFlags.NONE, // flags + null, // cancellable + ); + + if (success) { + console.log("Success"); + } else { + console.log("Failure, verify that you have an email application."); + } +} + +button.connect("clicked", () => { + onClicked().catch(logError); +}); diff --git a/src/Library/demos/Email/main.json b/src/Library/demos/Email/main.json new file mode 100644 index 000000000..7d26cf566 --- /dev/null +++ b/src/Library/demos/Email/main.json @@ -0,0 +1,7 @@ +{ + "name": "Email", + "category": "platform", + "description": "Trigger an email", + "panels": ["code", "preview"], + "autorun": true +} From 329657015bc1868f542353639ce1921e874a7964 Mon Sep 17 00:00:00 2001 From: AkshayWarrier <58233418+AkshayWarrier@users.noreply.github.com> Date: Sun, 18 Jun 2023 01:17:26 +0530 Subject: [PATCH 026/116] library: Update Progress Bar demo (#324) * library: Update Progress Bar demo * Progress Bar: Reset the pulse progress bar --- src/Library/demos/Progress Bar/main.js | 88 +++++++++++++++----------- 1 file changed, 51 insertions(+), 37 deletions(-) diff --git a/src/Library/demos/Progress Bar/main.js b/src/Library/demos/Progress Bar/main.js index 147b93b67..20554c95d 100644 --- a/src/Library/demos/Progress Bar/main.js +++ b/src/Library/demos/Progress Bar/main.js @@ -1,48 +1,62 @@ +import Adw from "gi://Adw"; + const first_bar = workbench.builder.get_object("first"); const second_bar = workbench.builder.get_object("second"); const play = workbench.builder.get_object("play"); const progress_tracker = workbench.builder.get_object("progress_tracker"); -function handleProgress() { - //Counters for respective progress bars and for progress tracker label - let counter = 0.3; - let counter_two = 0.25; - let timeLeft = 12; - - //Display a Countdown - const countdownInterval = setInterval(() => { - timeLeft--; - if (timeLeft === 0) { - clearInterval(countdownInterval); - progress_tracker.label = ""; - console.log("Operation Complete!"); - } else { - progress_tracker.label = `${timeLeft} seconds remaining…`; - } - }, 1000); +const target = Adw.PropertyAnimationTarget.new(first_bar, "fraction"); + +const animation = new Adw.TimedAnimation({ + widget: first_bar, + value_from: 0.2, + value_to: 1, + duration: 11000, + easing: Adw.Easing["LINEAR"], + target: target, +}); + +animation.connect("done", () => { + animation.reset(); +}); + +play.connect("clicked", () => { + animation.play(); + updateTracker(); + pulseProgress(); +}); - //Advance the first progress bar by 0.1 value every 1.5 seconds - const intervalId_one = setInterval(() => { - first_bar.set_fraction(counter); - counter += 0.1; - if (counter > 1.0) { - clearInterval(intervalId_one); - counter = 0.2; - first_bar.set_fraction(counter); +function pulseProgress() { + let counter = 0; + // Time after which progress bar is pulsed + const pulse_period = 500; + // Duration of animation + const duration = 10000; + const increment = pulse_period / duration; + const interval = setInterval(() => { + if (counter >= 1.0) { + clearInterval(interval); + counter = 0; + second_bar.fraction = 0; + return; } - }, 1500); - //Advance the second progress bar by 0.25 value every 3 seconds - const intervalId_second = setInterval(() => { second_bar.pulse(); - second_bar.set_fraction(counter_two); - counter_two += 0.25; - if (counter_two > 1.0) { - clearInterval(intervalId_second); - counter_two = 0; - second_bar.set_fraction(counter_two); - } - }, 3000); + counter += increment; + }, pulse_period); } -play.connect("clicked", handleProgress); +function updateTracker() { + let time = 10; + const interval = setInterval(() => { + if (time === 0) { + progress_tracker.label = ""; + clearInterval(interval); + console.log("Operation complete!"); + return; + } + + progress_tracker.label = `${time} seconds remaining…`; + time -= 1; + }, 1000); +} From cf3e70740fc23b636943ed058d587090ec54ef6b Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam <96797205+SoNiC-HeRE@users.noreply.github.com> Date: Sun, 18 Jun 2023 17:31:35 +0530 Subject: [PATCH 027/116] library: Add Wallpaper entry (#333) --- src/Library/demos/Wallpaper/main.blp | 25 ++++++++++++++++ src/Library/demos/Wallpaper/main.js | 34 ++++++++++++++++++++++ src/Library/demos/Wallpaper/main.json | 7 +++++ src/Library/demos/Wallpaper/wallpaper.png | Bin 0 -> 16882 bytes src/about.js | 5 +++- 5 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 src/Library/demos/Wallpaper/main.blp create mode 100644 src/Library/demos/Wallpaper/main.js create mode 100644 src/Library/demos/Wallpaper/main.json create mode 100644 src/Library/demos/Wallpaper/wallpaper.png diff --git a/src/Library/demos/Wallpaper/main.blp b/src/Library/demos/Wallpaper/main.blp new file mode 100644 index 000000000..a910b6985 --- /dev/null +++ b/src/Library/demos/Wallpaper/main.blp @@ -0,0 +1,25 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Wallpaper"); + description: _("Request to set the user desktop background image"); + margin-top: 48; + + Box { + orientation: vertical; + halign: center; + + Button button { + label: _("Set Wallpaper"); + margin-bottom: 42; + halign: center; + styles ["suggested-action", "pill"] + } + + LinkButton { + label: "API Reference"; + uri: "https://libportal.org/method.Portal.set_wallpaper.html"; + } + } +} diff --git a/src/Library/demos/Wallpaper/main.js b/src/Library/demos/Wallpaper/main.js new file mode 100644 index 000000000..d2a93dd1b --- /dev/null +++ b/src/Library/demos/Wallpaper/main.js @@ -0,0 +1,34 @@ +import Gio from "gi://Gio"; +import Xdp from "gi://Xdp"; +import XdpGtk from "gi://XdpGtk4"; + +const portal = new Xdp.Portal(); +const parent = XdpGtk.parent_new_gtk(workbench.window); +const button = workbench.builder.get_object("button"); + +const file = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path( + "Library/demos/Wallpaper/wallpaper.png", +); + +Gio._promisify(Xdp.Portal.prototype, "set_wallpaper", "set_wallpaper_finish"); + +async function onClicked() { + const success = await portal.set_wallpaper( + parent, + file.get_uri(), + Xdp.WallpaperFlags.PREVIEW | + Xdp.WallpaperFlags.BACKGROUND | + Xdp.WallpaperFlags.LOCKSCREEN, + null, + ); + + if (success) { + console.log("Wallpaper set successfully"); + } else { + console.log("Could not set wallpaper"); + } +} + +button.connect("clicked", () => { + onClicked().catch(logError); +}); diff --git a/src/Library/demos/Wallpaper/main.json b/src/Library/demos/Wallpaper/main.json new file mode 100644 index 000000000..820fa6038 --- /dev/null +++ b/src/Library/demos/Wallpaper/main.json @@ -0,0 +1,7 @@ +{ + "name": "Wallpaper", + "category": "platform", + "description": "Request to set the user desktop background image", + "panels": ["code", "preview"], + "autorun": true +} diff --git a/src/Library/demos/Wallpaper/wallpaper.png b/src/Library/demos/Wallpaper/wallpaper.png new file mode 100644 index 0000000000000000000000000000000000000000..ae33fbced422aeeb5284e7d1b8850cbc1a38a01f GIT binary patch literal 16882 zcmeHP4Omn48XuC9CKo@-&!UA{rjC8E!B|X1P~_qSWjgSC+d0F<$L2N!F{HFm$->mQ zYKWFMB@iw0>*59SAtSQ1TR}G~HN8d73atnvvHSm@opW~1&e_=pecb0h=(A_%<9*-% z`~KdK^MBtn-IO#ZE^yG8K|CHWFn(6-JRUFTL-^_E53W2M_rq=Q^$nU5Z-|ed$h#Aq z07}0*cz)pM!ys@-Iqv7@&x2fr;4=&yLmK!QX*;@dTWvA2=5K_2UJC z?^5uQfaANtcLn$uH#pX+1IO^so!H-5;0Q`4zT@ImNqkADSQHv21^gmOm_ih;5X<@E zFoiTyAqoR}`R#RT)NilT0)NUeTp>39_;eusDPv4bQhZDd-)u1%j2S48ms^_uymD5< zw0lo4OFsJYJ<*SDlq2PHMidpvAG@b0>4A?2RVj8X?&_}^v-R$gai@-6y40v^K6N@( z6QGG6a*MYzd*wXa^TU4q+O50fy^_0-234{U6x*q>atWmW1| z|2&;KX@1I&Ww)L_b+E4bz3g4%HtL5aY~fFj?muJu@^RBE=M+8t;CGEtw;BTLV?&=_ zJVRueymxS*r6K5cK>f+1mTkkc=7|Q_>f~n|Ck**_fBXE#n^RVmb`88#FyPQnCH0H_ z4O8L|A3Jh==m+(Iix(f4qCqD<_bV(L{OR_wTlehWa>lPM?I+df<=01ilWJX){{5Ao z{ASJ7Y#Mv%(vVSSl7FsgJbCi7HNSMsexv^W##5H2(w}r4AU1Q2>J(dwYPLde$_&*a zCLJ1@n`wp)<3&x)HEZ?hsEw~f(~MclkhYWcA$%jE4AIC`B9%D?U16M+XF-$m=BV{~ z>H0_{Wa^YbQMn2rAQQD|`MH@HSyn}^G6a*W0LSpMFochh*wU3DDImULOcs#kC-loSt5l@;EGv!zz(bg; zH4DX|B4K8xkji1T%~%D5;0m#FSk(XCTz!u0hLOn zh&Ac6p?dML$`H7|0x{{0hyptd(~878U6@Q@Kn!|;REmfNx(GxjK%}S`73U)Q3itqLBezbxz+&Wg-3`4K!8|)8X|NOsZ@p{x=2hEqF2l`Su(Z2oyJUU z8Y(nrrC~Q9;EL#^cx8wr)UhgdB`HH|GXMr<$ZTU)cCM3DZOlZIZCZ$?I9whflFK8d zVc`*BGP%r2v;ehOK_o(%SWU(5K({D>F#uRCj8h;0yAEto#8^>VQ znd3CWh@}#rk0pgdt9O`S)viJjOiv)oaZA5Ko0W!w>VbzVaoxxg3KFRnMfEbhK#L#| z0;$XpDTtIAqymFXtPRsgL_~scqD!}$47MDt1&vMvI0CFdcw$d3{shcXkI<=eR-n)e z05E|lTp*Ua0w%-_7Q&iASR5r}U=oE9P>KxTb6f+(3)Dg(SqyQ^VA=T{|KPs(9ajLN z`xfyD-#)nd;PMFppNRXSs}C-p5b%k(FS>p+xCS}fDKrc0f^tB!WLfY&=)rh{lV+=D zh$c!S!lI+(GvlTu)W1IX3b^j4ONfi*ZR~#^?8gV1XQf(syt{_Oj~{PW=_qh9z!tBX z5zsnd*j-}(FW;Ki$m8*O@v+hB-1Fakp|pIa7*#m8<-+}AtL6lbm3_L6m7>|$}*RCazIl^1sKL)>&HZoOw=r@9^jq*kj0}&h+KcQWJzYz7(z+N z;{p6kkq2CV)hU6598tvSC{M)=<|gELy(YYXl? zP+4(+?lW$6AsD#F+(j2*+B+|Ay82i`3&kOxI2^I<(G!)yA0ClXy~k-G;Z{6%Jkf6G zI3n+vY4t)mo5t?f>m5PkrA`DHclOXqOL60^)a%P&onk4VWWtdw``naTCM6~iFS_5Hl9NN>a&#GSq|Axo%KT1M#*TfLe?2@t9mr`0>Q)9fS1xS_(NzHmHOdN2 zt$l8-eSWch{^2}G;=J#A#~WrK7H4x^?ZDEGqigFo)t9U;UQ+OakLs`~>b*L^GH5g1 z;6&BB@z+jmsA?Vem+tpV4$?4S7fpx(2Es#jB5pYjPKGWR_!EasPAv}4sD00r+j@UB z@+{#H_v_$h;rcio$L?5mIiyj{NU*-zxi!0^p~bpxd%-7LWrSnNNTCTNlyC%qGn{Bd z9u$KsIP`glb+NKZr~h{Fm$Ao|er+2)rO;Cd{m$q>!^*19E~;Mo*@@=tw$jA66VawI z9&!su$B}8iKm+rYM8|Q+?uP^An-f|RZcmV;eEsbY1+x-b+-Evm-znBtZJ;j+ce$h% zO|!DO4WdJ*vlB=D04-MBglQT!M^eAX>Y=sW)6o~ zMuCO+cwl~HQXO*NowRm~J z0#6DrsLHmrA4h8Qmk)2QPpO^>vXFH>4@t&pF84ExT<+XIx)xR6{`$>_Dwd`Gsfr|K zb*nUOHODvEmrZ7^E~LsHvXRa33unAYW0FyF%~X?ju~wz7ck={i4=ql2kTt|RDr{p? zhJ2BzX;ajHZ$EILxIK>f7$7zFK`0rVz90hSZ>#v_s(r+{pefDyRR!JuV%8LO+vCkw zK7Djqd+yI?HOjKuALkdRF)z8>5n(mX9TQy+k(%dL?o(-wcfN8*Ld)pFDnaU+V4X+>3@S?09GINiHin6VyT*tdh+qR3;4_dTi6vs)xfcCT#eI#XOX+6gpkL^#c+_>fD5 zOHnUOPEGu%^%li7y+#9cp8l<`gCKU}2+CUS2MOfdl9*dv`OPIZxRXe642)HGfKV{T z22dMrq=2C#vsZUI4Ic=C>c{Nt@evs@UIYYMIom9NGF0@fHf(ML!$4<*;LdTemCYe8 znqgI=!91B|8bU(^b29@DnqP^0-Td&Ctw)_>LIMM*n@i3!bYW0bYzY7RY|T_qg_zo~ zlqPzDJ65KlbmV~sn|HdwxOZKYk*1mPI}a_u2Xr2=rnf2k^!#I@ z;p&_7TO~`Xu<0H{F~*a^6U7G`2Y=Me1_(gNbzQ2v@!CLFU86iQ9<5nOAJh|15k>%b z3XzwFj^1AhsxT7}ufoGMc}JD72QFFVSj?m9&Y~{K3Th8qd=m3<#uJq$i<1?)ff1~f z3yhjYyTHi`V}&I=NZnY0CzR!8Ef4Mmn4GL|n?r$}p$4HJX$AEHH!CQqY?(|##0e%h ztD7Q6=*F;uc7f9mFsoQ?#bZRB_*KcxCR0CZF1y(%6I)-<*wYHDyNxwL4>raz7n={C z>kj|sxU};ojTfAhUw9*DN=3)FyNm70HLd&d&Rw|a_L9p+#7izrHW)n)s9GDG@owaf zL&xC!)w#{~v74st!+-(q+Xt6%Ow59d-PKm}UTg|P+ce$FfUkEL?)MtNUMwEe(6Rx(zXJ9+0rbUnuFo-| z)AVFEHX}Sa3Um{bzK;d}reJ6a{4D@=`v1r2lUPx=Nt;d^7SOlEJ{jd>{&XE|ju88U zMl&z3>-ythK7sECeTzRh4Rh-375E_U@$6b}e{syQIXe&49d2K9nhZl9g}~Uxe_7Fk zA-2FjzTXWVrqSM6_Zz5eRugqFf8M_Bq)*C;OmKt=CCNI3A= zytun+kMMok?5r2VW>8dohvT?-$?o=(Z;bDvr`K}Kd!14?WQ1`dVwhdNOa> zm9HbxAqcS6`JCKv%nBd0zQ-UKxE{`{A6Qdy!G{0fiMCI2cjDy_d_b$@uWno8Pwdpe zTJ9v`ckrzQ%5 z2{-HiXKTY8Q8^(ZUFD{mbW*Z(liXl(vI55t(Z|{nvR?GA#q8_XT|3=gfXU7JC-&=o zK~0oStj2K;KWLOJY3U~S9c", ], - artists: ["Tobias Bernard "], + artists: [ + "Tobias Bernard ", + "Jakub Steiner https://jimmac.eu", + ], }); dialog.add_credit_section(_("Contributors"), [ From 97c0707a5aa1cf75c158f8800bbb305056de4132 Mon Sep 17 00:00:00 2001 From: halfmexican <103920890+halfmexican@users.noreply.github.com> Date: Mon, 19 Jun 2023 14:23:28 -0500 Subject: [PATCH 028/116] library: add DropDown entry (#323) --- src/Library/demos/Drop Down/main.blp | 50 +++++++++++++++++ src/Library/demos/Drop Down/main.js | 77 +++++++++++++++++++++++++++ src/Library/demos/Drop Down/main.json | 7 +++ src/Library/demos/Drop Down/main.vala | 66 +++++++++++++++++++++++ 4 files changed, 200 insertions(+) create mode 100644 src/Library/demos/Drop Down/main.blp create mode 100644 src/Library/demos/Drop Down/main.js create mode 100644 src/Library/demos/Drop Down/main.json create mode 100644 src/Library/demos/Drop Down/main.vala diff --git a/src/Library/demos/Drop Down/main.blp b/src/Library/demos/Drop Down/main.blp new file mode 100644 index 000000000..b19100ae0 --- /dev/null +++ b/src/Library/demos/Drop Down/main.blp @@ -0,0 +1,50 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Drop Down"); + description: _("A widget to choose an item from a list of options"); + + Box { + orientation: vertical; + halign: center; + valign: center; + + Label { + label: _("From a StringList model"); + margin-top: 24; + margin-bottom: 24; + styles["heading"] + } + + DropDown drop_down { + enable-search: true; + model: StringList { + strings ["Grapes", "Apples", "Bananas", "Tomatoes"] + }; + } + + Label { + label: _("From a ListStore model"); + margin-top: 24; + margin-bottom: 24; + styles["heading"] + } + + DropDown advanced_drop_down { + enable-search: true; + } + + LinkButton { + label: "API Reference"; + uri: "https://docs.gtk.org/gtk4/class.DropDown.html"; + margin-top: 12; + } + + LinkButton { + label: "Human Interface Guidelines"; + uri: "https://developer.gnome.org/hig/patterns/controls/drop-downs.html"; + margin-top: 12; + } + } +} diff --git a/src/Library/demos/Drop Down/main.js b/src/Library/demos/Drop Down/main.js new file mode 100644 index 000000000..73e30b324 --- /dev/null +++ b/src/Library/demos/Drop Down/main.js @@ -0,0 +1,77 @@ +import Gtk from "gi://Gtk"; +import GObject from "gi://GObject"; +import Gio from "gi://Gio"; + +const drop_down = workbench.builder.get_object("drop_down"); +const advanced_drop_down = workbench.builder.get_object("advanced_drop_down"); + +drop_down.connect("notify::selected-item", () => { + const selected_item = drop_down.selected_item.get_string(); + console.log(selected_item); +}); + +const expression = new Gtk.ClosureExpression( + GObject.TYPE_STRING, + (obj) => obj.string, + null, +); + +drop_down.expression = expression; + +const KeyValuePair = GObject.registerClass( + { + Properties: { + key: GObject.ParamSpec.string( + "key", + null, + null, + GObject.ParamFlags.READWRITE, + "", + ), + value: GObject.ParamSpec.string( + "value", + "Value", + "Value", + GObject.ParamFlags.READWRITE, + "", + ), + }, + }, + class KeyValuePair extends GObject.Object {}, +); + +const model = new Gio.ListStore({ item_type: KeyValuePair }); + +model.splice(0, 0, [ + new KeyValuePair({ key: "lion", value: "Lion" }), + new KeyValuePair({ key: "tiger", value: "Tiger" }), + new KeyValuePair({ key: "leopard", value: "Leopard" }), + new KeyValuePair({ key: "elephant", value: "Elephant" }), + new KeyValuePair({ key: "giraffe", value: "Giraffe" }), + new KeyValuePair({ key: "cheetah", value: "Cheetah" }), + new KeyValuePair({ key: "zebra", value: "Zebra" }), + new KeyValuePair({ key: "panda", value: "Panda" }), + new KeyValuePair({ key: "koala", value: "Koala" }), + new KeyValuePair({ key: "crocodile", value: "Crocodile" }), + new KeyValuePair({ key: "hippo", value: "Hippopotamus" }), + new KeyValuePair({ key: "monkey", value: "Monkey" }), + new KeyValuePair({ key: "rhino", value: "Rhinoceros" }), + new KeyValuePair({ key: "kangaroo", value: "Kangaroo" }), + new KeyValuePair({ key: "dolphin", value: "Dolphin" }), +]); + +const list_store_expression = Gtk.PropertyExpression.new( + KeyValuePair, + null, + "value", +); + +advanced_drop_down.expression = list_store_expression; +advanced_drop_down.model = model; + +advanced_drop_down.connect("notify::selected-item", () => { + const selected_item = advanced_drop_down.selected_item; + if (selected_item) { + console.log(selected_item.key); + } +}); diff --git a/src/Library/demos/Drop Down/main.json b/src/Library/demos/Drop Down/main.json new file mode 100644 index 000000000..5ca09e057 --- /dev/null +++ b/src/Library/demos/Drop Down/main.json @@ -0,0 +1,7 @@ +{ + "name": "Drop Down", + "category": "controls", + "description": "A widget to choose an item from a list of options", + "panels": ["ui", "code", "preview"], + "autorun": true +} diff --git a/src/Library/demos/Drop Down/main.vala b/src/Library/demos/Drop Down/main.vala new file mode 100644 index 000000000..978f37e8e --- /dev/null +++ b/src/Library/demos/Drop Down/main.vala @@ -0,0 +1,66 @@ +#! /usr/bin/env -S vala workbench.vala --pkg gtk4 --pkg libadwaita-1 --pkg gio-2.0 + +using Gtk; +using GLib; + +// Define our class for our custom model +public class KeyValuePair : Object { + public string key { get; set; default = ""; } + public string value { get; set; default = ""; } + + public KeyValuePair(string key, string value) { + this.key = key; + this.value = value; + } +} + +public void main() { + + Gtk.DropDown drop_down = workbench.builder.get_object("drop_down") as Gtk.DropDown; + Gtk.DropDown advanced_drop_down = workbench.builder.get_object("advanced_drop_down") as Gtk.DropDown; + + drop_down.notify["selected"].connect(() => { + var selected_index = drop_down.get_selected(); + if (selected_index != -1) { + var model = drop_down.get_model() as Gtk.StringList; + var selected_item = model.get_string(selected_index); + print("%s\n", selected_item); + } + }); + + // Create the model + var model = new GLib.ListStore(typeof(KeyValuePair)); + + model.splice(0, 0, { + new KeyValuePair("lion", "Lion"), + new KeyValuePair("tiger", "Tiger"), + new KeyValuePair("leopard", "Leopard"), + new KeyValuePair("elephant", "Elephant"), + new KeyValuePair("giraffe", "Giraffe"), + new KeyValuePair("cheetah", "Cheetah"), + new KeyValuePair("zebra", "Zebra"), + new KeyValuePair("panda", "Panda"), + new KeyValuePair("koala", "Koala"), + new KeyValuePair("crocodile", "Crocodile"), + new KeyValuePair("hippo", "Hippopotamus"), + new KeyValuePair("monkey", "Monkey"), + new KeyValuePair("rhino", "Rhinoceros"), + new KeyValuePair("kangaroo", "Kangaroo"), + new KeyValuePair("dolphin", "Dolphin") + }); + + // Create expression for displaying the value in the advanced drop-down + var expression = new Gtk.PropertyExpression(typeof(KeyValuePair), null, "value"); + + // Set the model and expression for the advanced drop-down + advanced_drop_down.set_expression(expression); + advanced_drop_down.set_model(model); + + // Handle selected item change in the advanced drop-down + advanced_drop_down.notify["selected-item"].connect(() => { + var selected_item = advanced_drop_down.get_selected_item() as KeyValuePair; + if (selected_item != null) { + print("%s\n", selected_item.key); + } + }); +} From a9519cc92f75020074804589826b6327f28774b8 Mon Sep 17 00:00:00 2001 From: Sonny Piers Date: Mon, 19 Jun 2023 21:24:14 +0200 Subject: [PATCH 029/116] overrides: GTypeName can be computed from the class --- src/overrides.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/overrides.js b/src/overrides.js index c00341255..2f355f86b 100644 --- a/src/overrides.js +++ b/src/overrides.js @@ -29,13 +29,14 @@ export function overrides() { // https://gitlab.gnome.org/GNOME/glib/-/issues/282#note_662735 // https://gitlab.gnome.org/GNOME/glib/-/issues/2336 // https://gitlab.gnome.org/GNOME/glib/-/issues/667 - GObject.registerClass = function registerWorkbenchClass(klass, ...args) { - const { GTypeName } = klass; + GObject.registerClass = function registerWorkbenchClass(...args) { + const klass = args[0]; + const GTypeName = klass.GTypeName || args[1]?.name; if (GTypeName) { types[GTypeName] = increment(GTypeName); klass.GTypeName = GTypeName + types[GTypeName]; } - return registerClass(klass, ...args); + return registerClass(...args); }; // This is used to tweak `workbench.template` in order to set the //