[gnome-characters/bilelmoussaoui/ui-cleanup: 1/5] sidebar: finish the recent items changes

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 0ca2de8178c415cc74fadd0492ee2d88354ff3f8
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Fri Feb 12 02:40:03 2021 +0100

    sidebar: finish the recent items changes

 data/application.css |   8 ----
 src/categoryList.js  | 103 +++++++++++++++++++++++++++++++++++++--------------
 src/window.js        |  38 +++++++++----------
 3 files changed, 94 insertions(+), 55 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 465fa14..15c1e30 100644
--- a/data/application.css
+++ b/data/application.css
@@ -2,14 +2,6 @@
     background-color: shade(@theme_bg_color, 0.99);
 }
 
-.category-title {
-    padding-top:8px;
-    padding-left: 8px;
-    padding-bottom:8px;
-    font-weight: 600;
-    font-size:1.1rem;
-}
-
 .category {
     padding: 15px;
     padding-right: 30px;
diff --git a/src/categoryList.js b/src/categoryList.js
index a1348e1..9311f65 100644
--- a/src/categoryList.js
+++ b/src/categoryList.js
@@ -159,12 +159,6 @@ const CategoryListRowWidget = GObject.registerClass({
         hbox.pack_start(label, true, true, 0);
 
     }
-
-    select() {
-        let toplevel = this.get_toplevel();
-        let action = toplevel.lookup_action('category');
-        action.activate(new GLib.Variant('s', this.category.name));
-    }
 });
 
 const CategoryListWidget = GObject.registerClass({
@@ -189,7 +183,10 @@ const CategoryListWidget = GObject.registerClass({
 
     vfunc_row_selected(row) {
         if (row != null && row.selectable) {
-            row.select();
+            let toplevel = row.get_toplevel();
+            let action = toplevel.lookup_action('category');
+            action.activate(new GLib.Variant('s', row.category.name));
+            this._lastSelectedRow = row;
         }
     }
     populateCategoryList() {
@@ -207,6 +204,18 @@ const CategoryListWidget = GObject.registerClass({
         }
         return null;
     }
+
+    restorePreviousSelection() {
+        if (this._lastSelectedRow) {
+            this.select_row(this._lastSelectedRow)
+        }
+    }
+
+    unselect() {
+        let selected = this.get_selected_row()
+        if (selected)
+            this.unselect_row(selected)
+    }
 });
 
 const LetterCategoryListWidget = GObject.registerClass({
@@ -343,6 +352,28 @@ const EmojiCategoryListWidget = GObject.registerClass({
     }
 });
 
+const RecentCategoryListWidget = GObject.registerClass({
+
+}, class RecentCategoryListWidget extends CategoryListWidget {
+    _init(params) {
+        super._init(params);
+        this.recentCategory = {
+            name: 'recent',
+            category: Gc.Category.NONE,
+            title: N_('Recently Used'),
+            icon_name: 'document-open-recent-symbolic',
+        };
+        this.recentRow = new CategoryListRowWidget({}, this.recentCategory);
+        this.recentRow.get_style_context().add_class('category');
+        this.recentRow.get_style_context().add_class('recent-category');
+        this.add(this.recentRow)
+    }
+
+    getCategory(name) {
+        return this.recentCategory;
+    }
+});
+
 var CategoryListView = GObject.registerClass({
 }, class CategoryListView extends Gtk.Box {
     _init(params) {
@@ -350,36 +381,37 @@ var CategoryListView = GObject.registerClass({
             hexpand: true, vexpand: true,
             orientation: Gtk.Orientation.VERTICAL,
         });
+        this._lastSelectedList = null;
         super._init(params);
         this.get_style_context().add_class('categories-list');
 
-        let category = {
-            name: 'recent',
-            category: Gc.Category.NONE,
-            title: N_('Recently Used'),
-            icon_name: 'document-open-recent-symbolic',
-        };
-        let recentRow = new CategoryListRowWidget({}, category);
-        recentRow.get_style_context().add_class('category');
-        this.add(recentRow);
+        this._recentCategoryList = new RecentCategoryListWidget();
+        this._recentCategoryList.connect('row-selected', (list, row) => {
+            this._letterCategoryList.unselect();
+            this._emojiCategoryList.unselect();
+            this._lastSelectedList = list;
+            list.select_row(row);
+        });
+        this.add(this._recentCategoryList)
         this.add(new Gtk.Separator({orientation: Gtk.Orientation.HORIZONTAL}));
         
         let emojis_label = new Gtk.Label ({
             label: CategoryList[0].title,
             halign: Gtk.Align.START,
+            margin_top: 12,
+            margin_left: 12,
+            margin_bottom: 12,
         }); 
-        emojis_label.get_style_context().add_class("category-title");
+        emojis_label.get_style_context().add_class("heading");
         this.add(emojis_label);
 
         this._emojiCategoryList = new EmojiCategoryListWidget({
             categoryList: EmojiCategoryList
         });
         this._emojiCategoryList.connect('row-selected', (list, row) => {
-            let selected = this._letterCategoryList.get_selected_row();
-            if (selected)
-                this._letterCategoryList.unselect_row(selected);
-
-            recentRow.get_style_context().remove_class('selected');
+            this._letterCategoryList.unselect();
+            this._recentCategoryList.unselect();
+            this._lastSelectedList = list;
             list.select_row(row);
         });
         this.add(this._emojiCategoryList);
@@ -387,18 +419,20 @@ var CategoryListView = GObject.registerClass({
         let letters_label = new Gtk.Label ({
             label: CategoryList[1].title,
             halign: Gtk.Align.START,
+            margin_top: 12,
+            margin_left: 12,
+            margin_bottom: 12,
         });
-        letters_label.get_style_context().add_class("category-title");
-
+        letters_label.get_style_context().add_class("heading");
         this.add(letters_label);
+
         this._letterCategoryList = new LetterCategoryListWidget({
             categoryList: LetterCategoryList
         });
         this._letterCategoryList.connect('row-selected', (list, row) => {
-            let selected = this._emojiCategoryList.get_selected_row();
-            if (selected)
-                this._emojiCategoryList.unselect_row(selected);
-            recentRow.get_style_context().remove_class('selected');
+            this._emojiCategoryList.unselect();
+            this._recentCategoryList.unselect();
+            this._lastSelectedList = list;
             list.select_row(row);
         });
         this.add(this._letterCategoryList);
@@ -410,6 +444,8 @@ var CategoryListView = GObject.registerClass({
         switch (name) {
             case 'emojis':
                 return this._emojiCategoryList
+            case 'recent':
+                return this._recentCategoryList
             default:
                 return this._letterCategoryList
         }
@@ -418,4 +454,15 @@ var CategoryListView = GObject.registerClass({
     getCategoryList() {
         return this._categoryList;
     }
+
+    get selectedList() {
+        return this._lastSelectedList
+    }
+    
+
+    restorePreviousSelection() {
+        if (this._lastSelectedList) {
+            this._lastSelectedList.restorePreviousSelection()
+        }
+    }
 });
diff --git a/src/window.js b/src/window.js
index e8767ad..de728e4 100644
--- a/src/window.js
+++ b/src/window.js
@@ -128,14 +128,13 @@ var MainWindow = GObject.registerClass({
 
     // Select the first subcategory which contains at least one character.
     _selectFirstSubcategory() {
-        /*let categoryList = this._categoryListView.get_visible_child();
-        let index = 0;
-        let row = categoryList.get_row_at_index(index);
-        if (row.category.name == 'recent' &&
-            this._mainView.recentCharacters.length == 0)
-            index++;
-        categoryList.select_row(categoryList.get_row_at_index(index));
-        */
+        let categoryList;
+        if (this._mainView.recentCharacters.length !== 0) {
+            categoryList = this._categoryListView.getCategoryByName('recent');
+        } else {
+            categoryList = this._categoryListView.getCategoryByName('emojis');
+        }
+        categoryList.select_row(categoryList.get_row_at_index(0));
     }
 
     get search_active() {
@@ -148,14 +147,13 @@ var MainWindow = GObject.registerClass({
 
         this._searchActive = v;
 
-        /*if (this._searchActive) {
-            let categoryList = this._categoryListView.get_visible_child();
+        if (this._searchActive) {
+            let categoryList = this._categoryListView.selectedList;
             categoryList.unselect_all();
             this._updateTitle(_("Search Result"));
         } else {
-            let categoryList = this._categoryListView.get_visible_child();
-            categoryList.restorePreviousSelection();
-        }*/
+            this._categoryListView.restorePreviousSelection();
+        }
 
         this.notify('search-active');
     }
@@ -222,11 +220,12 @@ var MainWindow = GObject.registerClass({
         let categoryName;
         if(name.startsWith("emoji")) {
             categoryName = "emojis";
-        } else {    
+        } else if(name === "recent") {
+            categoryName = "recent";
+        } else {
             categoryName = "letters";
-        }
+        } 
         let categoryList = this._categoryListView.getCategoryByName(categoryName);
-        
         let category = categoryList.getCategory(name);
         if (category) {
             this._mainView.setPage(category);
@@ -235,7 +234,6 @@ var MainWindow = GObject.registerClass({
         }
     }
 
-
     _character(action, v) {
         const [uc, length] = v.get_string();
         this._mainView.addToRecent(uc);
@@ -338,6 +336,8 @@ const MainView = GObject.registerClass({
             hexpand: false,
         });
         scroll.add(recentBox);
+        recentBox.show_all();
+        scroll.show_all();
         // FIXME: Can't use GtkContainer.child_get_property.
         scroll.title = _('Recently Used');
         this.add_titled(scroll, 'recent', scroll.title);
@@ -391,8 +391,8 @@ const MainView = GObject.registerClass({
     }
 
     setPage(category) {
-        if (category.name == 'recent') {
-            if (this.recentCharacters.length == 0)
+        if (category.name === 'recent') {
+            if (this.recentCharacters.length === 0)
                 this.visible_child_name = 'empty-recent';
             else {
                 let categories = this._categoryListView.getCategoryList();