Cleanup UI resources

.github/workflows/main.yml

@@ -36,7 +36,7 @@ jobs:
             curl git build-essential \
             libgtk-4-dev libclang-dev libdbus-1-dev libssl-dev libudev-dev libnfc-dev \
             libpcsclite-dev libxml2-utils \
-            blueprint-compiler desktop-file-utils gettext ninja-build python3-pip \
+            desktop-file-utils gettext ninja-build python3-pip \
             udev zip
 
       - name: Set up mold as default linker

.gitignore

@@ -19,6 +19,9 @@ __pycache__
 # Web extension (generated for local dev)
 webext/add-on/manifest.json
 
+# Ignore downloaded wraps
+subprojects/blueprint-compiler
+
 # IDE
 /.vscode/settings.json
 .idea

credentialsd-ui/data/resources/meson.build

@@ -1,3 +1,5 @@
+subdir('ui')
+
 # Resources
 resources = gnome.compile_resources(
   'resources',
@@ -6,4 +8,5 @@ resources = gnome.compile_resources(
   source_dir: meson.current_build_dir(),
   install: true,
   install_dir: pkgdatadir,
+  dependencies: blueprint_templates,
 )

credentialsd-ui/data/resources/resources.gresource.xml

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/xyz/iinuwa/credentialsd/CredentialsUi/">
-    <!-- see https://gtk-rs.org/gtk4-rs/git/docs/gtk4/struct.Application.html#automatic-resources -->
-    <file compressed="true" preprocess="xml-stripblanks" alias="gtk/help-overlay.ui">ui/shortcuts.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/window.ui</file>
     <file compressed="true">style.css</file>
   </gresource>

credentialsd-ui/data/resources/ui/meson.build

@@ -0,0 +1,9 @@
+blueprint_compiler = find_program('blueprint-compiler')
+
+blueprint_templates = custom_target('blueprints',
+  input: files(
+    'window.blp'
+    ),
+  output: '.',
+  command: [blueprint_compiler, 'batch-compile', '@OUTPUT@', '@CURRENT_SOURCE_DIR@', '@INPUT@'],
+)

credentialsd-ui/data/resources/ui/window.blp

@@ -0,0 +1,151 @@
+using Gtk 4.0;
+
+template $CredentialsUiWindow: ApplicationWindow {
+  [titlebar]
+  HeaderBar headerbar {}
+
+  Box {
+    orientation: vertical;
+    spacing: 10;
+
+    Label {
+      label: bind template.view-model as <$CredentialManagerViewModel>.title;
+
+      styles [
+        "title-header",
+      ]
+    }
+
+    Separator {}
+
+    Label {
+      wrap: true;
+      use-markup: true;
+      label: bind template.view-model as <$CredentialManagerViewModel>.subtitle;
+
+      styles [
+        "subtitle-header",
+      ]
+    }
+
+    Separator {}
+
+    Stack stack {
+      StackPage {
+        name: "choose_device";
+        title: _("Choose device");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: _("Devices");
+          }
+
+          ScrolledWindow {
+            vexpand: true;
+            max-content-height: 256;
+            child: bind template.view-model as <$CredentialManagerViewModel>.devices;
+          }
+        };
+      }
+
+      StackPage {
+        name: "usb_or_nfc";
+        title: _("Connect a security key");
+
+        child: Box {
+          orientation: vertical;
+
+          Image {
+            icon-name: "media-removable-symbolic";
+
+            accessibility {
+              labelled-by: security_key_label;
+            }
+          }
+
+          Label security_key_label {
+            label: bind template.view-model as <$CredentialManagerViewModel>.prompt;
+          }
+
+          PasswordEntry usb_nfc_pin_entry {
+            activate => $handle_usb_nfc_pin_entered() swapped;
+            visible: bind template.view-model as <$CredentialManagerViewModel>.usb_nfc_pin_entry_visible;
+            placeholder-text: _("Enter your device PIN");
+          }
+        };
+      }
+
+      StackPage {
+        name: "hybrid_qr";
+        title: _("Scan the QR code to connect your device");
+
+        child: Box {
+          orientation: vertical;
+
+          Spinner {
+            visible: bind template.view-model as <$CredentialManagerViewModel>.qr_spinner_visible;
+          }
+
+          Picture qr_code_pic {
+            visible: bind template.view-model as <$CredentialManagerViewModel>.qr_code_visible;
+
+            accessibility {
+              label: "FIDO QR Code";
+            }
+          }
+
+          Label {
+            label: bind template.view-model as <$CredentialManagerViewModel>.prompt;
+          }
+        };
+      }
+
+      StackPage {
+        name: "choose_credential";
+        title: _("Choose credential");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: _("Choose credential");
+          }
+
+          ScrolledWindow {
+            vexpand: true;
+            max-content-height: 256;
+            child: bind template.view-model as <$CredentialManagerViewModel>.credentials;
+          }
+        };
+      }
+
+      StackPage {
+        name: "completed";
+        title: _("Complete");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: _("Done!");
+          }
+        };
+      }
+
+      StackPage {
+        name: "failed";
+        title: _("Something went wrong.");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: bind template.view-model as <$CredentialManagerViewModel>.prompt;
+          }
+        };
+      }
+    }
+  }
+}