bar: optional modules

All modules can be enabled/disabled in config
This commit is contained in:
2 * r + 2 * t 2025-02-20 23:41:24 +11:00
parent f70735078f
commit 90cc9ac00f
2 changed files with 60 additions and 19 deletions

View file

@ -3,8 +3,44 @@ import { Astal } from "astal/gtk3";
// Modules // Modules
export const bar = { export const bar = {
vertical: true, vertical: true,
wsPerGroup: 5, modules: {
dateTime: { format: "%d/%m/%y %R", detailed: "%c" }, osIcon: {
enabled: true,
},
activeWindow: {
enabled: true,
},
mediaPlaying: {
enabled: true,
},
workspaces: {
enabled: true,
shown: 5,
},
tray: {
enabled: true,
},
statusIcons: {
enabled: true,
},
pkgUpdates: {
enabled: true,
},
notifCount: {
enabled: true,
},
battery: {
enabled: true,
},
dateTime: {
enabled: true,
format: "%d/%m/%y %R",
detailedFormat: "%c",
},
power: {
enabled: true,
},
},
}; };
export const launcher = { export const launcher = {

View file

@ -169,7 +169,9 @@ const MediaPlaying = () => {
const Workspace = ({ idx }: { idx: number }) => { const Workspace = ({ idx }: { idx: number }) => {
let wsId = hyprland.focusedWorkspace let wsId = hyprland.focusedWorkspace
? Math.floor((hyprland.focusedWorkspace.id - 1) / config.wsPerGroup) * config.wsPerGroup + idx ? Math.floor((hyprland.focusedWorkspace.id - 1) / config.modules.workspaces.shown) *
config.modules.workspaces.shown +
idx
: idx; : idx;
return ( return (
<button <button
@ -185,7 +187,10 @@ const Workspace = ({ idx }: { idx: number }) => {
self.hook(hyprland, "notify::focused-workspace", () => { self.hook(hyprland, "notify::focused-workspace", () => {
if (!hyprland.focusedWorkspace) return; if (!hyprland.focusedWorkspace) return;
wsId = Math.floor((hyprland.focusedWorkspace.id - 1) / config.wsPerGroup) * config.wsPerGroup + idx; wsId =
Math.floor((hyprland.focusedWorkspace.id - 1) / config.modules.workspaces.shown) *
config.modules.workspaces.shown +
idx;
self.toggleClassName("focused", hyprland.focusedWorkspace.id === wsId); self.toggleClassName("focused", hyprland.focusedWorkspace.id === wsId);
update(); update();
}); });
@ -210,7 +215,7 @@ const Workspaces = () => (
}} }}
> >
<box vertical={config.vertical} className="module workspaces"> <box vertical={config.vertical} className="module workspaces">
{Array.from({ length: config.wsPerGroup }).map((_, idx) => ( {Array.from({ length: config.modules.workspaces.shown }).map((_, idx) => (
<Workspace idx={idx + 1} /> // Start from 1 <Workspace idx={idx + 1} /> // Start from 1
))} ))}
</box> </box>
@ -484,11 +489,11 @@ const Battery = () => {
const DateTime = () => ( const DateTime = () => (
<button <button
onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")} onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
setup={self => setupCustomTooltip(self, bindCurrentTime(config.dateTime.detailed))} setup={self => setupCustomTooltip(self, bindCurrentTime(config.modules.dateTime.detailedFormat))}
> >
<box className="module date-time"> <box className="module date-time">
<label className="icon" label="calendar_month" /> <label className="icon" label="calendar_month" />
<label label={bindCurrentTime(config.dateTime.format)} /> <label label={bindCurrentTime(config.modules.dateTime.format)} />
</box> </box>
</button> </button>
); );
@ -496,7 +501,7 @@ const DateTime = () => (
const DateTimeVertical = () => ( const DateTimeVertical = () => (
<button <button
onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")} onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideright")}
setup={self => setupCustomTooltip(self, bindCurrentTime(config.dateTime.detailed))} setup={self => setupCustomTooltip(self, bindCurrentTime(config.modules.dateTime.detailedFormat))}
> >
<box vertical className="module date-time"> <box vertical className="module date-time">
<label className="icon" label="calendar_month" /> <label className="icon" label="calendar_month" />
@ -527,9 +532,9 @@ export default ({ monitor }: { monitor: Monitor }) => (
> >
<centerbox vertical={config.vertical} className={`bar ${config.vertical ? "vertical" : " horizontal"}`}> <centerbox vertical={config.vertical} className={`bar ${config.vertical ? "vertical" : " horizontal"}`}>
<box vertical={config.vertical}> <box vertical={config.vertical}>
<OSIcon /> {config.modules.osIcon.enabled && <OSIcon />}
<ActiveWindow /> {config.modules.activeWindow.enabled && <ActiveWindow />}
<MediaPlaying /> {config.modules.mediaPlaying.enabled && <MediaPlaying />}
<button <button
expand expand
onScroll={(_, event) => onScroll={(_, event) =>
@ -537,7 +542,7 @@ export default ({ monitor }: { monitor: Monitor }) => (
} }
/> />
</box> </box>
<Workspaces /> {config.modules.workspaces.enabled && <Workspaces />}
<box vertical={config.vertical}> <box vertical={config.vertical}>
<button <button
expand expand
@ -549,13 +554,13 @@ export default ({ monitor }: { monitor: Monitor }) => (
else speaker.volume += 0.1; else speaker.volume += 0.1;
}} }}
/> />
<Tray /> {config.modules.tray.enabled && <Tray />}
<StatusIcons /> {config.modules.statusIcons.enabled && <StatusIcons />}
<PkgUpdates /> {config.modules.pkgUpdates.enabled && <PkgUpdates />}
<NotifCount /> {config.modules.notifCount.enabled && <NotifCount />}
{AstalBattery.get_default().isBattery && <Battery />} {config.modules.battery.enabled && AstalBattery.get_default().isBattery && <Battery />}
{config.vertical ? <DateTimeVertical /> : <DateTime />} {config.modules.dateTime.enabled && (config.vertical ? <DateTimeVertical /> : <DateTime />)}
<Power /> {config.modules.power.enabled && <Power />}
</box> </box>
</centerbox> </centerbox>
</window> </window>