Merge lp:~rastersoft-gmail/slingshot/fixed_width_fix into lp:~elementary-pantheon/slingshot/trunk

[Sergio Costas]

Slingshot, by default, presumes that the user has installed and is using the Elementary OS theme. It also presumes that the language used is english. This is because it has hardcoded several sizes for icons, texts and so on that only are correct in that case.

When using slingshot in other languages, the cathegory list string can be larger, which results in the icons in the last column being cut. Also, when using a different theme, the font size and other metrics change, which results in a bigger cut.

This patch fixes this by creating a new label widget that can keep an specific width, instead of growing without control like the standard ones in Gtk. This allows to remove all the fixed widths and heights in the code, and rely on the automatic Gtk layout system. This also allows to use more than one line in the application name, removing the need for text ellipsing.

[lp:~rastersoft-gmail/slingshot/fixed_width_fix]

448. By Sergio Costas on 2014-08-30

Fixed code style

[Sergio Costas (rastersoft-gmail)]

Fixed code style. Now it should comply.

[Danielle Foré (danrabbit)]

I don't see the app presuming that our theme is shipped as a flaw. That is intended and many of our apps depend on features specific to our theme.

However, the only issues I can see are:

The padding added to the left of the category view needs to be removed. That pane should be 0px from the edge of the popover. This would probably fix the issue of the popover growing when you change views.

There should be some 12px padding between the icon grid and the view switcher

review: Needs Fixing

[Sergio Costas (rastersoft-gmail)]

Presuming an specific theme is not the flaw itself; the problem is that, by setting fixed sizes for everything, under some circumstances the layout fails. One is when the user changes the theme, which I understand that you don't care about; but the other is when the user sets its own language (spanish in my case) and one cathegory is much longer than in english. You can see an example here:

http://www.rastersoft.com/blogpic/slingshot_size_bug.png

As you can see there, I'm using Elementary OS with the Elementary theme; "system tools" is translated as "herramientas del sistema", but it is much longer, which causes that the icon column at right gets cut. This patch also fixes this, because it removes the fixed sizes (except for the launch buttons, which remains at 130x130).

I'll try to fix the paddings you comment.

[Julián Unrrein (junrrein)]

If spacing issues are solved by this branch, we can discard https://code.launchpad.net/~julien-spautz/slingshot/magic-numbers/+merge/230886.

[lp:~rastersoft-gmail/slingshot/fixed_width_fix]

449. By Sergio Costas on 2014-08-31

Fixed layout margins

450. By Sergio Costas on 2014-08-31

Added some comments

[Sergio Costas (rastersoft-gmail)]

Ok, it should be fixed now. Please, check it and tell me if it is fine now, or still needs more changes.

Now also keeps the same height even when the pager is hiden.

[lp:~rastersoft-gmail/slingshot/fixed_width_fix]

451. By Sergio Costas on 2014-09-01

Removed unnecesary copyright notes

[Sergio Costas (rastersoft-gmail)]

Done.

[lp:~rastersoft-gmail/slingshot/fixed_width_fix]

452. By Sergio Costas on 2014-09-01

Merged current branch

[Sergio Costas (rastersoft-gmail)]

Fixed conflict.

[lp:~rastersoft-gmail/slingshot/fixed_width_fix]

453. By Sergio Costas on 2014-10-11

Merged changes in ru.po

454. By Sergio Costas on 2014-10-11

Merged last changes. Ready again to be merged to master.

Unmerged revisions

454. By Sergio Costas on 2014-10-11

Merged last changes. Ready again to be merged to master.

453. By Sergio Costas on 2014-10-11

Merged changes in ru.po

452. By Sergio Costas on 2014-09-01

Merged current branch

451. By Sergio Costas on 2014-09-01

Removed unnecesary copyright notes

450. By Sergio Costas on 2014-08-31

Added some comments

449. By Sergio Costas on 2014-08-31

Fixed layout margins

448. By Sergio Costas on 2014-08-30

Fixed code style

447. By Sergio Costas on 2014-08-30

Now the labels are aligned

446. By Sergio Costas on 2014-08-30

The Gtk.Fixed is not needed.

445. By Sergio Costas on 2014-08-30

Update merge from trunk

=== modified file 'CMakeLists.txt'
--- CMakeLists.txt	2014-10-05 03:06:34 +0000
+++ CMakeLists.txt	2014-10-11 19:03:29 +0000
@@ -84,6 +84,7 @@
     src/Widgets/SearchItem.vala
     src/Widgets/Sidebar.vala
     src/Widgets/CategoryView.vala
+    src/Widgets/LabelFixedWidth.vala
 PACKAGES
     ${CORE_DEPS}
     ${UI_DEPS}

=== modified file 'src/SlingshotView.vala'
--- src/SlingshotView.vala	2014-10-05 03:06:34 +0000
+++ src/SlingshotView.vala	2014-10-11 19:03:29 +0000
@@ -95,8 +95,6 @@
 
             if (Slingshot.settings.screen_resolution != @"$(screen.get_width ())x$(screen.get_height ())")
                 setup_size ();
-
-            height_request = calculate_grid_height () + Pixels.BOTTOM_SPACE;
             setup_ui ();
             connect_signals ();
 
@@ -114,21 +112,26 @@
 
         private void setup_size () {
 
+            int max_width;
+            int max_height;
+
             debug ("In setup_size ()");
             Slingshot.settings.screen_resolution = @"$(screen.get_width ())x$(screen.get_height ())";
             default_columns = 5;
             default_rows = 3;
-            while ((calculate_grid_width () + 2 * Pixels.PADDING >= 2 * screen.get_width () / 3)) {
+            
+            max_width = 2 * screen.get_width () / 3;
+            max_height = 2 * screen.get_height () / 3;
+            
+            while ((calculate_grid_width () + 2 * Pixels.PADDING) >= max_width)
                 default_columns--;
-            }
 
-            while ((calculate_grid_height () + Pixels.BOTTOM_SPACE >= 2 * screen.get_height () / 3)) {
+            while ((calculate_grid_height () + Pixels.BOTTOM_SPACE) >= max_height)
                 default_rows--;
-            }
 
-            if (Slingshot.settings.columns != default_columns) {
+            if (Slingshot.settings.columns != default_columns)
                 Slingshot.settings.columns = default_columns;
-            }
+
             if (Slingshot.settings.rows != default_rows)
                 Slingshot.settings.rows = default_rows;
         }
@@ -179,16 +182,12 @@
             center = new Gtk.Grid ();
 
             stack = new Gtk.Stack ();
-            stack.set_size_request (calculate_grid_width (), calculate_grid_height ());
-
+            stack.homogeneous = false;
             center.attach (stack, 0, 0, 1, 1);
 
             // Create the "NORMAL_VIEW"
-            var scrolled_normal = new Gtk.ScrolledWindow (null, null);
             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 "SEARCH_VIEW"
             var search_view_container = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
@@ -222,12 +221,12 @@
             event_box.add (main_stack);
             // Add the container to the dialog's content area
             content_area = get_content_area () as Gtk.Box;
-            content_area.pack_start (event_box);
+            content_area.pack_start (event_box,false,false);
             content_area.set_margin_left (SHADOW_SIZE-1);
             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
@@ -736,11 +735,9 @@
                     view_selector.show_all ();
                     main_stack.set_visible_child_name ("apps");
                     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 ());
-
+                    //stack.set_size_request (calculate_grid_width (), calculate_grid_height ());
                     dummy_search_entry.grab_focus ();
                     break;
 
@@ -751,11 +748,10 @@
                     view_selector.show_all ();
                     main_stack.set_visible_child_name ("apps");
                     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 ());
 
+                    top.set_margin_left (17);
                     dummy_search_entry.grab_focus ();
                     break;
 
@@ -935,4 +931,4 @@
         }
     }
 
-}
\ No newline at end of file
+}

=== modified file 'src/Widgets/AppEntry.vala'
--- src/Widgets/AppEntry.vala	2014-10-05 03:06:34 +0000
+++ src/Widgets/AppEntry.vala	2014-10-11 19:03:29 +0000
@@ -19,6 +19,7 @@
 public class Slingshot.Widgets.AppEntry : Gtk.Button {
 
     public Gtk.Label app_label;
+    private Gtk.DrawingArea drawing;
     private Gdk.Pixbuf icon;
     private Gtk.Box layout;
 
@@ -35,6 +36,12 @@
 
     private Backend.App application;
 
+    // these variables allow to tune the sizes and margins
+    private int d_width = 130;        // desired width
+    private int d_height = 130;       // desired height
+    private int d_margin = 6;         // desired margin. Must be an even value
+    private int d_icon_label_sep = 4; // half the desired separation between the icon and the text
+
     public AppEntry (Backend.App app) {
         this.relief = Gtk.ReliefStyle.NONE;
         Gtk.TargetEntry dnd = {"text/uri-list", 0, 0};
@@ -42,8 +49,9 @@
             Gdk.DragAction.COPY);
 
         app_paintable = true;
-        set_visual (get_screen ().get_rgba_visual());
-        set_size_request (Pixels.ITEM_SIZE, Pixels.ITEM_SIZE);
+
+        set_visual (get_screen ().get_rgba_visual ());
+        set_size_request (this.d_width, this.d_height);
         desktop_id = app.desktop_id;
         desktop_path = app.desktop_path;
 
@@ -56,19 +64,32 @@
 
         get_style_context ().add_class ("app");
 
-        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_single_line_mode (false);
-        app_label.set_ellipsize (Pango.EllipsizeMode.END);
+        this.app_label = new LabelFixedWidth (app_name, this.d_width - 2 * this.d_margin);
+        this.app_label.set_alignment ((float)0.5, 0);
+        this.app_label.justify = Gtk.Justification.CENTER;
+        this.app_label.set_line_wrap (true); // Need a smarter way
+        this.app_label.set_single_line_mode (false);
+
+        // Let's put the icon in a Gtk.DrawingArea instead of overriding the DRAW method
+        this.drawing = new Gtk.DrawingArea ();
+        this.drawing.set_size_request (this.d_width - 2 * this.d_margin, 64);
+        this.drawing.draw.connect ( (w,cr) => {
+            // This test is needed, because pycrust and XRCed kills the oficial slingshot (something happens with their icons)
+            if (this.icon != null) {
+                Gdk.cairo_set_source_pixbuf (cr, this.icon, (this.d_width - 2 * this.d_margin - icon.width) / 2.0, (64 - icon.height) / 2.0);
+                cr.paint_with_alpha (alpha);
+            }
+            return true;
+        });
 
         layout = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
         layout.homogeneous = false;
 
-        layout.pack_start (app_label, false, true, 0);
+        layout.pack_start (this.drawing, false, false, this.d_icon_label_sep);
+        layout.pack_start (this.app_label, true, true, this.d_icon_label_sep);
 
-        add (Utils.set_padding (layout, 78, 5, 5, 5));
+        // The widgets (label and drawingarea) both have a margin of d_icon_label_sep, so let's add the extra margin to make them d_margin thick
+        this.add (Utils.set_padding (layout, this.d_margin - this.d_icon_label_sep, this.d_margin - this.d_icon_label_sep, this.d_margin - this.d_icon_label_sep, this.d_margin - this.d_icon_label_sep));
 
         this.clicked.connect (launch_app);
 
@@ -92,22 +113,6 @@
 
     }
 
-    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 void launch_app () {
         application.launch ();
         app_launched ();

=== modified file 'src/Widgets/Grid.vala'
--- src/Widgets/Grid.vala	2014-08-14 20:09:40 +0000
+++ src/Widgets/Grid.vala	2014-10-11 19:03:29 +0000
@@ -35,27 +35,31 @@
         private uint current_row = 0;
         private uint current_col = 0;
         private Page page;
+        
+        private Gtk.Box fake_grid;
 
         public Grid (int rows, int columns) {
             page.rows = rows;
             page.columns = columns;
             page.number = 1;
-            var main_grid = new Gtk.Grid ();
-            main_grid.orientation = Gtk.Orientation.VERTICAL;
+            this.orientation = Gtk.Orientation.VERTICAL;
             stack = new Gtk.Stack ();
             stack.transition_type = Gtk.StackTransitionType.SLIDE_LEFT_RIGHT;
             page_switcher = new Widgets.Switcher ();
+            page_switcher.margin_top = 12;
             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);
+            this.fake_grid = new Gtk.Box (Gtk.Orientation.VERTICAL,0);
+            this.fake_grid.hexpand = true;
+            this.fake_grid.pack_start (page_switcher,false,true,0);
+            page_switcher.set_minimum_size.connect ( (w,s) => {
+                // By connecting to this signal we get the desired height of the page switcher
+                // This allows to set the height of the fake grid even if the page switcher is hiden,
+                // allowing to keep the popup size constant
+                this.fake_grid.set_size_request (-1,s);
+            });
 
-            main_grid.add (stack_layout);
-            main_grid.add (fake_grid);
-            main_grid.add (page_switcher);
-            add (main_grid);
+            this.pack_start (stack,false,true,0);
+            this.pack_start (fake_grid,false,true,0);
 
             grids = new Gee.HashMap<int, Gtk.Grid> (null, null);
             create_new_grid ();
@@ -65,7 +69,7 @@
         private void create_new_grid () {
             // Grid properties
             current_grid = new Gtk.Grid ();
-            current_grid.expand = true;
+            current_grid.expand = false;
             current_grid.row_homogeneous = true;
             current_grid.column_homogeneous = true;
 
@@ -75,7 +79,9 @@
             stack.add_titled (current_grid, page.number.to_string (), page.number.to_string ());
 
             // Fake grids in case there are not enough apps to fill the grid
-            current_grid.attach (new Gtk.Grid (), 0, 0, (int)page.columns, (int)page.rows);
+            var tmpgrid = new Gtk.Grid ();
+            tmpgrid.expand = false;
+            current_grid.attach (tmpgrid, 0, 0, (int)page.columns, (int)page.rows);
         }
 
         public void append (Gtk.Widget widget) {
@@ -171,4 +177,5 @@
             page.number = 1;
         }
     }
-}
\ No newline at end of file
+}
+

=== added file 'src/Widgets/LabelFixedWidth.vala'
--- src/Widgets/LabelFixedWidth.vala	1970-01-01 00:00:00 +0000
+++ src/Widgets/LabelFixedWidth.vala	2014-10-11 19:03:29 +0000
@@ -0,0 +1,36 @@
+// -*- Mode: vala; indent-tabs-mode: nil; tab-width: 4 -*-
+//
+//  Copyright (C) 2014 Raster Software Vigo
+//
+//  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/>.
+//
+
+public class Slingshot.Widgets.LabelFixedWidth : Gtk.Label {
+
+    int d_preferred_width;
+
+    // This widget is a label, modified to return to its container that it
+    // always have a fixed width. This ensures that, when adding it inside
+    // a Gtk.Fixed widget, it will keep its size, instead of growing
+    public LabelFixedWidth (string text, int width) {
+        this.label = text;
+        this.d_preferred_width = width;
+        this.set_size_request (width, -1);
+    }
+
+    public override void get_preferred_width (out int min, out int required) {
+        min = this.d_preferred_width;
+        required = this.d_preferred_width;
+    }
+}

=== modified file 'src/Widgets/Switcher.vala'
--- src/Widgets/Switcher.vala	2014-05-26 06:26:17 +0000
+++ src/Widgets/Switcher.vala	2014-10-11 19:03:29 +0000
@@ -28,6 +28,8 @@
     private Gtk.Stack stack;
     private Gee.HashMap<Gtk.Widget, Gtk.ToggleButton> buttons;
 
+    public signal void set_minimum_size (int size);
+
     public Switcher () {
         orientation = Gtk.Orientation.HORIZONTAL;
         spacing = 2;
@@ -49,6 +51,7 @@
 
     private void add_child (Gtk.Widget widget) {
         var button = new Gtk.ToggleButton.with_label ((buttons.size +1).to_string ());
+        button.show_all ();
         button.width_request = 30;
         button.can_focus = false;
         button.get_style_context ().add_class ("switcher");
@@ -73,6 +76,14 @@
     
     public override void show () {
         base.show ();
+        int min1;
+        int min2;
+        this.get_preferred_height (out min1, out min2);
+        // whenever this widget is shown, checks its desired height and sends a signal with this value
+        // This allows other widgets to set their height to the same than this, even when this one is hiden
+        if (min2 != 0)
+            this.set_minimum_size (min2);
+
         if (buttons.size <= 1)
             hide ();
     }
@@ -122,4 +133,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}