search-view: update UI to match upstream

Latest GNOME applications follow a clear style of
searching and displaying results, with a no results
page.

To create a coherent usage between GNOME applications,
add the No results page to search popover.

data/ui/search-view.ui

@@ -1,55 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- Generated with glade 3.18.1 -->
 <interface>
-  <requires lib="gtk+" version="3.10"/>
+  <requires lib="gtk+" version="3.16"/>
   <template class="GcalSearchView" parent="GtkPopover">
-    <property name="visible">False</property>
-    <property name="can_focus">True</property>
     <property name="width_request">600</property>
     <property name="height_request">300</property>
+    <property name="can_focus">True</property>
     <property name="border_width">12</property>
     <property name="modal">False</property>
     <child>
-      <object class="GtkGrid" id="grid">
+      <object class="GtkStack" id="stack">
         <property name="visible">True</property>
-        <child>
+        <property name="can_focus">False</property>
-          <object class="GtkGrid" id="no_results_grid">
+        <property name="transition_type">crossfade</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="hexpand">True</property>
-            <property name="vexpand">True</property>
-            <property name="row_spacing">24</property>
-            <child>
-              <object class="GtkImage" id="image">
-                <property name="visible">True</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="pixel_size">48</property>
-                <property name="icon_name">face-sad-symbolic</property>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="label">
-                <property name="visible">True</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="label" translatable="yes">No results found</property>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">1</property>
-              </packing>
-            </child>
-          </object>
-          <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">0</property>
-          </packing>
-        </child>
         <child>
           <object class="GtkScrolledWindow" id="scrolled_window">
             <property name="visible">True</property>
@@ -60,46 +23,87 @@
             <child>
               <object class="GtkViewport" id="viewport">
                 <property name="visible">True</property>
+                <property name="can_focus">False</property>
                 <property name="shadow_type">none</property>
-                <style>
-                  <class name="search-viewport"/>
-                </style>
-                <child>
-                  <object class="GtkGrid" id="search_grid">
-                    <property name="visible">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="vexpand">True</property>
-                    <child>
-                      <object class="GtkLabel" id="empty_search_label">
-                        <property name="visible" bind-source="listbox" bind-property="visible" bind-flags="invert-boolean | bidirectional"/>
-                        <property name="hexpand">True</property>
-                        <property name="vexpand">True</property>
-                        <property name="label" translatable="yes">Use the entry above to search for events.</property>
-                      </object>
-                      <packing>
-                        <property name="left_attach">0</property>
-                        <property name="top_attach">1</property>
-                      </packing>
-                    </child>
                 <child>
                   <object class="GtkListBox" id="listbox">
                     <property name="visible">True</property>
+                    <property name="can_focus">False</property>
                     <property name="selection_mode">none</property>
                     <signal name="row-activated" handler="open_event" object="GcalSearchView" swapped="no"/>
                   </object>
+                </child>
+                <style>
+                  <class name="search-viewport"/>
+                </style>
+              </object>
+            </child>
+          </object>
           <packing>
-                        <property name="left_attach">0</property>
+            <property name="name">results</property>
-                        <property name="top_attach">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox" id="box">
+            <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="orientation">vertical</property>
+            <property name="spacing">12</property>
+            <child>
+              <object class="GtkImage" id="image">
+                <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>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="title_label">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="label" translatable="yes">No results found</property>
+                <attributes>
+                  <attribute name="weight" value="bold"/>
+                  <attribute name="scale" value="1.44"/>
+                </attributes>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="subtitle_label">
+                <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>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
               </packing>
             </child>
           </object>
-                </child>
-              </object>
-            </child>
-          </object>
           <packing>
-            <property name="left_attach">0</property>
+            <property name="name">no_results</property>
-            <property name="top_attach">1</property>
+            <property name="position">1</property>
           </packing>
         </child>
       </object>

src/gcal-search-view.c

@@ -35,8 +35,7 @@ typedef struct
 typedef struct
 {
   GtkWidget      *listbox;
-  GtkWidget      *scrolled_window;
+  GtkWidget      *stack;
-  GtkWidget      *no_results_grid;
 
   /* Since the user can have (literally)
    * thousands of events, the usage of
@@ -279,8 +278,10 @@ show_no_results_page (GcalSearchView *view)
   priv = gcal_search_view_get_instance_private (view);
   priv->no_results_timeout_id = 0;
 
-  gtk_widget_set_visible (priv->scrolled_window, priv->num_results != 0);
+  if (priv->query)
-  gtk_widget_set_visible (priv->no_results_grid, priv->num_results == 0);
+    gtk_stack_set_visible_child_name (GTK_STACK (priv->stack), priv->num_results != 0 ? "results" : "no_results");
+  else
+    gtk_stack_set_visible_child_name (GTK_STACK (priv->stack), "results");
 
   return G_SOURCE_REMOVE;
 }
@@ -512,8 +513,7 @@ gcal_search_view_class_init (GcalSearchViewClass *klass)
   /* bind things for/from the template class */
   gtk_widget_class_set_template_from_resource (GTK_WIDGET_CLASS (klass), "/org/gnome/calendar/search-view.ui");
 
-  gtk_widget_class_bind_template_child_private (GTK_WIDGET_CLASS (klass), GcalSearchView, no_results_grid);
+  gtk_widget_class_bind_template_child_private (GTK_WIDGET_CLASS (klass), GcalSearchView, stack);
-  gtk_widget_class_bind_template_child_private (GTK_WIDGET_CLASS (klass), GcalSearchView, scrolled_window);
   gtk_widget_class_bind_template_child_private (GTK_WIDGET_CLASS (klass), GcalSearchView, listbox);
 
   gtk_widget_class_bind_template_callback (GTK_WIDGET_CLASS (klass), open_event);
@@ -539,6 +539,8 @@ static void
 gcal_search_view_constructed (GObject *object)
 {
   GcalSearchViewPrivate *priv;
+  GtkWidget *placeholder_label;
+
   priv = gcal_search_view_get_instance_private (GCAL_SEARCH_VIEW (object));
 
   /* make the listbox sorted */
@@ -550,6 +552,18 @@ gcal_search_view_constructed (GObject *object)
 
   /* don't fill the list with all events on startup */
   gcal_search_view_search (GCAL_SEARCH_VIEW (object), NULL, NULL);
+
+  /* "type to search" label */
+  placeholder_label = g_object_new (GTK_TYPE_LABEL,
+                                    "label", _("Use the entry above to search for events."),
+                                    "expand", TRUE,
+                                    "valign", GTK_ALIGN_CENTER,
+                                    "halign", GTK_ALIGN_CENTER,
+                                    "visible", TRUE,
+                                    NULL);
+  gtk_style_context_add_class (gtk_widget_get_style_context (placeholder_label), "dim-label");
+
+  gtk_list_box_set_placeholder (GTK_LIST_BOX (priv->listbox), placeholder_label);
 }
 
 static void
@@ -798,8 +812,6 @@ gcal_search_view_search (GcalSearchView *view,
   priv->query = g_strdup (query);
   priv->field = g_strdup (field);
 
-  gtk_widget_show (priv->scrolled_window);
-  gtk_widget_hide (priv->no_results_grid);
 
   /* Only perform search on valid non-empty strings */
   if (query && g_utf8_strlen (query, -1) > 0)
@@ -817,16 +829,14 @@ gcal_search_view_search (GcalSearchView *view,
       priv->current_utc_date = time (NULL);
 
       gcal_manager_set_query (priv->manager, search_query);
-      gtk_widget_show (priv->listbox);
-
-      update_view (view);
 
       g_free (search_query);
     }
   else
     {
       g_hash_table_remove_all (priv->uuid_to_event);
-      gtk_widget_hide (priv->listbox);
     }
+
+  update_view (view);
 }