[geary: 1/6] composer: Improve spell check popover

[Michael Gratton <mjog src gnome org>]

commit 233a1a6c37bb883fc9ebb0b4b314e429cd18cbf0
Author: James Westman <flyingpimonster gmail com>
Date:   Wed Jan 29 12:43:50 2020 -0600

    composer: Improve spell check popover
    
    - Use a MenuButton
    - Separators between rows
    - Make the popover narrower
    - Put the country name below the language name, instead of in
      parenthesis
    - Ellipsize country/language names

 src/client/composer/composer-widget.vala     | 25 +++++------
 src/client/composer/spell-check-popover.vala | 67 +++++++++++++++++-----------
 ui/composer-widget.ui                        |  2 +-
 3 files changed, 54 insertions(+), 40 deletions(-)
---
diff --git a/src/client/composer/composer-widget.vala b/src/client/composer/composer-widget.vala
index fc5f832a..40d4b30f 100644
--- a/src/client/composer/composer-widget.vala
+++ b/src/client/composer/composer-widget.vala
@@ -397,7 +397,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     [GtkChild]
     private Gtk.Button insert_link_button;
     [GtkChild]
-    private Gtk.Button select_dictionary_button;
+    private Gtk.MenuButton select_dictionary_button;
     [GtkChild]
     private Gtk.Label info_label;
 
@@ -432,7 +432,6 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
 
     private string body_html = "";
 
-    private SpellCheckPopover? spell_check_popover = null;
     private string? pointer_url = null;
     private string? cursor_url = null;
     private bool is_attachment_overlay_visible = false;
@@ -627,6 +626,16 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
         var cells = this.from_multiple.get_cells();
         ((Gtk.CellRendererText) cells.data).ellipsize = END;
 
+        // Create spellcheck popover
+        Application.Configuration config = this.application.config;
+        var spell_check_popover = new SpellCheckPopover(
+            this.select_dictionary_button, config
+        );
+        spell_check_popover.selection_changed.connect((active_langs) => {
+            config.set_spell_check_languages(active_langs);
+            update_subject_spell_checker();
+        });
+
         load_entry_completions();
 
         update_color_icon.begin(Util.Gtk.rgba(0, 0, 0, 0));
@@ -2371,17 +2380,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
     }
 
     private void on_select_dictionary(SimpleAction action, Variant? param) {
-        if (this.spell_check_popover == null) {
-            Application.Configuration config = this.application.config;
-            this.spell_check_popover = new SpellCheckPopover(
-                this.select_dictionary_button, config
-            );
-            this.spell_check_popover.selection_changed.connect((active_langs) => {
-                    config.set_spell_check_languages(active_langs);
-                    update_subject_spell_checker();
-                });
-        }
-        this.spell_check_popover.toggle();
+        this.select_dictionary_button.toggled();
     }
 
     private bool on_editor_key_press_event(Gdk.EventKey event) {
diff --git a/src/client/composer/spell-check-popover.vala b/src/client/composer/spell-check-popover.vala
index 44dfa021..e4b0f445 100644
--- a/src/client/composer/spell-check-popover.vala
+++ b/src/client/composer/spell-check-popover.vala
@@ -67,12 +67,27 @@ public class SpellCheckPopover {
             country_name = Util.International.country_name_from_locale(lang_code);
 
             string label_text = lang_name;
-            if (country_name != null)
-                label_text += " (" + country_name + ")";
             Gtk.Label label = new Gtk.Label(label_text);
-            label.set_halign(Gtk.Align.START);
-
-            box.pack_start(label, false, false);
+            label.tooltip_text = label_text;
+            label.halign = Gtk.Align.START;
+            label.ellipsize = END;
+            label.xalign = 0;
+
+            if (country_name != null) {
+                Gtk.Box label_box = new Gtk.Box(VERTICAL, 3);
+                Gtk.Label country_label = new Gtk.Label(country_name);
+                country_label.tooltip_text = country_name;
+                country_label.halign = Gtk.Align.START;
+                country_label.ellipsize = END;
+                country_label.xalign = 0;
+                country_label.get_style_context().add_class("dim-label");
+
+                label_box.add(label);
+                label_box.add(country_label);
+                box.pack_start(label_box, false, false);
+            } else {
+                box.pack_start(label, false, false);
+            }
 
             Gtk.IconSize sz = Gtk.IconSize.SMALL_TOOLBAR;
             active_image = new Gtk.Image.from_icon_name("object-select-symbolic", sz);
@@ -81,6 +96,7 @@ public class SpellCheckPopover {
             box.pack_start(active_image, false, false, 6);
             box.pack_start(this.visibility_button, true, true);
             this.visibility_button.halign = Gtk.Align.END; // Make the button stay at the right end of the 
screen
+            this.visibility_button.valign = CENTER;
 
             this.visibility_button.clicked.connect(on_visibility_clicked);
 
@@ -176,13 +192,22 @@ public class SpellCheckPopover {
 
     }
 
-    public SpellCheckPopover(Gtk.Widget button, Application.Configuration config) {
+    public SpellCheckPopover(Gtk.MenuButton button, Application.Configuration config) {
         this.popover = new Gtk.Popover(button);
+        button.popover = this.popover;
         this.config = config;
         this.selected_rows = new GLib.GenericSet<string>(GLib.str_hash, GLib.str_equal);
         setup_popover();
     }
 
+    private void header_function(Gtk.ListBoxRow row, Gtk.ListBoxRow? before) {
+        if (before != null) {
+            if (row.get_header() == null) {
+                row.set_header(new Gtk.Separator(HORIZONTAL));
+            }
+        }
+    }
+
     private bool filter_function (Gtk.ListBoxRow row) {
         string text = search_box.get_text();
         SpellCheckLangRow r = row as SpellCheckLangRow;
@@ -228,8 +253,8 @@ public class SpellCheckPopover {
         content.pack_start(view, true, true);
 
         langs_list.set_filter_func(this.filter_function);
+        langs_list.set_header_func(this.header_function);
 
-        view.set_size_request(350, 300);
         popover.add(content);
 
         // Make sure that the search box does not get the focus first. We want it to have it only
@@ -239,6 +264,9 @@ public class SpellCheckPopover {
         content.set_margin_end(6);
         content.set_margin_top(6);
         content.set_margin_bottom(6);
+
+        popover.show.connect(this.on_shown);
+        popover.set_size_request(360, 350);
     }
 
     private void on_row_activated(Gtk.ListBoxRow row) {
@@ -262,26 +290,13 @@ public class SpellCheckPopover {
         langs_list.invalidate_filter();
     }
 
-    /*
-     * Toggle the visibility of the popover, and return the final status.
-     *
-     * @return true if the Popover is visible after the call, false otherwise.
-     */
-    public bool toggle() {
-        if (popover.get_visible()) {
-            popover.hide();
-        }
-        else {
-            // Make sure that when the box is shown the list is not expanded anymore.
-            search_box.set_text("");
-            content.set_focus_child(view);
-            is_expanded = false;
-            langs_list.invalidate_filter();
-
-            popover.show_all();
-        }
+    private void on_shown() {
+        search_box.set_text("");
+        content.set_focus_child(view);
+        is_expanded = false;
+        langs_list.invalidate_filter();
 
-        return popover.get_visible();
+        popover.show_all();
     }
 
     private void on_row_enabled_changed(SpellCheckLangRow row,
diff --git a/ui/composer-widget.ui b/ui/composer-widget.ui
index d205a7f4..aad1080d 100644
--- a/ui/composer-widget.ui
+++ b/ui/composer-widget.ui
@@ -1192,7 +1192,7 @@
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkButton" id="select_dictionary_button">
+                  <object class="GtkMenuButton" id="select_dictionary_button">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="focus_on_click">False</property>