[gnome-characters/bilelmoussaoui/ui-cleanup: 2/5] split the menu into primary & secondary

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 2e7b8b9184ea8672f28a3affc6ea9113da42b631
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Fri Feb 12 02:54:33 2021 +0100

    split the menu into primary & secondary

 data/mainwindow.ui | 34 +++++++++++++++++++--
 data/menu.ui       | 89 ++++++++++++++++++++++++------------------------------
 src/menu.js        | 12 --------
 3 files changed, 71 insertions(+), 64 deletions(-)
---
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index d476af1..53f5c63 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -1,6 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk+" version="3.12"/>
+  <menu id="primary_menu">
+    <section>
+      <item>
+        <attribute name="label" translatable="yes">_Keyboard Shortcuts</attribute>
+        <attribute name="action">win.show-help-overlay</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes">_About Characters</attribute>
+        <attribute name="action">win.about</attribute>
+      </item>
+    </section>
+  </menu>
   <template class="Gjs_MainWindow" parent="HdyApplicationWindow">
     <property name="height-request">660</property>
     <child>
@@ -31,6 +43,24 @@
                     </child>
                   </object>
                 </child>
+                <child>
+                  <object class="GtkMenuButton">
+                    <property name="visible">True</property>
+                    <property name="menu-model">primary_menu</property>
+                    <style>
+                      <class name="image-button"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="icon-name">open-menu-symbolic</property>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="pack-type">end</property>
+                  </packing>
+                </child>
               </object>
             </child>
             <child>
@@ -126,9 +156,9 @@
                       <class name="image-button"/>
                     </style>
                     <child>
-                      <object class="GtkImage" id="menu-button-image">
+                      <object class="GtkImage">
                         <property name="visible">True</property>
-                        <property name="icon-name">open-menu-symbolic</property>
+                        <property name="icon-name">view-more-symbolic</property>
                       </object>
                     </child>
                   </object>
diff --git a/data/menu.ui b/data/menu.ui
index 109dbdd..82a8f8e 100644
--- a/data/menu.ui
+++ b/data/menu.ui
@@ -3,57 +3,46 @@
   <requires lib="gtk+" version="3.12"/>
   <template class="Gjs_MenuPopover" parent="GtkPopover">
     <property name="vexpand">True</property>
+    <property name="width-request">250</property>
     <child>
-      <object class="GtkGrid" id="menu-grid">
-       <property name="can_focus">False</property>
-       <property name="visible">True</property>
-       <property name="orientation">vertical</property>
-       <property name="margin">12</property>
-       <property name="row-spacing">12</property>
-       <child>
-         <object class="GtkLabel" id="label1">
-           <property name="visible">True</property>
-           <property name="halign">center</property>
-           <property name="label" translatable="yes">Filter by Font</property>
-           <attributes>
-             <attribute name="weight" value="bold"/>
-           </attributes>
-         </object>
-       </child>
-       <child>
-         <object class="GtkSearchEntry" id="search-entry">
-           <property name="can_focus">True</property>
-           <property name="visible">True</property>
-           <property name="halign">fill</property>
-         </object>
-       </child>
-       <child>
-         <object class="GtkScrolledWindow" id="font-scrolled">
-           <property name="visible">True</property>
-           <property name="can_focus">False</property>
-           <property name="shadow-type">in</property>
-           <property name="hscrollbar_policy">never</property>
-           <child>
-             <object class="GtkListBox" id="font-listbox">
-               <property name="can_focus">False</property>
-               <property name="visible">True</property>
-               <property name="vexpand">True</property>
-               <property name="selection_mode">single</property>
-               <child>
-                 <placeholder/>
-               </child>
-             </object>
-           </child>
-         </object>
-       </child>
-       <child>
-         <object class="GtkModelButton">
-           <property name="visible">True</property>
-           <property name="can_focus">False</property>
-           <property name="action_name">win.about</property>
-           <property name="text" translatable="yes">About Characters</property>
-         </object>
-       </child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="orientation">vertical</property>
+        <property name="margin">12</property>
+        <property name="spacing">12</property>
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="halign">center</property>
+            <property name="label" translatable="yes">Filter by Font</property>
+            <attributes>
+              <attribute name="weight" value="bold"/>
+            </attributes>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSearchEntry" id="search-entry">
+            <property name="can_focus">True</property>
+            <property name="visible">True</property>
+            <property name="halign">fill</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkScrolledWindow">
+            <property name="visible">True</property>
+            <property name="vexpand">True</property>
+            <property name="hscrollbar_policy">never</property>
+            <child>
+              <object class="GtkListBox" id="font-listbox">
+                <property name="visible">True</property>
+                <property name="selection_mode">single</property>
+                <style>
+                  <class name="content" />
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
       </object>
     </child>
   </template>
diff --git a/src/menu.js b/src/menu.js
index cbd28a4..d5bef92 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -39,8 +39,6 @@ var MenuPopover = GObject.registerClass({
     _init(params) {
         params = Params.fill(params, {});
         super._init(params);
-
-        this._font_listbox.get_style_context().add_class('fonts');
         let row = this._createFontListRow(_("None"), 'None');
         this._font_listbox.add(row);
 
@@ -59,7 +57,6 @@ var MenuPopover = GObject.registerClass({
         this._search_entry.connect('search-changed', (entry) => this._handleSearchChanged(entry));
         this._font_listbox.connect('row-activated', (listBox, row) => this._handleRowActivated(listBox, 
row));
         this._font_listbox.set_filter_func((row) => this._filterFunc(row));
-        this._font_listbox.set_header_func((row, before) => this._headerFunc(row, before));
 
         // This silents warning at Characters exit about this widget being
         // visible but not mapped.  Borrowed from Maps.
@@ -98,13 +95,4 @@ var MenuPopover = GObject.registerClass({
             });
         });
     }
-
-    _headerFunc(row, before) {
-        if (before && !row.get_header()) {
-            let separator = new Gtk.Separator({
-                orientation: Gtk.Orientation.HORIZONTAL
-            });
-            row.set_header (separator);
-        }
-    }
 });