Added the ability to change bar locations. (#257)

* Added the ability to change bar locations.

* Update dropdown margins

* Make dropdown to bar gap configurable and organized code.

modules/menus/shared/dropdown/eventBoxes/index.ts

@@ -0,0 +1,33 @@
+import { Attribute, BoxWidget } from 'lib/types/widget';
+import EventBox from 'types/widgets/eventbox';
+import { BarLocation } from 'lib/types/options';
+
+const createEventBox = (className: string, windowName: string): EventBox<BoxWidget, Attribute> => {
+    return Widget.EventBox({
+        class_name: className,
+        hexpand: true,
+        vexpand: false,
+        can_focus: false,
+        child: Widget.Box(),
+        setup: (w) => {
+            w.on('button-press-event', () => App.toggleWindow(windowName));
+        },
+    });
+};
+
+export const barEventMargins = (
+    windowName: string,
+    location: BarLocation = 'top',
+): [EventBox<BoxWidget, Attribute>, EventBox<BoxWidget, Attribute>] => {
+    if (location === 'top') {
+        return [
+            createEventBox('mid-eb event-top-padding-static', windowName),
+            createEventBox('mid-eb event-top-padding', windowName),
+        ];
+    } else {
+        return [
+            createEventBox('mid-eb event-bottom-padding', windowName),
+            createEventBox('mid-eb event-bottom-padding-static', windowName),
+        ];
+    }
+};

modules/menus/shared/dropdown/index.ts

@@ -0,0 +1,99 @@
+import options from 'options';
+import { DropdownMenuProps } from 'lib/types/dropdownmenu';
+import { Attribute, Child, Exclusivity } from 'lib/types/widget';
+import Window from 'types/widgets/window';
+import { moveBoxToCursor } from './locationHandler/index';
+import { barEventMargins } from './eventBoxes/index';
+
+const { location } = options.theme.bar;
+
+// NOTE: We make the window visible for 2 seconds (on startup) so the child
+// elements can allocat their proper dimensions.
+// Otherwise the width that we rely on for menu positioning is set improperly
+// for the first time we open a menu of each type.
+const initRender = Variable(true);
+
+setTimeout(() => {
+    initRender.value = false;
+}, 2000);
+
+export default ({
+    name,
+    child,
+    transition,
+    exclusivity = 'ignore' as Exclusivity,
+    fixed = false,
+    ...props
+}: DropdownMenuProps): Window<Child, Attribute> =>
+    Widget.Window({
+        name,
+        class_names: [name, 'dropdown-menu'],
+        setup: (w) => w.keybind('Escape', () => App.closeWindow(name)),
+        visible: initRender.bind('value'),
+        keymode: 'on-demand',
+        exclusivity,
+        layer: 'top',
+        anchor: location.bind('value').as((ln) => [ln, 'left']),
+        child: Widget.EventBox({
+            class_name: 'parent-event',
+            on_primary_click: () => App.closeWindow(name),
+            on_secondary_click: () => App.closeWindow(name),
+            child: Widget.Box({
+                class_name: 'top-eb',
+                vertical: true,
+                children: [
+                    Widget.Box({
+                        className: 'event-box-container',
+                        children: location.bind('value').as((lcn) => {
+                            if (lcn === 'top') {
+                                return barEventMargins(name);
+                            } else {
+                                return [];
+                            }
+                        }),
+                    }),
+                    Widget.EventBox({
+                        class_name: 'in-eb menu-event-box',
+                        on_primary_click: () => {
+                            return true;
+                        },
+                        on_secondary_click: () => {
+                            return true;
+                        },
+                        setup: (self) => {
+                            moveBoxToCursor(self, fixed);
+                        },
+                        child: Widget.Box({
+                            class_name: 'dropdown-menu-container',
+                            css: 'padding: 1px; margin: -1px;',
+                            child: Widget.Revealer({
+                                revealChild: false,
+                                setup: (self) =>
+                                    self.hook(App, (_, wname, visible) => {
+                                        if (wname === name) self.reveal_child = visible;
+                                    }),
+                                transition,
+                                transitionDuration: 350,
+                                child: Widget.Box({
+                                    class_name: 'dropdown-menu-container',
+                                    can_focus: true,
+                                    children: [child],
+                                }),
+                            }),
+                        }),
+                    }),
+                    Widget.Box({
+                        className: 'event-box-container',
+                        children: location.bind('value').as((lcn) => {
+                            if (lcn === 'bottom') {
+                                return barEventMargins(name);
+                            } else {
+                                return [];
+                            }
+                        }),
+                    }),
+                ],
+            }),
+        }),
+        ...props,
+    });

modules/menus/shared/dropdown/locationHandler/index.ts

@@ -0,0 +1,95 @@
+const hyprland = await Service.import('hyprland');
+
+import { bash } from 'lib/utils';
+import { Widget as TWidget } from 'types/@girs/gtk-3.0/gtk-3.0.cjs';
+import { Monitor } from 'types/service/hyprland';
+import Box from 'types/widgets/box';
+import EventBox from 'types/widgets/eventbox';
+import Revealer from 'types/widgets/revealer';
+
+type NestedRevealer = Revealer<Box<TWidget, unknown>, unknown>;
+type NestedBox = Box<NestedRevealer, unknown>;
+type NestedEventBox = EventBox<NestedBox, unknown>;
+
+const { location } = options.theme.bar;
+
+export const moveBoxToCursor = <T extends NestedEventBox>(self: T, fixed: boolean): void => {
+    if (fixed) {
+        return;
+    }
+
+    globalMousePos.connect('changed', async ({ value }) => {
+        const curHyprlandMonitor = hyprland.monitors.find((m) => m.id === hyprland.active.monitor.id);
+        const dropdownWidth = self.child.get_allocation().width;
+        const dropdownHeight = self.child.get_allocation().height;
+
+        let hyprScaling = 1;
+        try {
+            const monitorInfo = await bash('hyprctl monitors -j');
+            const parsedMonitorInfo = JSON.parse(monitorInfo);
+
+            const foundMonitor = parsedMonitorInfo.find(
+                (monitor: Monitor) => monitor.id === hyprland.active.monitor.id,
+            );
+            hyprScaling = foundMonitor?.scale || 1;
+        } catch (error) {
+            console.error(`Error parsing hyprland monitors: ${error}`);
+        }
+
+        let monWidth = curHyprlandMonitor?.width;
+        let monHeight = curHyprlandMonitor?.height;
+
+        if (monWidth === undefined || monHeight === undefined || hyprScaling === undefined) {
+            return;
+        }
+
+        // If GDK Scaling is applied, then get divide width by scaling
+        // to get the proper coordinates.
+        // Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
+        // end of the monitor is the 1430th pixel.
+        const gdkScale = Utils.exec('bash -c "echo $GDK_SCALE"');
+
+        if (/^\d+(.\d+)?$/.test(gdkScale)) {
+            const scale = parseFloat(gdkScale);
+            monWidth = monWidth / scale;
+            monHeight = monHeight / scale;
+        } else {
+            monWidth = monWidth / hyprScaling;
+            monHeight = monHeight / hyprScaling;
+        }
+
+        // If monitor is vertical (transform = 1 || 3) swap height and width
+        const isVertical = curHyprlandMonitor?.transform !== undefined ? curHyprlandMonitor.transform % 2 !== 0 : false;
+
+        if (isVertical) {
+            [monWidth, monHeight] = [monHeight, monWidth];
+        }
+
+        let marginRight = monWidth - dropdownWidth / 2;
+        marginRight = fixed ? marginRight - monWidth / 2 : marginRight - value[0];
+        let marginLeft = monWidth - dropdownWidth - marginRight;
+
+        const minimumMargin = 0;
+
+        if (marginRight < minimumMargin) {
+            marginRight = minimumMargin;
+            marginLeft = monWidth - dropdownWidth - minimumMargin;
+        }
+
+        if (marginLeft < minimumMargin) {
+            marginLeft = minimumMargin;
+            marginRight = monWidth - dropdownWidth - minimumMargin;
+        }
+
+        self.set_margin_left(marginLeft);
+        self.set_margin_right(marginRight);
+
+        if (location.value === 'top') {
+            self.set_margin_top(0);
+            self.set_margin_bottom(monHeight);
+        } else {
+            self.set_margin_bottom(0);
+            self.set_margin_top(monHeight - dropdownHeight);
+        }
+    });
+};