[gnome-characters] menu: Visual fixes for font list

[Daiki Ueno <dueno src gnome org>]

commit 1e5cf7c6847989b4562062b6079b1d96c82ad3ef
Author: Daiki Ueno <dueno src gnome org>
Date:   Wed Feb 10 13:03:59 2016 +0900

    menu: Visual fixes for font list
    
    Align the search entry and the list box to the same width, use the
    proper capitalization for "Filter by Font" and make it bold, and adjust
    to the recent CSS class name change.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=748717

 data/application.css |    4 ++--
 data/menu.ui         |    8 +++++---
 src/menu.js          |   26 ++++++++++++++++----------
 3 files changed, 23 insertions(+), 15 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 8788d3b..545cfa9 100644
--- a/data/application.css
+++ b/data/application.css
@@ -19,8 +19,8 @@ Gjs_MenuPopover GtkScrolledWindow {
     border-width: 1px 0;
 }
 
-Gjs_MenuPopover .list-row {
-    padding: 5px 6px;
+.font {
+    padding: 6px 6px;
 }
 
 .banner {
diff --git a/data/menu.ui b/data/menu.ui
index 6f3007a..96eac8e 100644
--- a/data/menu.ui
+++ b/data/menu.ui
@@ -8,14 +8,14 @@
        <property name="can_focus">False</property>
        <property name="visible">True</property>
        <property name="orientation">vertical</property>
-       <property name="margin-top">12</property>
-       <property name="margin-bottom">12</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>
+           <property name="use-markup">True</property>
+           <property name="label" translatable="yes">&lt;b&gt;Filter by Font&lt;/b&gt;</property>
          </object>
        </child>
        <child>
@@ -33,6 +33,8 @@
            <property name="can_focus">False</property>
            <property name="shadow-type">in</property>
            <property name="hscrollbar_policy">never</property>
+           <property name="margin-start">12</property>
+           <property name="margin-end">12</property>
            <child>
              <object class="GtkListBox" id="font-listbox">
                <property name="can_focus">False</property>
diff --git a/src/menu.js b/src/menu.js
index dc02585..2a9286e 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -30,15 +30,24 @@ const MenuPopover = new Lang.Class({
     Template: 'resource:///org/gnome/Characters/menu.ui',
     InternalChildren: ['search-entry', 'font-listbox'],
 
+    _createFontListRow: function(label, family) {
+        let row = new Gtk.ListBoxRow({ visible: true });
+        row.get_style_context().add_class('font');
+        row._family = family;
+        let label = new Gtk.Label({ label: label,
+                                    visible: true,
+                                    halign: Gtk.Align.START });
+        label.get_style_context().add_class('font-label');
+        row.add(label);
+        return row;
+    },
+
     _init: function(params) {
         params = Params.fill(params, {});
         this.parent(params);
 
-        let row = new Gtk.ListBoxRow({ visible: true });
-        row._family = 'None';
-        row.add(new Gtk.Label({ label: _("None"),
-                                visible: true,
-                                halign: Gtk.Align.START }));
+        this._font_listbox.get_style_context().add_class('fonts');
+        row = this._createFontListRow(_("None"), 'None');
         this._font_listbox.add(row);
 
         let context = this.get_pango_context();
@@ -47,11 +56,8 @@ const MenuPopover = new Lang.Class({
             return a.get_name().localeCompare(b.get_name());
         });
         for (let index in families) {
-            row = new Gtk.ListBoxRow({ visible: true });
-            row._family = families[index].get_name();
-            row.add(new Gtk.Label({ label: row._family,
-                                    visible: true,
-                                    halign: Gtk.Align.START }));
+            row = this._createFontListRow(families[index].get_name(),
+                                          families[index].get_name());
             this._font_listbox.add(row);
         }