[gnome-shell/wip/paging-release: 63/85] Really fix bad width of folder views on small resolutions. Also make space to put 4 rows in resoluti

[Carlos Soriano <csoriano src gnome org>]

commit f6186526a377c100f98cf8c1655a31c69fb03829
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Mon Jul 22 19:30:08 2013 +0200

    Really fix bad width of folder views on small resolutions.
    Also make space to put 4 rows in resolution from 900px height up.

 data/theme/gnome-shell.css |    6 +++---
 js/ui/appDisplay.js        |   14 ++++++++++++--
 js/ui/iconGrid.js          |   19 ++++++++++++++-----
 3 files changed, 29 insertions(+), 10 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index be7e241..f6940de 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -874,7 +874,7 @@ StScrollBar StButton#vhandle:active {
 /* Application Launchers, Grid and List results */
 
 .icon-grid {
-    spacing: 36px;
+    spacing: 30px;
     -shell-grid-horizontal-item-size: 136px;
     -shell-grid-vertical-item-size: 136px;
 }
@@ -947,11 +947,11 @@ StScrollBar StButton#vhandle:active {
 .grid-search-result .overview-icon-with-label {
     border-radius: 4px;
     /* visually, since the label control its own espacing inside, seems more visual consistent to have 
diferent padding for top and bottom */
-    padding: 12px 9px 6px 9px;
+    padding: 10px 8px 5px 8px;
     border: 1px rgba(0,0,0,0);
     transition-duration: 100ms;
     text-align: center;
-    spacing: 5px;
+    spacing: 4px;
 }
 
 .app-well-app > .overview-icon,
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index e4dbaef..c57e529 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1213,6 +1213,7 @@ const FolderView = new Lang.Class({
         //We put the normal padding as spacing as we have in the main grid to do well the calculations for 
used rows, used columns etc, since
         // it is the behaviour we want to emulate. After that we will put the correct padding 
fromcalculations of the boxpointer offsets, to ensure
         //the boxpointer will be contained inside the view
+        this._parentSpacing = spacing;
         this._grid.top_padding = spacing;
         this._grid.bottom_padding = spacing;
         this._grid.left_padding = spacing;
@@ -1220,7 +1221,7 @@ const FolderView = new Lang.Class({
         
         let boxPointerTotalOffset = this._boxPointerOffsets['arrowHeight'] + 
this._boxPointerOffsets['padding'] * 2 + 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;
@@ -1239,8 +1240,17 @@ const FolderView = new Lang.Class({
     usedWidth: function() {
         let box = this._containerBox();
         let availWidthPerPage = box.x2 - box.x1;
-        availWidthPerPage -= this._boxPointerOffsets['padding'] * 2 + 
this._boxPointerOffsets['closeButtonOverlap'];
+        global.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ");
+        global.log("AvailWidth " + availWidthPerPage);
+        // Since we want to do the calculation of the real width of the grid
+        // taking into account the parent behaviour, we have to substract from the
+        // avail width the padding we subsctratc before to the folder view
+        // in its surrounding spacings
+        availWidthPerPage -= 2 * this._offsetForEachSide;
+        global.log("AvailWidth after " + availWidthPerPage);
         let maxUsedWidth = this._grid.usedWidth(availWidthPerPage);
+        global.log("maxUsedWidth " + maxUsedWidth);
+        global.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ");
         return maxUsedWidth;
     },
     
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 867f47b..7f752ad 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -378,23 +378,33 @@ const IconGrid = new Lang.Class({
             } else {
                 x += this._hItemSize + spacing;
             }
-        }
-        
+        }       
     },
     
     _calculatePaginationValues: function (availHeightPerPage, nColumns, nRows) {
+        global.log("########## START PAGINATION ########");
         let spacing = this.getSpacing();
+        global.log("availHeightPerPage " + availHeightPerPage);
+        global.log("nColumns " + nColumns);
+        global.log("nRows " + nRows);
+        global.log("spacing " + spacing);
         this._spacePerRow = this._vItemSize + spacing;
         // We want to contain the grid inside the parent box with padding
         availHeightPerPage -= this.top_padding + this.bottom_padding;
+        global.log("availHeightPerPage no padding " + availHeightPerPage);
+        global.log("this._spacePerRow " + this._spacePerRow); 
         this._rowsPerPage = Math.floor(availHeightPerPage / this._spacePerRow);
+        global.log("Rows per page " + this._rowsPerPage);
         // 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;
+        global.log("this._rowsPerPage " + this._rowsPerPage);
         this._nPages = Math.ceil(nRows / this._rowsPerPage);
+        global.log("this._nPages "  + this._nPages);
         this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this._vItemSize + spacing) - 
spacing);
         this._spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
         this._childrenPerPage = nColumns * this._rowsPerPage;
+        global.log("########## END PAGINATION ########");
     },
     
     _calculateChildrenBox: function(child, x, y, box) {
@@ -559,10 +569,9 @@ const IconGrid = new Lang.Class({
             let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
             spacing = Math.max(this._spacing, spacingNotTooBig);
         } else {
-            //We don't want spacing if there's only one row, it will be touching the boundary.
             if(minRows == 1) {
-                let maxSpacingForRows = 0;
-                let maxSpacingForColumns = 0;
+                let maxSpacingForRows = Math.floor(minEmptyVerticalArea / minRows);
+                let maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / minColumns);
             } else {
                 let maxSpacingForRows = Math.floor(minEmptyVerticalArea / (minRows - 1));
                 let maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (minColumns - 1));