diff options
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/bar.tsx | 58 |
1 files changed, 38 insertions, 20 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; |