Merge lp:~tintou/slingshot/consistent-searchbar into lp:~elementary-pantheon/slingshot/trunk

[Corentin Noël]

* Get a consistent search entry.
 * Do search asynchronously.
 * Animate the view change with recent Gtk technology.
 * Simplify the code regarding the addition of margins.

 * Get a consistent search entry.
 * Do search asynchronously.
 * Anymate the view change with recent Gtk technology.
 * Simplify the code regarding the addition of margins.

[Danielle Foré (danrabbit)]

* If I don't have the search entry focused and start typing, focus will switch the entry, but the first character will be missing. If we can fix this, I think we also shouldn't focus the search entry by default so that the hint text will be shown.

* We seem to have lost the color distinction between :focus and :hover. Is that a theme issue?

* I love the animations and the margins look much better. This is amazing. The transition between the views is very smooth.

[lp:~tintou/slingshot/consistent-searchbar]

464. By Corentin Noël on 2014-10-14

Some fixes.

[Danielle Foré (danrabbit)]

UX approve. Fantastic :)

review: Approve (ux)

[lp:~tintou/slingshot/consistent-searchbar]

465. By Corentin Noël on 2014-10-14

Restrict results to 20.

466. By Corentin Noël on 2014-10-14

Refinements.

[Tom Beckmann (tombeckmann)]

Great changes!

review: Approve

=== modified file 'CMakeLists.txt'
--- CMakeLists.txt	2014-10-05 03:06:34 +0000
+++ CMakeLists.txt	2014-10-14 20:19:51 +0000
@@ -78,7 +78,6 @@
     src/Backend/SynapseSearch.vala
     src/Widgets/AppEntry.vala
     src/Widgets/Grid.vala
-    src/Widgets/LargeSearchEntry.vala
     src/Widgets/Switcher.vala
     src/Widgets/SearchView.vala
     src/Widgets/SearchItem.vala
@@ -93,6 +92,7 @@
     vapi/config.vapi
 OPTIONS
     --thread
+    --target-glib=2.32
     --vapidir=${CMAKE_BINARY_DIR}/lib/synapse-core
     --vapidir=${CMAKE_BINARY_DIR}/lib/synapse-plugins
     -g
@@ -127,4 +127,4 @@
 add_schema ("org.pantheon.desktop.slingshot.gschema.xml")
 
 # Translations
-add_subdirectory (po)
+add_subdirectory (po)
 \ No newline at end of file
 
=== modified file 'src/SlingshotView.vala'
--- src/SlingshotView.vala	2014-10-14 01:30:37 +0000
+++ src/SlingshotView.vala	2014-10-14 20:19:51 +0000
@@ -27,10 +27,10 @@
     public class SlingshotView : Granite.Widgets.PopOver {
 
         // Widgets
-        public Gtk.SearchEntry dummy_search_entry;
-        public Widgets.LargeSearchEntry real_search_entry;
+        public Gtk.SearchEntry search_entry;
         public Gtk.Stack stack;
         public Granite.Widgets.ModeButton view_selector;
+        private Gtk.Revealer view_selector_revealer;
 
         // Views
         private Widgets.Grid grid_view;
@@ -38,7 +38,6 @@
         private Widgets.CategoryView category_view;
 
         public Gtk.Grid top;
-        public Gtk.Grid center;
         public Gtk.Grid container;
         public Gtk.Stack main_stack;
         public Gtk.Box content_area;
@@ -109,7 +108,7 @@
         }
 
         public int calculate_grid_width () {
-            return (int) default_columns * Pixels.ITEM_SIZE;
+            return (int) default_columns * Pixels.ITEM_SIZE + 24;
         }
 
         private void setup_size () {
@@ -139,18 +138,19 @@
 
             // Create the base container
             container = new Gtk.Grid ();
-
-            main_stack = new Gtk.Stack ();
-
-            main_stack.add_named (container, "apps");
+            container.row_spacing = 12;
 
             // Add top bar
             top = new Gtk.Grid ();
-
-            var top_separator = new Gtk.Label (""); // A fake label
-            top_separator.set_hexpand(true);
+            top.orientation = Gtk.Orientation.HORIZONTAL;
+            top.margin_left = 12;
+            top.margin_right = 12;
 
             view_selector = new Granite.Widgets.ModeButton ();
+            view_selector.margin_right = 12;
+            view_selector_revealer = new Gtk.Revealer ();
+            view_selector_revealer.transition_type = Gtk.RevealerTransitionType.SLIDE_RIGHT;
+            view_selector_revealer.add (view_selector);
 
             var image = new Gtk.Image.from_icon_name ("view-grid-symbolic", Gtk.IconSize.MENU);
             image.tooltip_text = _("View as Grid");
@@ -165,61 +165,45 @@
             else
                 view_selector.selected = 0;
 
-            dummy_search_entry = new Gtk.SearchEntry ();
-            dummy_search_entry.placeholder_text = _("Search Apps");
-            dummy_search_entry.width_request = 250;
-            dummy_search_entry.button_press_event.connect ((e) => {return e.button == 3;});
+            search_entry = new Gtk.SearchEntry ();
+            search_entry.placeholder_text = _("Search Apps");
+            search_entry.hexpand = true;
+            search_entry.button_press_event.connect ((e) => {return e.button == 3;});
 
             if (Slingshot.settings.show_category_filter) {
-                top.attach (view_selector, 0, 0, 1, 1);
+                top.add (view_selector_revealer);
             }
-            top.attach (top_separator, 1, 0, 1, 1);
-            top.attach (dummy_search_entry, 2, 0, 1, 1);
-
-            center = new Gtk.Grid ();
+            top.add (search_entry);
 
             stack = new Gtk.Stack ();
-            stack.set_size_request (calculate_grid_width (), calculate_grid_height ());
-
-            center.attach (stack, 0, 0, 1, 1);
+            stack.transition_type = Gtk.StackTransitionType.SLIDE_LEFT_RIGHT;
 
             // Create the "NORMAL_VIEW"
             var scrolled_normal = new Gtk.ScrolledWindow (null, null);
+            scrolled_normal.set_size_request (calculate_grid_width (), calculate_grid_height ());
             grid_view = new Widgets.Grid (default_rows, default_columns);
             scrolled_normal.add_with_viewport (grid_view);
-
             stack.add_named (scrolled_normal, "normal");
 
+            // Create the "CATEGORY_VIEW"
+            category_view = new Widgets.CategoryView (this);
+            category_view.set_size_request (calculate_grid_width (), calculate_grid_height ());
+            stack.add_named (category_view, "category");
+
             // Create the "SEARCH_VIEW"
-            var search_view_container = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
-
-            real_search_entry = new Widgets.LargeSearchEntry ();
-            real_search_entry.margin_left = Pixels.PADDING;
-            real_search_entry.margin_right = Pixels.PADDING;
-
             search_view = new Widgets.SearchView (this);
+            search_view.set_size_request (calculate_grid_width (), calculate_grid_height ());
             search_view.start_search.connect ((match, target) => {
-                search.begin (real_search_entry.text, match, target);
+                search.begin (search_entry.text, match, target);
             });
 
-            search_view_container.pack_start (real_search_entry, false);
-            search_view_container.pack_start (new Gtk.Separator (Gtk.Orientation.HORIZONTAL), false);
-            search_view_container.pack_start (search_view);
-
-            main_stack.add_named (search_view_container, "search");
-
-            // Create the "CATEGORY_VIEW"
-            category_view = new Widgets.CategoryView (this);
-            stack.add_named (category_view, "category");
-            
-            Utils.set_padding (top, 12, Pixels.PADDING, 12, Pixels.PADDING);
-            Utils.set_padding (center, 0, Pixels.PADDING, 12, Pixels.PADDING);
-            
+            stack.add_named (search_view, "search");
+
             container.attach (top, 0, 0, 1, 1);
-            container.attach (center, 0, 1, 1, 1);
+            container.attach (stack, 0, 1, 1, 1);
 
             event_box = new Gtk.EventBox ();
-            event_box.add (main_stack);
+            event_box.add (container);
             // Add the container to the dialog's content area
             content_area = get_content_area () as Gtk.Box;
             content_area.pack_start (event_box);
@@ -227,7 +211,7 @@
             content_area.set_margin_right (SHADOW_SIZE-1);
             content_area.set_margin_top (SHADOW_SIZE-1);
             content_area.set_margin_bottom (SHADOW_SIZE-1);
-                    
+
             if (Slingshot.settings.use_category)
                 set_modality (Modality.CATEGORY_VIEW);
             else
@@ -298,38 +282,20 @@
         private void connect_signals () {
 
             this.focus_in_event.connect (() => {
-                get_current_search_entry ().grab_focus ();
+                search_entry.grab_focus ();
                 return false;
             });
 
             event_box.key_press_event.connect (on_key_press);
-            dummy_search_entry.key_press_event.connect (search_entry_key_press);
-            real_search_entry.widget.key_press_event.connect (search_entry_key_press);
+            search_entry.key_press_event.connect (search_entry_key_press);
 
-            real_search_entry.search_changed.connect (() => {
-                search.begin (real_search_entry.text);
-            });
-            dummy_search_entry.search_changed.connect (() => {
+            search_entry.search_changed.connect (() => {
                 if (modality != Modality.SEARCH_VIEW)
                     set_modality (Modality.SEARCH_VIEW);
-            });
-            dummy_search_entry.grab_focus ();
-
-            dummy_search_entry.activate.connect (search_entry_activated);
-            real_search_entry.widget.activate.connect (search_entry_activated);
-
-            // the focus-out event is fired as soon as the stack transition is ended
-            // at which point we're able to focus the real_search_entry
-            dummy_search_entry.focus_out_event.connect (() => {
-                real_search_entry.text = dummy_search_entry.text;
-                real_search_entry.widget.grab_focus ();
-                var cursor_pos = real_search_entry.text.length;
-                real_search_entry.widget.select_region (cursor_pos, cursor_pos);
-
-                dummy_search_entry.text = "";
-
-                return false;
-            });
+                search.begin (search_entry.text);
+            });
+            search_entry.grab_focus ();
+            search_entry.activate.connect (search_entry_activated);
 
             search_view.app_launched.connect (() => hide ());
 
@@ -433,11 +399,6 @@
             }
         }
 
-        public Gtk.Entry get_current_search_entry ()
-        {
-            return modality == Modality.SEARCH_VIEW ? real_search_entry.widget : dummy_search_entry;
-        }
-
         /*
           Overriding the default handler results in infinite loop of error messages
           when an input method is in use (Gtk3 bug?).  Key press events are
@@ -459,8 +420,6 @@
                 return true;
             }
 
-            var search_entry = get_current_search_entry ();
-
             switch (key) {
                 case "F4":
                     if ((event.state & Gdk.ModifierType.MOD1_MASK) != 0) {
@@ -678,6 +637,7 @@
                     if (!search_entry.has_focus) {
                         search_entry.grab_focus ();
                         search_entry.move_cursor (Gtk.MovementStep.BUFFER_ENDS, 0, false);
+                        search_entry.key_press_event (event);
                     }
                     return false;
 
@@ -713,16 +673,20 @@
 
         public void show_slingshot () {
 
-            dummy_search_entry.text = "";
-            real_search_entry.text = "";
+            search_entry.text = "";
 
             reposition ();
             show_all ();
             present ();
 
-            set_focus(null);
-            get_current_search_entry ().grab_focus ();
+            set_focus (null);
+            search_entry.grab_focus ();
+            //This is needed in order to not animate if the previous view was the search view.
+            view_selector_revealer.transition_type = Gtk.RevealerTransitionType.NONE;
+            stack.transition_type = Gtk.StackTransitionType.NONE;
             set_modality ((Modality) view_selector.selected);
+            view_selector_revealer.transition_type = Gtk.RevealerTransitionType.SLIDE_RIGHT;
+            stack.transition_type = Gtk.StackTransitionType.SLIDE_LEFT_RIGHT;
         }
 
         private void set_modality (Modality new_modality) {
@@ -733,35 +697,25 @@
 
                     if (Slingshot.settings.use_category)
                         Slingshot.settings.use_category = false;
-                    view_selector.show_all ();
-                    main_stack.set_visible_child_name ("apps");
+                    view_selector_revealer.set_reveal_child (true);
                     stack.set_visible_child_name ("normal");
 
-                    // change the paddings/margins back to normal
-                    center.set_margin_left (Pixels.PADDING);
-                    stack.set_size_request (calculate_grid_width (), calculate_grid_height ());
-
-                    dummy_search_entry.grab_focus ();
+                    search_entry.grab_focus ();
                     break;
 
                 case Modality.CATEGORY_VIEW:
 
                     if (!Slingshot.settings.use_category)
                         Slingshot.settings.use_category = true;
-                    view_selector.show_all ();
-                    main_stack.set_visible_child_name ("apps");
+                    view_selector_revealer.set_reveal_child (true);
                     stack.set_visible_child_name ("category");
 
-                    // remove the padding/margin on the left
-                    center.set_margin_left (0);
-                    stack.set_size_request (calculate_grid_width () + Pixels.PADDING, calculate_grid_height ());
-
-                    dummy_search_entry.grab_focus ();
+                    search_entry.grab_focus ();
                     break;
 
                 case Modality.SEARCH_VIEW:
-                    view_selector.hide ();
-                    main_stack.set_visible_child_name ("search");
+                    view_selector_revealer.set_reveal_child (false);
+                    stack.set_visible_child_name ("search");
                     break;
 
             }
@@ -780,7 +734,7 @@
                 // picked up. If we add an idle and recheck that the entry is indeed still
                 // empty before switching, this problem is gone.
                 Idle.add (() => {
-                    if (real_search_entry.text.strip () == "")
+                    if (search_entry.text.strip () == "")
                         set_modality ((Modality) view_selector.selected);
                     return false;
                 });
@@ -799,10 +753,10 @@
                 matches = yield synapse.search (text);
             }
 
-            search_view.clear ();
-            search_view.set_results (matches, text);
-
-            search_view.selected = 0;
+            Idle.add (() => {
+                search_view.set_results (matches, text);
+                return false;
+            });
 
         }
 
@@ -900,7 +854,7 @@
                     return;
                 }
                 else if (category_column_focus == 0 && delta_column < 0) {
-                    get_current_search_entry ().grab_focus ();
+                    search_entry.grab_focus ();
                     category_column_focus = 0;
                     category_row_focus = 0;
                     return;
 
=== modified file 'src/Widgets/AppEntry.vala'
--- src/Widgets/AppEntry.vala	2014-10-05 03:06:34 +0000
+++ src/Widgets/AppEntry.vala	2014-10-14 20:19:51 +0000
@@ -36,7 +36,6 @@
     private Backend.App application;
 
     public AppEntry (Backend.App app) {
-        this.relief = Gtk.ReliefStyle.NONE;
         Gtk.TargetEntry dnd = {"text/uri-list", 0, 0};
         Gtk.drag_source_set (this, Gdk.ModifierType.BUTTON1_MASK, {dnd},
             Gdk.DragAction.COPY);
@@ -112,4 +111,4 @@
         application.launch ();
         app_launched ();
     }
-}
+}
 \ No newline at end of file
 
=== modified file 'src/Widgets/CategoryView.vala'
--- src/Widgets/CategoryView.vala	2014-08-14 20:44:46 +0000
+++ src/Widgets/CategoryView.vala	2014-10-14 20:19:51 +0000
@@ -124,7 +124,7 @@
         else
             page_switcher.hide ();
 
-        view.get_current_search_entry ().grab_focus ();
+        view.search_entry.grab_focus ();
 
     }
 
 
=== modified file 'src/Widgets/Grid.vala'
--- src/Widgets/Grid.vala	2014-08-14 20:09:40 +0000
+++ src/Widgets/Grid.vala	2014-10-14 20:19:51 +0000
@@ -37,6 +37,8 @@
         private Page page;
 
         public Grid (int rows, int columns) {
+            margin_left = 12;
+            margin_right = 12;
             page.rows = rows;
             page.columns = columns;
             page.number = 1;
 
=== removed file 'src/Widgets/LargeSearchEntry.vala'
--- src/Widgets/LargeSearchEntry.vala	2014-06-10 10:30:05 +0000
+++ src/Widgets/LargeSearchEntry.vala	1970-01-01 00:00:00 +0000
@@ -1,73 +0,0 @@
-// -*- Mode: vala; indent-tabs-mode: nil; tab-width: 4 -*-
-//
-//  Copyright (C) 2014 Tom Beckmann <[e-mail]>
-//
-//  This program is free software: you can redistribute it and/or modify
-//  it under the terms of the GNU General Public License as published by
-//  the Free Software Foundation, either version 3 of the License, or
-//  (at your option) any later version.
-//
-//  This program is distributed in the hope that it will be useful,
-//  but WITHOUT ANY WARRANTY; without even the implied warranty of
-//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-//  GNU General Public License for more details.
-//
-//  You should have received a copy of the GNU General Public License
-//  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-//
-
-namespace Slingshot.Widgets
-{
-	public class LargeSearchEntry : Gtk.Box {
-		const int ICON_SIZE = 24;
-
-		public signal void search_changed ();
-
-		public string text {
-			get {
-				return widget.text;
-			}
-			set {
-				widget.text = value;
-			}
-		}
-
-		public Gtk.Entry widget { get; private set; }
-
-		public LargeSearchEntry ()
-		{
-			Object (orientation: Gtk.Orientation.HORIZONTAL, spacing: 4);
-
-			var find_pixbuf = get_icon ("edit-find-symbolic");
-			var clear_pixbuf = get_icon ("edit-clear-symbolic");
-
-			var clear_box = new Gtk.Button ();
-			clear_box.add (new Gtk.Image.from_pixbuf (clear_pixbuf));
-			clear_box.relief = Gtk.ReliefStyle.NONE;
-			clear_box.clicked.connect (() => text = "" );
-
-			widget = new Gtk.Entry ();
-			widget.get_style_context ().add_class ("search-entry-large");
-
-			pack_start (new Gtk.Image.from_pixbuf (find_pixbuf), false);
-			pack_start (widget);
-			pack_start (clear_box, false);
-
-			widget.changed.connect (() => search_changed ());
-		}
-
-		Gdk.Pixbuf? get_icon (string name)
-		{
-			Gdk.Pixbuf? pixbuf = null;
-			var info = Gtk.IconTheme.get_default ().lookup_icon (name, ICON_SIZE, 0);
-			try {
-				if (info != null)
-					pixbuf = info.load_symbolic ({ 0.5, 0.5, 0.5, 1 });
-			} catch (Error e) {}
-
-			return pixbuf;
-		}
-
-	}
-}
-
 
=== modified file 'src/Widgets/SearchItem.vala'
--- src/Widgets/SearchItem.vala	2014-06-12 09:14:57 +0000
+++ src/Widgets/SearchItem.vala	2014-10-14 20:19:51 +0000
@@ -35,7 +35,6 @@
             Object (app: app);
 
             get_style_context ().add_class ("app");
-            get_style_context ().add_class ("search-item");
 
             var markup = Backend.SynapseSearch.markup_string_with_search (app.name, search_term);
 
@@ -79,4 +78,4 @@
         }
     }
 
-}
+}
 \ No newline at end of file
 
=== modified file 'src/Widgets/SearchView.vala'
--- src/Widgets/SearchView.vala	2014-06-12 09:14:57 +0000
+++ src/Widgets/SearchView.vala	2014-10-14 20:19:51 +0000
@@ -21,6 +21,7 @@
     public class SearchView : Gtk.ScrolledWindow {
         const int CONTEXT_WIDTH = 200;
         const int CONTEXT_ARROW_SIZE = 12;
+        const int MAX_RESULTS = 20;
         const int MAX_RESULTS_BEFORE_LIMIT = 10;
 
         public signal void start_search (Synapse.SearchMatch search_match, Synapse.Match? target);
@@ -90,9 +91,10 @@
             items = new Gee.HashMap<Backend.App, SearchItem> ();
 
             main_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
+            main_box.margin_left = 12;
+            main_box.margin_right = 12;
 
             context_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
-            context_box.width_request = CONTEXT_WIDTH;
             context_fixed = new Gtk.Fixed ();
             context_fixed.margin_left = CONTEXT_ARROW_SIZE;
             context_fixed.put (context_box, 0, 0);
@@ -103,7 +105,6 @@
             revealer = new Gtk.Revealer ();
             revealer.transition_duration = 400;
             revealer.transition_type = Gtk.RevealerTransitionType.CROSSFADE;
-            revealer.width_request = CONTEXT_WIDTH + CONTEXT_ARROW_SIZE;
             revealer.no_show_all = true;
             revealer.add (context);
 
@@ -149,7 +150,7 @@
             // if we're showing more than about 10 results and we have more than
             // categories, we limit the results per category to the most relevant
             // ones.
-            var limit = int.MAX;
+            var limit = MAX_RESULTS;
             if (matches.size + 3 > MAX_RESULTS_BEFORE_LIMIT && categories_order.size > 2)
                 limit = 5;
 
@@ -185,14 +186,16 @@
 
                 var header = new Gtk.Label (label);
                 header.xalign = 0;
-                header.margin_left = header.margin_top = 8;
+                header.margin_left = 8;
                 header.margin_bottom = 4;
                 header.use_markup = true;
+                header.get_style_context ().add_class ("category-label");
                 header.show ();
-                header.get_style_context ().add_class ("search-category-header");
                 main_box.pack_start (header, false);
 
                 var list = categories.get (type);
+                var old_selected = selected;
+                clear ();
                 for (var i = 0; i < limit && i < list.size; i++) {
                     var match = list.get (i);
 
@@ -208,6 +211,7 @@
                         n_results++;
                     }
                 }
+                selected = old_selected;
             }
         }
 
@@ -352,4 +356,4 @@
 
     }
 
-}
+}
 \ No newline at end of file