From 9e8634d892c559c5b44565a68bf35b13cbcb5572 Mon Sep 17 00:00:00 2001 From: Aylur Date: Thu, 16 Jan 2025 17:37:00 +0100 Subject: add: gtk3 ts popover example closes #224 closes #157 --- docs/guide/getting-started/supported-languages.md | 14 +++++++------- docs/guide/lua/examples.md | 2 +- docs/guide/typescript/examples.md | 8 ++++---- docs/guide/typescript/faq.md | 8 ++++++++ 4 files changed, 20 insertions(+), 12 deletions(-) (limited to 'docs/guide') diff --git a/docs/guide/getting-started/supported-languages.md b/docs/guide/getting-started/supported-languages.md index eacd1da..0dc3f62 100644 --- a/docs/guide/getting-started/supported-languages.md +++ b/docs/guide/getting-started/supported-languages.md @@ -18,16 +18,16 @@ The runtime is [GJS](https://gitlab.gnome.org/GNOME/gjs) and **not** nodejs Examples: -- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/js/simple-bar) +- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/simple-bar) ![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) -- [Notification Popups](https://github.com/Aylur/astal/tree/main/examples/js/notifications) +- [Notification Popups](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/notifications) ![notification-popups](https://github.com/user-attachments/assets/0df0eddc-5c74-4af0-a694-48dc8ec6bb44) -- [Applauncher](https://github.com/Aylur/astal/tree/main/examples/js/applauncher) +- [Applauncher](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/applauncher) ![launcher](https://github.com/user-attachments/assets/2695e3bb-dff4-478a-b392-279fe638bfd3) -- [Media Player](https://github.com/Aylur/astal/tree/main/examples/js/media-player) +- [Media Player](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/media-player) ![media-player](https://github.com/user-attachments/assets/891e9706-74db-4505-bd83-c3628d7b4fd0) ## Lua @@ -36,7 +36,7 @@ Lua is well-supported, but I would still recommend TypeScript, as Lua lacks a ty Examples: -- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/lua/simple-bar) +- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/gtk3/lua/simple-bar) ![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) ## Python @@ -47,7 +47,7 @@ However, you can still use python the OOP way [pygobject](https://pygobject.gnom Examples: -- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/py/simple-bar) +- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/gtk3/py/simple-bar) ![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) ## Vala @@ -58,7 +58,7 @@ using TypeScript or Lua over Vala as they are simpler to work with. Examples: -- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/vala/simple-bar) +- [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/gtk3/vala/simple-bar) ![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) ## C diff --git a/docs/guide/lua/examples.md b/docs/guide/lua/examples.md index be46b6e..c2dd30c 100644 --- a/docs/guide/lua/examples.md +++ b/docs/guide/lua/examples.md @@ -1,4 +1,4 @@ # Lua examples -## [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/lua/simple-bar) +## [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/gtk3/lua/simple-bar) ![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) diff --git a/docs/guide/typescript/examples.md b/docs/guide/typescript/examples.md index ec51e89..ff1d9a1 100644 --- a/docs/guide/typescript/examples.md +++ b/docs/guide/typescript/examples.md @@ -2,13 +2,13 @@ ## Gtk3 -### [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/js/simple-bar) +### [Simple Bar](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/simple-bar) ![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b) -### [Notification Popups](https://github.com/Aylur/astal/tree/main/examples/js/notifications) +### [Notification Popups](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/notifications) ![notification-popups](https://github.com/user-attachments/assets/0df0eddc-5c74-4af0-a694-48dc8ec6bb44) -### [Applauncher](https://github.com/Aylur/astal/tree/main/examples/js/applauncher) +### [Applauncher](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/applauncher) ![launcher](https://github.com/user-attachments/assets/2695e3bb-dff4-478a-b392-279fe638bfd3) -### [Media Player](https://github.com/Aylur/astal/tree/main/examples/js/media-player) +### [Media Player](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/media-player) ![media-player](https://github.com/user-attachments/assets/891e9706-74db-4505-bd83-c3628d7b4fd0) diff --git a/docs/guide/typescript/faq.md b/docs/guide/typescript/faq.md index 132900a..15a97e5 100644 --- a/docs/guide/typescript/faq.md +++ b/docs/guide/typescript/faq.md @@ -299,3 +299,11 @@ focusable set its keymode. /> ``` ::: + +## How to create a Popup + +In Gtk4 simply use Gtk's builtin [Popover](https://docs.gtk.org/gtk4/class.Popover.html). + +In Gtk3 you can create an [Astal.Window](https://aylur.github.io/libastal/astal3/class.Window.html) and handle click events. + +Checkout [examples/gtk3/js/popover](https://github.com/Aylur/astal/tree/main/examples/gtk3/js/popover) -- cgit v1.2.3