geigi/cozy

Migrate to Blueprint

Closed this issue · 1 comments

Glade is basically dead.

Cozy will soon be using GTK 4, and we're left with these XML files that we have to edit manually. Personally, I find this still easier than using a GUI designer, but yeah, I'm afraid my < and > keys are going to fall out soon.

Fortunately, there is Blueprint, which is a markup language that can be compiled to GTK's standard XML UI files. It is enjoying a lot of love and popularity in the GNOME community, and there are a great number of apps already using it 1.
I would therefore propose migrating Cozy to Blueprint. Of course, if we decide to do it, I would do the hard(?) work.

For comparison, here's the headerbar definition file with XMl vs. Blueprint

headerbar.ui

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk" version="4.0"/>
  <template class="Headerbar" parent="AdwBin">
    <child>
      <object class="AdwHeaderBar" id="headerbar">
        <child type="title">
          <object class="AdwViewSwitcher" id="view_switcher">
            <property name="policy">wide</property>
          </object>
        </child>
        <child type="start">
          <object class="GtkToggleButton" id="show_sidebar_button">
            <property name="visible">false</property>
            <property name="icon-name">sidebar-show-symbolic</property>
            <property name="tooltip-text" translatable="true">Toggle Filter Sidebar</property>
          </object>
        </child>
        <child type="end">
          <object class="GtkMenuButton" id="menu_button">
            <property name="tooltip-text" translatable="true">Options</property>
            <property name="menu-model">primary_menu</property>
            <property name="icon-name">open-menu-symbolic</property>
            <accessibility>
              <property name="label" translatable="true">Open the options popover</property>
            </accessibility>
          </object>
        </child>
        <child type="end">
          <object class="GtkMenuButton" id="search_button">
            <property name="name">Search toggle button</property>
            <property name="tooltip-text" translatable="true">Search your library</property>
            <property name="icon-name">edit-find-symbolic</property>
            <accessibility>
              <property name="label" translatable="true">Open the search popover</property>
            </accessibility>
          </object>
        </child>
        <child type="end">
          <object class="GtkMenuButton" id="progress_menu_button">
            <property name="visible">false</property>
            <property name="can-focus">true</property>
            <property name="tooltip-text" translatable="true">Display background task progress</property>
            <child>
              <object class="GtkSpinner" id="progress_spinner"/>
            </child>
            <style>
              <class name="flat"/>
            </style>
          </object>
        </child>
      </object>
    </child>
  </template>
  <menu id="primary_menu">
    <section>
      <item>
        <attribute name="action">app.scan</attribute>
        <attribute name="label" translatable="yes">_Scan Library</attribute>
      </item>
    </section>
    <section>
      <item>
        <attribute name="action">app.hide_offline</attribute>
        <attribute name="label" translatable="yes">_Hide unavailable books</attribute>
      </item>
    </section>
    <section>
      <item>
        <attribute name="action">app.prefs</attribute>
        <attribute name="label" translatable="yes">_Preferences</attribute>
      </item>
      <item>
        <attribute name="action">app.about</attribute>
        <attribute name="label" translatable="yes">_About</attribute>
      </item>
    </section>
    <section>
      <item>
        <attribute name="action">app.quit</attribute>
        <attribute name="label" translatable="yes">_Quit</attribute>
      </item>
    </section>
  </menu>
</interface>

headerbar.blp (unfortunately GitHub doesn't have syntax highlighting for it):

using Gtk 4.0;
using Adw 1;

template $Headerbar : Adw.Bin {
  Adw.HeaderBar headerbar {
    [title]
    Adw.ViewSwitcher view_switcher {
      policy: wide;
    }

    [start]
    ToggleButton show_sidebar_button {
      visible: false;
      icon-name: "sidebar-show-symbolic";
      tooltip-text: _("Toggle Filter Sidebar");
    }

    [end]
    MenuButton menu_button {
      tooltip-text: _("Options");
      menu-model: primary_menu;
      icon-name: "open-menu-symbolic";

      accessibility { label: _("Open the options popover"); }
    }

    [end]
    MenuButton search_button {
      name: "Search toggle button";
      tooltip-text: _("Search your library");
      icon-name: "edit-find-symbolic";

      accessibility { label: _("Open the search popover"); }
    }

    [end]
    MenuButton progress_menu_button {
      visible: false;
      can-focus: true;
      tooltip-text: _("Display background task progress");

      Spinner progress_spinner {}

      styles [ "flat" ]
    }
  }
}

menu primary_menu {
  section {
    item {
      action: "app.scan";
      label: _("_Scan Library");
    }
  }

  section {
    item {
      action: "app.hide_offline";
      label: _("_Hide unavailable books");
    }
  }

  section {
    item {
      action: "app.prefs";
      label: _("_Preferences");
    }

    item {
      action: "app.about";
      label: _("_About");
    }
  }

  section {
    item {
      action: "app.quit";
      label: _("_Quit");
    }
  }
}
  1. https://jwestman.pages.gitlab.gnome.org/blueprint-compiler/index.html#built-with-blueprint

Definitely a fan :) I think Blueprint is the future. Nobody wants to write xml by themselves 😅