library: add Picture Entry (#362)

Author: halfmexican

src/Library/demos/Picture/keys.png

@@ -0,0 +1,113 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: _("Picture");
+  description: _("Display images at their natural sizes");
+
+  child: Box {
+    orientation: vertical;
+    spacing: 12;
+    margin-end: 24;
+    margin-start: 24;
+
+    StackSwitcher {
+      stack: stack;
+      halign: center;
+    }
+
+    Stack stack {
+
+      StackPage {
+        title: _("Fill");
+
+        child: Box {
+          spacing: 12;
+          orientation: vertical;
+
+          Picture picture_fill {
+            halign: center;
+            valign: center;
+            can-shrink: true;
+            content-fit: fill;
+          }
+
+          Label {
+            label: _("Make the content fill the entire allocation, without taking its aspect ratio in consideration. The resulting content will appear as stretched if its aspect ratio is different from the allocation aspect ratio.");
+            wrap: true;
+            margin-bottom: 24;
+          }
+        };
+      }
+
+      StackPage {
+        title: _("Contain");
+
+        child: Box {
+          spacing: 12;
+          orientation: vertical;
+          Picture picture_contain {
+            halign: center;
+            valign: center;
+            can-shrink: true;
+            content-fit: contain;
+          }
+
+          Label {
+            label: _("Scale the content to fit the allocation, while taking its aspect ratio in consideration. The resulting content will appear as letterboxed if its aspect ratio is different from the allocation aspect ratio.");
+            wrap: true;
+            margin-bottom: 24;
+          }
+        };
+      }
+
+      StackPage {
+        title: _("Cover");
+
+        child: Box {
+          spacing: 12;
+          orientation: vertical;
+          Picture picture_cover {
+            halign: center;
+            valign: center;
+            can-shrink: true;
+            content-fit: cover;
+          }
+
+          Label {
+            label: _("Cover the entire allocation, while taking the content aspect ratio in consideration. The resulting content will appear as clipped if its aspect ratio is different from the allocation aspect ratio.");
+            wrap: true;
+            margin-bottom: 24;
+          }
+        };
+      }
+
+      StackPage {
+        title: _("Scale Down");
+
+        child: Box {
+          spacing: 12;
+          orientation: vertical;
+          Picture picture_scale_down {
+            halign: center;
+            valign: center;
+            can-shrink: true;
+            content-fit: scale_down;
+          }
+
+          Label {
+            label: _("The content is scaled down to fit the allocation, if needed, otherwise its original size is used.");
+            wrap: true;
+            margin-bottom: 24;
+          }
+        };
+      }
+    }
+
+    LinkButton {
+      label: _("API Reference");
+      uri: "https://docs.gtk.org/gtk4/class.Picture.html";
+      margin-bottom: 12;
+    }
+  };
+}

src/Library/demos/Picture/main.blp

@@ -0,0 +1,14 @@
+import Gio from "gi://Gio";
+
+const picture_fill = workbench.builder.get_object("picture_fill");
+const picture_contain = workbench.builder.get_object("picture_contain");
+const picture_cover = workbench.builder.get_object("picture_cover");
+const picture_scale_down = workbench.builder.get_object("picture_scale_down");
+
+const file = Gio.File.new_for_uri(workbench.resolve("./keys.png"));
+
+picture_fill.file = file;
+picture_contain.file = file;
+picture_cover.file = file;
+picture_scale_down.file = file;
+

src/Library/demos/Picture/main.js

@@ -0,0 +1,6 @@
+{
+  "category": "user_interface",
+  "description": "Display images at their natural sizes",
+  "panels": ["ui", "preview"],
+  "autorun": true
+}