WIP - Added crappy popover spawning where button clicked.

modules/menus/DropdownMenu.js

@@ -0,0 +1,165 @@
+export const Padding = (name) =>
+  Widget.EventBox({
+    hexpand: true,
+    vexpand: true,
+    can_focus: false,
+    child: Widget.Box(),
+    setup: (w) => w.on("button-press-event", () => App.toggleWindow(name)),
+  });
+
+const PopupRevealer = (name, child, transition = "slide_down") =>
+  Widget.Box(
+    { css: "padding: 1px;" },
+    Widget.Revealer({
+      transition,
+      child: Widget.Box({
+        class_name: "window-content",
+        child,
+      }),
+      transitionDuration: 400,
+      setup: (self) =>
+        self.hook(App, (_, wname, visible) => {
+          if (wname === name) self.reveal_child = visible;
+        }),
+    }),
+  );
+
+const Layout = (name, child, transition) => ({
+  center: () =>
+    Widget.CenterBox(
+      {},
+      Padding(name),
+      Widget.CenterBox(
+        { vertical: true },
+        Padding(name),
+        PopupRevealer(name, child, transition),
+        Padding(name),
+      ),
+      Padding(name),
+    ),
+  top: () =>
+    Widget.CenterBox(
+      {},
+      Padding(name),
+      Widget.Box(
+        { vertical: true },
+        PopupRevealer(name, child, transition),
+        Padding(name),
+      ),
+      Padding(name),
+    ),
+  "top-right": () =>
+    Widget.Box(
+      {},
+      Padding(name),
+      Widget.Box(
+        {
+          hexpand: false,
+          vertical: true,
+        },
+        PopupRevealer(name, child, transition),
+        Padding(name),
+      ),
+    ),
+  "top-center": () =>
+    Widget.Box(
+      {},
+      Padding(name),
+      Widget.Box(
+        {
+          hexpand: false,
+          vertical: true,
+        },
+        PopupRevealer(name, child, transition),
+        Padding(name),
+      ),
+      Padding(name),
+    ),
+  "top-left": () =>
+    Widget.Box(
+      {},
+      Widget.Box(
+        {
+          hexpand: false,
+          vertical: true,
+        },
+        PopupRevealer(name, child, transition),
+        Padding(name),
+      ),
+      Padding(name),
+    ),
+  "bottom-left": () =>
+    Widget.Box(
+      {},
+      Widget.Box(
+        {
+          hexpand: false,
+          vertical: true,
+        },
+        Padding(name),
+        PopupRevealer(name, child, transition),
+      ),
+      Padding(name),
+    ),
+  "bottom-center": () =>
+    Widget.Box(
+      {},
+      Padding(name),
+      Widget.Box(
+        {
+          hexpand: false,
+          vertical: true,
+        },
+        Padding(name),
+        PopupRevealer(name, child, transition),
+      ),
+      Padding(name),
+    ),
+  "bottom-right": () =>
+    Widget.Box(
+      {},
+      Padding(name),
+      Widget.Box(
+        {
+          hexpand: false,
+          vertical: true,
+        },
+        Padding(name),
+        PopupRevealer(name, child, transition),
+      ),
+    ),
+  "anywhere": () =>
+    Widget.Box(
+      {},
+      Padding(name),
+      Widget.Box(
+        {
+          hexpand: false,
+          vertical: true,
+        },
+        Padding(name),
+        PopupRevealer(name, child, transition),
+      ),
+    ),
+});
+
+export default ({
+  name,
+  child,
+  layout = "center",
+  transition,
+  exclusivity = "ignore",
+  ...props
+}) =>
+  Widget.Window({
+    name,
+    class_names: [name, "dropdown-menu"],
+    setup: (w) => w.keybind("Escape", () => App.closeWindow(name)),
+    visible: false,
+    keymode: "on-demand",
+    exclusivity,
+    layer: "top",
+    anchor: ["top", "bottom", "right", "left"],
+    child,//: Layout(name, child, transition)[layout](),
+    ...props,
+  });

modules/menus/audio/index.js

@@ -0,0 +1,46 @@
+const audio = await Service.import("audio");
+const hyprland = await Service.import("hyprland");
+import DropdownMenu from "../DropdownMenu.js";
+
+export default () => {
+  return DropdownMenu({
+    name: "audiomenu",
+    transition: "crossfade",
+    child: Widget.Box({
+      class_name: "audiomenu-items",
+      setup: (self) =>
+        globalMousePos.connect("changed", ({ value }) => {
+          console.log("in hook");
+          // console.log(value);
+          console.log(globalMousePos.value);
+          // TODO: Calculate these margins in the Dropmenu component
+          // We should just pass width/height and the component will
+          // calculate the appropriate margins from that...
+          const monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
+          const monHeight =
+            hyprland.monitors[hyprland.active.monitor.id].height;
+          const marginLeft = value[0] - 100;
+          const marginRight = monWidth - value[0] - 100;
+          const marginTop = 40;
+          const marginBottom = monHeight + 40 - 10;
+          self.set_margin_left(marginLeft);
+          self.set_margin_right(marginRight);
+          self.set_margin_top(marginTop);
+          self.set_margin_bottom(marginBottom);
+        }),
+      // margin_left: 3625, //marginLeft.bind("value"),
+      // margin_right: 15, // marginRight.bind("value"),
+      // margin_top: 40, //marginTop.bind("value"),
+      // margin_bottom: 1360, //marginBottom.bind("value"),
+      children: [
+        Widget.Button({
+          class_name: "click-me",
+          child: Widget.Box({
+            child: Widget.Label("Click Me"),
+          }),
+          on_clicked: () => console.log("CLICKED ME"),
+        }),
+      ],
+    }),
+  });
+};

modules/menus/main.js

@@ -1,4 +1,5 @@
 import PowerMenu from "./power/index.js";
 import Verification from "./power/verification.js";
+import AudioMenu from "./audio/index.js";
 
-export default [PowerMenu(), Verification()];
+export default [PowerMenu(), Verification(), AudioMenu()];

modules/menus/power/index.js

@@ -8,7 +8,7 @@ const SysButton = (action, label) =>
     on_clicked: () => powermenu.action(action),
     child: Widget.Box({
       vertical: true,
-      class_name: "system-button widget-button",
+      class_name: "system-button widget-box",
       children: [
         Widget.Icon({
           class_name: `system-button_icon ${action}`,