library: Add Box entry

src/Library/demos/Box/main.blp

@@ -0,0 +1,203 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.Clamp {
+  maximum-size: 1024;
+
+  Box {
+    orientation: vertical;
+
+    Label {
+      label: "Box";
+      margin-top: 12;
+      margin-bottom: 12;
+      styles [
+        "title-1",
+      ]
+    }
+
+    Label {
+      label: _("A widget that arranges its child widgets into a single row or column");
+    }
+
+    Box{
+      halign: center;
+      valign: end;
+      margin-bottom: 12;
+
+      LinkButton{
+        label: "Tutorial";
+        uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/box.html";
+      }
+
+      LinkButton{
+        label: "API Reference";
+        uri: "https://docs.gtk.org/gtk4/class.Box.html";
+      }
+    }
+
+    Box {
+      orientation: vertical;
+
+      Box {
+        hexpand: true;
+        orientation: vertical;
+        spacing: 12;
+        margin-bottom:24;
+
+        Box {
+          halign: center;
+          spacing: 18;
+
+          Button button_append{
+            label: _("Append Item");
+            styles [
+              "pill",
+            ]
+          }
+
+          Button button_prepend{
+            label: _("Prepend Item");
+            styles [
+              "pill",
+            ]
+          }
+
+          Button button_remove{
+            label: _("Remove Item");
+            styles [
+              "pill",
+            ]
+          }
+        }
+      }
+
+        Box {
+          halign:center;
+          spacing:18;
+
+          Box{
+            spacing: 18;
+            Label {
+              label: _("orientation");
+            }
+
+            Box {
+              margin-start: 6;
+              homogeneous: true;
+              halign: center;
+              styles ["linked"]
+
+              ToggleButton toggle_orientation_horizontal {
+                label: _("horizontal");
+                active: true;
+              }
+              ToggleButton toggle_orientation_vertical {
+                label: _("vertical");
+                group: toggle_orientation_horizontal;
+              }
+            }
+          }
+
+          CheckButton highlight{
+            label: _("Highlight Box");
+          }
+      }
+
+      Grid {
+        margin-top:12;
+        margin-bottom:12;
+        margin-start:12;
+        row-spacing:18;
+        margin-end: 114;
+
+        Box {
+          tooltip-text: _("Horizontal Alignment");
+          orientation: vertical;
+          layout {
+            row:0;
+            column:1;
+          }
+          Label {
+            margin-top:12;
+            margin-bottom:12;
+            label: _("halign");
+          }
+          Box {
+            homogeneous: true;
+            halign: center;
+            spacing: 36;
+            ToggleButton halign_toggle_fill{
+              label: _("fill");
+              active:true;
+            }
+            ToggleButton halign_toggle_start{
+              label: _("start");
+              group: halign_toggle_fill;
+            }
+            ToggleButton halign_toggle_center{
+              label: _("center");
+              group: halign_toggle_fill;
+            }
+            ToggleButton halign_toggle_end{
+              label: _("end");
+              group: halign_toggle_fill;
+            }
+          }
+        }
+
+        Box {
+          tooltip-text: _("Vertical Alignment");
+          layout {
+            row:1;
+            column:0;
+          }
+          Label {
+            label: _("valign");
+            styles ["rotate"]
+          }
+          Box {
+            valign:center;
+            orientation: vertical;
+            spacing: 60;
+
+            ToggleButton valign_toggle_fill{
+              label: _("fill");
+              active:true;
+              styles ["rotate"]
+            }
+            ToggleButton valign_toggle_start{
+              label: _("start");
+              group: valign_toggle_fill;
+              styles ["rotate"]
+            }
+            ToggleButton valign_toggle_center{
+              label: _("center");
+              group: valign_toggle_fill;
+              styles ["rotate"]
+            }
+            ToggleButton valign_toggle_end{
+              label: _("end");
+              group: valign_toggle_fill;
+              styles ["rotate"]
+            }
+          }
+        }
+
+        ScrolledWindow {
+          hexpand: true;
+          vexpand:true;
+          has-frame: true;
+
+          layout {
+            row:1;
+            column:1;
+          }
+          Box interactive_box{
+          }
+        }
+      }
+    }
+  }
+}
+

src/Library/demos/Box/main.css

@@ -0,0 +1,12 @@
+.card {
+  margin: 6px;
+  padding: 24px;
+}
+
+.border {
+  border: 3px solid @accent_color;
+}
+
+.rotate {
+  transform: rotate(-90deg);
+}

src/Library/demos/Box/main.js

@@ -0,0 +1,106 @@
+import Gtk from "gi://Gtk";
+
+const interactive_box = workbench.builder.get_object("interactive_box");
+const button_append = workbench.builder.get_object("button_append");
+const button_prepend = workbench.builder.get_object("button_prepend");
+const button_remove = workbench.builder.get_object("button_remove");
+let count = 0;
+
+button_append.connect("clicked", () => {
+  const label = new Gtk.Label({
+    name: "card",
+    label: `Item ${count + 1}`,
+    css_classes: ["card"],
+  });
+  interactive_box.append(label);
+  count++;
+});
+
+button_prepend.connect("clicked", () => {
+  const label = new Gtk.Label({
+    name: "card",
+    label: `Item ${count + 1}`,
+    css_classes: ["card"],
+  });
+  interactive_box.prepend(label);
+  count++;
+});
+
+button_remove.connect("clicked", () => {
+  if (count) {
+    interactive_box.remove(interactive_box.get_last_child());
+    count--;
+  } else {
+    console.log("The box has no child widgets to remove");
+  }
+});
+
+const toggle_orientation_horizontal = workbench.builder.get_object(
+  "toggle_orientation_horizontal",
+);
+const toggle_orientation_vertical = workbench.builder.get_object(
+  "toggle_orientation_vertical",
+);
+
+toggle_orientation_horizontal.connect("toggled", () => {
+  if (toggle_orientation_horizontal.active)
+    interactive_box.orientation = Gtk.Orientation.HORIZONTAL;
+});
+
+toggle_orientation_vertical.connect("toggled", () => {
+  if (toggle_orientation_vertical.active)
+    interactive_box.orientation = Gtk.Orientation.VERTICAL;
+});
+
+const highlight = workbench.builder.get_object("highlight");
+highlight.connect("toggled", () => {
+  highlight.active
+    ? interactive_box.add_css_class("border")
+    : interactive_box.remove_css_class("border");
+});
+
+const halign_toggle_fill = workbench.builder.get_object("halign_toggle_fill");
+const halign_toggle_start = workbench.builder.get_object("halign_toggle_start");
+const halign_toggle_center = workbench.builder.get_object(
+  "halign_toggle_center",
+);
+const halign_toggle_end = workbench.builder.get_object("halign_toggle_end");
+
+halign_toggle_fill.connect("toggled", () => {
+  if (halign_toggle_fill.active) interactive_box.halign = Gtk.Align.FILL;
+});
+
+halign_toggle_start.connect("toggled", () => {
+  if (halign_toggle_start.active) interactive_box.halign = Gtk.Align.START;
+});
+
+halign_toggle_center.connect("toggled", () => {
+  if (halign_toggle_center.active) interactive_box.halign = Gtk.Align.CENTER;
+});
+
+halign_toggle_end.connect("toggled", () => {
+  if (halign_toggle_end.active) interactive_box.halign = Gtk.Align.END;
+});
+
+const valign_toggle_fill = workbench.builder.get_object("valign_toggle_fill");
+const valign_toggle_start = workbench.builder.get_object("valign_toggle_start");
+const valign_toggle_center = workbench.builder.get_object(
+  "valign_toggle_center",
+);
+const valign_toggle_end = workbench.builder.get_object("valign_toggle_end");
+
+valign_toggle_fill.connect("toggled", () => {
+  if (valign_toggle_fill.active) interactive_box.valign = Gtk.Align.FILL;
+});
+
+valign_toggle_start.connect("toggled", () => {
+  if (valign_toggle_start.active) interactive_box.valign = Gtk.Align.START;
+});
+
+valign_toggle_center.connect("toggled", () => {
+  if (valign_toggle_center.active) interactive_box.valign = Gtk.Align.CENTER;
+});
+valign_toggle_end.connect("toggled", () => {
+  if (valign_toggle_end.active) interactive_box.valign = Gtk.Align.END;
+});
+

src/Library/demos/Box/main.json

@@ -0,0 +1,9 @@
+{
+  "name": "Box",
+  "category": "user_interface",
+  "description": "A widget that arranges its child widgets into a single row or column",
+  "panels": [
+    "preview"
+  ],
+  "autorun": true
+}