Merge lp:~tintou/slingshot/fix-layout into lp:~elementary-pantheon/slingshot/trunk

[Corentin Noël]

Adapt to category bar size.

 * Category layout now autoadapts if the sidebar is larger than expected
 * Removed Gtk.Layout + set_size_request in favor of get_preferred_width/height overriding
 * Aligned AppItems with two lines support

[Danielle Foré (danrabbit)]

Looks good to me. Having two lines available for descriptions is a nice improvement. I don't see any distortions/regressions in regards to alignment. UX Approve :)

review: Approve (ux)

[Tom Beckmann (tombeckmann)]

Code looks good :)

review: Approve (codestyle & code)

=== modified file 'src/SlingshotView.vala'
--- src/SlingshotView.vala	2014-10-15 19:18:53 +0000
+++ src/SlingshotView.vala	2014-10-15 22:00:11 +0000
@@ -179,20 +179,15 @@
             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");
+            stack.add_named (grid_view, "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"
             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 (search_entry.text, match, target);
             });
@@ -316,7 +311,6 @@
 
                 categories = app_system.get_categories ();
                 apps = app_system.get_apps ();
-
                 populate_grid_view ();
                 category_view.setup_sidebar ();
             });

=== modified file 'src/Utils.vala'
--- src/Utils.vala	2014-10-15 19:18:53 +0000
+++ src/Utils.vala	2014-10-15 22:00:11 +0000
@@ -20,15 +20,6 @@
 
     class Utils : GLib.Object {
 
-        public static Gtk.Widget set_padding (Gtk.Widget widget, int top,
-                                              int end, int bottom, int start) {
-            widget.set_margin_top (top);
-            widget.set_margin_end (end);
-            widget.set_margin_bottom (bottom);
-            widget.set_margin_start (start);
-            return widget;
-        }
-
         public static int sort_apps_by_name (Backend.App a, Backend.App b) {
             return a.name.collate (b.name);
         }

=== modified file 'src/Widgets/AppEntry.vala'
--- src/Widgets/AppEntry.vala	2014-10-14 19:22:11 +0000
+++ src/Widgets/AppEntry.vala	2014-10-15 22:00:11 +0000
@@ -17,10 +17,9 @@
 //
 
 public class Slingshot.Widgets.AppEntry : Gtk.Button {
-
     public Gtk.Label app_label;
     private Gdk.Pixbuf icon;
-    private Gtk.Box layout;
+    private new Gtk.Image image;
 
     public string exec_name;
     public string app_name;
@@ -30,8 +29,7 @@
 
     public signal void app_launched ();
 
-    private double alpha = 1.0;
-    private bool   dragging = false; //prevent launching
+    private bool dragging = false; //prevent launching
 
     private Backend.App application;
 
@@ -40,9 +38,6 @@
         Gtk.drag_source_set (this, Gdk.ModifierType.BUTTON1_MASK, {dnd},
             Gdk.DragAction.COPY);
 
-        app_paintable = true;
-        set_visual (get_screen ().get_rgba_visual());
-        set_size_request (Pixels.ITEM_SIZE, Pixels.ITEM_SIZE);
         desktop_id = app.desktop_id;
         desktop_path = app.desktop_path;
 
@@ -58,16 +53,25 @@
         app_label = new Gtk.Label (app_name);
         app_label.halign = Gtk.Align.CENTER;
         app_label.justify = Gtk.Justification.CENTER;
-        app_label.set_line_wrap (true); // Need a smarter way
+        app_label.set_line_wrap (true);
+        app_label.lines = 2;
         app_label.set_single_line_mode (false);
         app_label.set_ellipsize (Pango.EllipsizeMode.END);
 
-        layout = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
-        layout.homogeneous = false;
-
-        layout.pack_start (app_label, false, true, 0);
-
-        add (Utils.set_padding (layout, 78, 5, 5, 5));
+        image = new Gtk.Image.from_pixbuf (icon);
+        image.icon_size = icon_size;
+        image.margin_top = 12;
+
+        var grid = new Gtk.Grid ();
+        grid.orientation = Gtk.Orientation.VERTICAL;
+        grid.row_spacing = 6;
+        grid.expand = true;
+        grid.halign = Gtk.Align.CENTER;
+        grid.add (image);
+        grid.add (app_label);
+
+        add (grid);
+        set_size_request (Pixels.ITEM_SIZE, Pixels.ITEM_SIZE);
 
         this.clicked.connect (launch_app);
 
@@ -77,34 +81,30 @@
             this.dragging = true;
             Gtk.drag_set_icon_pixbuf (ctx, icon, 0, 0);
         });
+
         this.drag_end.connect ( () => {
             this.dragging = false;
         });
+
         this.drag_data_get.connect ( (ctx, sel, info, time) => {
             sel.set_uris ({File.new_for_path (desktop_path).get_uri ()});
         });
 
         app.icon_changed.connect (() => {
             icon = app.icon;
-            queue_draw ();
+            image.set_from_pixbuf (icon);
         });
 
     }
 
-    protected override bool draw (Cairo.Context cr) {
-        Gtk.Allocation size;
-        get_allocation (out size);
-
-        base.draw (cr);
-
-        // Draw icon
-        if (icon != null) {
-            Gdk.cairo_set_source_pixbuf (cr, icon, (icon.width - size.width) / -2.0, 10);
-            cr.paint_with_alpha (alpha);
-        }
-
-        return true;
-
+    public override void get_preferred_width (out int minimum_width, out int natural_width) {
+        minimum_width = Pixels.ITEM_SIZE;
+        natural_width = Pixels.ITEM_SIZE;
+    }
+
+    public override void get_preferred_height (out int minimum_height, out int natural_height) {
+        minimum_height = Pixels.ITEM_SIZE;
+        natural_height = Pixels.ITEM_SIZE;
     }
 
     public void launch_app () {

=== modified file 'src/Widgets/CategoryView.vala'
--- src/Widgets/CategoryView.vala	2014-10-15 19:18:53 +0000
+++ src/Widgets/CategoryView.vala	2014-10-15 22:00:11 +0000
@@ -24,8 +24,6 @@
     public Widgets.Grid app_view;
     private SlingshotView view;
 
-    private Gtk.Grid page_switcher;
-
     private const string ALL_APPLICATIONS = _("All Applications");
     private const string NEW_FILTER = _("Create a new Filter");
     private const string SWITCHBOARD_CATEGORY = "switchboard";
@@ -35,40 +33,36 @@
     public Gee.HashMap<int, string> category_ids = new Gee.HashMap<int, string> ();
 
     public CategoryView (SlingshotView parent) {
-
         view = parent;
-
         set_visible_window (false);
-        setup_ui ();
-        setup_sidebar ();
-        connect_events ();
-    }
+        hexpand = true;
 
-    private void setup_ui () {
         container = new Gtk.Grid ();
+        container.hexpand = true;
+        container.orientation = Gtk.Orientation.HORIZONTAL;
         separator = new Gtk.Separator (Gtk.Orientation.VERTICAL);
 
+        category_switcher = new Sidebar ();
+        category_switcher.can_focus = false;
+
         app_view = new Widgets.Grid (view.rows, view.columns - 1);
         app_view.margin_start = Pixels.SIDEBAR_GRID_PADDING;
 
-        container.attach (separator, 1, 0, 1, 2);
-        container.attach (app_view, 2, 0, 1, 1);
-
+        container.add (category_switcher);
+        container.add (separator);
+        container.add (app_view);
         add (container);
 
+        setup_sidebar ();
+        connect_events ();
     }
 
     public void setup_sidebar () {
-
-        if (category_switcher != null)
-            category_switcher.destroy ();
-
-        category_switcher = new Sidebar ();
-        category_switcher.can_focus = false;
-
+        category_ids.clear ();
+        category_switcher.clear ();
+        app_view.set_size_request (-1, -1);
         // Fill the sidebar
         int n = 0;
-
         foreach (string cat_name in view.apps.keys) {
             if (cat_name == SWITCHBOARD_CATEGORY)
                 continue;
@@ -77,20 +71,27 @@
             category_switcher.add_category (GLib.dgettext ("gnome-menus-3.0", cat_name).dup ());
             n++;
         }
-
-        container.attach (category_switcher, 0, 0, 1, 2);
+        category_switcher.show_all ();
+
+        int minimum_width;
+        category_switcher.get_preferred_width (out minimum_width, null);
+
+        // Because of the different sizes of the column widget, we need to calculate if it will fit.
+        int removing_columns = (int)((double)minimum_width / (double)Pixels.ITEM_SIZE);
+        if (minimum_width % Pixels.ITEM_SIZE != 0)
+            removing_columns++;
+
+        int columns = view.columns - removing_columns;
+        app_view.resize (view.rows, columns);
+    }
+
+    private void connect_events () {
         category_switcher.selection_changed.connect ((name, nth) => {
-
             view.reset_category_focus ();
             string category = category_ids.get (nth);
             show_filtered_apps (category);
         });
 
-        category_switcher.show_all ();
-    }
-
-    private void connect_events () {
-
         category_switcher.selected = 0; //Must be after everything else
     }
 
@@ -113,19 +114,4 @@
 
     }
 
-    public void show_page_switcher (bool show) {
-
-        if (page_switcher.get_parent () == null)
-            container.attach (page_switcher, 2, 1, 1, 1);
-
-        if (show) {
-            page_switcher.show_all ();
-        }
-        else
-            page_switcher.hide ();
-
-        view.search_entry.grab_focus ();
-
-    }
-
 }
\ No newline at end of file

=== modified file 'src/Widgets/Grid.vala'
--- src/Widgets/Grid.vala	2014-10-15 19:18:53 +0000
+++ src/Widgets/Grid.vala	2014-10-15 22:00:11 +0000
@@ -45,16 +45,14 @@
             var main_grid = new Gtk.Grid ();
             main_grid.orientation = Gtk.Orientation.VERTICAL;
             stack = new Gtk.Stack ();
+            stack.expand = true;
             stack.transition_type = Gtk.StackTransitionType.SLIDE_LEFT_RIGHT;
             page_switcher = new Widgets.Switcher ();
             page_switcher.set_stack (stack);
             var fake_grid = new Gtk.Grid ();
-            fake_grid.hexpand = true;
-            var stack_layout = new Gtk.Layout ();
-            stack_layout.expand = true;
-            stack_layout.add (stack);
+            fake_grid.expand = true;
 
-            main_grid.add (stack_layout);
+            main_grid.add (stack);
             main_grid.add (fake_grid);
             main_grid.add (page_switcher);
             add (main_grid);
@@ -101,6 +99,16 @@
             }
         }
 
+        public override void get_preferred_width (out int minimum_width, out int natural_width) {
+            minimum_width = (int)page.columns * Pixels.ITEM_SIZE;
+            natural_width = minimum_width;
+        }
+
+        public override void get_preferred_height (out int minimum_height, out int natural_height) {
+            minimum_height = (int)page.rows * Pixels.ITEM_SIZE + ((int)page.rows - 1) * Pixels.ROW_SPACING;
+            natural_height = minimum_height;
+        }
+
         public void clear () {
             foreach (Gtk.Grid grid in grids.values) {
                 foreach (Gtk.Widget widget in grid.get_children ()) {

=== modified file 'src/Widgets/Sidebar.vala'
--- src/Widgets/Sidebar.vala	2014-08-14 20:09:40 +0000
+++ src/Widgets/Sidebar.vala	2014-10-15 22:00:11 +0000
@@ -59,12 +59,10 @@
         set_show_expanders (false);
         set_level_indentation (8);
 
-        set_size_request (Pixels.SIDEBAR_WIDTH, -1);
+        hexpand = true;
         get_style_context ().add_class ("sidebar");
 
         var cell = new Gtk.CellRendererText ();
-        cell.wrap_mode = Pango.WrapMode.WORD;
-        cell.wrap_width = Pixels.SIDEBAR_WIDTH - 2 * Pixels.PADDING;
         cell.xpad = Pixels.PADDING;
 
         insert_column_with_attributes (-1, "Filters", cell, "markup", Columns.TEXT);
@@ -75,12 +73,13 @@
     }
 
     public void add_category (string entry_name) {
-
         store.append (out entry_iter, null);
         store.set (entry_iter, Columns.INT, cat_size - 1, Columns.TEXT, Markup.escape_text (entry_name), -1);
-
         expand_all ();
+    }
 
+    public void clear () {
+        store.clear ();
     }
 
     public void selection_change () {