From 779ec440e209b01d3a44f9377af78653d197fdc8 Mon Sep 17 00:00:00 2001 From: Aylur Date: Thu, 7 Nov 2024 02:40:47 +0000 Subject: example: applauncher --- docs/guide/getting-started/supported-languages.md | 3 + examples/js/.gitignore | 1 + examples/js/applauncher/README.md | 5 ++ examples/js/applauncher/app.ts | 9 +++ examples/js/applauncher/style.scss | 1 + examples/js/applauncher/widget/Applauncher.scss | 45 ++++++++++++++ examples/js/applauncher/widget/Applauncher.tsx | 73 +++++++++++++++++++++++ examples/js/media-player/.gitignore | 2 - examples/js/notifications/.gitignore | 2 - examples/js/simple-bar/.gitignore | 2 - lang/gjs/src/gtk3/astalify.ts | 2 +- 11 files changed, 138 insertions(+), 7 deletions(-) create mode 100644 examples/js/applauncher/README.md create mode 100644 examples/js/applauncher/app.ts create mode 100644 examples/js/applauncher/style.scss create mode 100644 examples/js/applauncher/widget/Applauncher.scss create mode 100644 examples/js/applauncher/widget/Applauncher.tsx delete mode 100644 examples/js/media-player/.gitignore delete mode 100644 examples/js/notifications/.gitignore delete mode 100644 examples/js/simple-bar/.gitignore diff --git a/docs/guide/getting-started/supported-languages.md b/docs/guide/getting-started/supported-languages.md index 55ea6b2..eacd1da 100644 --- a/docs/guide/getting-started/supported-languages.md +++ b/docs/guide/getting-started/supported-languages.md @@ -24,6 +24,9 @@ Examples: - [Notification Popups](https://github.com/Aylur/astal/tree/main/examples/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) +![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/user-attachments/assets/891e9706-74db-4505-bd83-c3628d7b4fd0) diff --git a/examples/js/.gitignore b/examples/js/.gitignore index 261d669..d53b85b 100644 --- a/examples/js/.gitignore +++ b/examples/js/.gitignore @@ -2,5 +2,6 @@ tsconfig.json env.d.ts dist/ +node_modules/ package.json package-lock.json diff --git a/examples/js/applauncher/README.md b/examples/js/applauncher/README.md new file mode 100644 index 0000000..682adf1 --- /dev/null +++ b/examples/js/applauncher/README.md @@ -0,0 +1,5 @@ +# Applauncher + +![launcher](https://github.com/user-attachments/assets/2695e3bb-dff4-478a-b392-279fe638bfd3) + +Using [Apps](https://aylur.github.io/astal/guide/libraries/apps). diff --git a/examples/js/applauncher/app.ts b/examples/js/applauncher/app.ts new file mode 100644 index 0000000..d6c9e1c --- /dev/null +++ b/examples/js/applauncher/app.ts @@ -0,0 +1,9 @@ +import { App } from "astal/gtk3" +import style from "./style.scss" +import Applauncher from "./widget/Applauncher" + +App.start({ + instanceName: "launcher", + css: style, + main: Applauncher, +}) diff --git a/examples/js/applauncher/style.scss b/examples/js/applauncher/style.scss new file mode 100644 index 0000000..ba13eed --- /dev/null +++ b/examples/js/applauncher/style.scss @@ -0,0 +1 @@ +@use "./widget/Applauncher.scss" diff --git a/examples/js/applauncher/widget/Applauncher.scss b/examples/js/applauncher/widget/Applauncher.scss new file mode 100644 index 0000000..86c5e87 --- /dev/null +++ b/examples/js/applauncher/widget/Applauncher.scss @@ -0,0 +1,45 @@ +@use "sass:string"; + +@function gtkalpha($c, $a) { + @return string.unquote("alpha(#{$c},#{$a})"); +} + +// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss +$fg-color: #{"@theme_fg_color"}; +$bg-color: #{"@theme_bg_color"}; + +window#launcher { + all: unset; + + box.Applauncher { + background-color: $bg-color; + border-radius: 11px; + margin: 1rem; + padding: .8rem; + box-shadow: 2px 3px 8px 0 gtkalpha(black, .4); + + entry { + margin-bottom: .8rem; + } + + button { + min-width: 0; + min-height: 0; + padding: .5rem; + + icon { + font-size: 3em; + margin-right: .3rem; + } + + label.name { + font-weight: bold; + font-size: 1.1em + } + + label.description { + color: gtkalpha($fg-color, .8); + } + } + } +} diff --git a/examples/js/applauncher/widget/Applauncher.tsx b/examples/js/applauncher/widget/Applauncher.tsx new file mode 100644 index 0000000..d92b5e3 --- /dev/null +++ b/examples/js/applauncher/widget/Applauncher.tsx @@ -0,0 +1,73 @@ +import Apps from "gi://AstalApps" +import { App, Astal, Gdk, Gtk } from "astal/gtk3" +import { Variable } from "astal" + +const MAX_ITEMS = 8 + +function AppButton({ app }: { app: Apps.Application }) { + return +} + +export default function Applauncher() { + const apps = new Apps.Apps() + const list = Variable(apps.get_list().slice(0, MAX_ITEMS)) + const hide = () => App.get_window("launcher")!.hide() + + function search(text: string) { + list.set(apps.fuzzy_query(text).slice(0, MAX_ITEMS)) + } + + return list.set(apps.get_list().slice(0, MAX_ITEMS))} + onKeyPressEvent={function (self, event: Gdk.Event) { + if (event.get_keyval()[1] === Gdk.KEY_Escape) + self.hide() + }}> + + + + + + search(text)} + /> + + {list(list => list.map(app => ( + + )))} + + l.length === 0)}> + + No match found + + + + + + + +} diff --git a/examples/js/media-player/.gitignore b/examples/js/media-player/.gitignore deleted file mode 100644 index 6850183..0000000 --- a/examples/js/media-player/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -@girs/ -node_modules/ \ No newline at end of file diff --git a/examples/js/notifications/.gitignore b/examples/js/notifications/.gitignore deleted file mode 100644 index 6850183..0000000 --- a/examples/js/notifications/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -@girs/ -node_modules/ \ No newline at end of file diff --git a/examples/js/simple-bar/.gitignore b/examples/js/simple-bar/.gitignore deleted file mode 100644 index 6850183..0000000 --- a/examples/js/simple-bar/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -@girs/ -node_modules/ \ No newline at end of file diff --git a/lang/gjs/src/gtk3/astalify.ts b/lang/gjs/src/gtk3/astalify.ts index 736ab17..b9621be 100644 --- a/lang/gjs/src/gtk3/astalify.ts +++ b/lang/gjs/src/gtk3/astalify.ts @@ -65,7 +65,7 @@ export default function astalify< get_click_through(): boolean { return this.clickThrough } set_click_through(clickThrough: boolean) { this.clickThrough = clickThrough } - declare __no_implicit_destroy: boolean + declare private __no_implicit_destroy: boolean get noImplicitDestroy(): boolean { return this.__no_implicit_destroy } set noImplicitDestroy(value: boolean) { this.__no_implicit_destroy = value } -- cgit v1.2.3