josh
/
nixos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Polish bar spacing and clock module with custom clock icon

This commit is contained in:
Joshua Yuen 2026-09-12 16:18:18 -04:00
parent c136b1dde9
commit 925ab10de1
Signed by: josh
GPG Key ID: 530DA0331EFE99F5
3 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
modules/home/ags/app/style.scss
View File

@ -43,7 +43,7 @@ $module-bg: transparentize($base02, 0.4);
.bar .end, .bar .end,
.bar .last { .bar .last {
background: $module-bg; background: $module-bg;
padding: 0 10px; padding: 2px 10px;
&:hover { &:hover {
background: $base03; background: $base03;
@ -57,12 +57,12 @@ $module-bg: transparentize($base02, 0.4);
.bar .center { .bar .center {
border-radius: $radius; border-radius: $radius;
margin: 0 2px; margin: 2px;
} }
.bar .end { .bar .end {
border-radius: ($radius * 0.75) ($radius * 2) ($radius * 0.75) ($radius * 2); border-radius: ($radius * 0.75) ($radius * 2) ($radius * 0.75) ($radius * 2);
margin: 0 2px; margin: 2px;
} }
.bar .last { .bar .last {
@ -79,6 +79,10 @@ $module-bg: transparentize($base02, 0.4);
font-weight: bold; font-weight: bold;
} }
.clock icon {
font-size: 12px;
}
.ws { .ws {
min-width: 20px; min-width: 20px;
border-radius: 6px; border-radius: 6px;
@ -95,10 +99,12 @@ $module-bg: transparentize($base02, 0.4);
background: transparentize($base05, 0.88); background: transparentize($base05, 0.88);
} }
.quicksettings icon, .quicksettings icon {
font-size: 12px;
}
.wifi icon, .wifi icon,
.wifi-header icon, .wifi-header icon {
.battery icon {
font-size: 16px; font-size: 16px;
} }

7
modules/home/ags/app/widget/Clock.tsx
View File

@ -8,5 +8,10 @@ const time = Variable("").poll(1000, () => {
}) })
export default function Clock() { export default function Clock() {
return <label className="clock" label={bind(time)} /> return (
<box spacing={6}>
<icon icon="clock-hands-symbolic" />
<label className="clock" label={bind(time)} />
</box>
)
} }

10
modules/home/ags/default.nix
View File

@ -77,6 +77,16 @@ in
pkgs.nixos-icons pkgs.nixos-icons
]; ];
# clock face with hands at 12 and 3; adwaita has no such icon.
# fill-only paths: gtk symbolic recoloring turns stroke shapes into solids
xdg.dataFile."icons/hicolor/scalable/actions/clock-hands-symbolic.svg".text = ''
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" fill-rule="evenodd" d="M8 1.5A6.5 6.5 0 1 0 8 14.5A6.5 6.5 0 1 0 8 1.5ZM8 3A5 5 0 1 0 8 13A5 5 0 1 0 8 3Z"/>
<rect x="7.4" y="3.8" width="1.2" height="4.8" rx="0.6" fill="currentColor"/>
<rect x="7.4" y="7.4" width="3.4" height="1.2" rx="0.6" fill="currentColor"/>
</svg>
'';
wayland.windowManager.hyprland = mkIf hyprlandCfg.enable { wayland.windowManager.hyprland = mkIf hyprlandCfg.enable {
settings.exec-once = [ "ags-bar" ]; settings.exec-once = [ "ags-bar" ];
}; };