125 lines
4.4 KiB
TypeScript
125 lines
4.4 KiB
TypeScript
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"
|
|
import { BatteryWidget } from "./Battery"
|
|
import { PowerWidget } from "./Power"
|
|
|
|
const RADIUS = 12
|
|
|
|
// paints the concave sliver below the bar at the screen edge: the r x r
|
|
// square minus the quarter disk where the wallpaper shows through
|
|
function Corner({ side }: { side: "left" | "right" }) {
|
|
return (
|
|
<drawingarea
|
|
className="corner"
|
|
widthRequest={RADIUS}
|
|
heightRequest={RADIUS}
|
|
halign={side === "left" ? Gtk.Align.START : Gtk.Align.END}
|
|
onDraw={(self, cr) => {
|
|
const w = self.get_allocated_width()
|
|
const h = self.get_allocated_height()
|
|
// 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.setSourceRGBA(bar.red, bar.green, bar.blue, bar.alpha)
|
|
trace()
|
|
cr.fillPreserve()
|
|
cr.setSourceRGBA(mod.red, mod.green, mod.blue, mod.alpha)
|
|
cr.fill()
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default function Bar(gdkmonitor: Gdk.Monitor) {
|
|
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
|
|
const volume = VolumeWidget(gdkmonitor)
|
|
const wifi = WifiWidget(gdkmonitor)
|
|
const battery = BatteryWidget(gdkmonitor)
|
|
const power = PowerWidget(gdkmonitor)
|
|
|
|
const right: Array<JSX.Element> = []
|
|
if (wifi.button) right.push(wifi.button)
|
|
right.push(volume.button)
|
|
if (battery.button) right.push(battery.button)
|
|
right.push(power.button)
|
|
|
|
const popups: Array<JSX.Element> = []
|
|
if (wifi.popup) popups.push(wifi.popup)
|
|
popups.push(volume.popup)
|
|
if (battery.popup) popups.push(battery.popup)
|
|
popups.push(power.popup)
|
|
|
|
return [
|
|
(
|
|
<window
|
|
className="Bar"
|
|
namespace="ags-bar"
|
|
gdkmonitor={gdkmonitor}
|
|
exclusivity={Astal.Exclusivity.EXCLUSIVE}
|
|
anchor={TOP | LEFT | RIGHT}
|
|
application={App}
|
|
>
|
|
<box vertical>
|
|
<centerbox className="bar">
|
|
<box
|
|
className="bar-left"
|
|
halign={Gtk.Align.START}
|
|
valign={Gtk.Align.FILL}
|
|
>
|
|
<Logo />
|
|
<box className="center">
|
|
<Workspaces />
|
|
</box>
|
|
</box>
|
|
<box
|
|
className="bar-center"
|
|
halign={Gtk.Align.CENTER}
|
|
valign={Gtk.Align.CENTER}
|
|
/>
|
|
<box
|
|
className="bar-right"
|
|
halign={Gtk.Align.END}
|
|
valign={Gtk.Align.FILL}
|
|
>
|
|
{right}
|
|
<box className="clock last">
|
|
<Clock />
|
|
</box>
|
|
</box>
|
|
</centerbox>
|
|
<box className="bar-corners">
|
|
<Corner side="left" />
|
|
<box hexpand />
|
|
<Corner side="right" />
|
|
</box>
|
|
</box>
|
|
</window>
|
|
),
|
|
...popups,
|
|
]
|
|
}
|