[nautilus/wip/antoniof/flowbox-to-gridview: 6/16] view-icon-item-ui: Fix labels sizing

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

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

    view-icon-item-ui: Fix labels sizing
    
    We want all items to have the same width and for this we have been
    setting GtkLabel:max-width-characters to 0, such that labels take
    grow only until the width defined by the icon container.
    
    Unfortunately, doing this for wrapping labels in a dynamic grid causes
    allocation warnings and visual glytches (labels overflowing the height
    of their container), which I assume are due to the labels reporting a
    minumum height for a width which goes beyong the minimum width set on
    the icon container.
    
    So, instead of setting Gtk:Label:max-width-characters to 0, wrap the
    whole thing in a horizontal AdwClamp with its :maximum-size set to 0.
    This forces the labels to report a height which corresponds to the
    actual minimum width set by the icon container.
    
    Also, remove some meaningless properties from the UI file.

 src/nautilus-view-icon-item-ui.c               |   2 +
 src/resources/ui/nautilus-view-icon-item-ui.ui | 142 ++++++++++++-------------
 2 files changed, 71 insertions(+), 73 deletions(-)
---
diff --git a/src/nautilus-view-icon-item-ui.c b/src/nautilus-view-icon-item-ui.c
index b638f5315..872914dae 100644
--- a/src/nautilus-view-icon-item-ui.c
+++ b/src/nautilus-view-icon-item-ui.c
@@ -49,6 +49,8 @@ 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);
 
+    /* Set the same height and width for all icons regardless of aspect ratio.
+     */
     gtk_widget_set_size_request (self->fixed_height_box, icon_size, icon_size);
     if (icon_size < NAUTILUS_GRID_ICON_SIZE_LARGEST)
     {
diff --git a/src/resources/ui/nautilus-view-icon-item-ui.ui b/src/resources/ui/nautilus-view-icon-item-ui.ui
index e005a6d68..6b384f5db 100644
--- a/src/resources/ui/nautilus-view-icon-item-ui.ui
+++ b/src/resources/ui/nautilus-view-icon-item-ui.ui
@@ -3,90 +3,86 @@
   <requires lib="gtk" version="4.0"/>
   <template class="NautilusViewIconItemUi" parent="GtkBox">
     <child>
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
-        <property name="halign">center</property>
-        <property name="valign">start</property>
-        <property name="spacing">6</property>
-        <child>
-          <object class="GtkBox" id="fixed_height_box">
-            <property name="orientation">vertical</property>
-            <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>
-                <property name="hexpand">True</property>
-                <property name="valign">center</property>
-                <property name="vexpand">True</property>
-                <property name="can-shrink">False</property>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
+      <object class="AdwClamp">
+        <property name="maximum-size">0</property>
+        <property name="child">
           <object class="GtkBox">
             <property name="orientation">vertical</property>
-            <property name="valign">start</property>
-            <child>
-              <object class="GtkLabel" id="label">
-                <property name="ellipsize">middle</property>
-                <property name="justify">center</property>
-                <property name="lines">3</property>
-                <property name="max-width-chars">0</property>
-                <property name="wrap">True</property>
-                <property name="wrap-mode">word-char</property>
-                <attributes>
-                  <attribute name="insert-hyphens" value="false"></attribute>
-                </attributes>
-              </object>
-            </child>
+            <property name="spacing">6</property>
             <child>
-              <object class="GtkLabel" id="first_caption">
-                <property name="ellipsize">end</property>
-                <property name="justify">center</property>
-                <property name="lines">2</property>
-                <property name="max-width-chars">0</property>
-                <property name="wrap">True</property>
-                <property name="wrap-mode">word-char</property>
-                <property name="valign">start</property>
-                <style>
-                  <class name="caption"/>
-                </style>
-              </object>
-            </child>
-            <child>
-              <object class="GtkLabel" id="second_caption">
-                <property name="ellipsize">end</property>
-                <property name="justify">center</property>
-                <property name="lines">2</property>
-                <property name="max-width-chars">0</property>
-                <property name="wrap">True</property>
-                <property name="wrap-mode">word-char</property>
-                <property name="valign">start</property>
-                <style>
-                  <class name="caption"/>
-                </style>
+              <object class="GtkBox" id="fixed_height_box">
+                <property name="orientation">vertical</property>
+                <property name="halign">center</property>
+                <child>
+                  <object class="GtkPicture" id="icon">
+                    <property name="halign">center</property>
+                    <property name="hexpand">True</property>
+                    <property name="valign">center</property>
+                    <property name="vexpand">True</property>
+                    <property name="can-shrink">False</property>
+                  </object>
+                </child>
               </object>
             </child>
             <child>
-              <object class="GtkLabel" id="third_caption">
-                <property name="ellipsize">end</property>
-                <property name="justify">center</property>
-                <property name="lines">2</property>
-                <property name="max-width-chars">0</property>
-                <property name="wrap">True</property>
-                <property name="wrap-mode">word-char</property>
-                <property name="valign">start</property>
+              <object class="GtkBox">
+                <property name="orientation">vertical</property>
                 <style>
-                  <class name="caption"/>
+                  <class name="icon-ui-labels-box"/>
                 </style>
+                <child>
+                  <object class="GtkLabel" id="label">
+                    <property name="ellipsize">middle</property>
+                    <property name="justify">center</property>
+                    <property name="lines">3</property>
+                    <property name="wrap">True</property>
+                    <property name="wrap-mode">word-char</property>
+                    <attributes>
+                      <attribute name="insert-hyphens" value="false"></attribute>
+                    </attributes>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="first_caption">
+                    <property name="ellipsize">end</property>
+                    <property name="justify">center</property>
+                    <property name="lines">2</property>
+                    <property name="wrap">True</property>
+                    <property name="wrap-mode">word-char</property>
+                    <property name="valign">start</property>
+                    <style>
+                      <class name="caption"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="second_caption">
+                    <property name="ellipsize">end</property>
+                    <property name="justify">center</property>
+                    <property name="lines">2</property>
+                    <property name="wrap">True</property>
+                    <property name="wrap-mode">word-char</property>
+                    <style>
+                      <class name="caption"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="third_caption">
+                    <property name="ellipsize">end</property>
+                    <property name="justify">center</property>
+                    <property name="lines">2</property>
+                    <property name="wrap">True</property>
+                    <property name="wrap-mode">word-char</property>
+                    <style>
+                      <class name="caption"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
-        </child>
+        </property>
       </object>
     </child>
   </template>