library: Add Toggle Button Entry (#219)

Author: SoNiC-HeRE

src/Library/demos/Toggle Button/main.blp

@@ -0,0 +1,90 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Toggle Button";
+  description: _("Represent active-state visually");
+
+  Box {
+    orientation: vertical;
+
+    Box {
+      orientation: horizontal;
+      halign: center;
+      margin-bottom: 6;
+      styles ["linked"]
+
+      ToggleButton button_no_look {
+        active: true;
+        icon-name: "eye-not-looking-symbolic";
+      }
+
+      ToggleButton button_look {
+        active: false;
+        icon-name: "eye-open-negative-filled-symbolic";
+        group: button_no_look;
+      }
+    }
+
+    Label {
+      label: "Grouped";
+      margin-bottom: 24;
+    }
+
+    Box  {
+      orientation: horizontal;
+      halign: center;
+      spacing: 6;
+      margin-bottom: 6;
+
+      ToggleButton button_camera {
+        active: false;
+        icon-name: "photo-camera-symbolic";
+        halign: center;
+      }
+
+      ToggleButton button_flashlight {
+        active: false;
+        icon-name: "flashlight-symbolic";
+        halign: center;
+      }
+    }
+
+    Label {
+      label: "Independent";
+      margin-bottom: 24;
+    }
+
+    ToggleButton button_console {
+      halign: center;
+      margin-bottom: 6;
+
+      Adw.ButtonContent {
+        halign: center;
+        valign: center;
+        label: "Console";
+        icon-name: "terminal-symbolic";
+      }
+    }
+
+    Label {
+      label: "With label";
+      margin-bottom: 24;
+    }
+
+    LinkButton{
+      label: "Tutorial";
+      uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/toggle.html";
+    }
+
+    LinkButton{
+      label: "API Reference";
+      uri: "https://docs.gtk.org/gtk4/class.ToggleButton.html";
+    }
+
+    LinkButton{
+      label: "Human Interface Guidelines";
+      uri: "https://developer.gnome.org/hig/patterns/controls/buttons.html";
+    }
+  }
+}

src/Library/demos/Toggle Button/main.js

@@ -0,0 +1,14 @@
+const buttons = {
+  button_no_look: "Don't look",
+  button_look: "Look",
+  button_camera: "Camera",
+  button_flashlight: "Flashlight",
+  button_console: "Console",
+};
+
+for (const [id, name] of Object.entries(buttons)) {
+  const button = workbench.builder.get_object(id);
+  button.connect("notify::active", () => {
+    console.log(`${name} ${button.active ? "On" : "Off"}`);
+  });
+}

src/Library/demos/Toggle Button/main.json

@@ -0,0 +1,10 @@
+{
+  "name": "Toggle Button",
+  "category": "user_interface",
+  "description": "Represent active-state visually",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}