update examples, fix styling

10 files changed, 163 insertions, 132 deletions

diff --git a/examples/js/simple-bar/style.scss b/examples/js/simple-bar/style.scss
index 1dcf729..f5f771a 100644
--- a/examples/js/simple-bar/style.scss
+++ b/examples/js/simple-bar/style.scss
@@ -13,31 +13,45 @@ window.Bar {
     font-size: 1.1em;
     font-weight: bold;
 
-    button {
-        all: unset;
-        background-color: transparent;
+    label {
+        margin: 0 8px;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
 
-        &:hover label {
-            background-color: color.adjust($fg, $alpha: -0.84);
-            border-color: color.adjust($accent, $alpha: -0.8);
+            &:hover label {
+                background-color: color.adjust($fg, $alpha: -0.84);
+                border-color: color.adjust($accent, $alpha: -0.8);
+            }
+
+            &:active label {
+                background-color: color.adjust($fg, $alpha: -0.8)
+            }
         }
 
-        &:active label {
-            background-color: color.adjust($fg, $alpha: -0.8)
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
         }
-    }
 
-    label {
-        transition: 200ms;
-        padding: 0 8px;
-        margin: 2px;
-        border-radius: $radius;
-        border: 1pt solid transparent;
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
     }
 
-    .Workspaces .focused label {
-        color: $accent;
-        border-color: $accent;
+    .SysTray {
+        margin-right: 8px;
+
+        button {
+            padding: 0 4px;
+        }
     }
 
     .FocusedClient {
diff --git a/examples/js/simple-bar/widget/Bar.tsx b/examples/js/simple-bar/widget/Bar.tsx
index f5e96cb..87cc20d 100644
--- a/examples/js/simple-bar/widget/Bar.tsx
+++ b/examples/js/simple-bar/widget/Bar.tsx
@@ -11,17 +11,16 @@ import Tray from "gi://AstalTray"
 function SysTray() {
     const tray = Tray.get_default()
 
-    return <box>
-        {bind(tray, "items").as(items => items.map(item => {
-            
-            return <menubutton
+    return <box className="SysTray">
+        {bind(tray, "items").as(items => items.map(item => (
+            <menubutton
                 tooltipMarkup={bind(item, "tooltipMarkup")}
                 usePopover={false}
-                actionGroup={bind(item, "action-group").as(ag => { return { prefix: "dbusmenu", actionGroup: ag}})}
-                menuModel={bind(item, "menu-model")} >
+                actionGroup={bind(item, "action-group").as(ag => ["dbusmenu", ag])}
+                menuModel={bind(item, "menu-model")}>
                 <icon gIcon={bind(item, "gicon")} />
             </menubutton>
-        }))}
+        ))}
     </box>
 }
 
diff --git a/examples/lua/simple-bar/style.scss b/examples/lua/simple-bar/style.scss
index 1dcf729..f5f771a 100644
--- a/examples/lua/simple-bar/style.scss
+++ b/examples/lua/simple-bar/style.scss
@@ -13,31 +13,45 @@ window.Bar {
     font-size: 1.1em;
     font-weight: bold;
 
-    button {
-        all: unset;
-        background-color: transparent;
+    label {
+        margin: 0 8px;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
 
-        &:hover label {
-            background-color: color.adjust($fg, $alpha: -0.84);
-            border-color: color.adjust($accent, $alpha: -0.8);
+            &:hover label {
+                background-color: color.adjust($fg, $alpha: -0.84);
+                border-color: color.adjust($accent, $alpha: -0.8);
+            }
+
+            &:active label {
+                background-color: color.adjust($fg, $alpha: -0.8)
+            }
         }
 
-        &:active label {
-            background-color: color.adjust($fg, $alpha: -0.8)
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
         }
-    }
 
-    label {
-        transition: 200ms;
-        padding: 0 8px;
-        margin: 2px;
-        border-radius: $radius;
-        border: 1pt solid transparent;
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
     }
 
-    .Workspaces .focused label {
-        color: $accent;
-        border-color: $accent;
+    .SysTray {
+        margin-right: 8px;
+
+        button {
+            padding: 0 4px;
+        }
     }
 
     .FocusedClient {
diff --git a/examples/lua/simple-bar/widget/Bar.lua b/examples/lua/simple-bar/widget/Bar.lua
index 843e292..e7bd4ff 100644
--- a/examples/lua/simple-bar/widget/Bar.lua
+++ b/examples/lua/simple-bar/widget/Bar.lua
@@ -1,8 +1,6 @@
 local astal = require("astal")
-local App = require("astal.gtk3.app")
 local Widget = require("astal.gtk3.widget")
 local Variable = astal.Variable
-local Gdk = astal.require("Gdk", "3.0")
 local GLib = astal.require("GLib")
 local bind = astal.bind
 local Mpris = astal.require("AstalMpris")
@@ -17,18 +15,16 @@ local function SysTray()
 	local tray = Tray.get_default()
 
 	return Widget.Box({
+        class_name = "SysTray",
 		bind(tray, "items"):as(function(items)
 			return map(items, function(item)
 				return Widget.MenuButton({
 					tooltip_markup = bind(item, "tooltip_markup"),
-          use_popover = false,
+					use_popover = false,
 					menu_model = bind(item, "menu-model"),
-          action_group = bind(item, "action-group"):as(function(ag)
-            return {
-              prefix = "dbusmenu",
-              action_group = ag
-            }
-          end),
+					action_group = bind(item, "action-group"):as(function(ag)
+						return { "dbusmenu", ag }
+					end),
 					Widget.Icon({
 						g_icon = bind(item, "gicon"),
 					}),
@@ -181,10 +177,10 @@ return function(gdkmonitor)
 			}),
 			Widget.Box({
 				halign = "END",
+                SysTray(),
 				Wifi(),
 				AudioSlider(),
 				BatteryLevel(),
-				SysTray(),
 				Time("%H:%M - %A %e."),
 			}),
 		}),
diff --git a/examples/py/simple-bar/app.py b/examples/py/simple-bar/app.py
index 17b6782..d95dc0e 100755
--- a/examples/py/simple-bar/app.py
+++ b/examples/py/simple-bar/app.py
@@ -1,6 +1,7 @@
 #!/usr/bin/env python3
 import sys
 import versions
+import subprocess
 from gi.repository import AstalIO, Astal, Gio
 from widget.Bar import Bar
 from pathlib import Path
@@ -18,9 +19,8 @@ class App(Astal.Application):
 
     def do_activate(self) -> None:
         self.hold()
-        AstalIO.Process.execv(["sass", scss, css])
+        subprocess.run(["sass", scss, css])
         self.apply_css(css, True)
-        print("hello")
         for mon in self.get_monitors():
             self.add_window(Bar(mon))
 
@@ -30,7 +30,7 @@ app = App(instance_name=instance_name)
 
 if __name__ == "__main__":
     try:
-        print(app.acquire_socket())
+        app.acquire_socket()
         app.run(None)
     except Exception as e:
         print(AstalIO.send_message(instance_name, "".join(sys.argv[1:])))
diff --git a/examples/py/simple-bar/style.scss b/examples/py/simple-bar/style.scss
index 1dcf729..f5f771a 100644
--- a/examples/py/simple-bar/style.scss
+++ b/examples/py/simple-bar/style.scss
@@ -13,31 +13,45 @@ window.Bar {
     font-size: 1.1em;
     font-weight: bold;
 
-    button {
-        all: unset;
-        background-color: transparent;
+    label {
+        margin: 0 8px;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
 
-        &:hover label {
-            background-color: color.adjust($fg, $alpha: -0.84);
-            border-color: color.adjust($accent, $alpha: -0.8);
+            &:hover label {
+                background-color: color.adjust($fg, $alpha: -0.84);
+                border-color: color.adjust($accent, $alpha: -0.8);
+            }
+
+            &:active label {
+                background-color: color.adjust($fg, $alpha: -0.8)
+            }
         }
 
-        &:active label {
-            background-color: color.adjust($fg, $alpha: -0.8)
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
         }
-    }
 
-    label {
-        transition: 200ms;
-        padding: 0 8px;
-        margin: 2px;
-        border-radius: $radius;
-        border: 1pt solid transparent;
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
     }
 
-    .Workspaces .focused label {
-        color: $accent;
-        border-color: $accent;
+    .SysTray {
+        margin-right: 8px;
+
+        button {
+            padding: 0 4px;
+        }
     }
 
     .FocusedClient {
diff --git a/examples/py/simple-bar/widget/Bar.py b/examples/py/simple-bar/widget/Bar.py
index 3b09dce..ca02dd6 100644
--- a/examples/py/simple-bar/widget/Bar.py
+++ b/examples/py/simple-bar/widget/Bar.py
@@ -108,6 +108,7 @@ class Media(Gtk.Box):
 class SysTray(Gtk.Box):
     def __init__(self) -> None:
         super().__init__()
+        Astal.widget_set_class_names(self, ["SysTray"])
         self.items = {}
         tray = Tray.get_default()
         tray.connect("item_added", self.add_item)
@@ -118,33 +119,22 @@ class SysTray(Gtk.Box):
             return
 
         item = Tray.get_default().get_item(id)
-        theme = item.get_icon_theme_path()
-
-        if theme is not None:
-            from app import app
-
-            app.add_icons(theme)
-
-        menu = item.create_menu()
-        btn = Astal.Button(visible=True)
+        btn = Gtk.MenuButton(use_popover=False, visible=True)
         icon = Astal.Icon(visible=True)
 
-        def on_clicked(btn):
-            if menu:
-                menu.popup_at_widget(btn, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, None)
+        item.bind_property("tooltip-markup", btn, "tooltip-markup", SYNC)
+        item.bind_property("gicon", icon, "g-icon", SYNC)
+        item.bind_property("menu-model", btn, "menu-model", SYNC)
+        btn.insert_action_group("dbusmenu", item.get_action_group())
 
-        def on_destroy(btn):
-            if menu:
-                menu.destroy()
+        def on_action_group(*args):
+            btn.insert_action_group("dbusmenu", item.get_action_group())
 
-        btn.connect("clicked", on_clicked)
-        btn.connect("destroy", on_destroy)
+        item.connect("notify::action-group", on_action_group)
 
-        item.bind_property("tooltip-markup", btn, "tooltip-markup", SYNC)
-        item.bind_property("gicon", icon, "gicon", SYNC)
+        btn.add(icon)
         self.add(btn)
         self.items[id] = btn
-        self.show_all()
 
     def remove_item(self, _: Tray.Tray, id: str):
         if id in self.items:
diff --git a/examples/vala/simple-bar/meson.build b/examples/vala/simple-bar/meson.build
index 10f5dd2..5a0ef4c 100644
--- a/examples/vala/simple-bar/meson.build
+++ b/examples/vala/simple-bar/meson.build
@@ -21,22 +21,15 @@ pkgconfig_deps = [
 # needed for GLib.Math
 deps = pkgconfig_deps + meson.get_compiler('c').find_library('m')
 
-custom_target(
-  'style.css',
-  command: [
-    find_program('sass'),
-    meson.project_source_root() / 'style.scss',
-    '@OUTPUT@',
-  ],
-  output: 'style.css',
-  install: true,
-  install_dir: libdir,
-)
-
 main = configure_file(
   input: 'app.in.vala',
   output: 'app.vala',
-  configuration: {'STYLE': libdir / 'style.css'},
+  configuration: {
+    'STYLE': run_command(
+      find_program('sass'),
+      meson.project_source_root() / 'style.scss',
+    ).stdout(),
+  },
 )
 
 sources = files(
diff --git a/examples/vala/simple-bar/style.scss b/examples/vala/simple-bar/style.scss
index 1dcf729..f5f771a 100644
--- a/examples/vala/simple-bar/style.scss
+++ b/examples/vala/simple-bar/style.scss
@@ -13,31 +13,45 @@ window.Bar {
     font-size: 1.1em;
     font-weight: bold;
 
-    button {
-        all: unset;
-        background-color: transparent;
+    label {
+        margin: 0 8px;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
 
-        &:hover label {
-            background-color: color.adjust($fg, $alpha: -0.84);
-            border-color: color.adjust($accent, $alpha: -0.8);
+            &:hover label {
+                background-color: color.adjust($fg, $alpha: -0.84);
+                border-color: color.adjust($accent, $alpha: -0.8);
+            }
+
+            &:active label {
+                background-color: color.adjust($fg, $alpha: -0.8)
+            }
         }
 
-        &:active label {
-            background-color: color.adjust($fg, $alpha: -0.8)
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
         }
-    }
 
-    label {
-        transition: 200ms;
-        padding: 0 8px;
-        margin: 2px;
-        border-radius: $radius;
-        border: 1pt solid transparent;
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
     }
 
-    .Workspaces .focused label {
-        color: $accent;
-        border-color: $accent;
+    .SysTray {
+        margin-right: 8px;
+
+        button {
+            padding: 0 4px;
+        }
     }
 
     .FocusedClient {
diff --git a/examples/vala/simple-bar/widget/Bar.vala b/examples/vala/simple-bar/widget/Bar.vala
index 3893ec5..ba9f06c 100644
--- a/examples/vala/simple-bar/widget/Bar.vala
+++ b/examples/vala/simple-bar/widget/Bar.vala
@@ -103,6 +103,7 @@ class SysTray : Gtk.Box {
     AstalTray.Tray tray = AstalTray.get_default();
 
     public SysTray() {
+        Astal.widget_set_class_names(this, { "SysTray" });
         tray.item_added.connect(add_item);
         tray.item_removed.connect(remove_item);
     }
@@ -112,23 +113,19 @@ class SysTray : Gtk.Box {
             return;
 
         var item = tray.get_item(id);
-
-        var btn = new Gtk.MenuButton() {
-          use_popover = false
-        };
-        var icon = new Astal.Icon();
+        var btn = new Gtk.MenuButton() { use_popover = false, visible = true };
+        var icon = new Astal.Icon() { visible = true };
 
         item.bind_property("tooltip-markup", btn, "tooltip-markup", BindingFlags.SYNC_CREATE);
         item.bind_property("gicon", icon, "g-icon", BindingFlags.SYNC_CREATE);
         item.bind_property("menu-model", btn, "menu-model", BindingFlags.SYNC_CREATE);
         btn.insert_action_group("dbusmenu", item.action_group);
         item.notify["action-group"].connect(() => {
-          btn.insert_action_group("dbusmenu", item.action_group);
+            btn.insert_action_group("dbusmenu", item.action_group);
         });
 
         btn.add(icon);
         add(btn);
-        btn.show_all();
         items.set(id, btn);
     }