keyboard: add search supportwip/gbsneto/new-keyboard-panel

Based on the latest mockups, the Keyboard panel would
benefit from a search functionality.

This patch add all the necessary UI and functions to
make the search work.

https://bugzilla.gnome.org/show_bug.cgi?id=769063

2 files changed, 124 insertions, 4 deletions

diff --git a/panels/keyboard/cc-keyboard-panel.c b/panels/keyboard/cc-keyboard-panel.c
index 124aea371..476c63720 100644
--- a/panels/keyboard/cc-keyboard-panel.c
+++ b/panels/keyboard/cc-keyboard-panel.c
@@ -31,6 +31,8 @@
 
 #include "keyboard-shortcuts.h"
 
+#include "cc-util.h"
+
 typedef struct {
   CcKeyboardItem *item;
   gchar          *section_title;
@@ -41,7 +43,12 @@ struct _CcKeyboardPanel
 {
   CcPanel             parent;
 
-  /* Shortcut models */
+  /* Search */
+  GtkWidget          *empty_search_placeholder;
+  GtkWidget          *search_button;
+  GtkWidget          *search_entry;
+
+  /* Shortcuts */
   GtkWidget          *listbox;
   GtkListBoxRow      *add_shortcut_row;
   GtkSizeGroup       *accelerator_sizegroup;
@@ -365,6 +372,34 @@ header_function (GtkListBoxRow *row,
     }
 }
 
+static gboolean
+filter_function (GtkListBoxRow *row,
+                 gpointer       user_data)
+{
+  CcKeyboardPanel *self = user_data;
+  RowData *data;
+  gboolean retval;
+  gchar *search, *name;
+
+  if (gtk_entry_get_text_length (GTK_ENTRY (self->search_entry)) == 0)
+    return TRUE;
+
+  /* When searching, the '+' row is always hidden */
+  if (row == self->add_shortcut_row)
+    return FALSE;
+
+  data = g_object_get_data (G_OBJECT (row), "data");
+  name = cc_util_normalize_casefold_and_unaccent (data->item->description);
+  search = cc_util_normalize_casefold_and_unaccent (gtk_entry_get_text (GTK_ENTRY (self->search_entry)));
+
+  retval = strstr (name, search) != NULL;
+
+  g_free (search);
+  g_free (name);
+
+  return retval;
+}
+
 static void
 shortcut_row_activated (GtkWidget       *button,
                         GtkListBoxRow   *row,
@@ -436,6 +471,8 @@ cc_keyboard_panel_constructed (GObject *object)
   /* Setup the dialog's transient parent */
   toplevel = GTK_WINDOW (cc_shell_get_toplevel (cc_panel_get_shell (CC_PANEL (self))));
   gtk_window_set_transient_for (GTK_WINDOW (self->shortcut_editor), toplevel);
+
+  cc_shell_embed_widget_in_header (cc_panel_get_shell (CC_PANEL (self)), self->search_button);
 }
 
 static void
@@ -456,7 +493,10 @@ cc_keyboard_panel_class_init (CcKeyboardPanelClass *klass)
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/control-center/keyboard/gnome-keyboard-panel.ui");
 
   gtk_widget_class_bind_template_child (widget_class, CcKeyboardPanel, add_shortcut_row);
+  gtk_widget_class_bind_template_child (widget_class, CcKeyboardPanel, empty_search_placeholder);
   gtk_widget_class_bind_template_child (widget_class, CcKeyboardPanel, listbox);
+  gtk_widget_class_bind_template_child (widget_class, CcKeyboardPanel, search_button);
+  gtk_widget_class_bind_template_child (widget_class, CcKeyboardPanel, search_entry);
 
   gtk_widget_class_bind_template_callback (widget_class, shortcut_row_activated);
 }
@@ -514,5 +554,12 @@ cc_keyboard_panel_init (CcKeyboardPanel *self)
                                 header_function,
                                 self,
                                 NULL);
+
+  gtk_list_box_set_filter_func (GTK_LIST_BOX (self->listbox),
+                                filter_function,
+                                self,
+                                NULL);
+
+  gtk_list_box_set_placeholder (GTK_LIST_BOX (self->listbox), self->empty_search_placeholder);
 }
 
diff --git a/panels/keyboard/gnome-keyboard-panel.ui b/panels/keyboard/gnome-keyboard-panel.ui
index cb0bdb130..c062eec51 100644
--- a/panels/keyboard/gnome-keyboard-panel.ui
+++ b/panels/keyboard/gnome-keyboard-panel.ui
@@ -12,22 +12,37 @@
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="expand">True</property>
-    <property name="border_width">18</property>
+    <signal name="key-press-event" handler="gtk_search_bar_handle_event" object="search_bar" swapped="yes" />
     <child>
       <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="orientation">vertical</property>
-        <property name="halign">center</property>
         <property name="spacing">12</property>
         <child>
+          <object class="GtkSearchBar" id="search_bar">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+            <property name="search_mode_enabled" bind-source="search_button" bind-property="active" bind-flags="bidirectional" />
+            <child>
+              <object class="GtkSearchEntry" id="search_entry">
+                <property name="visible">True</property>
+                <property name="width_chars">30</property>
+                <signal name="notify::text" handler="gtk_list_box_invalidate_filter" object="listbox" swapped="yes" />
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
           <object class="GtkScrolledWindow">
             <property name="visible">True</property>
             <property name="can_focus">True</property>
+            <property name="halign">center</property>
             <property name="hexpand">True</property>
             <property name="vexpand">True</property>
             <property name="hscrollbar_policy">never</property>
             <property name="shadow_type">in</property>
+            <property name="border_width">18</property>
             <child>
               <object class="GtkListBox" id="listbox">
                 <property name="visible">True</property>
@@ -63,8 +78,11 @@
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
+            <property name="halign">center</property>
             <property name="can_focus">False</property>
-            <property name="border_width">6</property>
+            <property name="margin-bottom">18</property>
+            <property name="margin-start">18</property>
+            <property name="margin-end">18</property>
             <child>
               <object class="GtkLabel">
                 <property name="visible">True</property>
@@ -81,4 +99,59 @@
       </object>
     </child>
   </template>
+  <object class="GtkToggleButton" id="search_button">
+    <property name="visible">True</property>
+    <style>
+      <class name="image-button" />
+    </style>
+    <child>
+      <object class="GtkImage">
+        <property name="visible">True</property>
+        <property name="icon_name">system-search-symbolic</property>
+      </object>
+    </child>
+  </object>
+  <object class="GtkBox" id="empty_search_placeholder">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="halign">center</property>
+    <property name="valign">center</property>
+    <property name="hexpand">True</property>
+    <property name="vexpand">True</property>
+    <property name="border_width">18</property>
+    <property name="orientation">vertical</property>
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkImage">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="pixel_size">72</property>
+        <property name="icon_name">edit-find-symbolic</property>
+        <style>
+          <class name="dim-label"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">No keyboard shortcut found</property>
+        <attributes>
+          <attribute name="weight" value="bold"/>
+          <attribute name="scale" value="1.44"/>
+        </attributes>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">Try a different search</property>
+        <style>
+          <class name="dim-label"/>
+        </style>
+      </object>
+    </child>
+  </object>
 </interface>