bar: vertical mode

3 files changed, 57 insertions, 25 deletions

diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index ad11f43..33a5a9b 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -68,14 +68,15 @@ const togglePopup = (self: JSX.Element, event: Astal.ClickEvent, name: string) =
 const OSIcon = () => (
     <button
         className="module os-icon"
-        label={osIcon}
         onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideleft")}
-    />
+    >
+        {osIcon}
+    </button>
 );
 
 const ActiveWindow = () => (
     <box
-        hasTooltip
+        vertical={config.vertical}
         className="module active-window"
         setup={self => {
             const title = Variable("");
@@ -101,8 +102,13 @@ const ActiveWindow = () => (
             }
         />
         <label
+            angle={config.vertical ? 270 : 0}
             setup={self =>
-                hookFocusedClientProp(self, "title", c => (self.label = c?.title ? ellipsize(c.title) : "Desktop"))
+                hookFocusedClientProp(
+                    self,
+                    "title",
+                    c => (self.label = c?.title ? ellipsize(c.title, config.vertical ? 30 : 40) : "Desktop")
+                )
             }
         />
     </box>
@@ -126,7 +132,7 @@ const MediaPlaying = () => {
                 setupCustomTooltip(self, bind(label));
             }}
         >
-            <box className="module media-playing">
+            <box vertical={config.vertical} className="module media-playing">
                 <icon
                     setup={self =>
                         players.hookLastPlayer(self, "notify::identity", () => {
@@ -142,6 +148,7 @@ const MediaPlaying = () => {
                     }
                 />
                 <label
+                    angle={config.vertical ? 270 : 0}
                     setup={self =>
                         players.hookLastPlayer(self, ["notify::title", "notify::artist"], () => {
                             self.label = ellipsize(getLabel("No media")); // TODO: scroll text
@@ -195,7 +202,7 @@ const Workspaces = () => (
                 hyprland.dispatch("workspace", (event.delta_y < 0 ? "-" : "+") + 1);
         }}
     >
-        <box className="module workspaces">
+        <box vertical={config.vertical} className="module workspaces">
             {Array.from({ length: config.wsPerGroup }).map((_, idx) => (
                 <Workspace idx={idx + 1} /> // Start from 1
             ))}
@@ -248,7 +255,11 @@ const TrayItem = (item: AstalTray.TrayItem) => {
 };
 
 const Tray = () => (
-    <box className="module tray" visible={bind(AstalTray.get_default(), "items").as(i => i.length > 0)}>
+    <box
+        vertical={config.vertical}
+        className="module tray"
+        visible={bind(AstalTray.get_default(), "items").as(i => i.length > 0)}
+    >
         {bind(AstalTray.get_default(), "items").as(i => i.map(TrayItem))}
     </box>
 );
@@ -378,7 +389,7 @@ const BluetoothDevice = (device: AstalBluetooth.Device) => (
 );
 
 const Bluetooth = () => (
-    <box className="bluetooth">
+    <box vertical={config.vertical} className="bluetooth">
         <button
             onClick={(self, event) => {
                 if (event.button === Astal.MouseButton.PRIMARY) togglePopup(self, event, "bluetooth-devices");
@@ -424,7 +435,7 @@ const Bluetooth = () => (
 );
 
 const StatusIcons = () => (
-    <box className="module status-icons">
+    <box vertical={config.vertical} className="module status-icons">
         <Network />
         <Bluetooth />
     </box>
@@ -440,7 +451,7 @@ const PkgUpdates = () => (
             )
         }
     >
-        <box className="module pkg-updates">
+        <box vertical={config.vertical} className="module pkg-updates">
             <label className="icon" label="download" />
             <label label={bind(Updates.get_default(), "numUpdates").as(String)} />
         </box>
@@ -461,7 +472,7 @@ const NotifCount = () => (
             )
         }
     >
-        <box className="module notif-count">
+        <box vertical={config.vertical} className="module notif-count">
             <label className="icon" label="info" />
             <label label={bind(AstalNotifd.get_default(), "notifications").as(n => String(n.length))} />
         </box>
@@ -476,6 +487,7 @@ const Battery = () => {
 
     return (
         <box
+            vertical={config.vertical}
             className={bind(className)}
             setup={self =>
                 setupCustomTooltip(
@@ -486,7 +498,9 @@ const Battery = () => {
             onDestroy={() => className.drop()}
         >
             <revealer
-                transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
+                transitionType={
+                    config.vertical ? Gtk.RevealerTransitionType.SLIDE_UP : Gtk.RevealerTransitionType.SLIDE_LEFT
+                }
                 transitionDuration={150}
                 revealChild={bind(AstalBattery.get_default(), "charging")}
             >
@@ -502,9 +516,9 @@ const DateTime = () => (
     <button
         onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
     >
-        <box className="module date-time">
+        <box vertical={config.vertical} className="module date-time">
             <label className="icon" label="calendar_month" />
-            <label label={bindCurrentTime(config.dateTimeFormat)} />
+            <label angle={config.vertical ? 270 : 0} label={bindCurrentTime(config.dateTimeFormat)} />
         </box>
     </button>
 );
@@ -521,25 +535,29 @@ export default ({ monitor }: { monitor: Monitor }) => (
     <window
         namespace="caelestia-bar"
         monitor={monitor.id}
-        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT}
+        anchor={
+            Astal.WindowAnchor.TOP |
+            Astal.WindowAnchor.LEFT |
+            (config.vertical ? Astal.WindowAnchor.BOTTOM : Astal.WindowAnchor.RIGHT)
+        }
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
     >
-        <centerbox className="bar">
-            <box>
+        <centerbox vertical={config.vertical} className={`bar ${config.vertical ? "vertical" : " horizontal"}`}>
+            <box vertical={config.vertical}>
                 <OSIcon />
                 <ActiveWindow />
                 <MediaPlaying />
                 <button
-                    hexpand
+                    expand
                     onScroll={(_, event) =>
                         event.delta_y > 0 ? (monitor.brightness -= 0.1) : (monitor.brightness += 0.1)
                     }
                 />
             </box>
             <Workspaces />
-            <box>
+            <box vertical={config.vertical}>
                 <button
-                    hexpand
+                    expand
                     onScroll={(_, event) => {
                         const speaker = AstalWp01.get_default()?.audio.defaultSpeaker;
                         if (!speaker) return;
diff --git a/src/utils/widgets.ts b/src/utils/widgets.ts
index c6f0f19..9802263 100644
--- a/src/utils/widgets.ts
+++ b/src/utils/widgets.ts
@@ -6,6 +6,8 @@ import type { AstalWidget } from "./types";
 export const setupCustomTooltip = (self: AstalWidget, text: string | Binding<string>) => {
     if (!text) return null;
 
+    self.set_has_tooltip(true);
+
     const window = new Widget.Window({
         visible: false,
         namespace: "caelestia-tooltip",
diff --git a/src/widgets/popupwindow.ts b/src/widgets/popupwindow.ts
index ffed396..2ba49fc 100644
--- a/src/widgets/popupwindow.ts
+++ b/src/widgets/popupwindow.ts
@@ -1,5 +1,6 @@
 import { Binding, register } from "astal";
 import { App, Astal, Gdk, Widget } from "astal/gtk3";
+import { bar } from "config";
 import AstalHyprland from "gi://AstalHyprland?version=0.1";
 
 const extendProp = <T>(
@@ -29,19 +30,30 @@ export default class PopupWindow extends Widget.Window {
 
     popup_at_widget(widget: JSX.Element, event: Gdk.Event | Astal.ClickEvent) {
         const { width, height } = widget.get_allocation();
-        const mWidth = AstalHyprland.get_default().get_focused_monitor().get_width();
+        const { width: mWidth, height: mHeight } = AstalHyprland.get_default().get_focused_monitor();
         const pWidth = this.get_preferred_width()[1];
+        const pHeight = this.get_preferred_height()[1];
         const [, x, y] = event instanceof Gdk.Event ? event.get_coords() : [null, event.x, event.y];
         const { x: cx, y: cy } = AstalHyprland.get_default().get_cursor_position();
 
-        let marginLeft = cx + ((width - pWidth) / 2 - x);
-        if (marginLeft < 0) marginLeft = 0;
-        else if (marginLeft + pWidth > mWidth) marginLeft = mWidth - pWidth;
+        let marginLeft = 0;
+        let marginTop = 0;
+        if (bar.vertical) {
+            marginLeft = cx + (width - x);
+            marginTop = cy + ((height - pHeight) / 2 - y);
+            if (marginTop < 0) marginTop = 0;
+            else if (marginTop + pHeight > mHeight) marginTop = mHeight - pHeight;
+        } else {
+            marginLeft = cx + ((width - pWidth) / 2 - x);
+            if (marginLeft < 0) marginLeft = 0;
+            else if (marginLeft + pWidth > mWidth) marginLeft = mWidth - pWidth;
+            marginTop = cy + (height - y);
+        }
 
         this.anchor = Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT;
         this.exclusivity = Astal.Exclusivity.IGNORE;
         this.marginLeft = marginLeft;
-        this.marginTop = cy + (height - y);
+        this.marginTop = marginTop;
 
         this.show();
     }