Modernize and move to Blueprint

data/meson.build

@@ -53,3 +53,25 @@ install_data(
 )
 
 subdir('icons')
+
+# Blueprint
+subproject('blueprint-compiler')
+blueprints = custom_target(
+  'blueprints',
+  input: files(
+    'ui/menu.blp',
+    'ui/window.blp',
+  ),
+  output: '.',
+  command: [find_program('blueprint-compiler'), 'batch-compile', '@OUTPUT@', '@CURRENT_SOURCE_DIR@', '@INPUT@'],
+)
+#
+
+asresources = gnome.compile_resources(
+	'as-resources',
+  'io.github.lainsce.Colorway.gresource.xml',
+	source_dir: meson.current_build_dir(),
+  dependencies: blueprints,
+	c_name: 'as',
+  install_dir: get_option('datadir') / meson.project_name(),
+)

data/ui/menu.blp

@@ -0,0 +1,27 @@
+using Gtk 4.0;
+
+menu menu {
+  section {
+    item {
+      label: _("Copy Colors to Clipboard");
+      action: "win.action_export_txt";
+    }
+
+    item {
+      label: _("Copy Colors Image to Clipboard");
+      action: "win.action_export_png";
+    }
+  }
+
+  section {
+    item {
+      label: _("Keyboard Shortcuts");
+      action: "win.action_keys";
+    }
+
+    item {
+      label: _("About Colorway");
+      action: "win.action_about";
+    }
+  }
+}

data/ui/window.blp

@@ -0,0 +1,80 @@
+using Gtk 4.0;
+using He 1;
+
+template $ColorwayMainWindow : He.ApplicationWindow {
+  resizable: false;
+  title: "Colorway";
+
+  Box main_box {
+    orientation: vertical;
+
+    styles [
+      "main-box",
+    ]
+
+    Overlay {
+      [overlay]
+      He.AppBar headerbar {
+        show-back: false;
+        valign: start;
+        viewtitle-widget: 
+        He.TextField color_label {
+          tooltip-text: _("Change color (hexcode)");
+          halign: start;
+
+          styles [
+            "numeric",
+          ]
+        };
+
+        MenuButton menu_button {
+          icon-name: "open-menu-symbolic";
+        }
+      }
+
+      WindowHandle {
+        vexpand: true;
+        hexpand: true;
+
+        Box {
+          orientation: horizontal;
+
+          Box {
+            orientation: vertical;
+            vexpand: true;
+
+            He.OverlayButton color_picker_button {
+              icon: "color-select-symbolic";
+              primary-tooltip: _("Pick Color");
+              typeb: primary;
+              size: small;
+
+              styles [
+                "clr-preview",
+              ]
+
+              Box {
+                orientation: vertical;
+
+                Box props_box {
+                  orientation: vertical;
+                  spacing: 6;
+                  margin-start: 18;
+                  margin-end: 18;
+                  margin-top: 118;
+
+                  Box color_box {
+                  }
+                }
+
+                styles [
+                  "clr-props",
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

meson.build

@@ -35,11 +35,12 @@ add_project_arguments(
   '-DGETTEXT_PACKAGE="@0@"'.format(app_id),
   language: 'c'
 )
-
-asresources = gnome.compile_resources(
-  'as-resources', 'data/io.github.lainsce.Colorway.gresource.xml',
-  source_dir: 'data',
-  c_name: 'as'
+add_project_arguments(
+  [
+		'--target-glib=2.68',
+    '--gresourcesdir', meson.current_build_dir() / 'data',
+	],
+	language: 'vala',
 )
 
 sources = [
@@ -64,18 +65,18 @@ dependencies = [
   meson.get_compiler('c').find_library('m', required: true)
 ]
 
+subdir('data')
+subdir('po')
+
 executable(
   meson.project_name(),
-  sources,
   asresources,
+  sources,
   dependencies: dependencies,
   vala_args: [meson.project_source_root() + '/src/config.vapi'],
   install : true
 )
 
-subdir('data')
-subdir('po')
-
 gnome.post_install(
   glib_compile_schemas: true,
   gtk_update_icon_cache: true,

src/chooser.vala

@@ -46,7 +46,7 @@ public class Colorway.Chooser : Gtk.DrawingArea {
         g = active_color.green;
         b = active_color.blue;
         this.active_color = active_color;
-        this.get_style_context ().add_class ("clr-da");
+        this.add_css_class ("clr-da");
 
         Gtk.rgb_to_hsv ((float)r, (float)g, (float)b, out h, out s, out v);
         this.h = h;

src/hue_slider.vala

@@ -35,7 +35,7 @@ public class Colorway.HueSlider : Gtk.Scale {
         this.digits = 0;
         this.has_origin = false;
 
-        this.get_style_context ().add_class ("clr-hue");
+        this.add_css_class ("clr-hue");
 
         this.value_changed.connect (() => {
             double hue = this.adjustment.get_value () / 360;