updates

.config/ags/old/modules/quicksettings/ToggleButton.js

@@ -0,0 +1,129 @@
+import icons from "../../lib/icons.js"
+
+export const opened = Variable("")
+App.connect("window-toggled", (_, name, visible) => {
+  if (name === "quicksettings" && !visible)
+    Utils.timeout(500, () => opened.value = "")
+})
+
+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,
+    class_name: "arrow",
+    on_clicked: () => {
+      opened.value = opened.value === name ? "" : name
+      if (typeof activate === "function")
+        activate()
+    },
+  })
+}
+
+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,
+        children: [
+          Widget.Icon({
+            class_name: "icon",
+            icon,
+          }),
+          Widget.Label({
+            class_name: "label",
+            max_width_chars: 10,
+            truncate: "end",
+            label,
+          }),
+        ],
+      }),
+      on_clicked: () => {
+        if (condition()) {
+          deactivate()
+          if (opened.value === name)
+            opened.value = ""
+        } else {
+          activate()
+        }
+      },
+    }),
+    Arrow(name, activateOnArrow && activate),
+  ],
+})
+
+export const Menu = ({ name, icon, title, content }) => Widget.Revealer({
+  transition: "slide_down",
+  reveal_child: opened.bind().as(v => v === name),
+  child: Widget.Box({
+    class_names: ["menu", name],
+    vertical: true,
+    children: [
+      Widget.Box({
+        class_name: "title-box",
+        children: [
+          Widget.Icon({
+            class_name: "icon",
+            icon,
+          }),
+          Widget.Label({
+            class_name: "title",
+            truncate: "end",
+            label: title,
+          }),
+        ],
+      }),
+      Widget.Separator(),
+      Widget.Box({
+        vertical: true,
+        class_name: "content vertical",
+        children: content,
+      }),
+    ],
+  }),
+})
+
+export const SimpleToggleButton = ({
+  icon,
+  label,
+  toggle,
+  connection: [service, condition],
+}) => Widget.Button({
+  on_clicked: toggle,
+  class_name: "simple-toggle",
+  setup: self => self.hook(service, () => {
+    self.toggleClassName("active", condition())
+  }),
+  child: Widget.Box([
+    Widget.Icon({ icon }),
+    Widget.Label({
+      max_width_chars: 10,
+      truncate: "end",
+      label,
+    }),
+  ]),
+})