Add nix logo, clock format, and curved module separators
This commit is contained in:
parent
599c2fb29c
commit
22304e0eb5
GPG Key ID:
530DA0331EFE99F5
|
|
@ -1,6 +1,9 @@
|
|||
@use "palette" as *;
|
||||
|
||||
$radius: 12px;
|
||||
$bar-alpha: 0.7;
|
||||
$bar-bg: transparentize($base01, 1 - $bar-alpha);
|
||||
$module-bg: transparentize($base02, 0.4);
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
|
|
@ -14,18 +17,66 @@ $radius: 12px;
|
|||
}
|
||||
|
||||
.bar {
|
||||
background: $base01;
|
||||
padding: 4px 12px;
|
||||
background: $bar-bg;
|
||||
padding: 0;
|
||||
color: $base05;
|
||||
|
||||
label,
|
||||
icon {
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
|
||||
-gtk-icon-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-corners {
|
||||
background: transparent;
|
||||
color: $bar-bg;
|
||||
}
|
||||
|
||||
.corner {
|
||||
background: transparent;
|
||||
color: $base01;
|
||||
color: $module-bg;
|
||||
}
|
||||
|
||||
.bar .first,
|
||||
.bar .center,
|
||||
.bar .end,
|
||||
.bar .last {
|
||||
background: $module-bg;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
background: $base03;
|
||||
}
|
||||
}
|
||||
|
||||
.bar .first {
|
||||
border-radius: 0 0 ($radius * 2.5) 0;
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
|
||||
.bar .center {
|
||||
border-radius: $radius;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.bar .end {
|
||||
border-radius: ($radius * 0.75) ($radius * 2) ($radius * 0.75) ($radius * 2);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.bar .last {
|
||||
border-radius: 0 0 0 ($radius * 2.5);
|
||||
margin: 0 0 0 2px;
|
||||
}
|
||||
|
||||
.logo icon {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.clock {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ws {
|
||||
|
|
@ -40,11 +91,6 @@ $radius: 12px;
|
|||
color: $base00;
|
||||
}
|
||||
|
||||
.clock {
|
||||
font-weight: bold;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.volume {
|
||||
border-radius: 6px;
|
||||
margin: 0 2px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { App, Astal, Gdk, Gtk } from "astal/gtk3"
|
||||
import Workspaces from "./Workspaces"
|
||||
import Logo from "./Logo"
|
||||
import Clock from "./Clock"
|
||||
import { VolumeWidget } from "./Volume"
|
||||
import { WifiWidget } from "./Wifi"
|
||||
|
|
@ -20,18 +21,33 @@ function Corner({ side }: { side: "left" | "right" }) {
|
|||
onDraw={(self, cr) => {
|
||||
const w = self.get_allocated_width()
|
||||
const h = self.get_allocated_height()
|
||||
const c = self.get_style_context().get_color(Gtk.StateFlags.NORMAL)
|
||||
cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha)
|
||||
if (side === "left") {
|
||||
cr.moveTo(0, 0)
|
||||
cr.lineTo(w, 0)
|
||||
cr.arcNegative(w, h, w, -Math.PI / 2, -Math.PI)
|
||||
} else {
|
||||
cr.moveTo(w, 0)
|
||||
cr.lineTo(0, 0)
|
||||
cr.arc(0, h, w, -Math.PI / 2, 0)
|
||||
// bar color comes from the parent strip so the sliver gets the
|
||||
// same bar-bg + module-bg stack as the pills
|
||||
const bar = self
|
||||
.get_parent()!
|
||||
.get_style_context()
|
||||
.get_color(Gtk.StateFlags.NORMAL)
|
||||
const mod = self
|
||||
.get_style_context()
|
||||
.get_color(Gtk.StateFlags.NORMAL)
|
||||
|
||||
const trace = () => {
|
||||
if (side === "left") {
|
||||
cr.moveTo(0, 0)
|
||||
cr.lineTo(w, 0)
|
||||
cr.arcNegative(w, h, w, -Math.PI / 2, -Math.PI)
|
||||
} else {
|
||||
cr.moveTo(w, 0)
|
||||
cr.lineTo(0, 0)
|
||||
cr.arc(0, h, w, -Math.PI / 2, 0)
|
||||
}
|
||||
cr.closePath()
|
||||
}
|
||||
cr.closePath()
|
||||
|
||||
cr.setSourceRGBA(bar.red, bar.green, bar.blue, bar.alpha)
|
||||
trace()
|
||||
cr.fillPreserve()
|
||||
cr.setSourceRGBA(mod.red, mod.green, mod.blue, mod.alpha)
|
||||
cr.fill()
|
||||
}}
|
||||
/>
|
||||
|
|
@ -72,23 +88,27 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
|
|||
<box
|
||||
className="bar-left"
|
||||
halign={Gtk.Align.START}
|
||||
valign={Gtk.Align.CENTER}
|
||||
valign={Gtk.Align.FILL}
|
||||
>
|
||||
<Workspaces />
|
||||
<Logo />
|
||||
<box className="center">
|
||||
<Workspaces />
|
||||
</box>
|
||||
</box>
|
||||
<box
|
||||
className="bar-center"
|
||||
halign={Gtk.Align.CENTER}
|
||||
valign={Gtk.Align.CENTER}
|
||||
>
|
||||
<Clock />
|
||||
</box>
|
||||
/>
|
||||
<box
|
||||
className="bar-right"
|
||||
halign={Gtk.Align.END}
|
||||
valign={Gtk.Align.CENTER}
|
||||
valign={Gtk.Align.FILL}
|
||||
>
|
||||
{right}
|
||||
<box className="clock last">
|
||||
<Clock />
|
||||
</box>
|
||||
</box>
|
||||
</centerbox>
|
||||
<box className="bar-corners">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import GLib from "gi://GLib"
|
||||
import { Variable, bind } from "astal"
|
||||
|
||||
const time = Variable("").poll(1000, () =>
|
||||
GLib.DateTime.new_now_local().format("%I:%M %p")!.replace(/^0/, "")
|
||||
)
|
||||
const time = Variable("").poll(1000, () => {
|
||||
const now = GLib.DateTime.new_now_local()
|
||||
const clock = now.format("%I:%M %p")!.replace(/^0/, "")
|
||||
return `${now.format("%a, %d %b")}, ${clock}`
|
||||
})
|
||||
|
||||
export default function Clock() {
|
||||
return <label className="clock" label={bind(time)} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import Gtk from "gi://Gtk?version=3.0"
|
||||
|
||||
export default function Logo() {
|
||||
return (
|
||||
<box className="logo first" valign={Gtk.Align.FILL}>
|
||||
<icon icon="nix-snowflake-white" pixelSize={20} />
|
||||
</box>
|
||||
)
|
||||
}
|
||||
|
|
@ -74,6 +74,7 @@ in
|
|||
ags-bar
|
||||
pkgs.ags
|
||||
pkgs.dart-sass
|
||||
pkgs.nixos-icons
|
||||
];
|
||||
|
||||
wayland.windowManager.hyprland = mkIf hyprlandCfg.enable {
|
||||
|
|
|
|||
Loading…
Reference in New Issue