[gtk/gtk-3-24] Emoji chooser: Use icons for sections

[Matthias Clasen <matthiasc src gnome org>]

commit ff24c82dd4ae2230ac62491f5cb58c88c21cd6a7
Author: Matthias Clasen <mclasen redhat com>
Date:   Thu Jul 19 17:24:11 2018 -0400

    Emoji chooser: Use icons for sections
    
    This is more reliable than using text-style Emoji
    which may not be present.
    
    Based on work by Julian Sparber.

 gtk/gtkemojichooser.c     | 32 +++++++++++++-----------------
 gtk/ui/gtkemojichooser.ui | 50 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 18 deletions(-)
---
diff --git a/gtk/gtkemojichooser.c b/gtk/gtkemojichooser.c
index ee17ea3cf1..b2c161e381 100644
--- a/gtk/gtkemojichooser.c
+++ b/gtk/gtkemojichooser.c
@@ -622,19 +622,15 @@ static void
 setup_section (GtkEmojiChooser *chooser,
                EmojiSection   *section,
                const char     *first,
-               gunichar        label)
+               const char     *icon)
 {
-  char text[14];
-  char *p;
   GtkAdjustment *adj;
+  GtkWidget *image;
 
   section->first = first;
 
-  p = text;
-  p += g_unichar_to_utf8 (label, p);
-  p += g_unichar_to_utf8 (0xfe0e, p);
-  p[0] = 0;
-  gtk_button_set_label (GTK_BUTTON (section->button), text);
+  image = gtk_bin_get_child (GTK_BIN (section->button));
+  gtk_image_set_from_icon_name (GTK_IMAGE (image), icon, GTK_ICON_SIZE_BUTTON);
 
   adj = gtk_scrolled_window_get_vadjustment (GTK_SCROLLED_WINDOW (chooser->scrolled_window));
 
@@ -694,16 +690,16 @@ gtk_emoji_chooser_init (GtkEmojiChooser *chooser)
   adj = gtk_scrolled_window_get_vadjustment (GTK_SCROLLED_WINDOW (chooser->scrolled_window));
   g_signal_connect (adj, "value-changed", G_CALLBACK (adj_value_changed), chooser);
 
-  setup_section (chooser, &chooser->recent, NULL, 0x1f557);
-  setup_section (chooser, &chooser->people, "grinning face", 0x1f642);
-  setup_section (chooser, &chooser->body, "selfie", 0x1f44d);
-  setup_section (chooser, &chooser->nature, "monkey face", 0x1f337);
-  setup_section (chooser, &chooser->food, "grapes", 0x1f374);
-  setup_section (chooser, &chooser->travel, "globe showing Europe-Africa", 0x2708);
-  setup_section (chooser, &chooser->activities, "jack-o-lantern", 0x1f3c3);
-  setup_section (chooser, &chooser->objects, "muted speaker", 0x1f514);
-  setup_section (chooser, &chooser->symbols, "ATM sign", 0x2764);
-  setup_section (chooser, &chooser->flags, "chequered flag", 0x1f3f4);
+  setup_section (chooser, &chooser->recent, NULL, "emoji-recent-symbolic");
+  setup_section (chooser, &chooser->people, "grinning face", "emoji-people-symbolic");
+  setup_section (chooser, &chooser->body, "selfie", "emoji-body-symbolic");
+  setup_section (chooser, &chooser->nature, "monkey face", "emoji-nature-symbolic");
+  setup_section (chooser, &chooser->food, "grapes", "emoji-food-symbolic");
+  setup_section (chooser, &chooser->travel, "globe showing Europe-Africa", "emoji-travel-symbolic");
+  setup_section (chooser, &chooser->activities, "jack-o-lantern", "emoji-activities-symbolic");
+  setup_section (chooser, &chooser->objects, "muted speaker", "emoji-objects-symbolic");
+  setup_section (chooser, &chooser->symbols, "ATM sign", "emoji-symbols-symbolic");
+  setup_section (chooser, &chooser->flags, "chequered flag", "emoji-flags-symbolic");
 
   populate_emoji_chooser (chooser);
   populate_recent_section (chooser);
diff --git a/gtk/ui/gtkemojichooser.ui b/gtk/ui/gtkemojichooser.ui
index 0de6834d6c..e541e63086 100644
--- a/gtk/ui/gtkemojichooser.ui
+++ b/gtk/ui/gtkemojichooser.ui
@@ -198,6 +198,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="recent.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -208,6 +213,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="people.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -218,6 +228,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="body.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -228,6 +243,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="nature.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -238,6 +258,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="food.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -248,6 +273,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="travel.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -258,6 +288,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="activities.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -268,6 +303,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="objects.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -278,6 +318,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="symbols.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
@@ -288,6 +333,11 @@
                         <style>
                           <class name="emoji-section"/>
                         </style>
+                        <child>
+                          <object class="GtkImage" id="flags.icon">
+                            <property name="visible">1</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                   </object>