From fe978092e8c13b337eb4e58b9b08b9ea5cc93413 Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Tue, 25 Mar 2025 12:59:51 +1100
Subject: sidebar: create dashboard

---
 src/widgets/slider.tsx | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/widgets/slider.tsx

(limited to 'src/widgets/slider.tsx')

diff --git a/src/widgets/slider.tsx b/src/widgets/slider.tsx
new file mode 100644
index 0000000..fb219bd
--- /dev/null
+++ b/src/widgets/slider.tsx
@@ -0,0 +1,53 @@
+import { bind, type Binding } from "astal";
+import { Gtk } from "astal/gtk3";
+import type cairo from "cairo";
+
+export default ({ value }: { value: Binding<number> }) => (
+    <drawingarea
+        hexpand
+        valign={Gtk.Align.CENTER}
+        className="slider"
+        css={bind(value).as(v => `font-size: ${v}px;`)}
+        setup={self => {
+            const halfPi = Math.PI / 2;
+
+            const styleContext = self.get_style_context();
+            self.set_size_request(-1, styleContext.get_property("min-height", Gtk.StateFlags.NORMAL) as number);
+
+            self.connect("draw", (_, cr: cairo.Context) => {
+                const styleContext = self.get_style_context();
+
+                const width = self.get_allocated_width();
+                const height = styleContext.get_property("min-height", Gtk.StateFlags.NORMAL) as number;
+                self.set_size_request(-1, height);
+
+                const progressValue = styleContext.get_property("font-size", Gtk.StateFlags.NORMAL) as number;
+                let radius = styleContext.get_property("border-radius", Gtk.StateFlags.NORMAL) as number;
+
+                const bg = styleContext.get_background_color(Gtk.StateFlags.NORMAL);
+                cr.setSourceRGBA(bg.red, bg.green, bg.blue, bg.alpha);
+
+                // Background
+                cr.arc(radius, radius, radius, -Math.PI, -halfPi); // Top left
+                cr.arc(width - radius, radius, radius, -halfPi, 0); // Top right
+                cr.arc(width - radius, height - radius, radius, 0, halfPi); // Bottom right
+                cr.arc(radius, height - radius, radius, halfPi, Math.PI); // Bottom left
+                cr.fill();
+
+                // Flatten when near 0
+                radius = Math.min(radius, Math.min(width * progressValue, height) / 2);
+
+                const progressPosition = width * progressValue - radius;
+                const fg = styleContext.get_color(Gtk.StateFlags.NORMAL);
+                cr.setSourceRGBA(fg.red, fg.green, fg.blue, fg.alpha);
+
+                // Foreground
+                cr.arc(radius, radius, radius, -Math.PI, -halfPi); // Top left
+                cr.arc(progressPosition, radius, radius, -halfPi, 0); // Top right
+                cr.arc(progressPosition, height - radius, radius, 0, halfPi); // Bottom right
+                cr.arc(radius, height - radius, radius, halfPi, Math.PI); // Bottom left
+                cr.fill();
+            });
+        }}
+    />
+);
-- 
cgit v1.2.3-freya