[gnome-shell/wip/paging-release: 23/74] Collectin view contained working, but with harcoded values



commit bb0d96ee46b99f6a832e2773560bd38ebfb24ea8
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Thu Jul 11 21:06:09 2013 +0200

    Collectin view contained working, but with harcoded values

 js/ui/appDisplay.js |   66 +++++++++++++++++++++--------------
 js/ui/iconGrid.js   |   94 ++++++++++++++++++++++++++++++++++++++------------
 2 files changed, 110 insertions(+), 50 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 69b2317..e8bc2b4 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -30,6 +30,8 @@ const Util = imports.misc.util;
 const MAX_APPLICATION_WORK_MILLIS = 75;
 const MENU_POPUP_TIMEOUT = 600;
 const MAX_COLUMNS = 6;
+const MIN_COLUMNS = 4;
+const MIN_ROWS = 4;
 
 const INACTIVE_GRID_OPACITY = 77;
 const INACTIVE_GRID_OPACITY_ANIMATION_TIME = 0.15;
@@ -206,7 +208,7 @@ const AppPages = new Lang.Class({
      * enough space to show the folder view.
      */
     makeSpaceForPopUp: function(iconActor, side, folderNVisibleRowsAtOnce) {
-        global.log("#### makeSpaceForPopUp ####");
+        //global.log("#### makeSpaceForPopUp ####");
         let rowsUp = [];
         let rowsDown = [];
         let mainIconYPosition = iconActor.actor.y;
@@ -253,7 +255,7 @@ const AppPages = new Lang.Class({
         }
         this._panViewForFolderView(rowsUp, rowsDown, panViewUpNRows, panViewDownNRows, iconActor);
         this.updateIconOpacities(true);
-        global.log("#### END makeSpaceForPopUp ####");
+        //global.log("#### END makeSpaceForPopUp ####");
     },
     
     returnSpaceToOriginalPosition: function() {
@@ -280,7 +282,6 @@ const AppPages = new Lang.Class({
             for(let rowId in rowsUp) {
                 for(let childrenId in rowsUp[rowId]) {
                     rowsUp[rowId][childrenId].translate_y = 0;
-                    //global.log("children up y " + rowsUp[rowId][childrenId].translate_y);
                     let tweenerParams = { translate_y: - height,
                                           time: POPUP_FOLDER_VIEW_ANIMATION,
                                           onUpdate: function() {this.queue_relayout();},
@@ -289,9 +290,6 @@ const AppPages = new Lang.Class({
                             tweenerParams['onComplete'] = Lang.bind(iconActor, 
iconActor.onCompleteMakeSpaceForPopUp);
                     }
                     Tweener.addTween(rowsUp[rowId][childrenId], tweenerParams);
-                    //rowsUp[rowId][childrenId].translate_y = - height;
-                    //rowsUp[rowId][childrenId].queue_relayout();
-                    //global.log("after children up y " + rowsUp[rowId][childrenId].translate_y);
                 }
             }
         }
@@ -300,7 +298,6 @@ const AppPages = new Lang.Class({
             let height = rowHeight * panViewDownNRows;
             for(let rowId in rowsDown) {
                 for(let childrenId in rowsDown[rowId]) {
-                    //global.log("children down y " + rowsDown[rowId][childrenId].translate_y);
                     rowsDown[rowId][childrenId].translate_y = 0;
                     let tweenerParams = { translate_y: height,
                                           time: POPUP_FOLDER_VIEW_ANIMATION,
@@ -309,9 +306,6 @@ const AppPages = new Lang.Class({
                         tweenerParams['onComplete'] = Lang.bind(iconActor, 
iconActor.onCompleteMakeSpaceForPopUp);
                     }
                     Tweener.addTween(rowsDown[rowId][childrenId], tweenerParams);
-                    //rowsDown[rowId][childrenId].translate_y = height;
-                    //rowsDown[rowId][childrenId].queue_relayout();
-                    //global.log("after children down y " + rowsDown[rowId][childrenId].translate_y);
                 }
             }
         }
@@ -329,6 +323,12 @@ const AppPages = new Lang.Class({
         let spacing;
         spacing = Math.max(this._grid._spacing, emptyArea / ( 2 *  MAX_COLUMNS));
         spacing = Math.round(spacing);
+        //FIXME
+        spacing = this._grid.maxSpacingForWidthHeight(width, 872, 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);
         // Update folder views
         for(let id in this._folderIcons) {
@@ -753,6 +753,12 @@ const FrequentView = new Lang.Class({
         let spacing;
         spacing = Math.max(this._grid._spacing, emptyArea / ( 2 *  MAX_COLUMNS));
         spacing = Math.round(spacing);
+        //FIXME
+        spacing = this._grid.maxSpacingForWidthHeight(width, 872, 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);
     }
 });
@@ -1119,6 +1125,14 @@ const FolderView = new Lang.Class({
         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);
     },
     
@@ -1135,14 +1149,12 @@ const FolderView = new Lang.Class({
         let box = this._containerBox();
         let availWidthPerPage = box.x2 - box.x1;
         let maxUsedWidth = this._grid.usedWidth(availWidthPerPage);
-        global.log("maxUsedWidth " + maxUsedWidth);
         return maxUsedWidth;
     },
     
     usedHeight: function() {
         // Then calculate the real maxUsedHeight
-        global.log("this.nRowsDisplayedAtOnce() " + this.nRowsDisplayedAtOnce());
-        return this._grid.usedHeightForNRows(this.nRowsDisplayedAtOnce());
+        return this._grid.usedHeightForNRows(this.nRowsDisplayedAtOnce()) + this._grid.top_padding + 
this._grid.bottom_padding;
     },   
     
     nRowsDisplayedAtOnce: function() {
@@ -1159,7 +1171,8 @@ const FolderView = new Lang.Class({
         let box = this._containerBox();
         let availHeightPerPage = box.y2 - box.y1;
         let availWidthPerPage = box.x2 - box.x1;
-        let maxRowsPerPage = this._grid.rowsForHeight(availHeightPerPage);
+        //FIXME
+        let maxRowsPerPage = this._grid.rowsForHeight(872);
         //Then, we can only show that rows least one.
         maxRowsPerPage -= 1;
         return maxRowsPerPage;
@@ -1214,21 +1227,17 @@ const FolderIcon = new Lang.Class({
         if(this._popup) {
             // Position the popup above or below the source icon
             if (this._side == St.Side.BOTTOM) {
-                global.log("Bottom " + this.actor.y);
                 let closeButtonOffset = -this._popup.closeButton.translation_y;
                 let y = this.actor.y - this._popup.actor.fixed_height;
-                global.log("Bottom " + this._popup.actor.fixed_height);
                 let yWithButton = y - closeButtonOffset;
                 this._popup.parentOffset = yWithButton < 0 ? -yWithButton : 0;
                 this._popup.actor.y = Math.max(y, closeButtonOffset);
-                global.log("Bottom " + this._popup.actor.y);
                 //FIXME ST ALIGN NOR WORKING?
-                this.view._widget.y_align = 1;
+                this.view._widget.y_align = 2;
             } else {
                 this._popup.actor.y = this.actor.y + this.actor.height;
-                global.log("No bottom " + this.actor.y);
                 //FIXME ST ALIGN NOR WORKING?
-                this.view._widget.y_align = 3;
+                this.view._widget.y_align = 2;
             }
         }
     },
@@ -1250,14 +1259,21 @@ const FolderIcon = new Lang.Class({
         //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;
-        global.log("BUTTON OFFSET " + closeButtonOverlap);
         let usedHeight = this.view.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())
+        /*if(this.view.nRowsDisplayedAtOnce() == this.view.maxRowsDisplayedAtOnce()) {
             usedHeight = usedHeight - popupPadding * 2  - arrowHeight + closeButtonOverlap;
-        else
+            global.log("top_padding " + this.view._grid.top_padding);
+            this.view._grid.top_padding -= popupPadding * 2  + arrowHeight + closeButtonOverlap;
+            this.view._grid.actor.queue_relayout();
+            global.log("top_padding " + this.view._grid.top_padding);
+        }
+        else {
             usedHeight =  usedHeight - popupPadding - arrowHeight;
+            this.view._grid.top_padding -= - popupPadding - arrowHeight;
+            this.view._grid.actor.queue_relayout();
+        }*/
         return usedHeight;
         
     },
@@ -1267,12 +1283,10 @@ const FolderIcon = new Lang.Class({
     },
     
     returnSpaceToOriginalPosition: function() {
-        global.log("Original position");
         this._parentView.returnSpaceToOriginalPosition();
     },
     
     onCompleteMakeSpaceForPopUp: function() {
-        //Mainloop.timeout_add(0.1, Lang.bind(this, function() {
         this._popup.popup();
     },
     
@@ -1284,9 +1298,7 @@ const FolderIcon = new Lang.Class({
             let absoluteActorYPosition = this.actor.get_transformed_position()[1];
             let spaceTop = absoluteActorYPosition;
             let spaceBottom = this.actor.get_stage().height - (absoluteActorYPosition + this.actor.height);
-            global.log("absoluteActorYPosition " + absoluteActorYPosition);
             this._side = spaceTop > spaceBottom ? St.Side.BOTTOM : St.Side.TOP;
-            global.log("this._side " + this._side);
             this._popup = new AppFolderPopup(this, this._side);
             this._parentView.addFolderPopup(this._popup);
             /**
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index ff683b1..c410b66 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -187,6 +187,11 @@ const IconGrid = new Lang.Class({
         this._fillParent = params.fillParent;
         this._usePagination = params.usePagination;
         
+        this.top_padding = 0;
+        this.bottom_padding = 0;
+        this.rigth_padding = 0;
+        this.left_padding = 0;
+        
         if(this._usePagination) {
             this._nPages = 0;
             //Set this variable properly before allocate function is called
@@ -224,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;
-        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() {
@@ -260,11 +265,12 @@ 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;
+        let height = nRows * this._vItemSize + totalSpacing + this.top_padding + this.bottom_padding;
+        global.log("GRID TOP PADDING " + this.top_padding);
         
         if(this._usePagination && this._nPages) {
-            alloc.min_size = this._rowsPerPage * this._spacePerRow * this._nPages + 
this._spaceBetweenPagesTotal;
-            alloc.natural_size = this._rowsPerPage * this._spacePerRow * this._nPages + 
this._spaceBetweenPagesTotal;
+            alloc.min_size =  this.usedHeightPerPage() * this._nPages + this._spaceBetweenPagesTotal;
+            alloc.natural_size = this.usedHeightPerPage() * this._nPages + this._spaceBetweenPagesTotal;
             return;
         }
         alloc.min_size = height;
@@ -321,24 +327,22 @@ const IconGrid = new Lang.Class({
                 leftPadding = availWidth - usedWidth;
         }
 
-        let x = box.x1 + leftPadding;
-        let y = box.y1;
+        let x = box.x1 + leftPadding + this.left_padding;
+        let y = box.y1 + this.top_padding;
         let columnIndex = 0;
         let rowIndex = 0;
-        
-        if(children.length > 0) {
+        if(this._usePagination && children.length > 0) {
             this._firstPagesItems = [children[0]];
         }
         for (let i = 0; i < children.length; i++) {
             let childBox = this._calculateChildrenBox(children[i], x, y);
             if(children[i].translate_y) {
-                //global.log("TRANSLATING");
                 childBox.y1 += children[i].translate_y;
                 childBox.y2 += children[i].translate_y;
             }
             if(!this._usePagination) {
                 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);
@@ -359,13 +363,13 @@ const IconGrid = new Lang.Class({
                 y += this._vItemSize + spacing;
                 if(this._usePagination) {
                     if((i + 1) % this._childrenPerPage == 0) {
-                        y+= this._spaceBetweenPages;
+                        y+= this._spaceBetweenPages + this.top_padding;
                         if(i < children.length) {
                             this._firstPagesItems.push(children[i+1]);
                         }
                     }
                 }
-                x = box.x1 + leftPadding;
+                x = box.x1 + leftPadding + this.left_padding;
             } else {
                 x += this._hItemSize + spacing;
             }
@@ -374,14 +378,16 @@ const IconGrid = new Lang.Class({
     },
     
     _calculatePaginationValues: function (availHeightPerPage, nColumns, nRows) {
-        let spacing = this._fixedSpacing ? this._fixedSpacing : this._spacing;
+        let spacing = this.getSpacing();
         this._spacePerRow = this._vItemSize + spacing;
+        // we want to continent the grid inside the "box" wwith padding, so the availHeihgt is less than the 
real one
+        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));
+        this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this._vItemSize + spacing) - 
spacing);
         this._spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
         this._childrenPerPage = nColumns * this._rowsPerPage;
     },
@@ -398,6 +404,7 @@ const IconGrid = new Lang.Class({
     
         let childBox = new Clutter.ActorBox();
         if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL) {
+          //FIXME not defined box????????
             let _x = box.x2 - (x + width);
             childBox.x1 = Math.floor(_x - childXSpacing);
         } else {
@@ -437,6 +444,7 @@ const IconGrid = new Lang.Class({
     },
     
     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
@@ -445,22 +453,29 @@ const IconGrid = new Lang.Class({
         return rowsPerPage;
     },
     
+    /**
+     * Don't take into account paddings
+     */
     usedHeightForNRows: function(nRows) {
         let spacePerRow = this.rowHeight();
-        return spacePerRow * nRows;
+        return spacePerRow * nRows - this.getSpacing();
     },
-    
+
+    usedHeightPerPage: function() {
+        return this._rowsPerPage * this._spacePerRow - this.getSpacing() + this.top_padding + 
this.bottom_padding;
+    },
+
     usedWidth: function(forWidth) {
         let childrenInRow = this.childrenInRow(forWidth);
         let usedWidth = childrenInRow  * (this._hItemSize + this.getSpacing());
         usedWidth -= this.getSpacing();
-        return usedWidth;
+        return usedWidth + this.left_padding + this.right_padding;
     },
     
     _computeLayout: function (forWidth) {
         let nColumns = 0;
-        let usedWidth = 0;
-        let spacing = this._fixedSpacing ? this._fixedSpacing : this._spacing;
+        let usedWidth = this.left_padding + this.right_padding;
+        let spacing = this.getSpacing();
 
         while ((this._colLimit == null || nColumns < this._colLimit) &&
                (usedWidth + this._hItemSize <= forWidth)) {
@@ -512,7 +527,7 @@ const IconGrid = new Lang.Class({
             throw new Error('Invalid page number ' + pageNumber);
         }
         let childBox = this._firstPagesItems[pageNumber].get_allocation_box();
-        return [childBox.x1, childBox.y1];
+        return [childBox.x1 - this.top_padding, childBox.y1 - this.top_padding];
     },
     
     setSpacing: function(spacing) {
@@ -526,6 +541,41 @@ const IconGrid = new Lang.Class({
     getSpacing: function() {
         return this._fixedSpacing ? this._fixedSpacing : this._spacing;
     },
+    /**
+     * This functions 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.
+     * TO take into account the spacing also for before the first row and for after the last row mark 
usingSurroundingSpacing true
+     * This function doesn't take into account the dynamic padding rigth now, since, at the momment, we 
don't use that now.
+     */
+    maxSpacingForWidthHeight: function(availWidth, availHeight, minColumns, minRows, 
usingSurroundingSpacing) {
+        // MAx 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 - minRows * this._vItemSize);
+        let minEmptyHorizontalArea = (availWidth - minColumns * this._hItemSize);
+        let spacing;
+        if(usingSurroundingSpacing) {
+            // 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 / (minRows +1));
+            let maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (minColumns +1));
+            let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
+            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 would be touching the boundary.
+            if(minRows == 1) {
+                let maxSpacingForRows = 0;
+                let maxSpacingForColumns = 0;
+            } else {
+                let maxSpacingForRows = Math.floor(minEmptyVerticalArea / (minRows - 1));
+                let maxSpacingForColumns = Math.floor(minEmptyHorizontalArea / (minColumns - 1));
+            }
+            let spacingToEnsureMinimums = Math.min(maxSpacingForRows, maxSpacingForColumns);
+            let spacingNotTooBig = Math.min(spacingToEnsureMinimums, maxSpacing);
+            spacing = Math.max(this._spacing, spacingNotTooBig); 
+        }
+        return spacing;
+    },
     
     pageRows: function(pageNumber) {
         let pagePosition = this.getPagePosition(pageNumber);
@@ -537,8 +587,6 @@ const IconGrid = new Lang.Class({
         // Positioning to the first element of the page
         while(children[index] != this._firstPagesItems[pageNumber])
             index++;
-        global.log("index " + index);
-        global.log("children lenght " + children.length);
         for( let rowIndex = 0; rowIndex < this._rowsPerPage; rowIndex++) {
             rows[rowIndex] = [];
             while(index < children.length && children[index].y == currentItem.y ) {


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