[gnome-shell/wip/paging-release2: 12/12] AppDisplay, IconGrid, SearchDisplay: Adapt spacing and icons size to available screen size.



commit 2aba86412cf724753f6d9bb11b80a14af2660160
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Thu Aug 15 10:38:17 2013 +0200

    AppDisplay, IconGrid, SearchDisplay: Adapt spacing and icons size to available screen size.
    
    Add a convenient function in IconGrid to calculate the responsive grid
    before any view allocation.
    This function use dynamic paddings on the views and scale the icons
    if the size given to the IconGrid is too small to fit a minimum of
    icons rows/columns.

 js/ui/appDisplay.js    |   63 ++++++++++--------
 js/ui/iconGrid.js      |  175 +++++++++++++++++++++++++++++++++++++-----------
 js/ui/searchDisplay.js |    4 +-
 3 files changed, 173 insertions(+), 69 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 922d4b0..a7dbaa6 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -73,7 +73,8 @@ const AlphabeticalView = new Lang.Class({
         gridParams = Params.parse(gridParams,  { xAlign: St.Align.MIDDLE,
                                                  columnLimit: MAX_COLUMNS,
                                                  minRows: MIN_ROWS,
-                                                 minColumns: MIN_COLUMNS });
+                                                 minColumns: MIN_COLUMNS,
+                                                 useSurroundingSpacing: false });
         this._grid = new IconGrid.IconGrid(gridParams);
         // Standard hack for ClutterBinLayout
         this._grid.actor.x_expand = true;
@@ -119,7 +120,7 @@ const AlphabeticalView = new Lang.Class({
             let id = this._getItemId(this._allItems[i]);
             if (!id)
                 continue;
-            this._grid.addItem(this._items[id].actor);
+            this._grid.addItem(this._items[id]);
         }
     }
 });
@@ -132,7 +133,8 @@ const PaginatedAlphabeticalView = new Lang.Class({
         gridParams = Params.parse(gridParams,  { xAlign: St.Align.MIDDLE,
                                                  columnLimit: MAX_COLUMNS,
                                                  minRows: MIN_ROWS,
-                                                 minColumns: MIN_COLUMNS });
+                                                 minColumns: MIN_COLUMNS,
+                                                 useSurroundingSpacing: false });
         this._grid = new IconGrid.PaginatedIconGrid(gridParams);
         // Standard hack for ClutterBinLayout
         this._grid.actor.x_expand = true;
@@ -274,7 +276,7 @@ const AllView = new Lang.Class({
     Extends: PaginatedAlphabeticalView,
 
     _init: function() {
-        this.parent();
+        this.parent({ useSurroundingSpacing: true });
         this._paginationView = new PaginationScrollView(this, {style_class: 'all-apps'});
         this._paginationIndicator = new PaginationIndicator({style_class: 'pages-indicator'});
         let layout = new Clutter.BinLayout();
@@ -687,15 +689,7 @@ const AllView = new Lang.Class({
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
 
-        // Update grid dinamyc spacing based on display width
-        let spacing = this._grid.maxSpacingForWidthHeight(availWidth, availHeight, MIN_COLUMNS, MIN_ROWS, 
true);
-        // Calculate pagination values
-        this._grid.calculatePaginationValues(availWidth, availHeight);
-        this._grid.top_padding = spacing;
-        this._grid.bottom_padding = spacing;
-        this._grid.left_padding = spacing;
-        this._grid.right_padding = spacing;
-        this._grid.setSpacing(spacing);
+        this._grid.calculateResponsiveGrid(availWidth, availHeight);
         // Update folder views
         for(let id in this._folderIcons) {
             this._folderIcons[id].onUpdatedDisplaySize(availWidth, availHeight);
@@ -711,7 +705,8 @@ const FrequentView = new Lang.Class({
                                              fillParent: true,
                                              minRows: MIN_ROWS,
                                              minColumns: MIN_COLUMNS,
-                                             columnLimit: MAX_COLUMNS });
+                                             columnLimit: MAX_COLUMNS,
+                                             useSurroundingSpacing: true });
         this.actor = new St.Widget({ style_class: 'frequent-apps',
                                      x_expand: true, y_expand: true });
         this.actor.add_actor(this._grid.actor);
@@ -729,7 +724,7 @@ const FrequentView = new Lang.Class({
             if (!mostUsed[i].get_app_info().should_show())
                 continue;
             let appIcon = new AppIcon(mostUsed[i]);
-            this._grid.addItem(appIcon.actor, -1);
+            this._grid.addItem(appIcon, -1);
         }
     },
 
@@ -743,12 +738,7 @@ const FrequentView = new Lang.Class({
         box = this._grid.actor.get_theme_node().get_content_box(box);
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
-        let spacing = this._grid.maxSpacingForWidthHeight(availWidth, availHeight, MIN_COLUMNS, MIN_ROWS, 
true);
-        this._grid.top_padding = spacing;
-        this._grid.bottom_padding = spacing;
-        this._grid.left_padding = spacing;
-        this._grid.right_padding = spacing;
-        this._grid.setSpacing(spacing);
+        this._grid.calculateResponsiveGrid(availWidth, availHeight);
     }
 });
 
@@ -1035,7 +1025,7 @@ const FolderView = new Lang.Class({
     Extends: AlphabeticalView,
 
     _init: function() {
-        this.parent();
+       this.parent({ useSurroundingSpacing: true });
         // If it not expand, the parent doesn't take into account its preferred_width when allocating
         // the second time it allocates, so we apply the "Standard hack for ClutterBinLayout"
         this._grid.actor.x_expand = true;
@@ -1089,11 +1079,11 @@ const FolderView = new Lang.Class({
         this._appDisplayWidth = width;
         this._appDisplayHeight = height;
         // Update grid dinamyc spacing based on display width
-        let spacing = this._grid.maxSpacingForWidthHeight(width, height, MIN_COLUMNS, MIN_ROWS, true);
-        this._grid.setSpacing(spacing);
+        this._grid.calculateResponsiveGrid(width, height);
         if(!Object.keys(this._boxPointerOffsets).length)
             return;
 
+        let spacing = this._grid.getSpacing();
         let boxPointerTotalOffset = this._boxPointerOffsets['arrowHeight'] +
                                     this._boxPointerOffsets['paddingTop'] +
                                     this._boxPointerOffsets['paddingBottom'] +
@@ -1128,7 +1118,7 @@ const FolderView = new Lang.Class({
 
     usedHeight: function() {
         // Then calculate the real maxUsedHeight
-        return this._grid.usedHeightForNRows(this.nRowsDisplayedAtOnce()) + this._grid.top_padding + 
this._grid.bottom_padding;
+        return this._grid.usedHeightForNRows(this.nRowsDisplayedAtOnce());
     },
 
     nRowsDisplayedAtOnce: function() {
@@ -1195,7 +1185,7 @@ const FolderIcon = new Lang.Class({
 
         let label = this._dir.get_name();
         this.icon = new IconGrid.BaseIcon(label,
-                                          { createIcon: Lang.bind(this, this._createIcon) });
+                                          { createIcon: Lang.bind(this, this._createIcon), setSizeManually: 
true });
         this.actor.set_child(this.icon.actor);
         this.actor.label_actor = this.icon.label;
 
@@ -1218,8 +1208,16 @@ const FolderIcon = new Lang.Class({
         }));
     },
 
-    _createIcon: function(size) {
-        return this.view.createFolderIcon(size, this);
+    _createIcon: function(iconSize) {
+        return this.view.createFolderIcon(iconSize, this);
+    },
+
+    getIconSize: function() {
+        return this.icon.iconSize;
+    },
+
+    setIconSize: function(size) {
+        this.icon.setIconSize(size);
     },
 
     _popUpGridWidth: function() {
@@ -1499,6 +1497,7 @@ const AppIcon = new Lang.Class({
             iconParams = {};
 
         iconParams['createIcon'] = Lang.bind(this, this._createIcon);
+        iconParams['setSizeManually'] = true;
         this.icon = new IconGrid.BaseIcon(app.get_name(), iconParams);
         this.actor.set_child(this.icon.actor);
 
@@ -1546,6 +1545,14 @@ const AppIcon = new Lang.Class({
         return this.app.create_icon_texture(iconSize);
     },
 
+    getIconSize: function() {
+        return this.icon.iconSize;
+    },
+
+    setIconSize: function(size) {
+        this.icon.setIconSize(size);
+    },
+
     _removeMenuTimeout: function() {
         if (this._menuTimeoutId > 0) {
             Mainloop.source_remove(this._menuTimeoutId);
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index a6ab72e..66f0e67 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -3,13 +3,14 @@
 const Clutter = imports.gi.Clutter;
 const Shell = imports.gi.Shell;
 const St = imports.gi.St;
+const Meta = imports.gi.Meta;
 
 const Signals = imports.signals;
 const Lang = imports.lang;
 const Params = imports.misc.params;
 
-const ICON_SIZE = 48;
-
+const ICON_SIZE = 96;
+const MIN_ICON_SIZE = 16;
 
 const BaseIcon = new Lang.Class({
     Name: 'BaseIcon',
@@ -183,13 +184,15 @@ const IconGrid = new Lang.Class({
                                         minRows: 1,
                                         minColumns: 1,
                                         fillParent: false,
-                                        xAlign: St.Align.MIDDLE });
+                                        xAlign: St.Align.MIDDLE,
+                                        useSurroundingSpacing: true});
         this._rowLimit = params.rowLimit;
         this._colLimit = params.columnLimit;
         this._minRows = params.minRows;
         this._minColumns = params.minColumns;
         this._xAlign = params.xAlign;
         this._fillParent = params.fillParent;
+        this._useSurroundingSpacing = params.useSurroundingSpacing;
 
         this.top_padding = 0;
         this.bottom_padding = 0;
@@ -198,10 +201,11 @@ const IconGrid = new Lang.Class({
 
         this.actor = new St.BoxLayout({ style_class: 'icon-grid',
                                         vertical: true });
-
+        this._items = [];
         // Pulled from CSS, but hardcode some defaults here
         this._spacing = 0;
         this._hItemSize = this._vItemSize = ICON_SIZE;
+        this._fixedHItemSize = this._fixedVItemSize = undefined;
         this._grid = new Shell.GenericContainer();
         this.actor.add(this._grid, { expand: true, y_align: St.Align.START });
         this.actor.connect('style-changed', Lang.bind(this, this._onStyleChanged));
@@ -225,8 +229,8 @@ const IconGrid = new Lang.Class({
         // Kind of a lie, but not really an issue right now.  If
         // we wanted to support some sort of hidden/overflow that would
         // need higher level design
-        alloc.min_size = this._hItemSize + this.left_padding + this.right_padding;
-        alloc.natural_size = nColumns * this._hItemSize + totalSpacing + this.left_padding + 
this.right_padding;
+        alloc.min_size = this.getHItemSize() + this.left_padding + this.right_padding;
+        alloc.natural_size = nColumns * this.getHItemSize() + totalSpacing + this.left_padding + 
this.right_padding;
     },
 
     _getPreferredHeight: function (grid, forWidth, alloc) {
@@ -251,7 +255,7 @@ const IconGrid = new Lang.Class({
         if (this._rowLimit)
             nRows = Math.min(nRows, this._rowLimit);
         let totalSpacing = Math.max(0, nRows - 1) * this.getSpacing();
-        let height = nRows * this._vItemSize + totalSpacing + this.top_padding + this.bottom_padding;
+        let height = nRows * this.getVItemSize() + totalSpacing + this.top_padding + this.bottom_padding;
         alloc.min_size = height;
         alloc.natural_size = height;
     },
@@ -308,10 +312,10 @@ const IconGrid = new Lang.Class({
             }
 
             if (columnIndex == 0) {
-                y += this._vItemSize + spacing;
+                y += this.getVItemSize() + spacing;
                 x = box.x1 + leftEmptySpace + this.left_padding;
             } else {
-                x += this._hItemSize + spacing;
+                x += this.getHItemSize() + spacing;
             }
         }
     },
@@ -321,9 +325,9 @@ const IconGrid = new Lang.Class({
              child.get_preferred_size();
 
         /* Center the item in its allocation horizontally */
-        let width = Math.min(this._hItemSize, childNaturalWidth);
+        let width = Math.min(this.getHItemSize(), childNaturalWidth);
         let childXSpacing = Math.max(0, width - childNaturalWidth) / 2;
-        let height = Math.min(this._vItemSize, childNaturalHeight);
+        let height = Math.min(this.getVItemSize(), childNaturalHeight);
         let childYSpacing = Math.max(0, height - childNaturalHeight) / 2;
 
         let childBox = new Clutter.ActorBox();
@@ -345,8 +349,8 @@ const IconGrid = new Lang.Class({
         let spacing = this.getSpacing();
 
         while ((this._colLimit == null || nColumns < this._colLimit) &&
-               (usedWidth + this._hItemSize <= forWidth)) {
-            usedWidth += this._hItemSize + spacing;
+               (usedWidth + this.getHItemSize() <= forWidth)) {
+            usedWidth += this.getHItemSize() + spacing;
             nColumns += 1;
         }
 
@@ -372,7 +376,7 @@ const IconGrid = new Lang.Class({
         return children;
     },
 
-    childrenInRow: function(rowWidth) {
+    columnsForWidth: function(rowWidth) {
         return this._computeLayout(rowWidth)[0];
     },
 
@@ -401,7 +405,7 @@ const IconGrid = new Lang.Class({
 
     rowsForHeight: function(forHeight) {
         forHeight -= this.top_padding + this.bottom_padding;
-        let spacePerRow = this._vItemSize + this.getSpacing();
+        let spacePerRow = this.getVItemSize() + this.getSpacing();
         let rowsPerPage = Math.floor(forHeight / spacePerRow);
         // Check if deleting spacing from bottom there's enough space for another row
         let spaceWithOneMoreRow = (rowsPerPage + 1) * spacePerRow - this.getSpacing();
@@ -411,25 +415,33 @@ const IconGrid = new Lang.Class({
 
     usedHeightForNRows: function(nRows) {
         let spacePerRow = this.rowHeight();
-        return spacePerRow * nRows - this.getSpacing();
+        return spacePerRow * nRows - this.getSpacing() + this.top_padding + this.bottom_padding;
     },
 
     usedWidth: function(forWidth) {
-        let childrenInRow = this.childrenInRow(forWidth);
-        let usedWidth = childrenInRow  * (this._hItemSize + this.getSpacing());
+        let columnsForWidth = this.columnsForWidth(forWidth);
+        let usedWidth = columnsForWidth  * (this.getHItemSize() + this.getSpacing());
+        usedWidth -= this.getSpacing();
+        return usedWidth + this.left_padding + this.right_padding;
+    },
+
+    usedWidthForNColumns: function(columns) {
+        let usedWidth = columns  * (this.getHItemSize() + this.getSpacing());
         usedWidth -= this.getSpacing();
         return usedWidth + this.left_padding + this.right_padding;
     },
 
     removeAll: function() {
+        this._items = [];
         this._grid.destroy_all_children();
     },
 
-    addItem: function(actor, index) {
+    addItem: function(item, index) {
+        this._items.push(item);
         if (index !== undefined)
-            this._grid.insert_child_at_index(actor, index);
+            this._grid.insert_child_at_index(item.actor, index);
         else
-            this._grid.add_actor(actor);
+            this._grid.add_actor(item.actor);
     },
 
     getItemAtIndex: function(index) {
@@ -448,6 +460,14 @@ const IconGrid = new Lang.Class({
         return this._fixedSpacing ? this._fixedSpacing : this._spacing;
     },
 
+    getHItemSize: function() {
+        return this._fixedHItemSize ? this._fixedHItemSize : this._hItemSize;
+    },
+
+    getVItemSize: function() {
+        return this._fixedVItemSize ? this._fixedVItemSize : this._vItemSize;
+    },
+
     /**
      * This function is intended to use before iconGrid allocation, to know how much spacing can we have at 
the grid
      * but also to set manually the top/bottom rigth/left padding accordnly to the spacing calculated here.
@@ -456,26 +476,98 @@ const IconGrid = new Lang.Class({
      */
     maxSpacingForWidthHeight: function(availWidth, availHeight) {
         // Maximum spacing will be the icon item size. It doesn't make any sense to have more spacing than 
items.
-        let maxSpacing = Math.floor(Math.min(this._vItemSize, this._hItemSize));
-        let minEmptyVerticalArea = availHeight - this._minRows * this._vItemSize;
-        let minEmptyHorizontalArea = availWidth - this._minColumns * this._hItemSize;
+        let maxSpacing = Math.floor(Math.min(this.getVItemSize(), this.getHItemSize()));
+        let minEmptyVerticalArea = availHeight - this._minRows * this.getVItemSize();
+        let minEmptyHorizontalArea = availWidth - this._minColumns * this.getHItemSize();
         let spacing;
-        let maxSpacingForRows, maxSpacingForColumns;
-        if(this._minRows == 1) {
-            maxSpacingForRows = Math.floor(minEmptyVerticalArea / this._minRows);
-            maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / this._minColumns);
+        if(this._useSurroundingSpacing) {
+            // minRows + 1 because we want to put spacing before the first row, so it is like we have one 
more row
+            // to divide the empty space
+            let maxSpacingForRows = Math.floor(minEmptyVerticalArea / (this._minRows +1));
+            let maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (this._minColumns +1));
+            let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
+            let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
+            spacing = Math.max(this._spacing, spacingNotTooBig);
         } else {
-            maxSpacingForRows = Math.floor(minEmptyVerticalArea / (this._minRows - 1));
-            maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (this._minColumns - 1));
+            let maxSpacingForRows, maxSpacingForColumns;
+            if(this._minRows == 1) {
+                maxSpacingForRows = Math.floor(minEmptyVerticalArea / this._minRows);
+                maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / this._minColumns);
+            } else {
+                maxSpacingForRows = Math.floor(minEmptyVerticalArea / (this._minRows - 1));
+                maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (this._minColumns - 1));
+            }
+            let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
+            let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
+            spacing = Math.max(this._spacing, spacingNotTooBig); 
         }
-        let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
-        let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
-        spacing = Math.max(this._spacing, spacingNotTooBig);
         return spacing;
     },
 
+    calculateResponsiveGrid: function(availWidth, availHeight) {
+        this._fixedHItemSize = this._hItemSize;
+        this._fixedVItemSize = this._vItemSize;
+        let spacing = this.maxSpacingForWidthHeight(availWidth, availHeight);
+        this.setSpacing(spacing);
+        if(this._useSurroundingSpacing)
+            this.top_padding = this.bottom_padding = this.right_padding = this.left_padding = spacing;
+
+        let count = 0;
+        if(this.columnsForWidth(availWidth) < this._minColumns || this.rowsForHeight(availHeight) < 
this._minRows) {
+            let neededWidth, neededHeight;
+            if(this._useSurroundingSpacing)
+                neededWidth = this.usedWidthForNColumns(this._minColumns) - availWidth ;
+            else
+                neededWidth = this.usedWidthForNColumns(this._minColumns) - availWidth ;
+
+            if(this._useSurroundingSpacing)
+                neededHeight = this.usedHeightForNRows(this._minRows) - availHeight;
+            else
+                neededHeight = this.usedHeightForNRows(this._minRows) - availHeight ;
+
+            if(neededWidth > neededHeight) {
+                let neededSpaceForEachItem = Math.ceil(neededWidth / this._minColumns);
+                this._fixedHItemSize = this._hItemSize - neededSpaceForEachItem;
+                this._fixedVItemSize = this._vItemSize - neededSpaceForEachItem;
+            } else {
+                let neededSpaceForEachItem = Math.ceil(neededHeight / this._minRows);
+                this._fixedHItemSize = this._hItemSize - neededSpaceForEachItem;
+                this._fixedVItemSize = this._vItemSize - neededSpaceForEachItem;
+            }
+
+            if(this._fixedHItemSize < MIN_ICON_SIZE)
+                this._fixedHItemSize = MIN_ICON_SIZE;
+            if(this._fixedVItemSize < MIN_ICON_SIZE)
+                this._fixedVItemSize = MIN_ICON_SIZE;
+
+            let spacing = this.maxSpacingForWidthHeight(availWidth, availHeight);
+            this.setSpacing(spacing);
+            if(this._useSurroundingSpacing)
+                this.top_padding = this.bottom_padding = this.right_padding = this.left_padding = spacing;
+        }
+        let scale = Math.min(this._fixedHItemSize, this._fixedVItemSize) / Math.max(this._hItemSize, 
this._vItemSize);
+        this.updateChildrenScale(scale);
+    },
+
+    /**
+     * We are supossing that the this._items contain some item that we can set its size. 
+     * Also, we suposse that they are icons, and the original size is ICON_SIZE, to let the good icon size 
when updating the size.
+     * Also, we supose that we need a Meta.later, since when we call calculateResponsiveGrid that calls 
updateChildrenScale
+     * we are inside the allocation of the AppDisplay, and modifinyg icon size can cause allocation cycles
+     * So this functions is not intentded to be called outside this class, lets think a little about that. 
Now reescaling icons
+     * works fine at least.
+     */
+    updateChildrenScale: function(scale) {
+        Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this, function() {
+            for(let i in this._items) {
+                let newIconSize = Math.floor(ICON_SIZE * scale);
+                this._items[i].setIconSize(newIconSize);
+            }
+        }));
+    },
+
     rowHeight: function() {
-        return this._vItemSize + this.getSpacing();
+        return this.getVItemSize() + this.getSpacing();
     }
 });
 Signals.addSignalMethods(IconGrid.prototype);
@@ -543,12 +635,12 @@ const PaginatedIconGrid = new Lang.Class({
                 rowIndex++;
             }
             if (columnIndex == 0) {
-                y += this._vItemSize + spacing;
+                y += this.getVItemSize() + spacing;
                 if((i + 1) % this._childrenPerPage == 0)
                     y+= - spacing + this._spaceBetweenPages + this.bottom_padding + this.top_padding ;
                 x = box.x1 + leftEmptySpace + this.left_padding;
             } else
-                x += this._hItemSize + spacing;
+                x += this.getHItemSize() + spacing;
         }
     },
 
@@ -566,7 +658,7 @@ const PaginatedIconGrid = new Lang.Class({
         let oldNPages = this._nPages;
 
         let spacing = this.getSpacing();
-        this._spacePerRow = this._vItemSize + spacing;
+        this._spacePerRow = this.getVItemSize() + spacing;
         // We want to contain the grid inside the parent box with padding
         availHeightPerPage -= this.top_padding + this.bottom_padding;
         this._rowsPerPage = Math.floor(availHeightPerPage / this._spacePerRow);
@@ -574,8 +666,8 @@ const PaginatedIconGrid = new Lang.Class({
         let spaceWithOneMoreRow = (this._rowsPerPage + 1) * this._spacePerRow - spacing;
         this._rowsPerPage = spaceWithOneMoreRow <= availHeightPerPage? this._rowsPerPage + 1 : 
this._rowsPerPage;
         this._nPages = Math.ceil(nRows / this._rowsPerPage);
-        this._spaceBetweenPages = availHeightPerPage - (this.usedHeightPerPage() - this.top_padding - 
this.bottom_padding);
-        this._spaceBetweenPagesTotal = this._spaceBetweenPages * this._nPages;
+        this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this.getVItemSize() + spacing) 
- spacing);
+        this._spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
         this._childrenPerPage = nColumns * this._rowsPerPage;
 
         // Take into account when the number of pages changed (then the height of the entire grid changed 
for sure)
@@ -586,6 +678,11 @@ const PaginatedIconGrid = new Lang.Class({
         }
     },
 
+    calculateResponsiveGrid: function(availWidth, availHeight) {
+        this.parent(availWidth, availHeight);
+        this.calculatePaginationValues(availWidth, availHeight);
+    },
+
     rowsPerPage: function() {
         return this._rowsPerPage;
     },
diff --git a/js/ui/searchDisplay.js b/js/ui/searchDisplay.js
index 2177874..a7a1cde 100644
--- a/js/ui/searchDisplay.js
+++ b/js/ui/searchDisplay.js
@@ -320,14 +320,14 @@ const GridSearchResults = new Lang.Class({
     },
 
     _getMaxDisplayedResults: function() {
-        return this._grid.childrenInRow(this._bin.width) * this._grid.getRowLimit();
+        return this._grid.columnsForWidth(this._bin.width) * this._grid.getRowLimit();
     },
 
     _renderResults: function(metas) {
         for (let i = 0; i < metas.length; i++) {
             let display = new GridSearchResult(this.provider, metas[i], this._terms);
             display.actor.connect('key-focus-in', Lang.bind(this, this._keyFocusIn));
-            this._grid.addItem(display.actor);
+            this._grid.addItem(display);
         }
     },
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]