[gnome-characters/bilelmoussaoui/split-headerbar: 4/5] bind the leaflet & back buttons

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit a09a95a52547229bd987f9029851ccbb8b1d2253
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Sun Jun 7 13:40:56 2020 +0200

    bind the leaflet & back buttons

 data/mainwindow.ui   | 22 ++++++++++++++++++++--
 src/categoryList.js  |  2 +-
 src/characterList.js |  2 +-
 src/window.js        | 28 +++++++++++++++-------------
 4 files changed, 37 insertions(+), 17 deletions(-)
---
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index b4a3b36..3379e2f 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -4,7 +4,7 @@
   <template class="Gjs_MainWindow" parent="HdyApplicationWindow">
     <property name="height-request">660</property>
     <child>
-      <object class="HdyLeaflet">
+      <object class="HdyLeaflet" id="leaflet">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <child>
@@ -35,7 +35,7 @@
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkButton" id="back-button">
+                  <object class="GtkButton" id="sidebar-back-button">
                     <property name="can_focus">True</property>
                     <property name="visible">False</property>
                     <style>
@@ -145,6 +145,24 @@
                 <property name="show-close-button">True</property>
                 <property name="has-subtitle">False</property>
                 <property name="title" translatable="yes">Current page</property>
+                <child>
+                  <object class="GtkButton" id="main-back-button">
+                    <property name="can_focus">True</property>
+                    <property name="visible">False</property>
+                    <style>
+                      <class name="image-button" />
+                    </style>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="icon-name">go-previous-symbolic</property>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="pack-type">start</property>
+                  </packing>
+                </child>
               </object>
               <packing>
                 <property name="expand">False</property>
diff --git a/src/categoryList.js b/src/categoryList.js
index ccd9b5f..19a40ef 100644
--- a/src/categoryList.js
+++ b/src/categoryList.js
@@ -409,7 +409,7 @@ var CategoryListView = GObject.registerClass({
     _init(params) {
         params = Params.fill(params, {
             hexpand: true, vexpand: true,
-            transition_type: Gtk.StackTransitionType.SLIDE_RIGHT
+            transition_type: Gtk.StackTransitionType.SLIDE_LEFT
         });
         super._init(params);
 
diff --git a/src/characterList.js b/src/characterList.js
index 2147078..123ab22 100644
--- a/src/characterList.js
+++ b/src/characterList.js
@@ -27,7 +27,7 @@ const Util = imports.util;
 const BASELINE_OFFSET = 0.85;
 const CELLS_PER_ROW = 5;
 const NUM_ROWS = 5;
-const NUM_COLUMNS = 5;
+const NUM_COLUMNS = 3;
 const CELL_SIZE = 50;
 
 function getCellSize(fontDescription) {
diff --git a/src/window.js b/src/window.js
index 5018503..345f9d6 100644
--- a/src/window.js
+++ b/src/window.js
@@ -39,8 +39,8 @@ const Util = imports.util;
 var MainWindow = GObject.registerClass({
     Template: 'resource:///org/gnome/Characters/mainwindow.ui',
     InternalChildren: ['main-headerbar', 'search-active-button',
-                       'search-bar', 'search-entry', 'back-button',
-                       'menu-button',
+                       'search-bar', 'search-entry', 'sidebar-back-button',
+                       'menu-button', 'leaflet', 'main-back-button',
                        'main-grid', 'main-hbox', 'sidebar-grid'],
     Properties: {
         'search-active': GObject.ParamSpec.boolean(
@@ -94,14 +94,22 @@ var MainWindow = GObject.registerClass({
         this._search_bar.connect_entry(this._search_entry);
         this._search_entry.connect('search-changed', (entry) => this._handleSearchChanged(entry));
 
-        this._back_button.connect('clicked', () => {
+        this._sidebar_back_button.connect('clicked', () => {
                                       let action = this.lookup_action('category');
                                       action.activate(new GLib.Variant('s', 'emojis'));
                                   });
-        this._back_button.bind_property('visible',
+        this._sidebar_back_button.bind_property('visible',
                                         this._search_active_button, 'visible',
                                         GObject.BindingFlags.SYNC_CREATE |
                                         GObject.BindingFlags.INVERT_BOOLEAN);
+        this._leaflet.bind_property('folded',
+                                    this._main_back_button,
+                                    'visible',
+                                    GObject.BindingFlags.SYNC_CREATE |
+                                    GObject.BindingFlags.DEFAULT);
+        this._main_back_button.connect('clicked', (() => {
+            this._leaflet.set_visible_child_name("sidebar");
+        }).bind(this));
 
         this._menu_popover = new Menu.MenuPopover({});
         this._menu_button.set_popover(this._menu_popover);
@@ -231,18 +239,11 @@ var MainWindow = GObject.registerClass({
         if (categoryList == null)
             return;
 
-        this._selectFirstSubcategory();
-        let category = categoryList.get_selected_row().category;
-
         if (name == 'emojis') {
-            this._back_button.hide();
+            this._sidebar_back_button.hide();
         } else {
-            this._back_button.show();
+            this._sidebar_back_button.show();
         }
-
-        Util.assertNotEqual(category, null);
-        this._mainView.setPage(category);
-        this._updateTitle(category.title);
     }
 
     _subcategory(action, v) {
@@ -258,6 +259,7 @@ var MainWindow = GObject.registerClass({
         if (category) {
             this._mainView.setPage(category);
             this._updateTitle(category.title);
+            this._leaflet.set_visible_child_name("content");
         }
     }