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

bar: add panel style

Browse source
This commit is contained in:
2 * r + 2 * t 2025-03-31 16:42:14 +11:00
parent 431918b752
commit 1081adfe5e
4 changed files with 125 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
scss/bar.scss
View file

@ -3,26 +3,25 @@
@use "scheme";
@use "font";
@mixin bar-spacing($vertical: false) {
@include lib.spacing(10, $vertical);
& > * {
@include lib.spacing(10, $vertical);
}
}
.bar {
@include font.mono;
font-size: lib.s(14);
.module {
@include lib.rounded(8);
background-color: scheme.$base;
}
label.icon {
font-size: lib.s(18);
}
.os-icon {
@include lib.border(scheme.$yellow);
color: scheme.$yellow;
font-size: lib.s(14);
}
.active-window {
@ -88,24 +87,26 @@
}
.power {
@include lib.border(scheme.$red);
@include lib.element-decel;
@include font.icon;
color: scheme.$red;
font-weight: bold;
font-size: lib.s(16);
&:hover,
&:focus {
color: color.change(scheme.$red, $alpha: 0.8);
}
&:active {
color: color.change(scheme.$red, $alpha: 0.6);
}
}
&.horizontal {
margin: 10px 10px 0 10px;
@include lib.spacing(10);
& > * {
@include lib.spacing(10);
}
.module {
padding: lib.s(5) lib.s(10);
@ -147,12 +148,6 @@
&.vertical {
margin: 10px 0 10px 10px;
@include lib.spacing(10, true);
& > * {
@include lib.spacing(10, true);
}
.module {
padding: lib.s(8);
@ -185,4 +180,51 @@
@include lib.spacing(10, true);
}
}
&.gaps {
.module {
@include lib.rounded(8);
background-color: scheme.$base;
}
.os-icon {
@include lib.border(scheme.$yellow);
}
.power {
@include lib.border(scheme.$red);
}
&.horizontal {
@include bar-spacing;
}
&.vertical {
@include bar-spacing(true);
}
}
&.panel {
@include lib.rounded(20);
@include lib.border(scheme.$primary, 0.5, 2);
background-color: scheme.$mantle;
.os-icon {
font-size: lib.s(16);
}
&.horizontal {
padding: lib.s(5) lib.s(10);
}
&.vertical {
padding: lib.s(10) lib.s(5);
.os-icon > * {
margin-left: lib.s(-7);
}
}
}
}

1
src/config/defaults.ts
View file

@ -8,6 +8,7 @@ export default {
// Modules
bar: {
vertical: true,
style: "gaps",
modules: {
osIcon: {
enabled: true,

1
src/config/types.ts
View file

@ -9,6 +9,7 @@ export default {
"style.vibrant": BOOL,
// Bar
"bar.vertical": BOOL,
"bar.style": ["gaps", "panel", "embedded"],
"bar.modules.osIcon.enabled": BOOL,
"bar.modules.activeWindow.enabled": BOOL,
"bar.modules.mediaPlaying.enabled": BOOL,

114
src/modules/bar.tsx
View file

@ -554,59 +554,63 @@ const bindWidget = (module: keyof typeof config.modules, Widget: () => JSX.Eleme
const bindCompositeWidget = (module: keyof typeof config.modules, binding: Binding<JSX.Element>) =>
bind(Variable.derive([config.modules[module].enabled, binding], (e, w) => (e ? w : <Dummy />)));
export default ({ monitor }: { monitor: Monitor }) => (
<window
namespace="caelestia-bar"
monitor={monitor.id}
anchor={bind(config.vertical).as(
v =>
Astal.WindowAnchor.TOP |
Astal.WindowAnchor.LEFT |
(v ? Astal.WindowAnchor.BOTTOM : Astal.WindowAnchor.RIGHT)
)}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
>
<centerbox
vertical={bind(config.vertical)}
className={bind(config.vertical).as(v => `bar ${v ? "vertical" : " horizontal"}`)}
export default ({ monitor }: { monitor: Monitor }) => {
const className = Variable.derive(
[bind(config.vertical), bind(config.style)],
(v, s) => `bar ${v ? "vertical" : " horizontal"} ${s}`
);
return (
<window
namespace="caelestia-bar"
monitor={monitor.id}
anchor={bind(config.vertical).as(
v =>
Astal.WindowAnchor.TOP |
Astal.WindowAnchor.LEFT |
(v ? Astal.WindowAnchor.BOTTOM : Astal.WindowAnchor.RIGHT)
)}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
>
<box vertical={bind(config.vertical)}>
{bindWidget("osIcon", OSIcon)}
{bindWidget("activeWindow", ActiveWindow)}
{bindWidget("mediaPlaying", MediaPlaying)}
<button
expand
onScroll={(_, event) =>
event.delta_y > 0 ? (monitor.brightness -= 0.1) : (monitor.brightness += 0.1)
}
/>
</box>
{bindWidget("workspaces", Workspaces)}
<box vertical={bind(config.vertical)}>
<button
expand
onScroll={(_, event) => {
const speaker = AstalWp.get_default()?.audio.defaultSpeaker;
if (!speaker) return;
speaker.mute = false;
if (event.delta_y > 0) speaker.volume -= 0.1;
else speaker.volume += 0.1;
}}
/>
{bindWidget("tray", Tray)}
{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>
</centerbox>
</window>
);
<centerbox vertical={bind(config.vertical)} className={bind(className)} onDestroy={() => className.drop()}>
<box vertical={bind(config.vertical)}>
{bindWidget("osIcon", OSIcon)}
{bindWidget("activeWindow", ActiveWindow)}
{bindWidget("mediaPlaying", MediaPlaying)}
<button
expand
onScroll={(_, event) =>
event.delta_y > 0 ? (monitor.brightness -= 0.1) : (monitor.brightness += 0.1)
}
/>
</box>
{bindWidget("workspaces", Workspaces)}
<box vertical={bind(config.vertical)}>
<button
expand
onScroll={(_, event) => {
const speaker = AstalWp.get_default()?.audio.defaultSpeaker;
if (!speaker) return;
speaker.mute = false;
if (event.delta_y > 0) speaker.volume -= 0.1;
else speaker.volume += 0.1;
}}
/>
{bindWidget("tray", Tray)}
{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>
</centerbox>
</window>
);
};