[gnome-maps/wip/cdavis/post-port-cleanups: 21/22] layersPopover: Use GMenuModel

[Marcus Lundblad <mlundblad src gnome org>]

commit 460091b8cda1a2254a81b8a76f102bd8a2da099a
Author: Christopher Davis <christopherdavis gnome org>
Date:   Sun Aug 21 17:21:10 2022 -0400

    layersPopover: Use GMenuModel
    
    When porting to GTK4 apps should stop using custom menu buttons
    and instead use GMenuModel where possible. This commit
    changes the shape layer menu to use GMenuModel with a custom
    child for the list.

 data/ui/layers-popover.ui | 105 +++++++++++-----------------------------------
 src/layersPopover.js      |  15 +++----
 2 files changed, 31 insertions(+), 89 deletions(-)
---
diff --git a/data/ui/layers-popover.ui b/data/ui/layers-popover.ui
index ed5adeb7..ecdc13ab 100644
--- a/data/ui/layers-popover.ui
+++ b/data/ui/layers-popover.ui
@@ -1,94 +1,39 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk" version="4.0"/>
-  <template class="Gjs_LayersPopover" parent="GtkPopover">
-    <property name="child">
-      <object class="GtkGrid" id="grid">
-        <property name="halign">center</property>
-        <property name="valign">center</property>
-        <property name="row_spacing">5</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>
-        <!-- disable the map type swithers for now, as we only have street right now...-->
-        <!--
-        <child>
-          <object class="GtkToggleButton" id="streetLayerButton">
-            <style>
-              <class name="layer-radio-button"/>
-            </style>
-            <child>
-              <object class="GtkImage" id="streetLayerImage"/>
-            </child>
-            <layout>
-              <property name="column">0</property>
-              <property name="row">0</property>
-            </layout>
-          </object>
-        </child>
-        <child>
-          <object class="GtkToggleButton" id="aerialLayerButton">
-            <style>
-              <class name="layer-radio-button"/>
-            </style>
-            <child>
-              <object class="GtkImage" id="aerialLayerImage"/>
-            </child>
-            <layout>
-              <property name="column">0</property>
-              <property name="row">1</property>
-            </layout>
-          </object>
-        </child>
-        -->
-        <child>
-          <object class="GtkBox">
-            <child>
-              <object class="GtkLabel">
-                <property name="hexpand">1</property>
-                <property name="halign">start</property>
-                <property name="label" translatable="1">Show Scale</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkCheckButton">
-                <property name="focusable">1</property>
-                <property name="action-name">win.show-scale</property>
-              </object>
-            </child>
-            <layout>
-              <property name="column">0</property>
-              <property name="row">3</property>
-            </layout>
-          </object>
-        </child>
+  <menu id="layers_menu">
+    <section>
+      <item>
+        <attribute name="label" translatable="yes">Show Scale</attribute>
+        <attribute name="action">win.show-scale</attribute>
+      </item>
+    </section>
+    <section>
+      <item>
+        <attribute name="custom">layers_list</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes" comments="Translators: This string uses ellipsis 
character">Open Shape Layer…</attribute>
+        <attribute name="action">win.open-shape-layer</attribute>
+      </item>
+    </section>
+  </menu>
+  <template class="Gjs_LayersPopover" parent="GtkPopoverMenu">
+    <property name="menu-model">layers_menu</property>
+    <child type="layers_list">
+      <object class="GtkBox" id="layersSectionBox">
+        <property name="visible">False</property>
+        <property name="orientation">vertical</property>
         <child>
           <object class="GtkListBox" id="layersListBox">
-            <property name="name">layers-list-box</property>
-            <property name="visible">0</property>
             <property name="selection-mode">none</property>
-            <style>
-              <class name="frame"/>
-            </style>
-            <layout>
-              <property name="column">0</property>
-              <property name="row">4</property>
-            </layout>
           </object>
         </child>
         <child>
-          <object class="GtkButton" id="loadLayerButton">
-            <property name="focusable">1</property>
-            <property name="label" translatable="1" comments="Translators: This string uses ellipsis 
character">Open Shape Layer…</property>
-            <property name="action-name">win.open-shape-layer</property>
-            <layout>
-              <property name="column">0</property>
-              <property name="row">5</property>
-            </layout>
+          <object class="GtkSeparator">
           </object>
         </child>
       </object>
-    </property>
+    </child>
   </template>
 </interface>
diff --git a/src/layersPopover.js b/src/layersPopover.js
index 682d6e5a..522f41c8 100644
--- a/src/layersPopover.js
+++ b/src/layersPopover.js
@@ -63,7 +63,7 @@ GObject.registerClass({
     InternalChildren: ['layerLabel', 'visibleButton']
 }, ShapeLayerRow);
 
-export class LayersPopover extends Gtk.Popover {
+export class LayersPopover extends Gtk.PopoverMenu {
 
     constructor(params) {
         super({ width_request: 200,
@@ -79,13 +79,11 @@ export class LayersPopover extends Gtk.Popover {
             this._mapView.gotoBBox(row.shapeLayer.bbox);
         });
 
-        this._layersListBox.set_header_func((row, before) => {
-            let header = before ? new Gtk.Separator() : null;
-            row.set_header(header);
+        this._layersSectionBox.visible = this._mapView.shapeLayerStore.n_items > 0;
+        this._mapView.shapeLayerStore.connect('items-changed', (model) => {
+            this._layersSectionBox.visible = model.n_items > 0;
         });
 
-        this._loadLayerButton.connect('clicked', () => this.popdown());
-
         // for now let's disable the map type swithery, as we only have street
         /*
         this._layerPreviews = {
@@ -212,7 +210,6 @@ export class LayersPopover extends Gtk.Popover {
         let row = new ShapeLayerRow({ shapeLayer: shapeLayer });
         row.closeButton.connect('clicked',
                                 () => this._onRemoveClicked(row));
-        this._layersListBox.show();
         return row;
     }
 }
@@ -223,6 +220,6 @@ GObject.registerClass({
                         'aerialLayerButton',
                         'streetLayerImage',
                         'aerialLayerImage',*/
-                        'layersListBox',
-                        'loadLayerButton' ]
+                        'layersSectionBox',
+                        'layersListBox' ]
 }, LayersPopover);