[gnome-characters/wip/dueno/emoji] WIP

[Daiki Ueno <dueno src gnome org>]

commit 3992a1bc72e962a2bfabc9f19909af099b5dc261
Author: Daiki Ueno <dueno src gnome org>
Date:   Fri Aug 18 17:29:58 2017 +0200

    WIP

 src/categoryList.js |  153 ++++++++++++++++++++++++++++++++++++++++++++++-----
 src/window.js       |   47 ++++++++++------
 2 files changed, 168 insertions(+), 32 deletions(-)
---
diff --git a/src/categoryList.js b/src/categoryList.js
index fbb5833..ed7d8fd 100644
--- a/src/categoryList.js
+++ b/src/categoryList.js
@@ -1,6 +1,6 @@
 // -*- Mode: js; indent-tabs-mode: nil; c-basic-offset: 4; tab-width: 4 -*-
 //
-// Copyright (C) 2014-2015  Daiki Ueno <dueno src gnome org>
+// Copyright (C) 2014-2017  Daiki Ueno <dueno src gnome org>
 //
 // This program is free software; you can redistribute it and/or
 // modify it under the terms of the GNU General Public License
@@ -26,13 +26,7 @@ const Gettext = imports.gettext;
 const Gc = imports.gi.Gc;
 const Util = imports.util;
 
-const BaseCategoryList = [
-    {
-        name: 'recent',
-        category: Gc.Category.NONE,
-        title: N_('Recently Used'),
-        icon_name: 'document-open-recent-symbolic'
-    },
+const LetterCategoryList = [
     {
         name: 'punctuation',
         category: Gc.Category.PUNCTUATION,
@@ -74,12 +68,69 @@ const BaseCategoryList = [
         category: Gc.Category.LATIN,
         title: N_('Letters'),
         icon_name: 'characters-latin-symbolic'
+    }
+];
+
+const EmojiCategoryList = [
+    {
+        name: 'recent',
+        category: Gc.Category.NONE,
+        title: N_('Recently Used'),
+        icon_name: 'document-open-recent-symbolic'
+    },
+    {
+        name: 'emoji-smileys',
+        category: Gc.Category.EMOJI_SMILEYS,
+        title: N_('Smileys & People'),
+        icon_name: 'characters-emoji-smileys'
+    },
+    {
+        name: 'emoji-animals',
+        category: Gc.Category.EMOJI_ANIMALS,
+        title: N_('Animals & Nature'),
+        icon_name: 'characters-emoji-animals'
+    },
+    {
+        name: 'emoji-food',
+        category: Gc.Category.EMOJI_FOOD,
+        title: N_('Food & Drink'),
+        icon_name: 'characters-emoji-food'
     },
     {
-        name: 'emoticon',
-        category: Gc.Category.EMOTICON,
-        title: N_('Emoticons'),
-        icon_name: 'face-smile-symbolic'
+        name: 'emoji-activities',
+        category: Gc.Category.EMOJI_ACTIVITIES,
+        title: N_('Activities'),
+        icon_name: 'characters-emoji-activities'
+    },
+    {
+        name: 'emoji-travel',
+        category: Gc.Category.EMOJI_TRAVEL,
+        title: N_('Travel & Places'),
+        icon_name: 'characters-emoji-travel'
+    },
+    {
+        name: 'emoji-objects',
+        category: Gc.Category.EMOJI_OBJECTS,
+        title: N_('Objects'),
+        icon_name: 'characters-emoji-objects'
+    },
+    {
+        name: 'emoji-symbols',
+        category: Gc.Category.EMOJI_SYMBOLS,
+        title: N_('Symbols'),
+        icon_name: 'characters-emoji-symbols'
+    },
+    {
+        name: 'emoji-flags',
+        category: Gc.Category.EMOJI_FLAGS,
+        title: N_('Flags'),
+        icon_name: 'characters-emoji-flags'
+    },
+    {
+        name: 'letters',
+        category: Gc.Category.NONE,
+        title: N_('Letters & Symbols'),
+        icon_name: 'characters-latin-symbolic'
     }
 ];
 
@@ -109,8 +160,8 @@ const CategoryListRowWidget = new Lang.Class({
     }
 });
 
-var CategoryListWidget = new Lang.Class({
-    Name: 'CategoryListWidget',
+const LetterCategoryListWidget = new Lang.Class({
+    Name: 'LetterCategoryListWidget',
     Extends: Gtk.ListBox,
 
     _init: function(params) {
@@ -248,7 +299,7 @@ var CategoryListWidget = new Lang.Class({
         if (this._categoryList != null)
             return;
 
-        this._categoryList = BaseCategoryList.slice();
+        this._categoryList = LetterCategoryList.slice();
 
         // Populate the "scripts" element of the "Letter" category
         // object, based on the current locale and the input-sources
@@ -281,3 +332,75 @@ var CategoryListWidget = new Lang.Class({
         return null;
     }
 });
+
+const EmojiCategoryListWidget = new Lang.Class({
+    Name: 'EmojiCategoryListWidget',
+    Extends: Gtk.ListBox,
+
+    _init: function(params) {
+        params = Params.fill(params, {});
+        this.parent(params);
+
+        this.get_style_context().add_class('categories');
+
+        this._categoryList = EmojiCategoryList.slice();
+
+        for (let index in this._categoryList) {
+            let category = this._categoryList[index];
+            let rowWidget = new CategoryListRowWidget({}, category);
+            rowWidget.get_style_context().add_class('category');
+            // Add a separator over the "Letters & Symbols" category
+            if (category.name == 'letters') {
+                let separator = new Gtk.Separator();
+                let separatorRowWidget = new Gtk.ListBoxRow({
+                    selectable: false
+                });
+                separatorRowWidget.add(separator);
+                this.add(separatorRowWidget);
+            }
+            this.add(rowWidget);
+        }
+    },
+
+    vfunc_row_selected: function(row) {
+        if (row != null && row.selectable) {
+            let toplevel = row.get_toplevel();
+            let category = toplevel.lookup_action('category');
+            category.activate(new GLib.Variant('s', row.category.name));
+        }
+    },
+
+    getCategoryList: function() {
+        return this._categoryList;
+    },
+
+    getCategory: function(name) {
+        for (let index in this._categoryList) {
+            let category = this._categoryList[index];
+            if (category.name == name)
+                return category;
+        }
+        return null;
+    }
+});
+
+var CategoryListView = new Lang.Class({
+    Name: 'CategoryListView',
+    Extends: Gtk.Stack,
+
+    _init: function(params) {
+        params = Params.fill(params, {
+            hexpand: true, vexpand: true,
+            transition_type: Gtk.StackTransitionType.CROSSFADE
+        });
+        this.parent(params);
+
+        let emojiCategoryList = new EmojiCategoryListWidget({ hexpand: true,
+                                                              vexpand: true });
+        this.add_named(emojiCategoryList, 'emoji');
+        let letterCategoryList = new LetterCategoryListWidget({ hexpand: true,
+                                                                vexpand: true });
+        this.add_named(letterCategoryList, 'letter');
+        this.set_visible_child_name('emoji');
+    },
+});
diff --git a/src/window.js b/src/window.js
index 83acdb4..2c7632b 100644
--- a/src/window.js
+++ b/src/window.js
@@ -99,20 +99,23 @@ var MainWindow = new Lang.Class({
         this._menu_popover = new Menu.MenuPopover({});
         this._menu_button.set_popover(this._menu_popover);
 
-        this._categoryList =
-            new CategoryList.CategoryListWidget({ vexpand: true });
+        this._categoryListView =
+            new CategoryList.CategoryListView({ vexpand: true });
         let scroll = new Gtk.ScrolledWindow({
             hscrollbar_policy: Gtk.PolicyType.NEVER,
             hexpand: false,
         });
-        scroll.add(this._categoryList);
+        scroll.add(this._categoryListView);
         this._sidebar_grid.add(scroll);
 
-        this._mainView = new MainView({ categoryList: this._categoryList });
+        this._mainView = new MainView({
+            categoryListView: this._categoryListView
+        });
 
         if (this._mainView.recentCharacters.length == 0) {
-            let row = this._categoryList.get_row_at_index(1);
-            this._categoryList.select_row(row);
+            let categoryList = this._categoryListView.get_child_by_name('emoji');
+            let row = categoryList.get_row_at_index(1);
+            categoryList.select_row(row);
         }
 
         this._main_hbox.pack_start(this._mainView, true, true, 0);
@@ -200,7 +203,11 @@ var MainWindow = new Lang.Class({
 
         let [name, length] = v.get_string()
 
-        let category = this._categoryList.getCategory(name);
+        let categoryList = this._categoryListView.get_visible_child();
+        if (categoryList == null)
+            return;
+
+        let category = categoryList.getCategory(name);
 
         Util.assertNotEqual(category, null);
         this._mainView.setPage(category);
@@ -262,7 +269,7 @@ const MainView = new Lang.Class({
     },
 
     _init: function(params) {
-        let filtered = Params.filter(params, { categoryList: null });
+        let filtered = Params.filter(params, { categoryListView: null });
         params = Params.fill(params, {
             hexpand: true, vexpand: true,
             transition_type: Gtk.StackTransitionType.CROSSFADE
@@ -271,17 +278,23 @@ const MainView = new Lang.Class({
 
         this._filterFontFamily = null;
         this._characterLists = {};
-        this._categoryList = filtered.categoryList;
+        this._categoryListView = filtered.categoryListView;
 
         let characterList;
-        let categories = this._categoryList.getCategoryList();
-        for (let index in categories) {
-            let category = categories[index];
-            characterList = this._createCharacterList(
-                category.name, _('%s Character List').format(category.title));
-            // FIXME: Can't use GtkContainer.child_get_property.
-            characterList.title = category.title;
-            this.add_titled(characterList, category.name, category.title);
+        let types = ['emoji', 'letter'];
+
+        for (let i in types) {
+            let group = types[i];
+            let categoryList = this._categoryListView.get_child_by_name(group);
+            let categories = categoryList.getCategoryList();
+            for (let j in categories) {
+                let category = categories[j];
+                characterList = this._createCharacterList(
+                    category.name, _('%s Character List').format(category.title));
+                // FIXME: Can't use GtkContainer.child_get_property.
+                characterList.title = category.title;
+                this.add_titled(characterList, category.name, category.title);
+            }
         }
 
         characterList = this._createCharacterList(