[gnome-shell/wip/paging-release2: 11/18] iconGrid, appDisplay: Use surrounding spacing on AllView and FrequentView

[Carlos Soriano <csoriano src gnome org>]

commit 8e5cd65464bb9213328bc0a1432ef0b13a950fef
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Fri Aug 23 11:14:21 2013 +0200

    iconGrid, appDisplay: Use surrounding spacing on AllView and FrequentView
    
    Add functions in iconGrid and adapt the main views to use surrounding
    spacing, which will allows in the next patch makes the folder view,
    with its new implementation, be contained inside the main views without
    cutting off the boxpointer or the close button.

 js/ui/appDisplay.js |    7 ++--
 js/ui/iconGrid.js   |   90 +++++++++++++++++++++++++++++++--------------------
 2 files changed, 59 insertions(+), 38 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index be0d187..6887c1a 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -72,7 +72,8 @@ const AlphabeticalView = new Lang.Class({
                                                 columnLimit: MAX_COLUMNS,
                                                 minRows: MIN_ROWS,
                                                 minColumns: MIN_COLUMNS,
-                                                fillParent: false });
+                                                fillParent: false,
+                                                useSurroundingSpacing: false });
         params = Params.parse(params, { usePagination: false });
         
         if(params['usePagination'])
@@ -261,7 +262,7 @@ const AllView = new Lang.Class({
     Extends: AlphabeticalView,
 
     _init: function() {
-        this.parent({ usePagination: true }, null);
+        this.parent({ usePagination: true }, { useSurroundingSpacing: true });
         this._pagesView = new PagesView(this, { style_class: 'all-apps',
                                                 x_align: St.Align.MIDDLE,
                                                 y_align: St.Align.MIDDLE });
@@ -527,7 +528,7 @@ const FrequentView = new Lang.Class({
     Extends: AlphabeticalView,
 
     _init: function() {
-        this.parent(null, { fillParent: true });
+        this.parent(null, { fillParent: true, useSurroundingSpacing: true });
         this.actor = new St.Widget({ style_class: 'frequent-apps',
                                      x_expand: true, y_expand: true });
         this.actor.add_actor(this._grid.actor);
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 186321b..8104952 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -180,13 +180,20 @@ 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;
+        this.right_padding = 0;
+        this.left_padding = 0;
 
         this.actor = new St.BoxLayout({ style_class: 'icon-grid',
                                         vertical: true });
@@ -217,8 +224,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;
     },
 
     _getVisibleChildren: function() {
@@ -250,7 +257,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;
     },
@@ -269,27 +276,27 @@ 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;
         for (let i = 0; i < children.length; i++) {
             let childBox = this._calculateChildBox(children[i], x, y, box);
 
             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);
@@ -304,7 +311,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;
             }
@@ -344,7 +351,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) &&
@@ -409,20 +416,31 @@ const IconGrid = new Lang.Class({
         let minEmptyHorizontalArea = availWidth - this._minColumns * this._hItemSize;
         let spacing;
         let maxSpacingForRows, maxSpacingForColumns;
-        if (this._minRows == 1)
-            maxSpacingForRows = Math.floor(minEmptyVerticalArea / this._minRows);
-        else
-            maxSpacingForRows = Math.floor(minEmptyVerticalArea / (this._minRows - 1));
 
-        if (this._minColumns == 1)
-            maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / this._minColumns);
-        else
-            maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (this._minColumns - 1));
-        
+        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
+            maxSpacingForRows = Math.floor(minEmptyVerticalArea / (this._minRows +1));
+            maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (this._minColumns +1));
+        } else {
+            if (this._minRows == 1)
+                maxSpacingForRows = Math.floor(minEmptyVerticalArea / this._minRows);
+            else
+                maxSpacingForRows = Math.floor(minEmptyVerticalArea / (this._minRows - 1));
+
+            if (this._minColumns == 1)
+                maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / this._minColumns);
+            else
+                maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (this._minColumns - 1));
+        }
+
         let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
         let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
-        this.setSpacing(Math.max(this._spacing, spacingNotTooBig));
-    },
+        let spacing = Math.max(this._spacing, spacingNotTooBig);
+        this.setSpacing(spacing);
+        if(this._useSurroundingSpacing)
+            this.top_padding = this.right_padding = this.bottom_padding = this.left_padding = spacing;
+    }
 });
 
 const PaginatedIconGrid = new Lang.Class({
@@ -457,20 +475,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;
 
@@ -487,8 +505,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;
         }
@@ -511,9 +529,11 @@ const PaginatedIconGrid = new Lang.Class({
         let oldNPages = this._nPages;
 
         let spacing = this._getSpacing();
+        // We want to contain the grid inside the parent box with padding
+        availHeightPerPage -= this.top_padding + this.bottom_padding;
         this._rowsPerPage = Math.floor((availHeightPerPage + spacing) / (this._vItemSize + spacing));
         this._nPages = Math.ceil(nRows / this._rowsPerPage);
-        this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this._vItemSize + spacing) - 
spacing);
+        this._spaceBetweenPages = availHeightPerPage - (this._availableHeightPerPageForItems() - 
this.top_padding - this.bottom_padding);
         this._childrenPerPage = nColumns * this._rowsPerPage;
 
         // Take into account when the number of pages changed (then the height of the entire grid changed 
for sure)
@@ -525,7 +545,7 @@ const PaginatedIconGrid = new Lang.Class({
     },
 
     _availableHeightPerPageForItems: function() {
-        return this._rowsPerPage * this.rowHeight() - this._getSpacing();
+        return this._rowsPerPage * this.rowHeight() - this._getSpacing() + this.top_padding + 
this.bottom_padding;
     },
 
     nPages: function() {
@@ -537,7 +557,7 @@ const PaginatedIconGrid = new Lang.Class({
             return 0;
         let firstPageItem = pageNumber * this._childrenPerPage
         let childBox = this._getVisibleChildren()[firstPageItem].get_allocation_box();
-        return childBox.y1;
+        return childBox.y1 - this.top_padding;
     }
 });
 Signals.addSignalMethods(PaginatedIconGrid.prototype);