WIP - Added crappy popover spawning where button clicked.

config.js

@@ -26,6 +26,7 @@ const workspaceMonitorMap = {
   1: [6,7],
   2: [1,2,3,8,9,10],
 }
+
 export default {
   style: `${App.configDir}/style.css`,
   closeWindowDelay: {

globals.js

@@ -0,0 +1,4 @@
+const globalMousePos = Variable([]);
+
+globalThis["globalMousePos"] = globalMousePos;
+export { globalMousePos };

modules/bar/volume/index.js

@@ -35,6 +35,9 @@ const Volume = () => {
       children: [volIcn, volPct],
     }),
     isVisible: true,
+    props: {
+      // on_primary_click: (a,b) => App.toggleWindow("audiomenu"),
+    },
   };
 };
 

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}`,

modules/shared/barItemBox.js

@@ -1,3 +1,6 @@
+const hyprland = await Service.import("hyprland");
+import { globalMousePos } from "../../globals.js";
+
 export const BarItemBox = (child) => {
   const computeVisible = () => {
     if (Object.hasOwnProperty.call(child, "isVis")) {
@@ -8,9 +11,19 @@ export const BarItemBox = (child) => {
   };
 
   return Widget.Button({
+    on_primary_click: (a, b, c, d) => {
+      const monX = hyprland.monitors[hyprland.active.monitor.id].x;
+      const monY = hyprland.monitors[hyprland.active.monitor.id].y;
+
+      const cursorPos = Utils.exec("hyprctl cursorpos").split(", ").map(Number);
+      cursorPos[0] = cursorPos[0] - monX;
+      cursorPos[1] = cursorPos[1] - monY;
+      globalMousePos.value = cursorPos;
+      App.toggleWindow("audiomenu");
+    },
     class_name: "bar_item_box_visible",
     child: child.component,
     visible: computeVisible(),
-    ...child.props
+    ...child.props,
   });
 };

scss/common/floating-widget.scss

@@ -3,7 +3,7 @@
 @mixin floating-widget {
     // box-shadow: 0 0 5px 0 $shadow-color;
     margin: max($spacing, 8px);
-    border: 3px solid $surface1;
+    border: 2px solid $surface0;
     background-color: $base;
     color: $primary_fg;
     border-radius: 11px;

scss/main.scss

@@ -24,3 +24,4 @@
 
 //modules - menus
 @import "menus/powermenu";
+@import "menus/audiomenu";

scss/menus/audiomenu.scss

@@ -0,0 +1,13 @@
+@import "../colors";
+
+.audiomenu-items {
+    background: $mantle;
+    border: 1px solid $sky;
+    min-width: 200px;
+    min-height: 300px;
+}
+
+.click-me {
+    background: $lavender;
+    margin: 140px 0px;
+}

style.css

@@ -428,7 +428,7 @@ window#verification {
 
 window#verification .verification {
   margin: 12px;
-  border: 3px solid #45475a;
+  border: 2px solid #313244;
   background-color: #1e1e2e;
   color: #9278b6;
   border-radius: 11px;
@@ -504,7 +504,7 @@ window#verification .verification .bar-verification_yes label {
 
 window#powermenu .powermenu {
   margin: 12px;
-  border: 3px solid #45475a;
+  border: 2px solid #313244;
   background-color: #1e1e2e;
   color: #9278b6;
   border-radius: 11px;
@@ -586,4 +586,16 @@ window#powermenu .powermenu.box {
   color: #89dceb;
 }
 
+.audiomenu-items {
+  background: #181825;
+  border: 1px solid #89dceb;
+  min-width: 200px;
+  min-height: 300px;
+}
+
+.click-me {
+  background: #b4befe;
+  margin: 140px 0px;
+}
+
 /*# sourceMappingURL=style.css.map */

style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common/common.scss","scss/colors.scss","scss/common/widget-button.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss","scss/menus/powermenu.scss","scss/common/floating-widget.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC7CW;;;ADgDb;AAAA;AAAA;EAGE;EACA,kBCpDW;;;ADuDb;AAAA;AAAA;EAGE;EACA,kBC3DW;;;AD8Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC1EW;;;AD6Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCxHW;;;AD2Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC1IW;ED2IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AE/NF;EACE,YDmCM;EClCN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cD2BM;EC1BN;EACA;;AAEA;EACE;EACA,cDSO;ECRP;;AAGF;EAEE;EACA,cDEO;;ACCT;EACE;EACA;EACA;EACA;;AAGF;EACE,YApCM;;AAwCN;EACE;EACA;;AAEF;EACE;EACA;;;AC9CN;EACE,OFsBK;EErBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OHRM;;;AGWR;EACE,OHZM;;;AIpBR;EACE;EACA,OJoBM;;;AIjBR;EACE;EACA,OJeM;;;AKtBR;EACE,OLgBM;;;AMjBR;EACE;EACA,ONsBI;;;AMnBN;EACE,ONkBI;;;AOxBN;EACE,OPeK;;;AQfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRmBO;;AQjBP;EACE,kBRQG;EQPH;EACA;;AAGF;EACE,kBROA;EQNA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OTeK;;;AUhBP;EACE;;;AAGF;EACE,YViCO;;;AU/BT;EACE;EACA,OVkBS;;;AUfX;EACE,kBVsBS;;;AUnBX;EACE,kBVmBS;EUlBT;;;AAGF;EACE,kBVKS;;;AW3BX;EACE,OXiBI;EWhBJ;;;ACFF;EACE,YZqCO;EYpCP;EACA;;;AAGF;EACE,YZ6BS;EY5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACzBF;AAAA;EAGI;;;AAQJ;ECTI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;EDMA;EACA;EACA;EACA;;AAEA;EACI,eAXE;;AAaF;EACI;EACA,ObJH;EaKG;;AAGJ;EACI,ObDD;EaEC;EACA;EACA;;AAIR;EACI,YbGA;EaFA;EACA;EACA;EACA,cbDA;EaEA,eAhCC;EAiCD;EACA;EACA;;AAGI;EACI,cb1BR;Ea2BQ;;AAEJ;EACI,cblCV;EamCU;;AAIJ;EACI,cbpCR;EaqCQ;;AAEJ;EACI,cb5CV;Ea6CU;;AAKJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,ObtEF;;AawEF;EACI,ObrEA;;;AayER;EC7FI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;;AD0FA;EACI;;AAGJ;EACI;;;AAIR;EACI,cbpEI;EaqEJ;EACA;EACA;;AAGI;EACI,cbhGN;;AakGE;EACI,cb/FJ;;AaiGA;EACI,cbhGN;;AakGE;EACI,cbvGJ;;Aa2GA;EACI,cb9GN;;AagHE;EACI,cb7GJ;;Aa+GA;EACI,cb9GN;;AagHE;EACI,cbrHJ;;AawHA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKR;EACI,Ob1IF;;Aa4IF;EACI,ObzIA;;Aa2IJ;EACI,Ob9IA;;AagJJ;EACI,Ob7IF;;;AakJF;EACI,ObzJF;;Aa2JF;EACI,ObxJA;;Aa0JJ;EACI,Ob7JA;;Aa+JJ;EACI,Ob5JF","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common/common.scss","scss/colors.scss","scss/common/widget-button.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss","scss/menus/powermenu.scss","scss/common/floating-widget.scss","scss/menus/audiomenu.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC7CW;;;ADgDb;AAAA;AAAA;EAGE;EACA,kBCpDW;;;ADuDb;AAAA;AAAA;EAGE;EACA,kBC3DW;;;AD8Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC1EW;;;AD6Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCxHW;;;AD2Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC1IW;ED2IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AE/NF;EACE,YDmCM;EClCN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cD2BM;EC1BN;EACA;;AAEA;EACE;EACA,cDSO;ECRP;;AAGF;EAEE;EACA,cDEO;;ACCT;EACE;EACA;EACA;EACA;;AAGF;EACE,YApCM;;AAwCN;EACE;EACA;;AAEF;EACE;EACA;;;AC9CN;EACE,OFsBK;EErBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OHRM;;;AGWR;EACE,OHZM;;;AIpBR;EACE;EACA,OJoBM;;;AIjBR;EACE;EACA,OJeM;;;AKtBR;EACE,OLgBM;;;AMjBR;EACE;EACA,ONsBI;;;AMnBN;EACE,ONkBI;;;AOxBN;EACE,OPeK;;;AQfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRmBO;;AQjBP;EACE,kBRQG;EQPH;EACA;;AAGF;EACE,kBROA;EQNA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OTeK;;;AUhBP;EACE;;;AAGF;EACE,YViCO;;;AU/BT;EACE;EACA,OVkBS;;;AUfX;EACE,kBVsBS;;;AUnBX;EACE,kBVmBS;EUlBT;;;AAGF;EACE,kBVKS;;;AW3BX;EACE,OXiBI;EWhBJ;;;ACFF;EACE,YZqCO;EYpCP;EACA;;;AAGF;EACE,YZ6BS;EY5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACzBF;AAAA;EAGI;;;AAQJ;ECTI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;EDMA;EACA;EACA;EACA;;AAEA;EACI,eAXE;;AAaF;EACI;EACA,ObJH;EaKG;;AAGJ;EACI,ObDD;EaEC;EACA;EACA;;AAIR;EACI,YbGA;EaFA;EACA;EACA;EACA,cbDA;EaEA,eAhCC;EAiCD;EACA;EACA;;AAGI;EACI,cb1BR;Ea2BQ;;AAEJ;EACI,cblCV;EamCU;;AAIJ;EACI,cbpCR;EaqCQ;;AAEJ;EACI,cb5CV;Ea6CU;;AAKJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,ObtEF;;AawEF;EACI,ObrEA;;;AayER;EC7FI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;;AD0FA;EACI;;AAGJ;EACI;;;AAIR;EACI,cbpEI;EaqEJ;EACA;EACA;;AAGI;EACI,cbhGN;;AakGE;EACI,cb/FJ;;AaiGA;EACI,cbhGN;;AakGE;EACI,cbvGJ;;Aa2GA;EACI,cb9GN;;AagHE;EACI,cb7GJ;;Aa+GA;EACI,cb9GN;;AagHE;EACI,cbrHJ;;AawHA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKR;EACI,Ob1IF;;Aa4IF;EACI,ObzIA;;Aa2IJ;EACI,Ob9IA;;AagJJ;EACI,Ob7IF;;;AakJF;EACI,ObzJF;;Aa2JF;EACI,ObxJA;;Aa0JJ;EACI,Ob7JA;;Aa+JJ;EACI,Ob5JF;;;AexBN;EACI,YfqCK;EepCL;EACA;EACA;;;AAGJ;EACI,YfmBO;EelBP","file":"style.css"}