library: Add Color Dialog entry (#232)

Author: AkshayWarrier

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

@@ -0,0 +1,58 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Color Dialog";
+  description: _("Show a dialog to select a color");
+
+  Box {
+    orientation: vertical;
+    halign: center;
+    spacing:42;
+
+    Box{
+      orientation:vertical;
+
+      Label {
+        label: _("Dialog Button");
+        margin-bottom:12;
+        styles ["title-4"]
+      }
+
+      ColorDialogButton color_dialog_button {
+        halign: center;
+        margin-bottom:12;
+      }
+
+
+      LinkButton {
+        label: "API Reference";
+        uri: "https://docs.gtk.org/gtk4/class.ColorDialogButton.html";
+      }
+    }
+
+    Box{
+      orientation: vertical;
+
+      Label {
+        label: _("Dialog with Custom Button");
+        margin-bottom:12;
+        styles ["title-4"]
+      }
+
+      Button custom_button {
+        label: _("Select Color…");
+        margin-start:42;
+        margin-end:42;
+        margin-bottom:12;
+        styles ["pill"]
+      }
+
+      LinkButton {
+        label: "API Reference";
+        uri: "https://docs.gtk.org/gtk4/class.ColorDialog.html";
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,42 @@
+import Gtk from "gi://Gtk";
+import Gdk from "gi://Gdk";
+import Gio from "gi://Gio";
+
+Gio._promisify(Gtk.ColorDialog.prototype, "choose_rgba", "choose_rgba_finish");
+
+const color_dialog_button = workbench.builder.get_object("color_dialog_button");
+const custom_button = workbench.builder.get_object("custom_button");
+
+const color = new Gdk.RGBA();
+color.parse("red");
+
+const dialog_standard = new Gtk.ColorDialog({
+  title: "Select a color",
+  modal: true,
+  with_alpha: true,
+});
+
+color_dialog_button.dialog = dialog_standard;
+color_dialog_button.rgba = color;
+
+color_dialog_button.connect("notify::rgba", () => {
+  console.log(
+    `Color Dialog Button: The color selected is ${color_dialog_button.rgba.to_string()}`,
+  );
+});
+
+const dialog_custom = new Gtk.ColorDialog({
+  title: "Select a color",
+  modal: true,
+  with_alpha: false,
+});
+
+custom_button.connect("clicked", async () => {
+  try {
+    const color = await dialog_custom.choose_rgba(workbench.window, null, null);
+    console.log(`Custom Button: The color selected is ${color.to_string()}`);
+  } catch (err) {
+    logError(err);
+  }
+});
+

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

@@ -0,0 +1,10 @@
+{
+  "name": "Color Dialog",
+  "category": "user_interface",
+  "description": "Show a dialog to select color",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}