Centralize menu button coordinate logic and replace popupwindows with dropdownmenu.

modules/bar/battery/index.js

@@ -1,5 +1,5 @@
 const battery = await Service.import("battery");
-import { closeAllMenus } from "../index.js";
+import { openMenu } from "../utils.js";
 
 const BatteryLabel = () => {
   const isVis = Variable(battery.available);
@@ -54,14 +54,8 @@ const BatteryLabel = () => {
     }),
     isVis,
     props: {
-      on_primary_click: (_, event) => {
+      on_primary_click: (clicked, event) => {
-        const clickPos = event.get_root_coords();
+        openMenu(clicked, event, "energymenu");
-        const coords = [clickPos[1], clickPos[2]];
-
-        globalMousePos.value = coords;
-
-        closeAllMenus();
-        App.toggleWindow("energymenu");
       },
     },
   };

modules/bar/bluetooth/index.js

@@ -1,5 +1,5 @@
 const bluetooth = await Service.import('bluetooth')
-import { closeAllMenus } from "../index.js";
+import { openMenu } from "../utils.js";
 
 const Bluetooth = () => {
   const btIcon = Widget.Label({
@@ -19,14 +19,8 @@ const Bluetooth = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: (_, event) => {
+      on_primary_click: (clicked, event) => {
-        const clickPos = event.get_root_coords();
+        openMenu(clicked, event, "bluetoothmenu");
-        const coords = [clickPos[1], clickPos[2]];
-
-        globalMousePos.value = coords;
-
-        closeAllMenus();
-        App.toggleWindow("bluetoothmenu");
       },
     },
   };

modules/bar/clock/index.js

@@ -1,4 +1,4 @@
-import { closeAllMenus } from "../index.js";
+import { openMenu } from "../utils.js";
 
 const date = Variable("", {
   poll: [1000, 'date "+󰃭  %a %b %d    %I:%M:%S %p"'],
@@ -12,9 +12,8 @@ const Clock = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: () => {
+      on_primary_click: (clicked, event) => {
-        closeAllMenus();
+        openMenu(clicked, event, "calendarmenu");
-        App.toggleWindow("calendarmenu");
       },
     },
   };

modules/bar/index.js

@@ -12,14 +12,6 @@ import { SysTray } from "./systray/index.js";
 
 import { BarItemBox } from "../shared/barItemBox.js";
 
-const closeAllMenus = () => {
-  App.closeWindow("bluetoothmenu");
-  App.closeWindow("audiomenu");
-  App.closeWindow("networkmenu");
-  App.closeWindow("mediamenu");
-  App.closeWindow("calendarmenu");
-}
-
 // layout of the bar
 const Left = (monitor, wsMap) => {
   return Widget.Box({
@@ -118,4 +110,4 @@ const BarAlt = (monitor = 0, wsMap) => {
   });
 };
 
-export { Bar, BarAlt, closeAllMenus };
+export { Bar, BarAlt };

modules/bar/media/index.js

@@ -1,5 +1,5 @@
 const mpris = await Service.import("mpris");
-import { closeAllMenus } from "../index.js";
+import { openMenu } from "../utils.js";
 
 const Media = () => {
   const activePlayer = Variable(mpris.players[0]);
@@ -90,14 +90,8 @@ const Media = () => {
     props: {
       on_scroll_up: () => mpris.getPlayer("")?.next(),
       on_scroll_down: () => mpris.getPlayer("")?.previous(),
-      on_primary_click: (_, event) => {
+      on_primary_click: (clicked, event) => {
-        const clickPos = event.get_root_coords();
+        openMenu(clicked, event, "mediamenu");
-        const coords = [clickPos[1], clickPos[2]];
-
-        globalMousePos.value = coords;
-
-        closeAllMenus();
-        App.toggleWindow("mediamenu");
       },
     },
   };

modules/bar/menu/index.js

@@ -1,4 +1,4 @@
-import { closeAllMenus } from "../index.js";
+import { openMenu } from "../utils.js";
 
 const Menu = () => {
   return {
@@ -10,14 +10,8 @@ const Menu = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: (_, event) => {
+      on_primary_click: (clicked, event) => {
-        const clickPos = event.get_root_coords();
+        openMenu(clicked, event, "dashboardmenu");
-        const coords = [clickPos[1], clickPos[2]];
-
-        globalMousePos.value = coords;
-
-        closeAllMenus();
-        App.toggleWindow("dashboardmenu");
       },
     },
   };

modules/bar/network/index.js

@@ -1,5 +1,5 @@
 const network = await Service.import("network");
-import { closeAllMenus } from "../index.js";
+import { openMenu } from "../utils.js";
 
 import { globalMousePos } from "../../../globals.js";
 
@@ -31,14 +31,8 @@ const Network = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: (_, event) => {
+      on_primary_click: (clicked, event) => {
-        const clickPos = event.get_root_coords();
+        openMenu(clicked, event, "networkmenu");
-        const coords = [clickPos[1], clickPos[2]];
-
-        globalMousePos.value = coords;
-
-        closeAllMenus();
-        App.toggleWindow("networkmenu");
       },
     },
   };

modules/bar/notifications/index.js

@@ -1,3 +1,5 @@
+import { openMenu } from "../utils.js";
+
 const notifs = await Service.import("notifications");
 
 export const Notifications = () => {
@@ -29,7 +31,9 @@ export const Notifications = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: () => App.toggleWindow("notificationsmenu"),
+      on_primary_click: (clicked, event) => {
+        openMenu(clicked, event, "notificationsmenu");
+      },
     },
   };
 };

modules/bar/utils.js

@@ -0,0 +1,37 @@
+export const closeAllMenus = () => {
+  App.closeWindow("bluetoothmenu");
+  App.closeWindow("audiomenu");
+  App.closeWindow("networkmenu");
+  App.closeWindow("mediamenu");
+  App.closeWindow("calendarmenu");
+};
+
+export const openMenu = (clicked, event, window) => {
+  /*
+   * NOTE: We have to make some adjustments so the menu pops up relatively
+   * to the center of the button clicked. We don't want the menu to spawn
+   * offcenter dependending on which edge of the button you click on.
+   * -------------
+   * To fix this, we take the x coordinate of the click within the icon's bounds.
+   * So if you click the left edge of a 100width button then the x axis will be 0
+   * and if you click the right edge then the x axis will be 100.
+   * -------------
+   * Then we divide the width of the button by 2 to get the center of the button and then get
+   * the offset by subtracting the clicked x coordinate. Then we can apply that offset
+   * to the x coordinate of the click relative to the screen to get the center of the
+   * icon click.
+   */
+
+  const middleOfButton = Math.floor(clicked.get_allocated_width() / 2);
+  const xAxisOfButtonClick = clicked.get_pointer()[0];
+  const middleOffset = middleOfButton - xAxisOfButtonClick;
+
+  const clickPos = event.get_root_coords();
+  const adjustedXCoord = clickPos[1] + middleOffset;
+  const coords = [adjustedXCoord, clickPos[2]];
+
+  globalMousePos.value = coords;
+
+  closeAllMenus();
+  App.toggleWindow(window);
+};

modules/bar/volume/index.js

@@ -1,5 +1,5 @@
 const audio = await Service.import("audio");
-import { closeAllMenus } from "../index.js";
+import { openMenu } from "../utils.js";
 
 import { globalMousePos } from "../../../globals.js";
 
@@ -45,14 +45,8 @@ const Volume = () => {
     }),
     isVisible: true,
     props: {
-      on_primary_click: (_, event) => {
+      on_primary_click: (clicked, event) => {
-        const clickPos = event.get_root_coords();
+        openMenu(clicked, event, "audiomenu");
-        const coords = [clickPos[1], clickPos[2]];
-
-        globalMousePos.value = coords;
-
-        closeAllMenus();
-        App.toggleWindow("audiomenu");
       },
     },
   };

modules/menus/DropdownMenu.js

@@ -29,13 +29,18 @@ const moveBoxToCursor = (self, fixed) => {
     marginRight = fixed ? marginRight - monWidth / 2 : marginRight - value[0];
     let marginLeft = monWidth - currentWidth - marginRight;
 
-    if (marginRight < 0) {
+    const minimumMargin = 0;
-      marginRight = 13;
+
-      marginLeft = monWidth - currentWidth - 13;
+    if (marginRight < minimumMargin) {
-    } else if (marginRight < 13) {
+      marginRight = minimumMargin;
-      marginRight = 13;
+      marginLeft = monWidth - currentWidth - minimumMargin;
-      marginLeft = monWidth - currentWidth - 13;
     }
+
+    if (marginLeft < minimumMargin) {
+      marginLeft = minimumMargin;
+      marginRight = monWidth - currentWidth - minimumMargin;
+    }
+
     const marginTop = 45;
     const marginBottom = monHeight - marginTop;
     self.set_margin_left(marginLeft);

modules/menus/calendar/index.js

@@ -1,14 +1,12 @@
-import PopupWindow from "../PopupWindow.js";
+import DropdownMenu from "../DropdownMenu.js";
 import { TimeWidget } from "./time/index.js";
 import { CalendarWidget } from "./calendar.js";
 import { WeatherWidget } from "./weather/index.js";
 
 export default () => {
-  return PopupWindow({
+  return DropdownMenu({
     name: "calendarmenu",
-    visible: false,
     transition: "crossfade",
-    layout: "top-right",
     child: Widget.Box({
       class_name: "calendar-menu-content",
       css: "padding: 1px; margin: -1px;",

modules/menus/dashboard/index.js

@@ -1,4 +1,4 @@
-import PopupWindow from "../PopupWindow.js";
+import DropdownMenu from "../DropdownMenu.js";
 import { Profile } from "./profile/index.js";
 import { Shortcuts } from "./shortcuts/index.js";
 import { Controls } from "./controls/index.js";
@@ -6,11 +6,9 @@ import { Stats } from "./stats/index.js";
 import { Directories } from "./directories/index.js";
 
 export default () => {
-  return PopupWindow({
+  return DropdownMenu({
     name: "dashboardmenu",
-    visible: false,
     transition: "crossfade",
-    layout: "top-left",
     child: Widget.Box({
       class_name: "dashboard-menu-content",
       css: "padding: 1px; margin: -1px;",

modules/menus/media/index.js

@@ -1,11 +1,9 @@
-import PopupWindow from "../PopupWindow.js";
+import DropdownMenu from "../DropdownMenu.js";
 import { Media } from "./media.js";
 
 export default () => {
-  return PopupWindow({
+  return DropdownMenu({
     name: "mediamenu",
-    layout: "top-center",
-    visible: false,
     transition: "crossfade",
     child: Widget.Box({
       class_name: "menu-items",

modules/menus/network/index.js

@@ -1,4 +1,3 @@
-const network = await Service.import("network");
 import DropdownMenu from "../DropdownMenu.js";
 import { Ethernet } from "./ethernet/index.js";
 import { Wifi } from "./wifi/index.js";

modules/menus/notifications/index.js

@@ -1,14 +1,12 @@
-import PopupWindow from "../PopupWindow.js";
+import DropdownMenu from "../DropdownMenu.js";
 const notifs = await Service.import("notifications");
 import { Controls } from "./controls/index.js";
 import { NotificationCard } from "./notification/index.js";
 
 export default () => {
-  return PopupWindow({
+  return DropdownMenu({
     name: "notificationsmenu",
-    visible: false,
     transition: "crossfade",
-    layout: "top-right",
     child: Widget.Box({
       class_name: "notification-menu-content",
       css: "padding: 1px; margin: -1px;",

scss/main.scss

@@ -1,7 +1,7 @@
 * {
   all: unset;
   font-family: "Ubuntu Nerd Font";
-  font-size: 1.175rem;
+  font-size: 1.2rem;
   font-weight: 600;
 }
 

scss/menus/calendar.scss

@@ -7,10 +7,7 @@
   background: $crust;
   border: 0.13em solid $surface0;
   border-radius: 0.7em;
-}
+  margin-right: 0.5em;
-
-.window-content.calendarmenu-window {
-  margin-right: 0.50em;
 }
 
 .calendar-menu-item-container {

scss/menus/dashboard.scss

@@ -1,10 +1,7 @@
 @import "../colors";
 
-.window-content.dashboardmenu-window {
-    margin-left: 0.50em;
-}
-
 .dashboard-content-items {
+    margin-left: 0.50em;
     min-width: 28.5em;
     background: $crust;
     border: 0.13em solid $surface0;

style.css

@@ -1,7 +1,7 @@
 * {
   all: unset;
   font-family: "Ubuntu Nerd Font";
-  font-size: 1.175rem;
+  font-size: 1.2rem;
   font-weight: 600;
 }
 
@@ -1217,9 +1217,6 @@ window#powermenu .powermenu.box {
   background: #11111b;
   border: 0.13em solid #313244;
   border-radius: 0.7em;
-}
-
-.window-content.calendarmenu-window {
   margin-right: 0.5em;
 }
 
@@ -1402,11 +1399,8 @@ window#powermenu .powermenu.box {
   margin-bottom: 0.2em;
 }
 
-.window-content.dashboardmenu-window {
-  margin-left: 0.5em;
-}
-
 .dashboard-content-items {
+  margin-left: 0.5em;
   min-width: 28.5em;
   background: #11111b;
   border: 0.13em solid #313244;