[gnome-characters/bilelmoussaoui/gtk4: 6/6] sidebar: use symbolic icons for emoji categories

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit c57a88f30acd07b3fccd437fa89b3ee3e12a02d0
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Mon Nov 22 10:49:32 2021 +0100

    sidebar: use symbolic icons for emoji categories
    
    similar to what's used in GTK's emoji picker

 .../categories/characters-emoji-activities.svg     | 22 ---------
 .../categories/characters-emoji-animals.svg        | 22 ---------
 .../scalable/categories/characters-emoji-flags.svg | 22 ---------
 .../scalable/categories/characters-emoji-food.svg  | 22 ---------
 .../categories/characters-emoji-objects.svg        | 21 ---------
 .../categories/characters-emoji-smileys.svg        | 22 ---------
 .../categories/characters-emoji-symbols.svg        | 22 ---------
 data/org.gnome.Characters.data.gresource.xml       |  8 ----
 data/sidebar.ui                                    | 55 +++++++---------------
 data/style.css                                     | 14 ------
 data/window.ui                                     |  2 +-
 src/sidebarRow.js                                  |  5 +-
 12 files changed, 20 insertions(+), 217 deletions(-)
---
diff --git a/data/org.gnome.Characters.data.gresource.xml b/data/org.gnome.Characters.data.gresource.xml
index d1c6e4d..e9d4b31 100644
--- a/data/org.gnome.Characters.data.gresource.xml
+++ b/data/org.gnome.Characters.data.gresource.xml
@@ -13,14 +13,6 @@
     <file 
alias="characters-arrow-symbolic.svg">icons/hicolor/scalable/categories/characters-arrow-symbolic.svg</file>
     <file 
alias="characters-bullet-symbolic.svg">icons/hicolor/scalable/categories/characters-bullet-symbolic.svg</file>
     <file 
alias="characters-currency-symbolic.svg">icons/hicolor/scalable/categories/characters-currency-symbolic.svg</file>
-    <file 
alias="characters-emoji-activities.svg">icons/hicolor/scalable/categories/characters-emoji-activities.svg</file>
-    <file 
alias="characters-emoji-animals.svg">icons/hicolor/scalable/categories/characters-emoji-animals.svg</file>
-    <file 
alias="characters-emoji-flags.svg">icons/hicolor/scalable/categories/characters-emoji-flags.svg</file>
-    <file 
alias="characters-emoji-food.svg">icons/hicolor/scalable/categories/characters-emoji-food.svg</file>
-    <file 
alias="characters-emoji-objects.svg">icons/hicolor/scalable/categories/characters-emoji-objects.svg</file>
-    <file 
alias="characters-emoji-smileys.svg">icons/hicolor/scalable/categories/characters-emoji-smileys.svg</file>
-    <file 
alias="characters-emoji-symbols.svg">icons/hicolor/scalable/categories/characters-emoji-symbols.svg</file>
-    <file 
alias="characters-emoji-travel.svg">icons/hicolor/scalable/categories/characters-emoji-travel.svg</file>
     <file 
alias="characters-latin-symbolic.svg">icons/hicolor/scalable/categories/characters-latin-symbolic.svg</file>
     <file 
alias="characters-math-symbolic.svg">icons/hicolor/scalable/categories/characters-math-symbolic.svg</file>
     <file 
alias="characters-picture-symbolic.svg">icons/hicolor/scalable/categories/characters-picture-symbolic.svg</file>
diff --git a/data/sidebar.ui b/data/sidebar.ui
index de1d104..16e74fa 100644
--- a/data/sidebar.ui
+++ b/data/sidebar.ui
@@ -12,17 +12,6 @@
             <property name="title" translatable="yes">Recently Used</property>
           </object>
         </child>
-        <child>
-          <object class="GtkListBoxRow">
-            <property name="selectable">false</property>
-            <property name="activatable">false</property>
-            <child>
-              <object class="GtkSeparator">
-                <property name="orientation">horizontal</property>
-              </object>
-            </child>
-          </object>
-        </child>
         <child>
           <object class="GtkListBoxRow">
             <property name="selectable">false</property>
@@ -31,10 +20,6 @@
               <object class="GtkLabel">
                 <property name="label" translatable="yes">Emojis</property>
                 <property name="halign">start</property>
-                <property name="margin-top">12</property>
-                <property name="margin-start">12</property>
-                <property name="margin-bottom">12</property>
-                <property name="margin-end">12</property>
                 <style>
                   <class name="heading" />
                 </style>
@@ -46,7 +31,7 @@
           <object class="Gjs_SidebarRow" id="emojiSmileysRow">
             <property name="category">GC_CATEGORY_EMOJI_SMILEYS</property>
             <property name="name">emoji-smileys</property>
-            <property name="icon-name">characters-emoji-smileys</property>
+            <property name="icon-name">emoji-people-symbolic</property>
             <property name="title" translatable="yes">Smileys &amp; People</property>
           </object>
         </child>
@@ -54,7 +39,7 @@
           <object class="Gjs_SidebarRow" id="emojiAnimalsRow">
             <property name="category">GC_CATEGORY_EMOJI_ANIMALS</property>
             <property name="name">emoji-animals</property>
-            <property name="icon-name">characters-emoji-animals</property>
+            <property name="icon-name">emoji-nature-symbolic</property>
             <property name="title" translatable="yes">Animals &amp; Nature</property>
           </object>
         </child>
@@ -62,31 +47,31 @@
           <object class="Gjs_SidebarRow" id="emojiFoodRow">
             <property name="category">GC_CATEGORY_EMOJI_FOOD</property>
             <property name="name">emoji-food</property>
-            <property name="icon-name">characters-emoji-food</property>
+            <property name="icon-name">emoji-food-symbolic</property>
             <property name="title" translatable="yes">Food &amp; Drink</property>
           </object>
         </child>
-        <child>
-          <object class="Gjs_SidebarRow" id="emojiActivitiesRow">
-            <property name="category">GC_CATEGORY_EMOJI_ACTIVITIES</property>
-            <property name="name">emoji-activities</property>
-            <property name="icon-name">characters-emoji-activities</property>
-            <property name="title" translatable="yes">Activities</property>
-          </object>
-        </child>
         <child>
           <object class="Gjs_SidebarRow" id="emojiTravelRow">
             <property name="category">GC_CATEGORY_EMOJI_TRAVEL</property>
             <property name="name">emoji-travel</property>
-            <property name="icon-name">characters-emoji-travel</property>
+            <property name="icon-name">emoji-travel-symbolic</property>
             <property name="title" translatable="yes">Travel &amp; Places</property>
           </object>
         </child>
+        <child>
+          <object class="Gjs_SidebarRow" id="emojiActivitiesRow">
+            <property name="category">GC_CATEGORY_EMOJI_ACTIVITIES</property>
+            <property name="name">emoji-activities</property>
+            <property name="icon-name">emoji-activities-symbolic</property>
+            <property name="title" translatable="yes">Activities</property>
+          </object>
+        </child>
         <child>
           <object class="Gjs_SidebarRow" id="emojiObjectsRow">
             <property name="category">GC_CATEGORY_EMOJI_OBJECTS</property>
             <property name="name">emoji-objects</property>
-            <property name="icon-name">characters-emoji-objects</property>
+            <property name="icon-name">emoji-objects-symbolic</property>
             <property name="title" translatable="yes">Objects</property>
           </object>
         </child>
@@ -94,7 +79,7 @@
           <object class="Gjs_SidebarRow" id="emojiSymbolsRow">
             <property name="category">GC_CATEGORY_EMOJI_SYMBOLS</property>
             <property name="name">emoji-symbols</property>
-            <property name="icon-name">characters-emoji-symbols</property>
+            <property name="icon-name">emoji-symbols-symbolic</property>
             <property name="title" translatable="yes">Symbols</property>
           </object>
         </child>
@@ -102,7 +87,7 @@
           <object class="Gjs_SidebarRow" id="emojiFlagsRow">
             <property name="category">GC_CATEGORY_EMOJI_FLAGS</property>
             <property name="name">emoji-flags</property>
-            <property name="icon-name">characters-emoji-flags</property>
+            <property name="icon-name">emoji-flags-symbolic</property>
             <property name="title" translatable="yes">Flags</property>
           </object>
         </child>
@@ -114,10 +99,6 @@
               <object class="GtkLabel">
                 <property name="label" translatable="yes">Letters &amp; Symbols</property>
                 <property name="halign">start</property>
-                <property name="margin-top">12</property>
-                <property name="margin-start">12</property>
-                <property name="margin-bottom">12</property>
-                <property name="margin-end">12</property>
                 <style>
                   <class name="heading" />
                 </style>
@@ -181,10 +162,10 @@
             <property name="title" translatable="yes">Letters</property>
           </object>
         </child>
+        <style>
+          <class name="navigation-sidebar" />
+        </style>
       </object>
     </child>
-    <style>
-      <class name="categories-list" />
-    </style>
   </template>
 </interface>
diff --git a/data/style.css b/data/style.css
index f37dee7..4d8f419 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1,17 +1,3 @@
-.categories-list, .categories-list list {
-    background-color: shade(@theme_bg_color, 0.99);
-}
-
-.category {
-    padding: 15px;
-    padding-right: 30px;
-}
-
-.category-icon {
-    padding-right: 10px;
-}
-
-
 Gjs_MenuPopover {
     padding: 0;
 }
diff --git a/data/window.ui b/data/window.ui
index a6ec892..13a42f9 100644
--- a/data/window.ui
+++ b/data/window.ui
@@ -21,7 +21,7 @@
         <child>
           <object class="GtkBox">
             <property name="orientation">vertical</property>
-            <property name="width-request">280</property>
+            <property name="width-request">200</property>
             <child>
               <object class="GtkHeaderBar" id="sidebar-headerbar">
                 <property name="show-title-buttons">False</property>
diff --git a/src/sidebarRow.js b/src/sidebarRow.js
index e79e41f..7472bf0 100644
--- a/src/sidebarRow.js
+++ b/src/sidebarRow.js
@@ -49,12 +49,11 @@ var SidebarRow = GObject.registerClass({
 
         let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL });
 
-        let image = Gtk.Image.new();
+        let image = new Gtk.Image({ margin_end: 10 });
         this.bind_property('icon-name', image, 'icon-name',
             GObject.BindingFlags.DEFAULT | GObject.BindingFlags.SYNC_CREATE,
         );
         image.set_icon_size(Gtk.IconSize.LARGE_TOOLBAR);
-        image.add_css_class('category-icon');
         hbox.append(image);
 
         let label = new Gtk.Label({ halign: Gtk.Align.START });
@@ -67,11 +66,9 @@ var SidebarRow = GObject.registerClass({
             row.tooltip_text = _('%s Sidebar Row').format(row.title);
         });
 
-        label.add_css_class('category-label');
         hbox.append(label);
 
         this.set_child(hbox);
-        this.add_css_class('category');
     }
 
     get title() {