diff options
Diffstat (limited to 'examples/js')
| -rw-r--r-- | examples/js/.gitignore | 1 | ||||
| -rw-r--r-- | examples/js/applauncher/README.md | 5 | ||||
| -rw-r--r-- | examples/js/applauncher/app.ts | 9 | ||||
| -rw-r--r-- | examples/js/applauncher/style.scss | 1 | ||||
| -rw-r--r-- | examples/js/applauncher/widget/Applauncher.scss | 45 | ||||
| -rw-r--r-- | examples/js/applauncher/widget/Applauncher.tsx | 73 | ||||
| -rw-r--r-- | examples/js/media-player/.gitignore | 2 | ||||
| -rw-r--r-- | examples/js/notifications/.gitignore | 2 | ||||
| -rw-r--r-- | examples/js/simple-bar/.gitignore | 2 |
9 files changed, 134 insertions, 6 deletions
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 + + + +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 <button className="AppButton" onClicked={() => app.launch()}> + <box> + <icon icon={app.iconName} /> + <box valign={Gtk.Align.CENTER} vertical> + <label + className="name" + truncate + xalign={0} + label={app.name} + /> + {app.description && <label + className="description" + wrap + xalign={0} + label={app.description} + />} + </box> + </box> + </button> +} + +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 <window + name="launcher" + anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM} + exclusivity={Astal.Exclusivity.IGNORE} + keymode={Astal.Keymode.ON_DEMAND} + application={App} + onShow={() => 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() + }}> + <box> + <eventbox widthRequest={4000} expand onClick={hide} /> + <box hexpand={false} vertical> + <eventbox heightRequest={100} onClick={hide} /> + <box widthRequest={500} className="Applauncher" vertical> + <entry + placeholderText="Search" + onChanged={({ text }) => search(text)} + /> + <box spacing={6} vertical> + {list(list => list.map(app => ( + <AppButton app={app} /> + )))} + </box> + <box visible={list(l => l.length === 0)}> + <icon icon="system-search-symbolic" /> + No match found + </box> + </box> + <eventbox expand onClick={hide} /> + </box> + <eventbox widthRequest={4000} expand onClick={hide} /> + </box> + </window> +} 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 |