refactor: make the whole thing more generic

2025-12-12 11:36:20 +00:00 · 2024-04-02 16:28:57 +02:00
parent 7b648e1955
commit 651f3ad808
193 changed files with 763 additions and 521 deletions
--- a/modules/home-manager/desktops/hyprland/ags/js/quicksettings/ToggleButton.js
+++ b/modules/home-manager/desktops/hyprland/ags/js/quicksettings/ToggleButton.js
@@ -0,0 +1,134 @@
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import App from "resource:///com/github/Aylur/ags/app.js";
+import Variable from "resource:///com/github/Aylur/ags/variable.js";
+import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
+import icons from "../icons.js";
+
+/** name of the currently opened menu  */
+export const opened = Variable("");
+App.connect("window-toggled", (_, name, visible) => {
+  if (name === "quicksettings" && !visible)
+    Utils.timeout(500, () => (opened.value = ""));
+});
+
+/**
+ * @param {string} name - menu name
+ * @param {(() => void) | false=} activate
+ */
+export const Arrow = (name, activate) => {
+  let deg = 0;
+  let iconOpened = false;
+  const icon = Widget.Icon(icons.ui.arrow.right).hook(opened, () => {
+    if (
+      (opened.value === name && !iconOpened) ||
+      (opened.value !== name && iconOpened)
+    ) {
+      const step = opened.value === name ? 10 : -10;
+      iconOpened = !iconOpened;
+      for (let i = 0; i < 9; ++i) {
+        Utils.timeout(15 * i, () => {
+          deg += step;
+          icon.setCss(`-gtk-icon-transform: rotate(${deg}deg);`);
+        });
+      }
+    }
+  });
+  return Widget.Button({
+    child: icon,
+    on_clicked: () => {
+      opened.value = opened.value === name ? "" : name;
+      if (typeof activate === "function") activate();
+    },
+  });
+};
+
+/**
+ * @param {Object} o
+ * @param {string} o.name - menu name
+ * @param {import('gi://Gtk').Gtk.Widget} o.icon
+ * @param {import('gi://Gtk').Gtk.Widget} o.label
+ * @param {() => void} o.activate
+ * @param {() => void} o.deactivate
+ * @param {boolean=} o.activateOnArrow
+ * @param {[import('gi://GObject').GObject.Object, () => boolean]} o.connection
+ */
+export const ArrowToggleButton = ({
+  name,
+  icon,
+  label,
+  activate,
+  deactivate,
+  activateOnArrow = true,
+  connection: [service, condition],
+}) =>
+  Widget.Box({
+    class_name: "toggle-button",
+    setup: (self) =>
+      self.hook(service, () => {
+        self.toggleClassName("active", condition());
+      }),
+    children: [
+      Widget.Button({
+        child: Widget.Box({
+          hexpand: true,
+          class_name: "label-box horizontal",
+          children: [icon, label],
+        }),
+        on_clicked: () => {
+          if (condition()) {
+            deactivate();
+            if (opened.value === name) opened.value = "";
+          } else {
+            activate();
+          }
+        },
+      }),
+      Arrow(name, activateOnArrow && activate),
+    ],
+  });
+
+/**
+ * @param {Object} o
+ * @param {string} o.name - menu name
+ * @param {import('gi://Gtk').Gtk.Widget} o.icon
+ * @param {import('gi://Gtk').Gtk.Widget} o.title
+ * @param {import('gi://Gtk').Gtk.Widget[]} o.content
+ */
+export const Menu = ({ name, icon, title, content }) =>
+  Widget.Revealer({
+    transition: "slide_down",
+    reveal_child: opened.bind().transform((v) => v === name),
+    child: Widget.Box({
+      class_names: ["menu", name],
+      vertical: true,
+      children: [
+        Widget.Box({
+          class_name: "title horizontal",
+          children: [icon, title],
+        }),
+        Widget.Separator(),
+        ...content,
+      ],
+    }),
+  });
+
+/**
+ * @param {Object} o
+ * @param {import('gi://Gtk').Gtk.Widget} o.icon
+ * @param {() => void} o.toggle
+ * @param {[import('gi://GObject').GObject.Object, () => boolean]} o.connection
+ */
+export const SimpleToggleButton = ({
+  icon,
+  toggle,
+  connection: [service, condition],
+}) =>
+  Widget.Button({
+    class_name: "simple-toggle",
+    setup: (self) =>
+      self.hook(service, () => {
+        self.toggleClassName("active", condition());
+      }),
+    child: icon,
+    on_clicked: toggle,
+  });