nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

bar: refactor to use visible not replace

Browse source 
Also fix gap after workspaces on embedded style
This commit is contained in:
2 * r + 2 * t 2025-04-02 19:24:46 +11:00
parent 33e1ab0785
commit c131a0425e
2 changed files with 92 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
scss/bar.scss
View file

@ -276,6 +276,10 @@
border-bottom-left-radius: lib.s($-rounding); border-bottom-left-radius: lib.s($-rounding);
} }
.workspaces {
margin-right: -1px;
}
.power { .power {
padding-right: lib.s(12); padding-right: lib.s(12);
} }
@ -296,6 +300,10 @@
padding-top: lib.s(15); padding-top: lib.s(15);
} }
.workspaces {
margin-bottom: -1px;
}
.os-icon { .os-icon {
padding-top: lib.s(12); padding-top: lib.s(12);
} }

174
src/modules/bar.tsx
View file

@ -9,7 +9,7 @@ import type { AstalWidget } from "@/utils/types";
import { setupCustomTooltip } from "@/utils/widgets"; import { setupCustomTooltip } from "@/utils/widgets";
import ScreenCorner from "@/widgets/screencorner"; import ScreenCorner from "@/widgets/screencorner";
import { execAsync, Variable } from "astal"; import { execAsync, Variable } from "astal";
import Binding, { bind, kebabify } from "astal/binding"; import { bind, kebabify } from "astal/binding";
import { App, Astal, Gtk, type Widget } from "astal/gtk3"; import { App, Astal, Gtk, type Widget } from "astal/gtk3";
import { bar as config } from "config"; import { bar as config } from "config";
import AstalBattery from "gi://AstalBattery"; import AstalBattery from "gi://AstalBattery";
@ -84,6 +84,7 @@ const spacerClassName = ({ beforeSpacer, afterSpacer }: SpacerClassNameProps) =>
const OSIcon = (props: SpacerClassNameProps) => ( const OSIcon = (props: SpacerClassNameProps) => (
<button <button
visible={bind(config.modules.osIcon.enabled)}
className={`module os-icon ${spacerClassName(props)}`} className={`module os-icon ${spacerClassName(props)}`}
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("dashboard")} onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("dashboard")}
> >
@ -93,6 +94,7 @@ const OSIcon = (props: SpacerClassNameProps) => (
const ActiveWindow = (props: SpacerClassNameProps) => ( const ActiveWindow = (props: SpacerClassNameProps) => (
<box <box
visible={bind(config.modules.activeWindow.enabled)}
vertical={bind(config.vertical)} vertical={bind(config.vertical)}
className={`module active-window ${spacerClassName(props)}`} className={`module active-window ${spacerClassName(props)}`}
setup={self => { setup={self => {
@ -138,6 +140,7 @@ const MediaPlaying = (props: SpacerClassNameProps) => {
players.lastPlayer ? `${players.lastPlayer.title} - ${players.lastPlayer.artist}` : fallback; players.lastPlayer ? `${players.lastPlayer.title} - ${players.lastPlayer.artist}` : fallback;
return ( return (
<button <button
visible={bind(config.modules.mediaPlaying.enabled)}
onClick={(_, event) => { onClick={(_, event) => {
if (event.button === Astal.MouseButton.PRIMARY) switchPane("audio"); if (event.button === Astal.MouseButton.PRIMARY) switchPane("audio");
else if (event.button === Astal.MouseButton.SECONDARY) players.lastPlayer?.play_pause(); else if (event.button === Astal.MouseButton.SECONDARY) players.lastPlayer?.play_pause();
@ -221,6 +224,7 @@ const Workspace = ({ idx }: { idx: number }) => {
const Workspaces = (props: SpacerClassNameProps) => ( const Workspaces = (props: SpacerClassNameProps) => (
<eventbox <eventbox
visible={bind(config.modules.workspaces.enabled)}
onScroll={(_, event) => { onScroll={(_, event) => {
const activeWs = hyprland.focusedClient?.workspace.name; const activeWs = hyprland.focusedClient?.workspace.name;
if (activeWs?.startsWith("special:")) hyprland.dispatch("togglespecialworkspace", activeWs.slice(8)); if (activeWs?.startsWith("special:")) hyprland.dispatch("togglespecialworkspace", activeWs.slice(8));
@ -249,15 +253,23 @@ const TrayItem = (item: AstalTray.TrayItem) => (
</menubutton> </menubutton>
); );
const Tray = (props: SpacerClassNameProps) => ( const Tray = (props: SpacerClassNameProps) => {
<box const visible = Variable.derive(
vertical={bind(config.vertical)} [config.modules.tray.enabled, bind(AstalTray.get_default(), "items")],
className={`module tray ${spacerClassName(props)}`} (e, i) => e && i.length > 0
visible={bind(AstalTray.get_default(), "items").as(i => i.length > 0)} );
>
{bind(AstalTray.get_default(), "items").as(i => i.map(TrayItem))} return (
</box> <box
); visible={bind(visible)}
vertical={bind(config.vertical)}
className={`module tray ${spacerClassName(props)}`}
onDestroy={() => visible.drop()}
>
{bind(AstalTray.get_default(), "items").as(i => i.map(TrayItem))}
</box>
);
};
const Network = () => ( const Network = () => (
<button <button
@ -429,7 +441,11 @@ const Bluetooth = () => (
); );
const StatusIcons = (props: SpacerClassNameProps) => ( const StatusIcons = (props: SpacerClassNameProps) => (
<box vertical={bind(config.vertical)} className={`module status-icons ${spacerClassName(props)}`}> <box
visible={bind(config.modules.statusIcons.enabled)}
vertical={bind(config.vertical)}
className={`module status-icons ${spacerClassName(props)}`}
>
<Network /> <Network />
<Bluetooth /> <Bluetooth />
</box> </box>
@ -437,6 +453,7 @@ const StatusIcons = (props: SpacerClassNameProps) => (
const PkgUpdates = (props: SpacerClassNameProps) => ( const PkgUpdates = (props: SpacerClassNameProps) => (
<button <button
visible={bind(config.modules.pkgUpdates.enabled)}
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("packages")} onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("packages")}
setup={self => setup={self =>
setupCustomTooltip( setupCustomTooltip(
@ -454,6 +471,7 @@ const PkgUpdates = (props: SpacerClassNameProps) => (
const NotifCount = (props: SpacerClassNameProps) => ( const NotifCount = (props: SpacerClassNameProps) => (
<button <button
visible={bind(config.modules.notifCount.enabled)}
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("notifpane")} onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("notifpane")}
setup={self => setup={self =>
setupCustomTooltip( setupCustomTooltip(
@ -483,6 +501,10 @@ const NotifCount = (props: SpacerClassNameProps) => (
); );
const Battery = (props: SpacerClassNameProps) => { const Battery = (props: SpacerClassNameProps) => {
const visible = Variable.derive(
[config.modules.battery.enabled, bind(AstalBattery.get_default(), "isBattery")],
(e, i) => e && i
);
const className = Variable.derive( const className = Variable.derive(
[bind(AstalBattery.get_default(), "percentage"), bind(AstalBattery.get_default(), "charging")], [bind(AstalBattery.get_default(), "percentage"), bind(AstalBattery.get_default(), "charging")],
(p, c) => `module battery ${c ? "charging" : p < 0.2 ? "low" : ""} ${spacerClassName(props)}` (p, c) => `module battery ${c ? "charging" : p < 0.2 ? "low" : ""} ${spacerClassName(props)}`
@ -494,10 +516,12 @@ const Battery = (props: SpacerClassNameProps) => {
return ( return (
<box <box
visible={bind(visible)}
vertical={bind(config.vertical)} vertical={bind(config.vertical)}
className={bind(className)} className={bind(className)}
setup={self => setupCustomTooltip(self, bind(tooltip))} setup={self => setupCustomTooltip(self, bind(tooltip))}
onDestroy={() => { onDestroy={() => {
visible.drop();
className.drop(); className.drop();
tooltip.drop(); tooltip.drop();
}} }}
@ -508,44 +532,42 @@ const Battery = (props: SpacerClassNameProps) => {
); );
}; };
const DateTime = (props: SpacerClassNameProps) => ( const DateTimeHoriz = (props: SpacerClassNameProps) => (
<button <box className={`module date-time ${spacerClassName(props)}`}>
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("time")} <label className="icon" label="calendar_month" />
setup={self => <label
setupCustomTooltip(self, bindCurrentTime(bind(config.modules.dateTime.detailedFormat), undefined, self)) setup={self => {
} const time = bindCurrentTime(bind(config.modules.dateTime.format), undefined, self);
> self.label = time.get();
<box className={`module date-time ${spacerClassName(props)}`}> self.hook(time, (_, t) => (self.label = t));
<label className="icon" label="calendar_month" /> }}
<label />
setup={self => </box>
self.hook(
bindCurrentTime(bind(config.modules.dateTime.format), undefined, self),
(_, t) => (self.label = t)
)
}
/>
</box>
</button>
); );
const DateTimeVertical = (props: SpacerClassNameProps) => ( const DateTimeVertical = (props: SpacerClassNameProps) => (
<box vertical className={`module date-time ${spacerClassName(props)}`}>
<label className="icon" label="calendar_month" />
<label label={bindCurrentTime("%H")} />
<label label={bindCurrentTime("%M")} />
</box>
);
const DateTime = (props: SpacerClassNameProps) => (
<button <button
visible={bind(config.modules.dateTime.enabled)}
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("time")} onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("time")}
setup={self => setup={self =>
setupCustomTooltip(self, bindCurrentTime(bind(config.modules.dateTime.detailedFormat), undefined, self)) setupCustomTooltip(self, bindCurrentTime(bind(config.modules.dateTime.detailedFormat), undefined, self))
} }
> >
<box vertical className={`module date-time ${spacerClassName(props)}`}> {bind(config.vertical).as(v => (v ? <DateTimeVertical {...props} /> : <DateTimeHoriz {...props} />))}
<label className="icon" label="calendar_month" />
<label label={bindCurrentTime("%H")} />
<label label={bindCurrentTime("%M")} />
</box>
</button> </button>
); );
const Power = (props: SpacerClassNameProps) => ( const Power = (props: SpacerClassNameProps) => (
<button <button
visible={bind(config.modules.power.enabled)}
className={`module power ${spacerClassName(props)}`} className={`module power ${spacerClassName(props)}`}
label="power_settings_new" label="power_settings_new"
onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && App.toggle_window("session")} onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && App.toggle_window("session")}
@ -562,13 +584,21 @@ const Spacer = ({ onScroll }: { onScroll: (self: Widget.EventBox, event: Astal.S
</eventbox> </eventbox>
); );
const Dummy = () => <box visible={false} />; // Invisible box cause otherwise shows as text const BrightnessSpacer = ({ monitor }: { monitor: Monitor }) => (
<Spacer onScroll={(_, event) => (event.delta_y > 0 ? (monitor.brightness -= 0.1) : (monitor.brightness += 0.1))} />
);
const bindWidget = (module: keyof typeof config.modules, Widget: () => JSX.Element) => const VolumeSpacer = () => (
bind(config.modules[module].enabled).as(e => (e ? <Widget /> : <Dummy />)); <Spacer
onScroll={(_, event) => {
const bindCompositeWidget = (module: keyof typeof config.modules, binding: Binding<JSX.Element>) => const speaker = AstalWp.get_default()?.audio.defaultSpeaker;
bind(Variable.derive([config.modules[module].enabled, binding], (e, w) => (e ? w : <Dummy />))); if (!speaker) return console.error("Unable to connect to WirePlumber.");
speaker.mute = false;
if (event.delta_y > 0) speaker.volume -= 0.1;
else speaker.volume += 0.1;
}}
/>
);
const Bar = ({ monitor }: { monitor: Monitor }) => { const Bar = ({ monitor }: { monitor: Monitor }) => {
const className = Variable.derive( const className = Variable.derive(
@ -579,57 +609,21 @@ const Bar = ({ monitor }: { monitor: Monitor }) => {
return ( return (
<centerbox vertical={bind(config.vertical)} className={bind(className)} onDestroy={() => className.drop()}> <centerbox vertical={bind(config.vertical)} className={bind(className)} onDestroy={() => className.drop()}>
<box vertical={bind(config.vertical)}> <box vertical={bind(config.vertical)}>
{bindWidget("osIcon", () => ( <OSIcon />
<OSIcon /> <ActiveWindow />
))} <MediaPlaying beforeSpacer />
{bindWidget("activeWindow", () => ( <BrightnessSpacer monitor={monitor} />
<ActiveWindow />
))}
{bindWidget("mediaPlaying", () => (
<MediaPlaying beforeSpacer />
))}
<Spacer
onScroll={(_, event) =>
event.delta_y > 0 ? (monitor.brightness -= 0.1) : (monitor.brightness += 0.1)
}
/>
</box> </box>
{bindWidget("workspaces", () => ( <Workspaces beforeSpacer afterSpacer />
<Workspaces beforeSpacer afterSpacer />
))}
<box vertical={bind(config.vertical)}> <box vertical={bind(config.vertical)}>
<Spacer <VolumeSpacer />
onScroll={(_, event) => { <Tray afterSpacer />
const speaker = AstalWp.get_default()?.audio.defaultSpeaker; <StatusIcons />
if (!speaker) return console.error("Unable to connect to WirePlumber."); <PkgUpdates />
speaker.mute = false; <NotifCount />
if (event.delta_y > 0) speaker.volume -= 0.1; <Battery />
else speaker.volume += 0.1; <DateTime />
}} <Power />
/>
{bindWidget("tray", () => (
<Tray afterSpacer />
))}
{bindWidget("statusIcons", () => (
<StatusIcons />
))}
{bindWidget("pkgUpdates", () => (
<PkgUpdates />
))}
{bindWidget("notifCount", () => (
<NotifCount />
))}
{bindCompositeWidget(
"battery",
bind(AstalBattery.get_default(), "isBattery").as(b => (b ? <Battery /> : <Dummy />))
)}
{bindCompositeWidget(
"dateTime",
bind(config.vertical).as(v => (v ? <DateTimeVertical /> : <DateTime />))
)}
{bindWidget("power", () => (
<Power />
))}
</box> </box>
</centerbox> </centerbox>
); );