baobeld/ags
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

allow Svg's

Browse source
This commit is contained in:
Benjamin Palko 2025-06-23 08:54:27 -04:00
parent 7426b15fb7
commit 47cd7660ab
2 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
components/Svg.tsx
View file

@ -1,8 +1,23 @@
import { Gdk, Gtk } from "astal/gtk4";
import GLib from "gi://GLib?version=2.0";
import Rsvg from "gi://Rsvg?version=2.0";
interface SvgProps {
color?: string;
path: string;
rotation?: number;
size?: number;
}
export function Svg({ color, rotation }: SvgProps) {
const svgPath = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ${rotation && 'transform="rotate(180 12 12)"'} fill="none" stroke="${color || "#cac9c9"}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>`;
export function Svg({
color = "#cac9c9",
path,
rotation = 0,
size = 24,
}: SvgProps) {
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" transform="rotate(${rotation} 12 12)" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`;
const bytes = new GLib.Bytes(new TextEncoder().encode(svgString));
const texture = Gdk.Texture.new_from_bytes(bytes);
return Gtk.Image.new_from_paintable(texture);
}

26
widget/Hyprland/workspaces.tsx
View file

@ -2,6 +2,7 @@ import { bind } from "astal";
import { Gdk, Gtk } from "astal/gtk4";
import Hyprland from "gi://AstalHyprland";
import Rsvg from "gi://Rsvg?version=2.0";
import { Svg } from "../../components/Svg";
const Workspaces = function () {
const hyprland = Hyprland.get_default();
@ -23,30 +24,25 @@ const Workspaces = function () {
workspaces.filter((workspace) => workspace.id < 0),
);
Gtk.Image.interface_install_property;
const activeTrianglePath =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1fb854" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
const inactiveTrianglePath =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" transform="rotate(180 12 12)" fill="none" stroke="#cac9c9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
const activeTrianglePixBuf =
Rsvg.Handle.new_from_data(activeTrianglePath).get_pixbuf();
const inactiveTrianglePixBuf =
Rsvg.Handle.new_from_data(inactiveTrianglePath).get_pixbuf();
return (
<box cssClasses={["Workspaces"]}>
{workspaces.as((workspaces) => {
return workspaces.map((workspace) => (
<button
cssClasses={["Button", "Label"]}
cursor={Gdk.Cursor.new_from_name("pointer", null)}
onClicked={() => workspace.focus()}
>
{focusedWorkspace.as((focused) =>
focused.id === workspace.id
? Gtk.Image.new_from_pixbuf(activeTrianglePixBuf)
: Gtk.Image.new_from_pixbuf(inactiveTrianglePixBuf),
focused.id === workspace.id ? (
<Svg
color="#1fb854"
path='<path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>'
rotation={180}
/>
) : (
<Svg path='<path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>' />
),
)}
</button>
));