[nautilus/wip/antoniof/flowbox-to-gridview: 9/11] view-icon-item-ui: Fix icon and labels alignment

[António Fernandes <antoniof src gnome org>]

commit 09a64dd2f838d98e3f1c07ecf533903c00bf3ddf
Author: António Fernandes <antoniof gnome org>
Date:   Wed Feb 2 14:03:44 2022 +0000

    view-icon-item-ui: Fix icon and labels alignment
    
    We want all items to be aligned by the top of the name label, and for
    this we set the same height and width for the container of the icons.
    
    Unfortunately, doing this causes undesired results due to height for
    width computations.
    
    So, set only the height on the icon and get the desired width using
    margins.

 src/nautilus-view-icon-item-ui.c               | 25 +++++++++++++++++++++----
 src/resources/ui/nautilus-view-icon-item-ui.ui |  1 -
 2 files changed, 21 insertions(+), 5 deletions(-)
---
diff --git a/src/nautilus-view-icon-item-ui.c b/src/nautilus-view-icon-item-ui.c
index 8e23d3580..0294e9e8d 100644
--- a/src/nautilus-view-icon-item-ui.c
+++ b/src/nautilus-view-icon-item-ui.c
@@ -37,6 +37,9 @@ update_icon (NautilusViewIconItemUi *self)
     GtkStyleContext *style_context;
     NautilusFile *file;
     guint icon_size;
+    int desired_item_width;
+    int icon_width;
+    int extra_margin;
     g_autofree gchar *thumbnail_path = NULL;
 
     file = nautilus_view_item_model_get_file (self->model);
@@ -49,13 +52,27 @@ update_icon (NautilusViewIconItemUi *self)
     icon_paintable = nautilus_file_get_icon_paintable (file, icon_size, 1, flags);
     gtk_picture_set_paintable (GTK_PICTURE (self->icon), icon_paintable);
 
-    gtk_widget_set_size_request (self->fixed_height_box, icon_size, icon_size);
+    /* Set the same height for all icons regardless of aspect ratio.
+     * Don't set the width here because it would get GtkPicture h4w confused.
+     */
+    gtk_widget_set_size_request (self->fixed_height_box, -1, icon_size);
+
+    /* Give all items the same minimum width. This cannot be done by setting the
+     * width request directly, as above, because it would get mess up with
+     * height for width calculations.
+     *
+     * Instead we must add margins on both sides of the icon which, summed up
+     * with the icon's actual width, equal the desired item width. */
+    desired_item_width = icon_size;
     if (icon_size < NAUTILUS_GRID_ICON_SIZE_LARGEST)
     {
-        int extra_margins = 0.5 * EXTRA_WIDTH_FOR_TEXT;
-        gtk_widget_set_margin_start (self->fixed_height_box, extra_margins);
-        gtk_widget_set_margin_end (self->fixed_height_box, extra_margins);
+        desired_item_width += EXTRA_WIDTH_FOR_TEXT;
     }
+    icon_width = gdk_paintable_get_intrinsic_width (icon_paintable);
+    extra_margin = (desired_item_width - icon_width) / 2;
+    gtk_widget_set_margin_start (self->fixed_height_box, extra_margin);
+    gtk_widget_set_margin_end (self->fixed_height_box, extra_margin);
+
     style_context = gtk_widget_get_style_context (self->icon);
     thumbnail_path = nautilus_file_get_thumbnail_path (file);
     if (thumbnail_path != NULL &&
diff --git a/src/resources/ui/nautilus-view-icon-item-ui.ui b/src/resources/ui/nautilus-view-icon-item-ui.ui
index 9ee63b684..11112d0b0 100644
--- a/src/resources/ui/nautilus-view-icon-item-ui.ui
+++ b/src/resources/ui/nautilus-view-icon-item-ui.ui
@@ -11,7 +11,6 @@
         <property name="halign">center</property>
         <property name="height-request">96</property>
         <property name="valign">center</property>
-        <property name="width-request">96</property>
         <child>
           <object class="GtkPicture" id="icon">
             <property name="halign">center</property>