[gnome-shell/wip/paging-release: 40/90] Update positions of popup just after creating it, if not, it is not updated for one column collectio

[Carlos Soriano <csoriano src gnome org>]

commit b32b7eb8de340dd9fb6e7c8efce383b853b3811c
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Fri Jul 12 12:22:46 2013 +0200

    Update positions of popup just after creating it, if not, it is not
    updated for one column collection view

 js/ui/appDisplay.js |  101 ++++++++++++++++++++++++++++++++++-----------------
 js/ui/iconGrid.js   |   19 ++++++----
 2 files changed, 79 insertions(+), 41 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index a3094a4..a9490c2 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -264,11 +264,13 @@ const AppPages = new Lang.Class({
             this.displayingPopup = false;
             for(let rowId in this._translatedRows) {
                 for(let childrenId in this._translatedRows[rowId]) {
-                    let tweenerParams = { translate_y: 0,
-                            time: POPUP_FOLDER_VIEW_ANIMATION,
-                            onUpdate: function() {this.queue_relayout();},
-                            transition: 'easeInOutQuad' };
-                    Tweener.addTween(this._translatedRows[rowId][childrenId], tweenerParams);
+                    if(this._translatedRows[rowId][childrenId].translate_y){
+                        let tweenerParams = { translate_y: 0,
+                                time: POPUP_FOLDER_VIEW_ANIMATION,
+                                onUpdate: function() {this.queue_relayout();},
+                                transition: 'easeInOutQuad' };
+                        Tweener.addTween(this._translatedRows[rowId][childrenId], tweenerParams);
+                    }
                 }
             }
         }
@@ -288,7 +290,8 @@ const AppPages = new Lang.Class({
                                           onUpdate: function() {this.queue_relayout();},
                                           transition: 'easeInOutQuad' };
                     if((rowId == rowsUp.length - 1) && (childrenId == rowsUp[rowId].length - 1)) {
-                            tweenerParams['onComplete'] = Lang.bind(iconActor, 
iconActor.onCompleteMakeSpaceForPopUp);
+                        global.log(" LOOOOOOOOOOG ");
+                        tweenerParams['onComplete'] = Lang.bind(iconActor, 
iconActor.onCompleteMakeSpaceForPopUp);
                     }
                     Tweener.addTween(rowsUp[rowId][childrenId], tweenerParams);
                 }
@@ -304,6 +307,7 @@ const AppPages = new Lang.Class({
                                           time: POPUP_FOLDER_VIEW_ANIMATION,
                                           onUpdate: function() {this.queue_relayout();} };
                     if((rowId == rowsDown.length - 1) && (childrenId == rowsDown[rowId].length - 1)) {
+                        global.log(" LOOOOOOOOOOG ");
                         tweenerParams['onComplete'] = Lang.bind(iconActor, 
iconActor.onCompleteMakeSpaceForPopUp);
                     }
                     Tweener.addTween(rowsDown[rowId][childrenId], tweenerParams);
@@ -1029,10 +1033,9 @@ const AppSearchProvider = new Lang.Class({
 const FolderView = new Lang.Class({
     Name: 'FolderView',
 
-    _init: function(parentView) {
+    _init: function() {
         this._grid = new IconGrid.IconGrid({ xAlign: St.Align.MIDDLE,
             columnLimit: MAX_COLUMNS });
-        this._parentView = parentView;
 
         this.actor = new St.ScrollView({overlay_scrollbars: true});
         this.actor.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
@@ -1044,6 +1047,8 @@ const FolderView = new Lang.Class({
         this.actor.add_actor(this._box);
         this._items = {};
         this._allItems = [];
+        
+        this._boxPointerOffsets = {};
     },
 
     _getItemId: function(item) {
@@ -1059,6 +1064,9 @@ const FolderView = new Lang.Class({
     },
 
     addApp: function(app) {
+        //FIXME
+        if(this._allItems.length > 1)
+            return;
         this._addItem(app);
     },
 
@@ -1114,20 +1122,30 @@ const FolderView = new Lang.Class({
         this._appDisplayWidth = width;
         this._appDisplayHeight = height;
         // Update grid dinamyc spacing based on display width
-        let itemWidth = this._grid._hItemSize * MAX_COLUMNS;
-        let emptyArea = width - itemWidth;
-        let spacing;
-        spacing = Math.max(this._grid._spacing, emptyArea / ( 2 *  MAX_COLUMNS));
-        spacing = Math.round(spacing);
         let spacing = this._grid.maxSpacingForWidthHeight(width, 872, MIN_COLUMNS, MIN_ROWS, true);
-        global.log("ON UPDATE");
-        //FIXME
-        this._grid.top_padding = spacing - 27;
-        this._grid.bottom_padding = spacing - 27;
-        this._grid.left_padding = spacing - 27;
-        this._grid.right_padding = spacing - 27;
-        
         this._grid.setSpacing(spacing);
+        global.log("ON UPDATE");
+        if(!Object.keys(this._boxPointerOffsets).length)
+            return;
+        global.log("BOX POINTERS!!! " + Object.keys(this._boxPointerOffsets));
+        //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 in side the view
+        this._grid.top_padding = spacing;
+        this._grid.bottom_padding = spacing;
+        this._grid.left_padding = spacing;
+        this._grid.right_padding = spacing;
+        let boxPointerTotalOffset;
+        if(this.nRowsDisplayedAtOnce() == this.maxRowsDisplayedAtOnce())
+            boxPointerTotalOffset = this._boxPointerOffsets['arrowHeight'] + 
this._boxPointerOffsets['padding'] * 2 + this._boxPointerOffsets['closeButtonOverlap'];
+        else
+            boxPointerTotalOffset = this._boxPointerOffsets['arrowHeight'] + 
this._boxPointerOffsets['padding'] * 2;  
+        let offsetForEachSide = Math.ceil(boxPointerTotalOffset / 2);
+        this._grid.top_padding = spacing - offsetForEachSide;
+        this._grid.bottom_padding = spacing - offsetForEachSide;
+        this._grid.left_padding = spacing - offsetForEachSide;
+        this._grid.right_padding = spacing - offsetForEachSide;
+        global.log("paddings " + [this._grid.top_padding]);
     },
     
     _containerBox: function() {
@@ -1156,8 +1174,12 @@ const FolderView = new Lang.Class({
         let availHeightPerPage = box.y2 - box.y1;
         let availWidthPerPage = box.x2 - box.x1;
         let maxRowsDisplayedAtOnce = this.maxRowsDisplayedAtOnce();
+        //global.log("availWidthPerPage " + availWidthPerPage);
         let usedRows = this._grid.nUsedRows(availWidthPerPage);
+        //global.log("usedRows " + usedRows);
+        //global.log("maxRowsDisplayedAtOnce " + maxRowsDisplayedAtOnce);
         usedRows = usedRows <= maxRowsDisplayedAtOnce ? usedRows : maxRowsDisplayedAtOnce;
+        global.log("usedRows after " + usedRows);
         return usedRows;
     },
     
@@ -1170,6 +1192,17 @@ const FolderView = new Lang.Class({
         //Then, we can only show that rows least one.
         maxRowsPerPage -= 1;
         return maxRowsPerPage;
+    },
+    
+    updateBoxPointerOffsets: function(arrowHeight, padding, closeButtonOverlap) {
+        // We have to ensure the close button doesn't go outside the allocation, so
+        // if we are using all the possible rows, means the boxpointer goes until
+        // the boundary of allocation, and then we have to take into account the close button
+        // overlap and least it from padding
+        this._boxPointerOffsets['arrowHeight'] = arrowHeight;
+        this._boxPointerOffsets['padding'] = padding;
+        this._boxPointerOffsets['closeButtonOverlap'] = closeButtonOverlap;
+        
     }
 });
 
@@ -1233,6 +1266,9 @@ const FolderIcon = new Lang.Class({
                 //FIXME ST ALIGN NOR WORKING?
                 this.view._widget.y_align = 2;
             }
+            
+            global.log("this.actor.y " + this.actor.y);
+            global.log("this._popup.actor.y " + this._popup.actor.y);
         }
     },
     
@@ -1241,19 +1277,9 @@ const FolderIcon = new Lang.Class({
     },
     
     _popUpHeight: function() {
-        /*
-         * To maintain the grid of the collection aligned to the main grid, we have to
-         * make the same spacing to each element of the collection as the main grid has, except
-         * for the last row which has to take less space, since the grid of collection is inside a view with 
padding (the popup)
-         * and, the arrow of the popup is rising some pixels the collection, we have to calculate how much 
real spacing
-         * we have to let under/above the last/first arrow to make let the collection grid aligned with the 
main grid
-         */
-        let arrowHeight = this._popup._boxPointer.actor.get_theme_node().get_length('-arrow-rise');
-        let popupPadding = this._popup._boxPointer.bin.get_theme_node().get_length('padding');
-        //It will be negative value, so we have to rest it, instead of plust it.
-        let closeButtonOverlap = 
this._popup.closeButton.get_theme_node().get_length('-shell-close-overlap-y');
-        let closeButtonHeight = this._popup.closeButton.height;
+       
         let usedHeight = this.view.usedHeight();
+        global.log("USED HEUGHT " + usedHeight);
         // If we want it corrected aligned with the main grid the calculation will be: usedHeight - 
popupPadding - arrowHeight
         // but, if we do that and the popup needs all the height, the popup will remain outside the 
allocation and then clipped. so:
         /*if(this.view.nRowsDisplayedAtOnce() == this.view.maxRowsDisplayedAtOnce()) {
@@ -1281,6 +1307,9 @@ const FolderIcon = new Lang.Class({
     },
     
     onCompleteMakeSpaceForPopUp: function() {
+        global.log("ONN COMPÑLETEEEE");
+        global.log("this._popup.height " + this._popup.actor.height);
+        global.log("this._popup.y " + this._popup.actor.y);
         this._popup.popup();
     },
     
@@ -1324,6 +1353,12 @@ const FolderIcon = new Lang.Class({
              * and before the calculation of the position.
              */
             this.view._grid.actor.ensure_style();
+            
+            let arrowHeight = this._popup._boxPointer.actor.get_theme_node().get_length('-arrow-rise');
+            let popupPadding = this._popup._boxPointer.bin.get_theme_node().get_length('padding');
+            //It will be negative value, so we have to rest it, instead of plust it.
+            let closeButtonOverlap =  - 
this._popup.closeButton.get_theme_node().get_length('-shell-close-overlap-y');
+            this.view.updateBoxPointerOffsets(arrowHeight, popupPadding, closeButtonOverlap);
             this.view.onUpdatedDisplaySize(this._displayWidth, this._displayHeight);
 
             /*
@@ -1345,7 +1380,7 @@ const FolderIcon = new Lang.Class({
             this.view.actor.set_height(this._popUpHeight());
             this._popup.actor.fixed_height = this._popup.actor.height;
 
-            
+            this._updatePopupPosition();
             this.makeSpaceForPopUp();
             this._popup.connect('open-state-changed', Lang.bind(this,
                     function(popup, isOpen) {
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index c410b66..fcd1c16 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -189,7 +189,7 @@ const IconGrid = new Lang.Class({
         
         this.top_padding = 0;
         this.bottom_padding = 0;
-        this.rigth_padding = 0;
+        this.right_padding = 0;
         this.left_padding = 0;
         
         if(this._usePagination) {
@@ -265,9 +265,7 @@ const IconGrid = new Lang.Class({
         if (this._rowLimit)
             nRows = Math.min(nRows, this._rowLimit);
         let totalSpacing = Math.max(0, nRows - 1) * spacing;
-        let height = nRows * this._vItemSize + totalSpacing + this.top_padding + this.bottom_padding;
-        global.log("GRID TOP PADDING " + this.top_padding);
-        
+        let height = nRows * this._vItemSize + totalSpacing + this.top_padding + this.bottom_padding;     
         if(this._usePagination && this._nPages) {
             alloc.min_size =  this.usedHeightPerPage() * this._nPages + this._spaceBetweenPagesTotal;
             alloc.natural_size = this.usedHeightPerPage() * this._nPages + this._spaceBetweenPagesTotal;
@@ -326,7 +324,8 @@ const IconGrid = new Lang.Class({
             case St.Align.END:
                 leftPadding = availWidth - usedWidth;
         }
-
+        //global.log("GRID TOP PADDING " + this.top_padding);
+        //global.log("availWidth " + availWidth);
         let x = box.x1 + leftPadding + this.left_padding;
         let y = box.y1 + this.top_padding;
         let columnIndex = 0;
@@ -426,13 +425,14 @@ const IconGrid = new Lang.Class({
     
     nUsedRows: function(forWidth) {
         let children = this._getVisibleChildren();
+        //global.log("children " + children.length);
         let nColumns;
         if (forWidth < 0) {
             nColumns = children.length;
         } else {
             [nColumns, ] = this._computeLayout(forWidth);
         }
-        
+        //global.log("nColumns " + nColumns);
         let nRows;
         if (nColumns > 0)
             nRows = Math.ceil(children.length / nColumns);
@@ -440,6 +440,7 @@ const IconGrid = new Lang.Class({
             nRows = 0;
         if (this._rowLimit)
             nRows = Math.min(nRows, this._rowLimit);
+        //global.log("nRows " + nRows);
         return nRows;
     },
     
@@ -476,16 +477,18 @@ const IconGrid = new Lang.Class({
         let nColumns = 0;
         let usedWidth = this.left_padding + this.right_padding;
         let spacing = this.getSpacing();
-
+        //global.log("usedWith " + usedWidth);
+        ////global.log("this.right_padding " + this.right_padding);
         while ((this._colLimit == null || nColumns < this._colLimit) &&
                (usedWidth + this._hItemSize <= forWidth)) {
             usedWidth += this._hItemSize + spacing;
+            //global.log("usedWith " + usedWidth);
             nColumns += 1;
+            //global.log("nColumns " + nColumns);
         }
 
         if (nColumns > 0)
             usedWidth -= spacing;
-
         return [nColumns, usedWidth];
     },