Reading · Pedal Driven Programming

Welcome to installment #2 of “stuff that I thought would be easy but turned out to be hard when working on Gelly”. If you somehow missed #1, it’s about simply adding favorites to Gelly 1.2. Well my dear reader, we are all the way up to version 1.9 and this time the challenge was… resizing drop down menus. Allow me to elaborate.

Version 1.9 adds support for filtering by genre. Genres are collated and then made available in a GTK DropDown. Pretty simple. Of course, these genres are user supplied values, which means they can be really long. Personally, I love me some progressive industrial electro-punk jazz but that presents a UI nightmare which is best described with an image:

On the left is Gelly when the dropdown is allowed to display it’s contents unbounded. Notice how the window controls aren’t even visible. The window is sized down, but the contents off to the right aren’t even visible at this viewport size. In contrast, the image to the right is when the contents of the dropdown are ellipsized.

So how does one go about doing that? As it turns out, not super easily. A search for “GTK DropDown ellipsize” immediately brings up this thread Where the esteemed GTK developer Emmanuele Bassi tells us to “use your own Factory instance”.

Ah yes, of course! You see, the GTK DropDown is a generic widget that can contain lists of things that aren’t just text. That’s cool, but it means there is no “ellipsize the text” property. So we need to tweak the construction of the list of items in the dropdown itself.

Since I’m kind bad at GTK, this took quite a lot of experimentation on my part. At one point I got it down to about ~15-20 lines of Rust. But it was all boilerplate, just to add a single property ellipsize=end to the created Labels that were to be placed in the dropdown.

This deeply offended me. Did I really need to have this large, ugly blob of Rust in the application for what really amounted to a presentation issue? Luckily, the factory property on GTK.DropDown is a property, and can be set to a GtkBuilderListItemFactory which can be defined using a template as per the first example in it’s documentation. This meant that I could sneak in a <property name="ellipsize">end</property> and be done?

Indeed, this works. Here is the definition of the dropdown itself:

<object class="GtkDropDown" id="genre_filter">
    <property name="hexpand">true</property>
    <property name="factory">
        <object class="GtkBuilderListItemFactory">
        <property name="resource">/io/m51/Gelly/ui/ellipsize_dropdown_factory.ui</property>
        </object>
    </property>
</object>

And here is the contents of the factory, in the ellipsize_dropdown_factory.ui resource:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template class="GtkListItem">
    <property name="child">
      <object class="GtkLabel">
        <property name="xalign">0</property>
        <property name="single-line-mode">true</property>
        <property name="ellipsize">end</property>
        <binding name="label">
          <lookup name="string" type="GtkStringObject">
            <lookup name="item">GtkListItem</lookup>
          </lookup>
        </binding>
      </object>
    </property>
  </template>
</interface>

Voila! Ellipsized text, with no Rust needed. Is it ideal? Not really, in my opinion. It works but it took me a long time to get there. Could I still be missing something, some easier way? Absolutely! If any seasoned GTK developers see this and are marveling at my stupidity, please let me know in the comments.

See you next installment.

A GTK Dropdown with Ellipsized Items

Comments