library: Adds Color Picker entry (#335)

src/Library/demos/Color Picker/main.blp

@@ -0,0 +1,25 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: _("Color Picker");
+  description: _("Pick color from anywhere on-screen");
+  margin-top: 48;
+
+  Box {
+    orientation: vertical;
+    halign: center;
+
+    Button button {
+      label: _("Select Color");
+      margin-bottom: 42;
+      halign: center;
+      styles ["suggested-action", "pill"]
+    }
+
+    LinkButton {
+      label: "API Reference";
+      uri: "https://libportal.org/method.Portal.pick_color.html";
+    }
+  }
+}

src/Library/demos/Color Picker/main.js

@@ -0,0 +1,23 @@
+import Gdk from "gi://Gdk";
+import Gio from "gi://Gio";
+import Xdp from "gi://Xdp";
+import XdpGtk from "gi://XdpGtk4";
+
+Gio._promisify(Xdp.Portal.prototype, "pick_color", "pick_color_finish");
+
+const portal = new Xdp.Portal();
+const parent = XdpGtk.parent_new_gtk(workbench.window);
+const button = workbench.builder.get_object("button");
+
+async function onClicked() {
+  // result is a GVariant of the form (ddd), containing red, green and blue components in the range [0,1]
+  const result = await portal.pick_color(parent, null);
+  const [r, g, b] = result.deepUnpack();
+
+  const color = new Gdk.RGBA({ red: r, green: g, blue: b, alpha: 1.0 });
+  console.log(`Selected color is: ${color.to_string()}`);
+}
+
+button.connect("clicked", () => {
+  onClicked().catch(logError);
+});

src/Library/demos/Color Picker/main.json

@@ -0,0 +1,7 @@
+{
+  "name": "Color Picker",
+  "category": "platform",
+  "description": "Pick color from anywhere on-screen",
+  "panels": ["code", "preview"],
+  "autorun": true
+}