[gnome-maps/wip/cdavis/post-port-cleanups: 19/22] placeListRow: Revamp widget heirarchy

[Marcus Lundblad <mlundblad src gnome org>]

commit 3029bdb20f1153b88cfd645e896770874bf5848a
Author: Christopher Davis <christopherdavis gnome org>
Date:   Sun Aug 21 16:19:52 2022 -0400

    placeListRow: Revamp widget heirarchy
    
    Use a modern widget heirarchy that matches other applications.

 data/ui/place-list-row.ui | 84 +++++++++++++++++++----------------------------
 src/placeListRow.js       |  5 +--
 2 files changed, 34 insertions(+), 55 deletions(-)
---
diff --git a/data/ui/place-list-row.ui b/data/ui/place-list-row.ui
index af687608..a13ef944 100644
--- a/data/ui/place-list-row.ui
+++ b/data/ui/place-list-row.ui
@@ -2,67 +2,49 @@
 <interface>
   <requires lib="gtk" version="4.0"/>
   <template class="Gjs_PlaceListRow" parent="GtkListBoxRow">
+    <accessibility>
+      <relation name="labelled-by">name</relation>
+      <relation name="described-by">details</relation>
+    </accessibility>
     <property name="child">
-      <object class="GtkGrid" id="grid">
-        <property name="orientation">vertical</property>
-        <property name="row-homogeneous">1</property>
-        <property name="margin-start">5</property>
-        <property name="margin-end">5</property>
-        <property name="margin-top">5</property>
-        <property name="margin-bottom">5</property>
+      <object class="GtkBox">
+        <property name="spacing">6</property>
         <child>
           <object class="GtkImage" id="icon">
-            <property name="pixel_size">32</property>
-            <property name="margin_end">12</property>
-            <layout>
-              <property name="column">0</property>
-              <property name="row">0</property>
-              <property name="row-span">2</property>
-            </layout>
-          </object>
-        </child>
-        <child>
-          <object class="GtkImage" id="typeIcon">
             <property name="valign">center</property>
-            <property name="halign">end</property>
-            <property name="hexpand">1</property>
-            <property name="margin_start">10</property>
-            <property name="pixel_size">16</property>
-            <layout>
-              <property name="column">2</property>
-              <property name="row">0</property>
-              <property name="row-span">2</property>
-            </layout>
           </object>
         </child>
         <child>
-          <object class="GtkLabel" id="name">
-            <property name="halign">start</property>
-            <property name="valign">end</property>
-            <property name="hexpand">1</property>
-            <property name="use_markup">1</property>
-            <property name="ellipsize">end</property>
-            <layout>
-              <property name="column">1</property>
-              <property name="row">0</property>
-            </layout>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <child>
+              <object class="GtkLabel" id="name">
+                <property name="ellipsize">end</property>
+                <property name="lines">0</property>
+                <property name="xalign">0</property>
+                <property name="use-markup">True</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="details">
+                <property name="ellipsize">end</property>
+                <property name="lines">0</property>
+                <property name="xalign">0</property>
+                <property name="use-markup">True</property>
+                <style>
+                  <class name="caption"/>
+                  <class name="dim-label"/>
+                </style>
+              </object>
+            </child>
           </object>
         </child>
         <child>
-          <object class="GtkLabel" id="details">
-            <property name="halign">start</property>
-            <property name="valign">start</property>
-            <property name="hexpand">1</property>
-            <property name="use_markup">1</property>
-            <property name="ellipsize">end</property>
-            <style>
-              <class name="subtitle"/>
-              <class name="dim-label"/>
-            </style>
-            <layout>
-              <property name="column">1</property>
-              <property name="row">1</property>
-            </layout>
+          <object class="GtkImage" id="typeIcon">
+            <property name="halign">end</property>
+            <property name="valign">center</property>
+            <property name="hexpand">True</property>
           </object>
         </child>
       </object>
diff --git a/src/placeListRow.js b/src/placeListRow.js
index 8bbcd345..8bf708af 100644
--- a/src/placeListRow.js
+++ b/src/placeListRow.js
@@ -25,8 +25,6 @@ import {PlaceFormatter} from './placeFormatter.js';
 import {PlaceStore} from './placeStore.js';
 import * as Utils from './utils.js';
 
-var ROW_HEIGHT = 55;
-
 export class PlaceListRow extends Gtk.ListBoxRow {
 
     constructor(params) {
@@ -39,7 +37,6 @@ export class PlaceListRow extends Gtk.ListBoxRow {
         let type = params.type;
         delete params.type;
 
-        params.height_request = ROW_HEIGHT;
         super(params);
         this.update(place, type, searchString);
     }
@@ -47,11 +44,11 @@ export class PlaceListRow extends Gtk.ListBoxRow {
     update(place, type, searchString) {
         this.place = place;
         let formatter = new PlaceFormatter(this.place);
-        this.title = formatter.title;
         let markup = GLib.markup_escape_text(formatter.title, -1);
 
         this._name.label = this._boldMatch(markup, searchString);
         this._details.label = GLib.markup_escape_text(formatter.getDetailsString(),-1);
+        this._details.visible = this._details.label.length > 0;
 
         if (place.icon)
             this._icon.gicon = place.icon;