Ported to new ags version
This commit is contained in:
parent
c5712bb3d4
commit
ffed9ee873
|
|
@ -1,11 +1,15 @@
|
|||
import { App, Astal, Gdk, Gtk, Widget } from "astal/gtk3";
|
||||
import { GLib, Variable, bind } from "astal";
|
||||
import { Astal, Gdk } from "ags/gtk4";
|
||||
import app from "ags/gtk4/app"
|
||||
import Gtk from "gi://Gtk?version=4.0"
|
||||
import { createBinding, createState, For, With, Accessor } from "ags"
|
||||
import { createPoll } from "ags/time"
|
||||
import Tray from "gi://AstalTray";
|
||||
import { execAsync } from "astal/process"
|
||||
import { execAsync } from "ags/process"
|
||||
import Hyprland from "gi://AstalHyprland";
|
||||
import { getIconName } from "./utils";
|
||||
import Wp from "gi://AstalWp"
|
||||
import Battery from "gi://AstalBattery"
|
||||
import GLib from "gi://GLib";
|
||||
|
||||
const battery = Battery.get_default()
|
||||
const sensorsAvailable = await execAsync(['sensors']).then(() => true).catch(() => false);
|
||||
|
|
@ -13,28 +17,35 @@ const wirePlumber = Wp.get_default();
|
|||
|
||||
function SysTray(): JSX.Element {
|
||||
const tray = Tray.get_default();
|
||||
let items = createBinding(tray, "items");
|
||||
const init = (btn: Gtk.MenuButton, item: Tray.TrayItem) => {
|
||||
btn.menuModel = item.menuModel
|
||||
btn.insert_action_group("dbusmenu", item.actionGroup)
|
||||
item.connect("notify::action-group", () => {
|
||||
btn.insert_action_group("dbusmenu", item.actionGroup)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<box>
|
||||
{bind(tray, "items").as((items) =>
|
||||
items.map((item) => {
|
||||
if (item.iconThemePath) App.add_icons(item.iconThemePath);
|
||||
<For each={items}>
|
||||
{(item: Tray.TrayItem) => {
|
||||
if (item.iconThemePath) app.add_icons(item.iconThemePath);
|
||||
return (
|
||||
<menubutton
|
||||
className="systray"
|
||||
tooltipMarkup={bind(item, "tooltipMarkup")}
|
||||
usePopover={false}
|
||||
actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
|
||||
menuModel={bind(item, "menuModel")}>
|
||||
<icon gicon={bind(item, "gicon")} className="systray-item" />
|
||||
$={(self) => init(self, item)}
|
||||
class="systray"
|
||||
tooltipMarkup={createBinding(item, "tooltipMarkup")}
|
||||
menuModel={createBinding(item, "menuModel")}>
|
||||
<image gicon={item.gicon} class="systray-item" />
|
||||
</menubutton>
|
||||
);
|
||||
}),
|
||||
)}
|
||||
}}
|
||||
</For>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
|
||||
function Left() : JSX.Element {
|
||||
function Left(): JSX.Element {
|
||||
return (
|
||||
<box hexpand halign={Gtk.Align.START}>
|
||||
<Clients />
|
||||
|
|
@ -42,7 +53,7 @@ function Left() : JSX.Element {
|
|||
);
|
||||
}
|
||||
|
||||
function Center() : JSX.Element {
|
||||
function Center(): JSX.Element {
|
||||
return (
|
||||
<box>
|
||||
<Workspaces />
|
||||
|
|
@ -51,85 +62,77 @@ function Center() : JSX.Element {
|
|||
}
|
||||
|
||||
function Date({ format = "%Y-%m-%d" }): JSX.Element {
|
||||
const time = Variable<string>("").poll(60000, () =>
|
||||
GLib.DateTime.new_now_local().format(format)!)
|
||||
const time = createPoll<string>("", 60000, () => GLib.DateTime.new_now_local().format(format)!)
|
||||
return <button
|
||||
className="item"
|
||||
onDestroy={() => time.drop()}
|
||||
label={time()}
|
||||
class="item"
|
||||
label={time}
|
||||
onClicked={() => execAsync(['gnome-calendar'])}
|
||||
/>
|
||||
}
|
||||
|
||||
function Time({ format = "%H:%M:%S" }): JSX.Element {
|
||||
const time = Variable<string>("").poll(1000, () =>
|
||||
GLib.DateTime.new_now_local().format(format)!)
|
||||
const time = createPoll<string>("", 10000, () => GLib.DateTime.new_now_local().format(format)!)
|
||||
return <label
|
||||
className="item blue"
|
||||
onDestroy={() => time.drop()}
|
||||
label={time()}
|
||||
class="item blue"
|
||||
label={time}
|
||||
/>
|
||||
}
|
||||
|
||||
function Temp(): JSX.Element {
|
||||
let label = Variable<string>("N/A");
|
||||
let [label, _setlabel] = createState<string>("N/A");
|
||||
if (sensorsAvailable) {
|
||||
label = Variable<string>("").poll(5000, 'sensors', out => {
|
||||
label = createPoll<string>("", 5000, 'sensors', out => {
|
||||
const match = out.split('\n').find(line => line.includes('Tctl') || line.includes('Package'))?.match(/[0-9.]*°C/);
|
||||
return match ? match[0] : "N/A";
|
||||
})
|
||||
}
|
||||
return <label
|
||||
className="item blue"
|
||||
onDestroy={() => label.drop()}
|
||||
label={label()}
|
||||
class="item blue"
|
||||
label={label}
|
||||
/>
|
||||
}
|
||||
|
||||
function Memory(): JSX.Element {
|
||||
const memory = Variable<string>("").poll(2000, "free", out => {
|
||||
const memory = createPoll<string>("", 2000, "free", out => {
|
||||
const line = out.split('\n').find(line => line.includes('Mem:'));
|
||||
if (!line) return "N/A";
|
||||
const split = line.split(/\s+/).map(Number);
|
||||
return (split[2] / 1000000).toFixed(2) + "GB";
|
||||
});
|
||||
return <label
|
||||
className="item blue"
|
||||
onDestroy={() => memory.drop()}
|
||||
label={memory()}
|
||||
class="item blue"
|
||||
label={memory}
|
||||
/>
|
||||
}
|
||||
|
||||
function ClockSpeed(): JSX.Element {
|
||||
const command = 'bash -c "cat /proc/cpuinfo | grep \\"MHz\\" | awk \'{print \\$4}\' | sort -n | tail -1 | awk \'{printf \\"%.2fGHz\\", \\$1/1000}\'"';
|
||||
const speed = Variable<string>("").poll(5000, command)
|
||||
const command = 'bash -c "cat /proc/cpuinfo | grep \\"MHz\\" | awk \'{print \\$4}\' | sort -n | tail -1 | awk \'{printf \\"%.2fGHz\\", \\$1/1000}\'"';
|
||||
const speed = createPoll<string>("", 5000, command, out => out)
|
||||
return <label
|
||||
className="item"
|
||||
onDestroy={() => speed.drop()}
|
||||
label={speed()}
|
||||
class="item"
|
||||
label={speed}
|
||||
/>
|
||||
}
|
||||
|
||||
function CPU(): JSX.Element {
|
||||
const usage = Variable<string>("").poll(2000, "top -b -n 1", out => {
|
||||
const usage = createPoll<string>("", 2000, "top -b -n 1", out => {
|
||||
const line = out.split("\n").find(line => line.includes('Cpu(s)'));
|
||||
if (!line) return "N/A";
|
||||
return line.split(/\s+/)[1].replace(',', '.').toString() + "%";
|
||||
});
|
||||
return <box className="item">
|
||||
<icon icon="speedometer" css="margin-right: 0.7em;" />
|
||||
return <box class="item">
|
||||
<image iconName="speedometer" css="margin-right: 0.7em;" />
|
||||
<label
|
||||
onDestroy={() => usage.drop()}
|
||||
label={usage()}
|
||||
label={usage}
|
||||
/>
|
||||
</box>
|
||||
}
|
||||
|
||||
|
||||
|
||||
function Right() : JSX.Element {
|
||||
function Right() {
|
||||
return (
|
||||
<box className="right" hexpand halign={Gtk.Align.END} spacing={6}>
|
||||
<box class="right" hexpand halign={Gtk.Align.END} spacing={6}>
|
||||
<Icons />
|
||||
<Volume />
|
||||
<CPU />
|
||||
|
|
@ -144,25 +147,26 @@ function Right() : JSX.Element {
|
|||
|
||||
function BatteryIcon(): JSX.Element {
|
||||
if (battery.get_state() == 0) return <box />;
|
||||
return <button className="battery-item" onClicked={() => execAsync(['gnome-power-statistics'])}>
|
||||
let batteryPercentage = createBinding(battery, "percentage");
|
||||
return <button class="battery-item" onClicked={() => execAsync(['gnome-power-statistics'])}>
|
||||
<box>
|
||||
{
|
||||
bind(battery, "percentage").as((percentage) => {
|
||||
const thresholds = [...Array(11).keys()].map( i => i * 10);
|
||||
<With value={batteryPercentage}>
|
||||
{(percentage) => {
|
||||
const thresholds = [...Array(11).keys()].map(i => i * 10);
|
||||
const icon = thresholds.find(threshold => threshold >= percentage * 100)
|
||||
const charging_name = battery.percentage >= 0.99 ? "charged" : "charging"
|
||||
return <icon
|
||||
icon={battery.charging? `battery-level-${icon}-${charging_name}-symbolic` : `battery-level-${icon}-symbolic`}
|
||||
return <image
|
||||
iconName={battery.charging ? `battery-level-${icon}-${charging_name}-symbolic` : `battery-level-${icon}-symbolic`}
|
||||
/>
|
||||
})
|
||||
}
|
||||
}}
|
||||
</With>
|
||||
</box>
|
||||
</button>
|
||||
}
|
||||
|
||||
function Icons() {
|
||||
return (
|
||||
<box className="item icon-group">
|
||||
<box class="item icon-group">
|
||||
<SysTray />
|
||||
<BatteryIcon />
|
||||
</box>
|
||||
|
|
@ -173,60 +177,74 @@ function Volume(): JSX.Element {
|
|||
if (!wirePlumber) return <box />;
|
||||
|
||||
const audio = wirePlumber.audio;
|
||||
const icon = bind(audio.default_speaker, "volume").as((volume) => {
|
||||
const vol = volume * 100
|
||||
const icon = [
|
||||
[101, 'overamplified'],
|
||||
[67, 'high'],
|
||||
[34, 'medium'],
|
||||
[1, 'low'],
|
||||
[0, 'muted'],
|
||||
].find(([threshold]) => Number(threshold) <= vol)?.[1]
|
||||
return `audio-volume-${icon}-symbolic`
|
||||
const icon = createBinding(audio.default_speaker, "volume").as((volume) => {
|
||||
const vol = volume * 100
|
||||
const icon = [
|
||||
[101, 'overamplified'],
|
||||
[67, 'high'],
|
||||
[34, 'medium'],
|
||||
[1, 'low'],
|
||||
[0, 'muted'],
|
||||
].find(([threshold]) => Number(threshold) <= vol)?.[1]
|
||||
return `audio-volume-${icon}-symbolic`
|
||||
});
|
||||
const css = bind(audio.default_speaker, "mute").as((mute) => {
|
||||
return mute ? "margin-left:0;": "margin-left: 0.7em;"
|
||||
const css = createBinding(audio.default_speaker, "mute").as((mute) => {
|
||||
return mute ? "margin-left:0;" : "margin-left: 0.7em;"
|
||||
});
|
||||
let volume = createBinding(audio.default_speaker, "volume");
|
||||
let mute = createBinding(audio.default_speaker, "mute");
|
||||
return (
|
||||
<button className="item blue" onClicked={() => audio.default_speaker.mute = !audio.default_speaker.mute}>
|
||||
<button class="item blue" onClicked={() => audio.default_speaker.mute = !audio.default_speaker.mute}>
|
||||
<box>
|
||||
<icon icon={icon} />
|
||||
{
|
||||
bind(audio.default_speaker, "volume").as((volume) => <box>
|
||||
{
|
||||
bind(audio.default_speaker, "mute").as((mute) => <box>
|
||||
{
|
||||
<label label={mute? "": `${Math.floor(volume * 100)}%`} css={css} />
|
||||
}
|
||||
</box>)
|
||||
}
|
||||
</box>)
|
||||
}
|
||||
<image iconName={icon} />
|
||||
<With value={volume}>
|
||||
{(vol) => <box>
|
||||
<With value={mute}>
|
||||
{(muted) => {
|
||||
return (
|
||||
<label label={muted ? "" : `${Math.floor(vol * 100)}%`} css={css} />
|
||||
)
|
||||
}}
|
||||
</With>
|
||||
</box>}
|
||||
</With>
|
||||
</box>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Workspaces() : JSX.Element {
|
||||
function Workspaces(): JSX.Element {
|
||||
const hyprland = Hyprland.get_default();
|
||||
let workspaces = createBinding(hyprland, "workspaces");
|
||||
return (
|
||||
<box className="workspaces">
|
||||
{bind(hyprland, "workspaces").as((wss) =>
|
||||
<box>
|
||||
{bind(hyprland, "focusedMonitor").as((fm) =>
|
||||
wss.sort((a, b) => a.id - b.id)
|
||||
.filter(ws => ws && ws.get_monitor() && ws.get_monitor().get_id() === fm.get_id())
|
||||
.map((ws) => (
|
||||
<button
|
||||
className={bind(hyprland, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "",)}
|
||||
onClicked={() => ws.focus()}
|
||||
>
|
||||
{`${ws.id}`.slice(-1)}
|
||||
</button>
|
||||
)))}
|
||||
</box>
|
||||
)}
|
||||
<box class="workspaces">
|
||||
<With value={workspaces}>
|
||||
{(wss: Array<Hyprland.Workspace>) => (
|
||||
<box>
|
||||
<With value={createBinding(hyprland, "focusedMonitor")}>
|
||||
{(fm: Hyprland.Monitor) => {
|
||||
let filtered_wss = new Accessor(() => wss.sort((a, b) => a.id - b.id)
|
||||
.filter(ws => ws && ws.get_monitor() && ws.get_monitor().get_id() === fm.get_id()))
|
||||
return (
|
||||
<box>
|
||||
<For each={filtered_wss}>
|
||||
{(ws: Hyprland.Workspace, _index) => (
|
||||
<button
|
||||
class={createBinding(hyprland, "focusedWorkspace").as((fw) => ws === fw ? "focused" : "",)}
|
||||
onClicked={() => ws.focus()}
|
||||
>
|
||||
{`${ws.id}`.slice(-1)}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</box>
|
||||
)
|
||||
}}
|
||||
</With>
|
||||
</box>
|
||||
)}
|
||||
</With>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
|
|
@ -235,59 +253,66 @@ function shorten(title: string) {
|
|||
return title.length > 40 ? title.slice(0, 20) + "..." : title
|
||||
}
|
||||
|
||||
function Clients() : JSX.Element {
|
||||
function Clients(): JSX.Element {
|
||||
const hyprland = Hyprland.get_default();
|
||||
let clients = createBinding(hyprland, "clients")
|
||||
return (
|
||||
<box>
|
||||
{
|
||||
bind(hyprland, "focusedWorkspace").as(fw => (
|
||||
<box className="clients">
|
||||
{
|
||||
bind(hyprland, "clients").as(cls =>
|
||||
cls
|
||||
.sort((a, b) => a.pid - b.pid)
|
||||
.filter(cl => !cl.title.includes("rofi"))
|
||||
.filter(cl => fw && cl.get_workspace().get_id() === fw.get_id())
|
||||
.map(cl => (
|
||||
<box
|
||||
className={bind(hyprland, "focusedClient").as(a => a && a.address === cl.address ? "focused" : "unfocused")}
|
||||
>
|
||||
<icon
|
||||
icon={getIconName(cl)}
|
||||
className="app-icon"
|
||||
/>
|
||||
<label label={bind(cl, 'title').as(title => shorten(title))} />
|
||||
<With value={createBinding(hyprland, "focusedWorkspace")}>
|
||||
{(fw: Hyprland.Workspace) => (
|
||||
<box class="clients">
|
||||
<With value={clients}>
|
||||
{(cls: Array<Hyprland.Client>) => {
|
||||
let filtered_clients = new Accessor(() => cls
|
||||
.sort((a, b) => a.pid - b.pid)
|
||||
.filter(cl => !cl.title.includes("rofi"))
|
||||
.filter(cl => fw && cl.get_workspace().get_id() === fw.get_id()))
|
||||
|
||||
return (
|
||||
<box>
|
||||
<For each={filtered_clients}>
|
||||
{(cl: Hyprland.Client, _index) => (
|
||||
<box
|
||||
class={createBinding(hyprland, "focusedClient").as(a => a && a.address === cl.address ? "focused" : "unfocused")}
|
||||
>
|
||||
<image
|
||||
iconName={getIconName(cl)}
|
||||
class="app-icon"
|
||||
/>
|
||||
<label label={createBinding(cl, 'title').as(title => shorten(title))} />
|
||||
</box>
|
||||
)}
|
||||
</For>
|
||||
</box>
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</With>
|
||||
</box>
|
||||
)
|
||||
)
|
||||
}
|
||||
</box>
|
||||
}
|
||||
</With >
|
||||
</box >
|
||||
);
|
||||
}
|
||||
|
||||
export default function Bar(gdkmonitor: Gdk.Monitor, scaleFactor: number = 1): Widget.Window {
|
||||
return new Widget.Window({
|
||||
gdkmonitor,
|
||||
css: "font-size: " + scaleFactor + "em;",
|
||||
exclusivity: Astal.Exclusivity.EXCLUSIVE,
|
||||
anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
|
||||
application: App,
|
||||
className: "Bar",
|
||||
name: "top-bar",
|
||||
setup: self => self.connect("destroy", () => {
|
||||
print("Detroying bar");
|
||||
App.remove_window(self);
|
||||
}),
|
||||
child: <centerbox className="window-box">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right />
|
||||
export default function Bar(gdkmonitor: Gdk.Monitor, scaleFactor: number = 1) {
|
||||
console.log("Creating Bar on monitor:", gdkmonitor);
|
||||
return (
|
||||
<window
|
||||
visible
|
||||
gdkmonitor={gdkmonitor}
|
||||
css={"font-size: " + scaleFactor + "em;"}
|
||||
exclusivity={Astal.Exclusivity.EXCLUSIVE}
|
||||
anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT}
|
||||
application={app}
|
||||
class="Bar"
|
||||
name="top-bar" >
|
||||
<centerbox class="window-box">
|
||||
<Left $type="start" />
|
||||
<Center $type="center" />
|
||||
<Right $type="end" />
|
||||
</centerbox>
|
||||
})
|
||||
</window >
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { App, Gdk, Widget } from "astal/gtk3"
|
||||
import app from "ags/gtk4/app"
|
||||
import style from "./style.scss"
|
||||
import Bar from "./Bar"
|
||||
import Hyprland from "gi://AstalHyprland";
|
||||
import NotificationPopups from "./notifications/NotificationPopups"
|
||||
import Gtk from "gi://Gtk?version=4.0";
|
||||
import { Gdk } from "ags/gtk4";
|
||||
|
||||
const hyprland = Hyprland.get_default();
|
||||
|
||||
|
|
@ -22,21 +24,26 @@ function find_main_monitor(): Hyprland.Monitor {
|
|||
}
|
||||
|
||||
function register_windows(monitor: Hyprland.Monitor) {
|
||||
let gtkMonitor = App.get_monitors()[0].get_display().get_monitor_at_point(monitor.get_x(), monitor.get_y())
|
||||
let scale = (monitor.get_width() >= 3000)? 1.2: 1
|
||||
let gtkMonitors = app.get_monitors()[0].get_display().get_monitors()
|
||||
let gtkMonitor = gtkMonitors.get_item(0)
|
||||
if (!gtkMonitor) {
|
||||
console.error("No GTK monitor found for the Hyprland monitor:", monitor.get_name());
|
||||
return;
|
||||
}
|
||||
let scale = (monitor.get_width() >= 3000) ? 1.2 : 1
|
||||
Bar(gtkMonitor, scale)
|
||||
NotificationPopups(gtkMonitor)
|
||||
NotificationPopups()
|
||||
}
|
||||
|
||||
function switch_to_best_monitor() {
|
||||
let mainMonitor = find_main_monitor()
|
||||
for (var wd of App.get_windows()) {
|
||||
for (var wd of app.get_windows()) {
|
||||
wd.destroy();
|
||||
}
|
||||
register_windows(mainMonitor);
|
||||
}
|
||||
|
||||
hyprland.connect("monitor-added", (_, monitor) => {
|
||||
hyprland.connect("monitor-added", (_, _monitor: Hyprland.Monitor) => {
|
||||
switch_to_best_monitor()
|
||||
})
|
||||
|
||||
|
|
@ -44,7 +51,7 @@ hyprland.connect("monitor-removed", () => {
|
|||
switch_to_best_monitor()
|
||||
})
|
||||
|
||||
App.start({
|
||||
app.start({
|
||||
css: style,
|
||||
iconTheme: "Papirus",
|
||||
main() {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
declare const SRC: string
|
||||
|
||||
declare module "inline:*" {
|
||||
const content: string
|
||||
export default content
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module "*.scss" {
|
||||
const content: string
|
||||
export default content
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module "*.blp" {
|
||||
const content: string
|
||||
export default content
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module "*.css" {
|
||||
const content: string
|
||||
export default content
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,125 +1,110 @@
|
|||
@use "sass:string";
|
||||
|
||||
@function gtkalpha($c, $a) {
|
||||
@return string.unquote("alpha(#{$c},#{$a})");
|
||||
@return string.unquote("alpha(#{$c},#{$a})");
|
||||
}
|
||||
|
||||
// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
|
||||
$fg-color: #{"@theme_fg_color"};
|
||||
$fg-color: #{"@theme_bg_color"};
|
||||
$bg-color: #1f2430;
|
||||
$error: red;
|
||||
|
||||
window.NotificationPopups {
|
||||
all: unset;
|
||||
all: unset;
|
||||
}
|
||||
|
||||
eventbox.Notification {
|
||||
.Notification {
|
||||
border-radius: 13px;
|
||||
background-color: $bg-color;
|
||||
margin: 0.5rem 1rem 0.5rem 1rem;
|
||||
box-shadow: 2px 3px 8px 0 gtkalpha(black, 0.4);
|
||||
border: 1pt solid gtkalpha($fg-color, 0.03);
|
||||
|
||||
&:first-child>box {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
&:last-child>box {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// eventboxes can not take margins so we style its inner box instead
|
||||
>box {
|
||||
min-width: 400px;
|
||||
border-radius: 13px;
|
||||
background-color: #1f2430;
|
||||
margin: .5rem 1rem .5rem 1rem;
|
||||
box-shadow: 2px 3px 8px 0 gtkalpha(black, .4);
|
||||
border: 1pt solid gtkalpha($fg-color, .03);
|
||||
}
|
||||
|
||||
&.critical>box {
|
||||
border: 1pt solid gtkalpha($error, .4);
|
||||
|
||||
.header {
|
||||
|
||||
.app-name {
|
||||
color: gtkalpha($error, .8);
|
||||
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
color: gtkalpha($error, .6);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.critical {
|
||||
border: 1pt solid gtkalpha($error, 0.4);
|
||||
|
||||
.header {
|
||||
padding: .5rem;
|
||||
color: gtkalpha($fg-color, 0.5);
|
||||
.app-name {
|
||||
color: gtkalpha($error, 0.8);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
margin: 0 .4rem;
|
||||
}
|
||||
.app-icon {
|
||||
color: gtkalpha($error, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-name {
|
||||
margin-right: .3rem;
|
||||
font-weight: bold;
|
||||
.header {
|
||||
padding: 0.5rem;
|
||||
color: gtkalpha($fg-color, 0.5);
|
||||
|
||||
&:first-child {
|
||||
margin-left: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
margin: 0 .4rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: .2rem;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.app-icon {
|
||||
margin: 0 0.4rem;
|
||||
}
|
||||
|
||||
separator {
|
||||
margin: 0 .4rem;
|
||||
background-color: gtkalpha($fg-color, .1);
|
||||
.app-name {
|
||||
margin-right: 0.3rem;
|
||||
font-weight: bold;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 1rem;
|
||||
margin-top: .5rem;
|
||||
|
||||
.summary {
|
||||
font-size: 1.2em;
|
||||
color: $fg-color;
|
||||
}
|
||||
|
||||
.body {
|
||||
color: gtkalpha($fg-color, 0.8);
|
||||
}
|
||||
|
||||
.image {
|
||||
border: 1px solid gtkalpha($fg-color, .02);
|
||||
margin-right: .5rem;
|
||||
border-radius: 9px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.time {
|
||||
margin: 0 0.4rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin: 1rem;
|
||||
margin-top: 0;
|
||||
|
||||
button {
|
||||
margin: 0 .3rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
button {
|
||||
padding: 0.2rem;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
separator {
|
||||
margin: 0 0.4rem;
|
||||
background-color: gtkalpha($fg-color, 0.1);
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
.summary {
|
||||
font-size: 1.2em;
|
||||
color: $fg-color;
|
||||
}
|
||||
|
||||
.body {
|
||||
color: gtkalpha($fg-color, 0.8);
|
||||
}
|
||||
|
||||
.image {
|
||||
border: 1px solid gtkalpha($fg-color, 0.02);
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 9px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin: 1rem;
|
||||
margin-top: 0;
|
||||
|
||||
button {
|
||||
margin: 0 0.3rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,120 @@
|
|||
import { GLib } from "astal"
|
||||
import { Gtk, Astal } from "astal/gtk3"
|
||||
import { type EventBox } from "astal/gtk3/widget"
|
||||
import Notifd from "gi://AstalNotifd"
|
||||
import Gtk from "gi://Gtk?version=4.0"
|
||||
import Gdk from "gi://Gdk?version=4.0"
|
||||
import Adw from "gi://Adw"
|
||||
import GLib from "gi://GLib"
|
||||
import AstalNotifd from "gi://AstalNotifd"
|
||||
import Pango from "gi://Pango"
|
||||
|
||||
const isIcon = (icon: string) =>
|
||||
!!Astal.Icon.lookup_icon(icon)
|
||||
function isIcon(icon?: string | null) {
|
||||
const iconTheme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default()!)
|
||||
return icon && iconTheme.has_icon(icon)
|
||||
}
|
||||
|
||||
const fileExists = (path: string) =>
|
||||
GLib.file_test(path, GLib.FileTest.EXISTS)
|
||||
function fileExists(path: string) {
|
||||
return GLib.file_test(path, GLib.FileTest.EXISTS)
|
||||
}
|
||||
|
||||
const time = (time: number, format = "%H:%M") => GLib.DateTime
|
||||
.new_from_unix_local(time)
|
||||
.format(format)!
|
||||
function time(time: number, format = "%H:%M") {
|
||||
return GLib.DateTime.new_from_unix_local(time).format(format)!
|
||||
}
|
||||
|
||||
const urgency = (n: Notifd.Notification) => {
|
||||
const { LOW, NORMAL, CRITICAL } = Notifd.Urgency
|
||||
// match operator when?
|
||||
function urgency(n: AstalNotifd.Notification) {
|
||||
const { LOW, NORMAL, CRITICAL } = AstalNotifd.Urgency
|
||||
switch (n.urgency) {
|
||||
case LOW: return "low"
|
||||
case CRITICAL: return "critical"
|
||||
case LOW:
|
||||
return "low"
|
||||
case CRITICAL:
|
||||
return "critical"
|
||||
case NORMAL:
|
||||
default: return "normal"
|
||||
default:
|
||||
return "normal"
|
||||
}
|
||||
}
|
||||
|
||||
type Props = {
|
||||
setup(self: EventBox): void
|
||||
onHoverLost(self: EventBox): void
|
||||
notification: Notifd.Notification
|
||||
}
|
||||
|
||||
export default function Notification(props: Props) {
|
||||
const { notification: n, onHoverLost, setup } = props
|
||||
const { START, CENTER, END } = Gtk.Align
|
||||
|
||||
return <eventbox
|
||||
className={`Notification ${urgency(n)}`}
|
||||
setup={setup}
|
||||
onHoverLost={onHoverLost}>
|
||||
<box vertical>
|
||||
<box className="header">
|
||||
{(n.appIcon || n.desktopEntry) && <icon
|
||||
className="app-icon"
|
||||
visible={Boolean(n.appIcon || n.desktopEntry)}
|
||||
icon={n.appIcon || n.desktopEntry}
|
||||
/>}
|
||||
<label
|
||||
className="app-name"
|
||||
halign={START}
|
||||
truncate
|
||||
label={n.appName || "Unknown"}
|
||||
/>
|
||||
<label
|
||||
className="time"
|
||||
hexpand
|
||||
halign={END}
|
||||
label={time(n.time)}
|
||||
/>
|
||||
<button onClicked={() => n.dismiss()}>
|
||||
<icon icon="window-close-symbolic" />
|
||||
</button>
|
||||
</box>
|
||||
<Gtk.Separator visible />
|
||||
<box className="content">
|
||||
{n.image && fileExists(n.image) && <box
|
||||
valign={START}
|
||||
className="image"
|
||||
css={`background-image: url('${n.image}')`}
|
||||
/>}
|
||||
{n.image && isIcon(n.image) && <box
|
||||
expand={false}
|
||||
valign={START}
|
||||
className="icon-image">
|
||||
<icon icon={n.image} expand halign={CENTER} valign={CENTER} />
|
||||
</box>}
|
||||
<box vertical>
|
||||
export default function Notification({
|
||||
notification: n,
|
||||
onHoverLost,
|
||||
}: {
|
||||
notification: AstalNotifd.Notification
|
||||
onHoverLost: () => void
|
||||
}) {
|
||||
return (
|
||||
<Adw.Clamp maximumSize={400}>
|
||||
<box
|
||||
widthRequest={400}
|
||||
class={`Notification ${urgency(n)}`}
|
||||
orientation={Gtk.Orientation.VERTICAL}
|
||||
>
|
||||
<Gtk.EventControllerMotion onLeave={onHoverLost} />
|
||||
<box class="header">
|
||||
{(n.appIcon || isIcon(n.desktopEntry)) && (
|
||||
<image
|
||||
class="app-icon"
|
||||
visible={Boolean(n.appIcon || n.desktopEntry)}
|
||||
iconName={n.appIcon || n.desktopEntry}
|
||||
/>
|
||||
)}
|
||||
<label
|
||||
className="summary"
|
||||
halign={START}
|
||||
xalign={0}
|
||||
label={n.summary}
|
||||
truncate
|
||||
class="app-name"
|
||||
halign={Gtk.Align.START}
|
||||
ellipsize={Pango.EllipsizeMode.END}
|
||||
label={n.appName || "Unknown"}
|
||||
/>
|
||||
{n.body && <label
|
||||
className="body"
|
||||
wrap
|
||||
useMarkup
|
||||
halign={START}
|
||||
xalign={0}
|
||||
justifyFill
|
||||
label={n.body}
|
||||
/>}
|
||||
</box>
|
||||
</box>
|
||||
{n.get_actions().length > 0 && <box className="actions">
|
||||
{n.get_actions().map(({ label, id }) => (
|
||||
<button
|
||||
<label
|
||||
class="time"
|
||||
hexpand
|
||||
onClicked={() => n.invoke(id)}>
|
||||
<label label={label} halign={CENTER} hexpand />
|
||||
halign={Gtk.Align.END}
|
||||
label={time(n.time)}
|
||||
/>
|
||||
<button onClicked={() => n.dismiss()}>
|
||||
<image iconName="window-close-symbolic" />
|
||||
</button>
|
||||
))}
|
||||
</box>}
|
||||
</box>
|
||||
</eventbox>
|
||||
</box>
|
||||
<Gtk.Separator visible />
|
||||
<box class="content">
|
||||
{n.image && fileExists(n.image) && (
|
||||
<image valign={Gtk.Align.START} class="image" file={n.image} />
|
||||
)}
|
||||
{n.image && isIcon(n.image) && (
|
||||
<box valign={Gtk.Align.START} class="icon-image">
|
||||
<image
|
||||
iconName={n.image}
|
||||
halign={Gtk.Align.CENTER}
|
||||
valign={Gtk.Align.CENTER}
|
||||
/>
|
||||
</box>
|
||||
)}
|
||||
<box orientation={Gtk.Orientation.VERTICAL}>
|
||||
<label
|
||||
class="summary"
|
||||
halign={Gtk.Align.START}
|
||||
xalign={0}
|
||||
label={n.summary}
|
||||
ellipsize={Pango.EllipsizeMode.END}
|
||||
/>
|
||||
{n.body && (
|
||||
<label
|
||||
class="body"
|
||||
wrap
|
||||
useMarkup
|
||||
halign={Gtk.Align.START}
|
||||
xalign={0}
|
||||
justify={Gtk.Justification.FILL}
|
||||
label={n.body}
|
||||
/>
|
||||
)}
|
||||
</box>
|
||||
</box>
|
||||
{n.actions.length > 0 && (
|
||||
<box class="actions">
|
||||
{n.actions.map(({ label, id }) => (
|
||||
<button hexpand onClicked={() => n.invoke(id)}>
|
||||
<label label={label} halign={Gtk.Align.CENTER} hexpand />
|
||||
</button>
|
||||
))}
|
||||
</box>
|
||||
)}
|
||||
</box>
|
||||
</Adw.Clamp>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,105 +1,65 @@
|
|||
import { Astal, Gtk, Gdk } from "astal/gtk3"
|
||||
import Notifd from "gi://AstalNotifd"
|
||||
import app from "ags/gtk4/app"
|
||||
import { Astal, Gtk } from "ags/gtk4"
|
||||
import AstalNotifd from "gi://AstalNotifd"
|
||||
import Notification from "./Notification"
|
||||
import { type Subscribable } from "astal/binding"
|
||||
import { GLib, Variable, bind, timeout } from "astal"
|
||||
import { createBinding, For, createState, onCleanup } from "ags"
|
||||
|
||||
// see comment below in constructor
|
||||
const TIMEOUT_DELAY = 5000
|
||||
export default function NotificationPopups() {
|
||||
const monitors = createBinding(app, "monitors")
|
||||
|
||||
// The purpose if this class is to replace Variable<Array<Widget>>
|
||||
// with a Map<number, Widget> type in order to track notification widgets
|
||||
// by their id, while making it conviniently bindable as an array
|
||||
class NotifiationMap implements Subscribable {
|
||||
// the underlying map to keep track of id widget pairs
|
||||
private map: Map<number, Gtk.Widget> = new Map()
|
||||
const notifd = AstalNotifd.get_default()
|
||||
|
||||
// it makes sense to use a Variable under the hood and use its
|
||||
// reactivity implementation instead of keeping track of subscribers ourselves
|
||||
private var: Variable<Array<Gtk.Widget>> = Variable([])
|
||||
const [notifications, setNotifications] = createState(
|
||||
new Array<AstalNotifd.Notification>(),
|
||||
)
|
||||
|
||||
// notify subscribers to rerender when state changes
|
||||
private notifiy() {
|
||||
this.var.set([...this.map.values()].reverse())
|
||||
}
|
||||
const notifiedHandler = notifd.connect("notified", (_, id, replaced) => {
|
||||
const notification = notifd.get_notification(id)
|
||||
|
||||
private constructor() {
|
||||
const notifd = Notifd.get_default()
|
||||
if (replaced && notifications.get().some(n => n.id === id)) {
|
||||
setNotifications((ns) => ns.map((n) => (n.id === id ? notification : n)))
|
||||
} else {
|
||||
setNotifications((ns) => [notification, ...ns])
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* uncomment this if you want to
|
||||
* ignore timeout by senders and enforce our own timeout
|
||||
* note that if the notification has any actions
|
||||
* they might not work, since the sender already treats them as resolved
|
||||
*/
|
||||
// notifd.ignoreTimeout = true
|
||||
const resolvedHandler = notifd.connect("resolved", (_, id) => {
|
||||
setNotifications((ns) => ns.filter((n) => n.id !== id))
|
||||
})
|
||||
|
||||
notifd.connect("notified", (_, id) => {
|
||||
this.set(id, Notification({
|
||||
notification: notifd.get_notification(id)!,
|
||||
// technically, we don't need to cleanup because in this example this is a root component
|
||||
// and this cleanup function is only called when the program exits, but exiting will cleanup either way
|
||||
// but it's here to remind you that you should not forget to cleanup signal connections
|
||||
onCleanup(() => {
|
||||
notifd.disconnect(notifiedHandler)
|
||||
notifd.disconnect(resolvedHandler)
|
||||
})
|
||||
|
||||
// once hovering over the notification is done
|
||||
// destroy the widget without calling notification.dismiss()
|
||||
// so that it acts as a "popup" and we can still display it
|
||||
// in a notification center like widget
|
||||
// but clicking on the close button will close it
|
||||
onHoverLost: () => this.delete(id),
|
||||
|
||||
// notifd by default does not close notifications
|
||||
// until user input or the timeout specified by sender
|
||||
// which we set to ignore above
|
||||
setup: () => timeout(TIMEOUT_DELAY, () => {
|
||||
/**
|
||||
* uncomment this if you want to "hide" the notifications
|
||||
* after TIMEOUT_DELAY
|
||||
*/
|
||||
this.delete(id)
|
||||
})
|
||||
}))
|
||||
})
|
||||
|
||||
// notifications can be closed by the outside before
|
||||
// any user input, which have to be handled too
|
||||
notifd.connect("resolved", (_, id) => {
|
||||
this.delete(id)
|
||||
})
|
||||
}
|
||||
|
||||
private set(key: number, value: Gtk.Widget) {
|
||||
// in case of replacecment destroy previous widget
|
||||
this.map.get(key)?.destroy()
|
||||
this.map.set(key, value)
|
||||
this.notifiy()
|
||||
}
|
||||
|
||||
private delete(key: number) {
|
||||
this.map.get(key)?.destroy()
|
||||
this.map.delete(key)
|
||||
this.notifiy()
|
||||
}
|
||||
|
||||
// needed by the Subscribable interface
|
||||
get() {
|
||||
return this.var.get()
|
||||
}
|
||||
|
||||
// needed by the Subscribable interface
|
||||
subscribe(callback: (list: Array<Gtk.Widget>) => void) {
|
||||
return this.var.subscribe(callback)
|
||||
}
|
||||
}
|
||||
|
||||
export default function NotificationPopups(gdkmonitor: Gdk.Monitor) {
|
||||
const { TOP, RIGHT } = Astal.WindowAnchor
|
||||
const notifs = new NotifiationMap()
|
||||
|
||||
return <window
|
||||
className="NotificationPopups"
|
||||
gdkmonitor={gdkmonitor}
|
||||
exclusivity={Astal.Exclusivity.EXCLUSIVE}
|
||||
anchor={TOP | RIGHT}>
|
||||
<box vertical>
|
||||
{bind(notifs)}
|
||||
</box>
|
||||
</window>
|
||||
return (
|
||||
<For each={monitors} cleanup={(win) => (win as Gtk.Window).destroy()}>
|
||||
{(monitor) => (
|
||||
<window
|
||||
class="NotificationPopups"
|
||||
gdkmonitor={monitor}
|
||||
visible={notifications((ns) => ns.length > 0)}
|
||||
anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT}
|
||||
>
|
||||
<box orientation={Gtk.Orientation.VERTICAL}>
|
||||
<For each={notifications}>
|
||||
{(notification) => (
|
||||
<Notification
|
||||
notification={notification}
|
||||
onHoverLost={() =>
|
||||
setNotifications((ns) =>
|
||||
ns.filter((n) => n.id !== notification.id),
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</box>
|
||||
</window>
|
||||
)}
|
||||
</For>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"ags": "*"
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ window.Bar {
|
|||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.clients box {
|
||||
.clients box box {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
|
|
@ -27,11 +27,13 @@ window.Bar {
|
|||
border-radius: 0.3em;
|
||||
background: #1f2430;
|
||||
}
|
||||
|
||||
.battery-item:hover {
|
||||
background: #023269;
|
||||
}
|
||||
|
||||
.item, .clients box {
|
||||
.item,
|
||||
.clients box box {
|
||||
background: #1f2430;
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.7em;
|
||||
|
|
@ -49,12 +51,13 @@ window.Bar {
|
|||
|
||||
button {
|
||||
background: #1f2430;
|
||||
border:none;
|
||||
border: none;
|
||||
padding: 0.2em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
.focused, .clients box.focused {
|
||||
.focused,
|
||||
.clients box.focused {
|
||||
background: #023269;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,16 @@
|
|||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"strict": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"target": "ES2020",
|
||||
"lib": [
|
||||
"ES2023"
|
||||
],
|
||||
"moduleResolution": "Bundler",
|
||||
// "checkJs": true,
|
||||
// "allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "/nix/store/1pd4fdq90f4vla3zghmfci9axsbvkd3w-astal-gjs/share/astal/gjs/gtk3",
|
||||
"paths": {
|
||||
"astal": [
|
||||
"/nix/store/1pd4fdq90f4vla3zghmfci9axsbvkd3w-astal-gjs/share/astal/gjs"
|
||||
],
|
||||
"astal/*": [
|
||||
"/nix/store/1pd4fdq90f4vla3zghmfci9axsbvkd3w-astal-gjs/share/astal/gjs/*"
|
||||
]
|
||||
},
|
||||
"jsxImportSource": "ags/gtk4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue