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

bar: add optional labels for workspaces

Browse source 
Also can customise labels
This commit is contained in:
2 * r + 2 * t 2025-04-07 13:38:23 +10:00
parent c0f7b06729
commit 4a1a3a6d89
4 changed files with 97 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
scss/bar.scss
View file

@ -40,20 +40,43 @@
}
}
.workspaces > * {
@include lib.rounded(100);
@include lib.element-decel;
.workspaces {
& > button {
@include lib.rounded(100);
@include lib.element-decel;
min-width: lib.s(8);
min-height: lib.s(8);
background-color: scheme.$surface1;
font-size: lib.s(13);
font-weight: bold;
&.occupied {
background-color: scheme.$overlay1;
&.focused {
background-color: scheme.$mauve;
}
}
&.focused {
background-color: scheme.$mauve;
&:not(.labels-shown) > button {
min-width: lib.s(8);
min-height: lib.s(8);
background-color: scheme.$surface1;
&.occupied {
background-color: scheme.$overlay1;
}
&.focused {
background-color: scheme.$mauve;
}
}
&.labels-shown > button {
color: color.change(scheme.$overlay1, $alpha: 1);
&.occupied {
color: color.mix(scheme.$text, scheme.$mauve, 50%);
}
&.focused {
color: color.change(scheme.$base, $alpha: 1);
}
}
}
@ -126,13 +149,21 @@
}
.workspaces {
padding: lib.s(3) lib.s(18);
@include lib.spacing(10);
& > .focused {
min-width: lib.s(30);
}
&.labels-shown > button {
padding: lib.s(3) lib.s(8);
&.focused {
min-width: 0;
padding-left: lib.s(20);
padding-right: lib.s(20);
}
}
}
.tray {
@ -167,13 +198,21 @@
}
.workspaces {
padding: lib.s(18) lib.s(3);
@include lib.spacing(10, true);
& > .focused {
min-height: lib.s(30);
}
&.labels-shown > button {
padding: lib.s(3) lib.s(8);
&.focused {
min-height: 0;
padding-top: lib.s(15);
padding-bottom: lib.s(15);
}
}
}
.tray {
@ -222,10 +261,18 @@
&.horizontal {
@include bar-spacing;
.workspaces {
padding: lib.s(6) lib.s(15);
}
}
&.vertical {
@include bar-spacing(true);
.workspaces {
padding: lib.s(15) lib.s(6);
}
}
}

3
src/config/defaults.ts
View file

@ -46,6 +46,9 @@ export default {
modules: {
workspaces: {
shown: 5,
showLabels: false,
labels: ["󰮯", "󰮯", "󰮯", "󰮯", "󰮯"],
xalign: -1,
},
dateTime: {
format: "%d/%m/%y %R",

3
src/config/types.ts
View file

@ -34,6 +34,9 @@ export default {
"bar.layout.centerbox.end": ARR(barModules),
"bar.layout.flowbox": ARR(barModules),
"bar.modules.workspaces.shown": NUM,
"bar.modules.workspaces.showLabels": BOOL,
"bar.modules.workspaces.labels": ARR(STR),
"bar.modules.workspaces.xalign": NUM,
"bar.modules.dateTime.format": STR,
"bar.modules.dateTime.detailedFormat": STR,
// Launcher

51
src/modules/bar.tsx
View file

@ -209,6 +209,7 @@ const Workspace = ({ idx }: { idx: number }) => {
config.modules.workspaces.shown.get() +
idx
: idx;
return (
<button
halign={Gtk.Align.CENTER}
@ -239,31 +240,39 @@ const Workspace = ({ idx }: { idx: number }) => {
self.toggleClassName("focused", hyprland.focusedWorkspace?.id === wsId);
update();
}}
/>
>
<label
visible={bind(config.modules.workspaces.showLabels)}
css={bind(config.modules.workspaces.xalign).as(a => `margin-left: ${a}px; margin-right: ${-a}px;`)}
label={bind(config.modules.workspaces.labels).as(l => l[idx - 1] ?? String(idx))}
/>
</button>
);
};
const Workspaces = ({ monitor, ...props }: ModuleProps) => (
<eventbox
onScroll={(_, event) => {
const activeWs = hyprland.focusedClient?.workspace.name;
if (activeWs?.startsWith("special:")) hyprland.dispatch("togglespecialworkspace", activeWs.slice(8));
else if (event.delta_y > 0 || hyprland.focusedWorkspace?.id > 1)
hyprland.dispatch("workspace", (event.delta_y < 0 ? "-" : "+") + 1);
}}
>
<box
vertical={bind(config.vertical)}
className={bind(config.modules.workspaces.shown).as(
s => `module workspaces ${s % 2 === 0 ? "even" : "odd"} ${getClassName(props)}`
)}
const Workspaces = ({ monitor, ...props }: ModuleProps) => {
const className = Variable.derive(
[config.modules.workspaces.shown, config.modules.workspaces.showLabels],
(s, l) => `module workspaces ${s % 2 === 0 ? "even" : "odd"} ${l ? "labels-shown" : ""} ${getClassName(props)}`
);
return (
<eventbox
onScroll={(_, event) => {
const activeWs = hyprland.focusedClient?.workspace.name;
if (activeWs?.startsWith("special:")) hyprland.dispatch("togglespecialworkspace", activeWs.slice(8));
else if (event.delta_y > 0 || hyprland.focusedWorkspace?.id > 1)
hyprland.dispatch("workspace", (event.delta_y < 0 ? "-" : "+") + 1);
}}
>
{bind(config.modules.workspaces.shown).as(
n => Array.from({ length: n }).map((_, idx) => <Workspace idx={idx + 1} />) // Start from 1
)}
</box>
</eventbox>
);
<box vertical={bind(config.vertical)} className={bind(className)} onDestroy={() => className.drop()}>
{bind(config.modules.workspaces.shown).as(
n => Array.from({ length: n }).map((_, idx) => <Workspace idx={idx + 1} />) // Start from 1
)}
</box>
</eventbox>
);
};
const TrayItem = (item: AstalTray.TrayItem) => (
<menubutton