collection-details: Move from GtkFlowBox to GtkGrid

cartridges/ui/collection-details.blp

@@ -49,12 +49,13 @@ template $CollectionDetails: Adw.Dialog {
       }
 
       Adw.PreferencesGroup {
-        FlowBox icons_box {
+        Grid icons_grid {
-          min-children-per-line: 7;
+          column-spacing: 6;
-
+          row-spacing: 6;
-          styles [
+          margin-top: 6;
-            "navigation-sidebar",
+          margin-bottom: 6;
-          ]
+          margin-start: 6;
+          margin-end: 6;
         }
 
         styles [

cartridges/ui/collection_details.py

@@ -1,6 +1,7 @@
 # SPDX-License-Identifier: GPL-3.0-or-later
 # SPDX-FileCopyrightText: Copyright 2025 Jamie Gravendeel
 
+from itertools import product
 from typing import Any, TypeVar, cast
 
 from gi.repository import Adw, Gio, GObject, Gtk
@@ -43,10 +44,12 @@ class CollectionDetails(Adw.Dialog):
     __gtype_name__ = __qualname__
 
     name_entry: Adw.EntryRow = Gtk.Template.Child()
-    icons_box: Gtk.FlowBox = Gtk.Template.Child()
+    icons_grid: Gtk.Grid = Gtk.Template.Child()
 
     sort_changed = GObject.Signal()
 
+    _selected_icon: str
+
     @GObject.Property(type=Collection)
     def collection(self) -> Collection:
         """The collection that `self` represents."""
@@ -74,21 +77,33 @@ class CollectionDetails(Adw.Dialog):
             transform_to=lambda _, text: bool(text),
         )
 
-        icons = Gtk.StringList.new(tuple(f"{icon}-symbolic" for icon in ICONS))
+        group_button = None
-        self.icons_box.bind_model(
+        for index, (row, col) in enumerate(product(range(3), range(7))):
-            icons,
+            icon = ICONS[index]
-            lambda string: Gtk.FlowBoxChild(
+
-                name="collection-icon-child",
+            button = Gtk.ToggleButton(
-                child=Gtk.Image.new_from_icon_name(string.props.string),
+                icon_name=f"{icon}-symbolic",
+                hexpand=True,
                 halign=Gtk.Align.CENTER,
-            ),
-        )
-        self.icons_box.select_child(
-            cast(
-                Gtk.FlowBoxChild,
-                self.icons_box.get_child_at_index(ICONS.index(self.collection.icon)),
             )
-        )
+            button.add_css_class("circular")
+            button.add_css_class("flat")
+
+            if group_button:
+                button.props.group = group_button
+            else:
+                group_button = button
+
+            button.connect(
+                "toggled",
+                lambda _, icon: setattr(self, "_selected_icon", icon),
+                icon,
+            )
+
+            if icon == self.collection.icon:
+                button.props.active = True
+
+            self.icons_grid.attach(button, col, row, 1, 1)
 
     def _apply(self):
         name = self.name_entry.props.text
@@ -97,9 +112,7 @@ class CollectionDetails(Adw.Dialog):
             if self.collection.in_model:
                 self.emit("sort-changed")
 
-        self.collection.icon = ICONS[
+        self.collection.icon = self._selected_icon
-            self.icons_box.get_selected_children()[0].get_index()
-        ]
 
         if not self.collection.in_model:
             collections.model.append(self.collection)

cartridges/ui/style.css

@@ -64,10 +64,6 @@
   filter: saturate(300%) opacity(50%);
 }
 
-#collection-icon-child {
-  border-radius: 9999px;
-}
-
 @media (prefers-color-scheme: dark) {
   #details list {
     background: rgb(from white r g b / 10%);