add: gtk3 ts popover example

closes #224
closes #157

2 files changed, 0 insertions, 146 deletions

diff --git a/examples/js/applauncher/widget/Applauncher.scss b/examples/js/applauncher/widget/Applauncher.scss
deleted file mode 100644
index ae2453d..0000000
--- a/examples/js/applauncher/widget/Applauncher.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@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);
-            }
-        }
-
-        box.not-found {
-            padding: 1rem;
-
-            icon {
-                font-size: 6em;
-                color: gtkalpha($fg-color, .7);
-            }
-
-            label {
-                color: gtkalpha($fg-color, .9);
-                font-size: 1.2em;
-            }
-        }
-    }
-}
diff --git a/examples/js/applauncher/widget/Applauncher.tsx b/examples/js/applauncher/widget/Applauncher.tsx
deleted file mode 100644
index c7bac68..0000000
--- a/examples/js/applauncher/widget/Applauncher.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import Apps from "gi://AstalApps"
-import { App, Astal, Gdk, Gtk } from "astal/gtk3"
-import { Variable } from "astal"
-
-const MAX_ITEMS = 8
-
-function hide() {
-    App.get_window("launcher")!.hide()
-}
-
-function AppButton({ app }: { app: Apps.Application }) {
-    return <button
-        className="AppButton"
-        onClicked={() => { hide(); 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 { CENTER } = Gtk.Align
-    const apps = new Apps.Apps()
-
-    const text = Variable("")
-    const list = text(text => apps.fuzzy_query(text).slice(0, MAX_ITEMS))
-    const onEnter = () => {
-        apps.fuzzy_query(text.get())?.[0].launch()
-        hide()
-    }
-
-    return <window
-        name="launcher"
-        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM}
-        exclusivity={Astal.Exclusivity.IGNORE}
-        keymode={Astal.Keymode.ON_DEMAND}
-        application={App}
-        onShow={() => text.set("")}
-        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"
-                        text={text()}
-                        onChanged={self => text.set(self.text)}
-                        onActivate={onEnter}
-                    />
-                    <box spacing={6} vertical>
-                        {list.as(list => list.map(app => (
-                            <AppButton app={app} />
-                        )))}
-                    </box>
-                    <box
-                        halign={CENTER}
-                        className="not-found"
-                        vertical
-                        visible={list.as(l => l.length === 0)}>
-                        <icon icon="system-search-symbolic" />
-                        <label label="No match found" />
-                    </box>
-                </box>
-                <eventbox expand onClick={hide} />
-            </box>
-            <eventbox widthRequest={4000} expand onClick={hide} />
-        </box>
-    </window>
-}