[gnome-shell/wip/paging-release2: 7/12] AppDisplay: FolderView and FolderIcon new implementation



commit e52bab64df5da4386bf4134e31ded6f79be61775
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Tue Aug 20 11:20:23 2013 +0200

    AppDisplay: FolderView and FolderIcon new implementation
    
    The popup of the FolderView is now contained inside
    the parent view, solving the overflow with a ScrollView.
    Also, solved a lot of bugs in popup/FolderView calculation
    of position and size.

 js/ui/appDisplay.js |  288 +++++++++++++++++++++++++++++++++++++++++++++------
 js/ui/boxpointer.js |    8 ++
 js/ui/iconGrid.js   |   97 +++++++++++++----
 3 files changed, 339 insertions(+), 54 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 955f73e..375cf50 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -292,6 +292,8 @@ const AllView = new Lang.Class({
 
         this._grid.connect('n-pages-changed', Lang.bind(this, this._updatedNPages));
 
+        this._folderIcons = [];
+
         this._stack = new St.Widget({ layout_manager: new Clutter.BinLayout() });
         this._box = new St.BoxLayout({ vertical: true });
         this._verticalAdjustment = new St.Adjustment();
@@ -461,9 +463,11 @@ const AllView = new Lang.Class({
     _createItemIcon: function(item) {
         if (item instanceof Shell.App)
             return new AppIcon(item);
-        else if (item instanceof GMenu.TreeDirectory)
-            return new FolderIcon(item, this);
-        else
+        else if (item instanceof GMenu.TreeDirectory) {
+            let folderIcon = new FolderIcon(item, this);
+            this._folderIcons.push(folderIcon);
+            return folderIcon;
+        } else
             return null;
     },
 
@@ -475,6 +479,11 @@ const AllView = new Lang.Class({
         return (nameA > nameB) ? 1 : (nameA < nameB ? -1 : 0);
     },
 
+    removeAll: function() {
+        this._folderIcons = [];
+        this.parent();
+    },
+
     addApp: function(app) {
         this._addItem(app);
     },
@@ -545,6 +554,10 @@ const AllView = new Lang.Class({
         this._grid.left_padding = spacing;
         this._grid.right_padding = spacing;
         this._grid.setSpacing(spacing);
+        // Update folder views
+        for (let id in this._folderIcons) {
+            this._folderIcons[id].onUpdatedDisplaySize(availWidth, availHeight);
+        }
     }
 });
 
@@ -881,7 +894,19 @@ const FolderView = new Lang.Class({
 
     _init: function() {
         this.parent();
-        this.actor = this._grid.actor;
+        // 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;
+
+        this.actor = new St.ScrollView({ overlay_scrollbars: true });
+        this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        this._box = new St.BoxLayout({ vertical: true, reactive: true });
+        this._widget = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._widget.add_child(this._grid.actor);
+        this._box.add_actor(this._widget);
+        this.actor.add_actor(this._box);
+
+        this._boxPointerOffsets = {};
     },
 
     _getItemId: function(item) {
@@ -915,8 +940,89 @@ const FolderView = new Lang.Class({
             bin.set_y_align(aligns[Math.floor(i / 2)]);
             icon.add_actor(bin);
         }
-
         return icon;
+    },
+
+    onUpdatedDisplaySize: function(width, height) {
+        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);
+        if (!Object.keys(this._boxPointerOffsets).length)
+            return;
+
+        let boxPointerTotalOffset = this._boxPointerOffsets['arrowHeight'] +
+                                    this._boxPointerOffsets['paddingTop'] +
+                                    this._boxPointerOffsets['paddingBottom'] +
+                                    this._boxPointerOffsets['closeButtonOverlap'];
+        let offsetForEachSide = Math.ceil(boxPointerTotalOffset / 2);
+        this._offsetForEachSide = offsetForEachSide;
+        this._grid.top_padding = spacing - offsetForEachSide;
+        this._grid.bottom_padding = spacing - offsetForEachSide;
+        this._grid.left_padding = spacing - offsetForEachSide;
+        this._grid.right_padding = spacing - offsetForEachSide;
+    },
+
+    _containerBox: function() {
+        let pageBox = new Clutter.ActorBox();
+        pageBox.x1 = 0;
+        pageBox.y1 = 0;
+        pageBox.x2 = this._appDisplayWidth;
+        pageBox.y2 = this._appDisplayHeight;
+        return this.actor.get_theme_node().get_content_box(pageBox);
+    },
+
+    usedWidth: function() {
+        let box = this._containerBox();
+        let availWidthPerPage = box.x2 - box.x1;
+        // We only can show icons inside the collection view boxPointer
+        // so we have to substract the required padding etc of the boxpointer
+        // to make the calculation of used width right
+        availWidthPerPage -= 2 * this._offsetForEachSide;
+        let maxUsedWidth = this._grid.usedWidth(availWidthPerPage);
+        return maxUsedWidth;
+    },
+
+    usedHeight: function() {
+        // Then calculate the real maxUsedHeight
+        return this._grid.usedHeightForNRows(this.nRowsDisplayedAtOnce()) + this._grid.top_padding + 
this._grid.bottom_padding;
+    },
+
+    nRowsDisplayedAtOnce: function() {
+        let box = this._containerBox();
+        let availHeightPerPage = box.y2 - box.y1;
+        let availWidthPerPage = box.x2 - box.x1;
+        // We only can show icons inside the collection view boxPointer
+        // so we have to substract the required padding etc of the boxpointer
+        // to make the calculation of the rows we can show right
+        availWidthPerPage -= 2 * this._offsetForEachSide;
+        availHeightPerPage -= 2 * this._offsetForEachSide;
+
+        let maxRowsDisplayedAtOnce = this.maxRowsDisplayedAtOnce();
+        let usedRows = this._grid.nUsedRows(availWidthPerPage);
+        usedRows = usedRows <= maxRowsDisplayedAtOnce ? usedRows : maxRowsDisplayedAtOnce;
+        return usedRows;
+    },
+
+    maxRowsDisplayedAtOnce: function() {
+        let box = this._containerBox();
+        let availHeightPerPage = box.y2 - box.y1;
+        // We only can show icons inside the collection view boxPointer
+        // so we have to substract the required padding etc of the boxpointer
+        // to make the calculation of the rows we can show right
+        availHeightPerPage -= 2 * this._offsetForEachSide;
+        let maxRowsPerPage = this._grid.rowsForHeight(availHeightPerPage);
+        //Then, we can only show that rows least one.
+        maxRowsPerPage -= 1;
+        return maxRowsPerPage;
+    },
+    
+    updateBoxPointerOffsets: function(boxPointerOffsets) {
+        // We have to ensure the folder view boxpointer and the close button
+        // doesn't go outside boundary, so we have to take into account the
+        // arrow size, the padding of the boxpointer and the close button displacement
+        this._boxPointerOffsets = boxPointerOffsets;
     }
 });
 
@@ -934,6 +1040,12 @@ const FolderIcon = new Lang.Class({
                                      x_fill: true,
                                      y_fill: true });
         this.actor._delegate = this;
+        // when changing screen resolution or during clutter "false" allocations
+        // we have to tell collection view that the calculated values of boxpointer arrow side, position, 
etc 
+        // are not correct (since the allocated size of pagination changed)
+        // For that problem we calculate everything again and apply it maintaining current popup.
+        this.invalidatePopUp = false;
+        this._boxPointerOffsets = {};
 
         let label = this._dir.get_name();
         this.icon = new IconGrid.BaseIcon(label,
@@ -942,7 +1054,6 @@ const FolderIcon = new Lang.Class({
         this.actor.label_actor = this.icon.label;
 
         this.view = new FolderView();
-        this.view.actor.reactive = false;
         _loadCategory(dir, this.view);
         this.view.loadGrid();
 
@@ -959,38 +1070,133 @@ const FolderIcon = new Lang.Class({
     },
 
     _createIcon: function(size) {
-        return this.view.createFolderIcon(size);
+        return this.view.createFolderIcon(size, this);
+    },
+
+    _popUpGridWidth: function() {
+        return this.view.usedWidth();
+    },
+
+    _popUpGridHeight: function() {
+        let usedHeight = this.view.usedHeight();
+        return usedHeight;   
+    },
+
+    _popUpHeight: function() {
+        let usedHeight = this.view.usedHeight() + this._boxPointerOffsets['arrowHeight'] +
+                         this._boxPointerOffsets['paddingTop'] + this._boxPointerOffsets['paddingBottom'];
+        return usedHeight;   
+    },
+
+    _calculateBoxPointerArrowSide: function() {
+        let absoluteActorYPosition = this.actor.get_transformed_position()[1];
+        let spaceTop = absoluteActorYPosition;
+        // Be careful, we don't take into account the top panel height etc,
+        // So maybe we put an arrow side "wrong", but anyway, the expanding of colelction view will
+        // do the required space and all will go fine
+        let spaceBottom = this.actor.get_stage().height - (absoluteActorYPosition + this.actor.height);
+        return spaceTop > spaceBottom ? St.Side.BOTTOM : St.Side.TOP;
+    },
+
+    _updatePopUpSize: function() {
+        /**
+         * Why we need that: AppDiplay update width for the spacing for all
+         * views Allview and frequent view and folder views calcualte spacing
+         * with the items of icongrid with harcoded values
+         * 
+         * Open overview, then iconSizes changes in allview and frequent view
+         * icongrids, which is the actors who are added to the main AppDisplay.
+         * Then a relayout occurs. AppDiplay update width for the spacing for
+         * all views Allview and frequent view and folder views calcualte
+         * spacing with the items of icongrid, which allview and frequetn view
+         * has the new values, but folderview has the hardcoded values, since
+         * folderview icongrid is not still added to the main Actor, and then,
+         * they didn't emitted style changed signal with new valuesw of item
+         * sizes. Then, frequent view and all view has correct spacing and item
+         * size values, and fodler view has incorrect size and spacing values.
+         * Then, we click icon folder, a folderIcon popup is created and added
+         * to the parent actor, then the style changes, and item size changes,
+         * but spacing is the old one. Then, we calculate the position of the
+         * popup, but, the required height is with the old spacing and new item
+         * sizes, so the height is bigger, then the position is bad. Then,
+         * appDisplay allocate all views updating spacing, and set the good
+         * spacing to folder view, then allocate the folder view, but the
+         * positoon of the boxpointer is already calcualted with the old
+         * spacing, so the boxpointer is displaced.
+         * 
+         * Solution: ensure style of the grid just after we add it to the parent
+         * and before the calculation of the position.
+         */
+
+        this.view._grid.actor.ensure_style();
+        this._boxPointerOffsets['arrowHeight'] = this._popup.getOffset('arrowHeight');
+        this._boxPointerOffsets['paddingTop'] = this._popup.getOffset('padding', St.Side.TOP);
+        this._boxPointerOffsets['paddingBottom'] = this._popup.getOffset('padding', St.Side.BOTTOM);
+        //It will be negative value, so we have to substract it, instead of add it.
+        this._boxPointerOffsets['closeButtonOverlap'] = - this._popup.getOffset('closeButtonOverlap');
+
+        this.view.updateBoxPointerOffsets(this._boxPointerOffsets);
+        this.view.onUpdatedDisplaySize(this._displayWidth, this._displayHeight);
+        /*
+         * Always make the grid (and therefore the boxpointer) to be the max
+         * width it can be if it use full icon rows, althougth there's less
+         * icons than necesary to full the row. In that manner the popup will be
+         * more eye pleasant, filling the parent view
+         */
+        this.view.actor.set_width(this._popUpGridWidth());
+        /*
+         * A folder view can only be, at a maximum, one row less than the parent
+         * view, so calculate the maximum rows it can have, and then substract one,
+         * then calculate the maxUsedHeigth and the current used height, if it
+         * is more, strech to the maxUsedHeight
+         */
+        this.view.actor.set_height(this._popUpGridHeight());
+    },
+
+    _updatePopupPosition: function() {
+        if (this._popup) {
+            // Position the popup above or below the source icon
+            if (this._boxPointerArrowside == St.Side.BOTTOM) {
+                let closeButtonOffset = -this._popup.closeButton.translation_y;
+                // We have to use this function, since this._popup.actor.height not always return a good 
value (32 px??)
+                // and then all this calculation of position fails. To solve this in this function we 
calculate the used height with the grid
+                // since we know all of the properties of grid. Then we add the padding, arrowheigth etc of 
boxpointer, and we have the
+                // used height of the popup
+                let y = this.actor.y - this._popUpHeight();
+                let yWithButton = y - closeButtonOffset;
+                this._popup.parentOffset = yWithButton < 0 ? -yWithButton : 0;
+                this._popup.actor.y = Math.max(y, closeButtonOffset);
+                this._popup.actor.y = y
+            } else
+                this._popup.actor.y = this.actor.y + this.actor.height;
+        }
     },
 
     _ensurePopup: function() {
-        if (this._popup)
+        if (this._popup && !this.invalidatePopUp)
             return;
-
-        let spaceTop = this.actor.y;
-        let spaceBottom = this._parentView.actor.height - (this.actor.y + this.actor.height);
-        let side = spaceTop > spaceBottom ? St.Side.BOTTOM : St.Side.TOP;
-
-        this._popup = new AppFolderPopup(this, side);
-        this._parentView.addFolderPopup(this._popup);
-
-        // Position the popup above or below the source icon
-        if (side == St.Side.BOTTOM) {
-            this._popup.actor.show();
-            let closeButtonOffset = -this._popup.closeButton.translation_y;
-            let y = this.actor.y - this._popup.actor.height;
-            let yWithButton = y - closeButtonOffset;
-            this._popup.parentOffset = yWithButton < 0 ? -yWithButton : 0;
-            this._popup.actor.y = Math.max(y, closeButtonOffset);
-            this._popup.actor.hide();
-        } else {
-            this._popup.actor.y = this.actor.y + this.actor.height;
-        }
-
-        this._popup.connect('open-state-changed', Lang.bind(this,
-            function(popup, isOpen) {
-                if (!isOpen)
+        this._boxPointerArrowside = this._calculateBoxPointerArrowSide();
+        if (!this._popup) {
+            this._popup = new AppFolderPopup(this, this._boxPointerArrowside);
+            this._parentView.addFolderPopup(this._popup);
+            this._popup.connect('open-state-changed', Lang.bind(this,
+                    function(popup, isOpen) {
+                if (!isOpen) {
                     this.actor.checked = false;
+                }
             }));
+        } else
+            this._popup.updateBoxPointer(this._boxPointerArrowside);
+        this._updatePopUpSize();
+        this._updatePopupPosition();
+        this.invalidatePopUp = false; 
+    },
+
+    onUpdatedDisplaySize: function(width, height) {
+        this._displayWidth = width;
+        this._displayHeight = height;
+        this.view.onUpdatedDisplaySize(width, height);
+        this.invalidatePopUp = true;
     },
 });
 
@@ -1021,6 +1227,7 @@ const AppFolderPopup = new Lang.Class({
                                                      { style_class: 'app-folder-popup-bin',
                                                        x_fill: true,
                                                        y_fill: true,
+                                                       x_expand: true,
                                                        x_align: St.Align.START });
 
         this._boxPointer.actor.style_class = 'app-folder-popup';
@@ -1084,6 +1291,25 @@ const AppFolderPopup = new Lang.Class({
                               BoxPointer.PopupAnimation.SLIDE);
         this._isOpen = false;
         this.emit('open-state-changed', false);
+    },
+
+    updateBoxPointer: function (side) {
+        this._arrowSide = side;
+        this._boxPointer._arrowSide = side;
+        this._boxPointer._border.queue_repaint();
+    },
+
+    getOffset: function (element, side) {
+        let offset;
+        if (element == 'closeButtonOverlap')
+            offset = this.closeButton.get_theme_node().get_length('-shell-close-overlap-y');
+        else
+        if (element == 'arrowHeight')
+            offset = this._boxPointer.getArrowHeight();
+        else
+        if (element == 'padding')
+            offset = this._boxPointer.getPadding(side);
+        return offset;
     }
 });
 Signals.addSignalMethods(AppFolderPopup.prototype);
diff --git a/js/ui/boxpointer.js b/js/ui/boxpointer.js
index 2fd1a67..833d299 100644
--- a/js/ui/boxpointer.js
+++ b/js/ui/boxpointer.js
@@ -639,5 +639,13 @@ const BoxPointer = new Lang.Class({
 
     get opacity() {
         return this.actor.opacity;
+    },
+
+    getPadding: function(side) {
+        return this.bin.get_theme_node().get_padding(side);
+    },
+    
+    getArrowHeight: function() {
+        return this.actor.get_theme_node().get_length('-arrow-rise');
     }
 });
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 8be7c19..7bfe027 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -188,6 +188,11 @@ const IconGrid = new Lang.Class({
         this._xAlign = params.xAlign;
         this._fillParent = params.fillParent;
 
+        this.top_padding = 0;
+        this.bottom_padding = 0;
+        this.right_padding = 0;
+        this.left_padding = 0;
+
         this.actor = new St.BoxLayout({ style_class: 'icon-grid',
                                         vertical: true });
 
@@ -217,8 +222,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;
-        alloc.natural_size = nColumns * this._hItemSize + totalSpacing;
+        alloc.min_size = this._hItemSize + this.left_padding + this.right_padding;
+        alloc.natural_size = nColumns * this._hItemSize + totalSpacing + this.left_padding + 
this.right_padding;
     },
 
     _getPreferredHeight: function (grid, forWidth, alloc) {
@@ -243,7 +248,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;
+        let height = nRows * this._vItemSize + totalSpacing + this.top_padding + this.bottom_padding;
         alloc.min_size = height;
         alloc.natural_size = height;
     },
@@ -262,20 +267,20 @@ const IconGrid = new Lang.Class({
         let spacing = this.getSpacing();
         let [nColumns, usedWidth] = this._computeLayout(availWidth);
 
-        let leftPadding;
+        let leftEmptySpace;
         switch(this._xAlign) {
             case St.Align.START:
-                leftPadding = 0;
+                leftEmptySpace = 0;
                 break;
             case St.Align.MIDDLE:
-                leftPadding = Math.floor((availWidth - usedWidth) / 2);
+                leftEmptySpace = Math.floor((availWidth - usedWidth) / 2);
                 break;
             case St.Align.END:
-                leftPadding = availWidth - usedWidth;
+                leftEmptySpace = availWidth - usedWidth;
         }
 
-        let x = box.x1 + leftPadding;
-        let y = box.y1;
+        let x = box.x1 + leftEmptySpace + this.left_padding;
+        let y = box.y1 + this.top_padding;
         let columnIndex = 0;
         let rowIndex = 0;
 
@@ -286,7 +291,7 @@ const IconGrid = new Lang.Class({
                 childBox.y2 += children[i].translate_y;
             }
             if (this._rowLimit && rowIndex >= this._rowLimit ||
-                this._fillParent && childBox.y2 > availHeight) {
+                this._fillParent && childBox.y2 > availHeight - this.bottom_padding) {
                 this._grid.set_skip_paint(children[i], true);
             } else {
                 children[i].allocate(childBox, flags);
@@ -301,7 +306,7 @@ const IconGrid = new Lang.Class({
 
             if (columnIndex == 0) {
                 y += this._vItemSize + spacing;
-                x = box.x1 + leftPadding;
+                x = box.x1 + leftEmptySpace + this.left_padding;
             } else {
                 x += this._hItemSize + spacing;
             }
@@ -333,7 +338,7 @@ const IconGrid = new Lang.Class({
 
     _computeLayout: function (forWidth) {
         let nColumns = 0;
-        let usedWidth = 0;
+        let usedWidth = this.left_padding + this.right_padding;
         let spacing = this.getSpacing();
 
         while ((this._colLimit == null || nColumns < this._colLimit) &&
@@ -372,6 +377,46 @@ const IconGrid = new Lang.Class({
         return this._rowLimit;
     },
 
+    nUsedRows: function(forWidth) {
+        let children = this._getVisibleChildren();
+        let nColumns;
+        if (forWidth < 0)
+            nColumns = children.length;
+        else
+            [nColumns, ] = this._computeLayout(forWidth);
+
+        let nRows;
+        if (nColumns > 0)
+            nRows = Math.ceil(children.length / nColumns);
+        else
+            nRows = 0;
+        if (this._rowLimit)
+            nRows = Math.min(nRows, this._rowLimit);
+        return nRows;
+    },
+
+    rowsForHeight: function(forHeight) {
+        forHeight -= this.top_padding + this.bottom_padding;
+        let spacePerRow = this._vItemSize + 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();
+        rowsPerPage = spaceWithOneMoreRow <= forHeight? rowsPerPage + 1 : rowsPerPage;
+        return rowsPerPage;
+    },
+
+    usedHeightForNRows: function(nRows) {
+        let spacePerRow = this.rowHeight();
+        return spacePerRow * nRows - this.getSpacing();
+    },
+
+    usedWidth: function(forWidth) {
+        let childrenInRow = this.childrenInRow(forWidth);
+        let usedWidth = childrenInRow  * (this._hItemSize + this.getSpacing());
+        usedWidth -= this.getSpacing();
+        return usedWidth + this.left_padding + this.right_padding;
+    },
+
     removeAll: function() {
         this._grid.destroy_all_children();
     },
@@ -424,6 +469,10 @@ const IconGrid = new Lang.Class({
         spacing = Math.max(this._spacing, spacingNotTooBig);
         return spacing;
     },
+
+    rowHeight: function() {
+        return this._vItemSize + this.getSpacing();
+    }
 });
 Signals.addSignalMethods(IconGrid.prototype);
 
@@ -458,20 +507,20 @@ const PaginatedIconGrid = new Lang.Class({
         let spacing = this.getSpacing();
         let [nColumns, usedWidth] = this._computeLayout(availWidth);
 
-        let leftPadding;
+        let leftEmptySpace;
         switch(this._xAlign) {
             case St.Align.START:
-                leftPadding = 0;
+                leftEmptySpace = 0;
                 break;
             case St.Align.MIDDLE:
-                leftPadding = Math.floor((availWidth - usedWidth) / 2);
+                leftEmptySpace = Math.floor((availWidth - usedWidth) / 2);
                 break;
             case St.Align.END:
-                leftPadding = availWidth - usedWidth;
+                leftEmptySpace = availWidth - usedWidth;
         }
 
-        let x = box.x1 + leftPadding;
-        let y = box.y1;
+        let x = box.x1 + leftEmptySpace + this.left_padding;
+        let y = box.y1 + this.top_padding;
         let columnIndex = 0;
         let rowIndex = 0;
 
@@ -492,8 +541,8 @@ const PaginatedIconGrid = new Lang.Class({
             if (columnIndex == 0) {
                 y += this._vItemSize + spacing;
                 if((i + 1) % this._childrenPerPage == 0)
-                    y += this._spaceBetweenPages - spacing;
-                x = box.x1 + leftPadding;
+                    y+= - spacing + this._spaceBetweenPages + this.bottom_padding + this.top_padding ;
+                x = box.x1 + leftEmptySpace + this.left_padding;
             } else
                 x += this._hItemSize + spacing;
         }
@@ -514,12 +563,14 @@ const PaginatedIconGrid = new Lang.Class({
 
         let spacing = this.getSpacing();
         this._spacePerRow = this._vItemSize + 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);
         // Check if deleting spacing from bottom there's enough space for another row
         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._rowsPerPage * (this._vItemSize + spacing) - 
spacing);
+        this._spaceBetweenPages = availHeightPerPage - (this.usedHeightPerPage() - this.top_padding - 
this.bottom_padding);
         this._spaceBetweenPagesTotal = this._spaceBetweenPages * this._nPages;
         this._childrenPerPage = nColumns * this._rowsPerPage;
 
@@ -532,7 +583,7 @@ const PaginatedIconGrid = new Lang.Class({
     },
 
     usedHeightPerPage: function() {
-        return this._rowsPerPage * this._spacePerRow - this.getSpacing();
+        return this._rowsPerPage * this._spacePerRow - this.getSpacing() + this.top_padding + 
this.bottom_padding;
     },
 
     nPages: function() {
@@ -547,6 +598,6 @@ const PaginatedIconGrid = new Lang.Class({
         }
         let childBox = this._getVisibleChildren()[pageNumber *
                         this._childrenPerPage].get_allocation_box();
-        return [childBox.x1, childBox.y1];
+        return [childBox.x1 - this.top_padding, childBox.y1 - this.top_padding];
     }
 });


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