[gnome-shell/wip/paging] iconGrid: Spacing calculated fine with queue_relayout. Parent size from a variable. Update pages wit



commit 3246e90706d3499d11864a0f1d7ed3c5b03af121
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Tue Jul 2 15:30:15 2013 +0200

    iconGrid: Spacing calculated fine with queue_relayout. Parent size from
    a variable. Update pages with a signal.
    appDisplay: Erase some custom allocations.

 data/theme/gnome-shell.css |    5 ++
 js/ui/appDisplay.js        |   50 ++++++++------
 js/ui/iconGrid.js          |  158 ++++++++++++++------------------------------
 3 files changed, 85 insertions(+), 128 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4576683..b4b4fd2 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -905,6 +905,11 @@ StScrollBar StButton#vhandle:active {
     padding: 0px 88px;
 }
 
+.all-apps {
+/* horizontal padding to make sure scrollbars or dash don't overlap content */
+    padding: 0px 88px;
+}
+
 .pages-indicator {
        spacing: 30px;
 }
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index eba9a1f..711bc62 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -127,7 +127,7 @@ const FolderView = new Lang.Class({
             columnLimit: MAX_COLUMNS });
         this.actor = this._grid.actor;
         // Standard hack for ClutterBinLayout
-        //this._grid.actor.x_expand = true;
+        this._grid.actor.x_expand = true;
 
         this._items = {};
         this._allItems = [];
@@ -246,8 +246,8 @@ const AppPages = new Lang.Class({
         return this._grid.getPagePosition(pageNumber);
     },
     
-    setGridParentSize: function(size) {
-        this._grid._parentSize = size;
+    setViewForPageSize: function(view) {
+        this._grid._viewForPageSize= view;
     },
     
     addFolderPopup: function(popup) {
@@ -259,11 +259,13 @@ const PaginationScrollView = new Lang.Class({
     Name: 'PaginationScrollView',
     Extends: St.ScrollView,
     
-    _init: function(parent) {
-        this.parent();
+    _init: function(parent, params) {
+        this.parent(params);
+        this.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.NEVER);
         this._stack = new St.Widget({layout_manager: new Clutter.BinLayout()});        
         this._box = new St.BoxLayout({vertical: true});
         this._pages = new AppPages(this);
+        this._pages.setViewForPageSize(this);
         
         this._stack.add_actor(this._pages.actor);
         this._eventBlocker = new St.Widget({ x_expand: true, y_expand: true });
@@ -271,7 +273,7 @@ const PaginationScrollView = new Lang.Class({
         
         this._box.add_actor(this._stack);
         this.add_actor(this._box);
-        
+
         this._currentPage = 0;
         this._parent = parent;
         
@@ -300,7 +302,7 @@ const PaginationScrollView = new Lang.Class({
         }));
         this._eventBlocker.add_action(this._clickAction);
     },
-
+    
     vfunc_get_preferred_height: function (container, forWidht) {
         return [0, 0];
     },
@@ -308,13 +310,12 @@ const PaginationScrollView = new Lang.Class({
     vfunc_get_preferred_width: function(container, forHeight) {
         return [0, 0];
     },
-
+    /*
     vfunc_allocate: function(box, flags) {
         box = this.get_parent().allocation;
         this.set_allocation(box, flags);        
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
-        
         let childBox = new Clutter.ActorBox();
         // Get the boxLayout inside scrollView
         let child = this.get_children()[2];
@@ -322,10 +323,9 @@ const PaginationScrollView = new Lang.Class({
         childBox.y1 = 0;
         childBox.x2 = availWidth;
         childBox.y2 = availHeight;   
-        
-        this._pages.setGridParentSize([availWidth, availHeight]);
+
         child.allocate(childBox, flags);
-    },
+    },*/
 
     goToPage: function(pageNumber, action) {
         let velocity;
@@ -528,7 +528,7 @@ const IndicatorLayout = Lang.Class({
         if(this._styleChangedId) {
             this._container.disconnect(this._styleChangedId);
             this._styleChangedId = 0;
-        }
+        }        
         if(container != null)
             this._styleChangedId = container.connect('style-changed', Lang.bind(this,
                     function() { this.spacing = this._container.get_theme_node().get_length('spacing'); }));
@@ -540,17 +540,20 @@ const AllView = new Lang.Class({
     Name: 'AllView',
    
     _init: function() {
-        this._paginationView = new PaginationScrollView(this);
-        this._paginationIndicatorLayout = new IndicatorLayout({orientation: Clutter.Orientation.VERTICAL});
+        let paginationScrollViewParams = {style_class: 'all-apps'};
+        this._paginationView = new PaginationScrollView(this, paginationScrollViewParams);
 
+        this._paginationIndicatorLayout = new IndicatorLayout({orientation: Clutter.Orientation.VERTICAL});
+        this._paginationIndicatorLayout._nPages = 0;
+        
         this._paginationIndicator = new St.Widget({ x_align:3, y_align: 2,
                                                     style_class: 'pages-indicator' });
         this._paginationIndicator.set_layout_manager(this._paginationIndicatorLayout);
         let layout = new Clutter.BinLayout();
-        this.actor = new Shell.GenericContainer({ layout_manager: layout,
+        this.actor = new Shell.GenericContainer({ layout_manager: layout, 
                                                   x_expand:true, y_expand:true });
         layout.add(this._paginationView, 2,2);
-        layout.add(this._paginationIndicator, 2,3);
+        layout.add(this._paginationIndicator, 3,2);
 
         for(let i = 0; i < MAX_APPS_PAGES; i++) {
             let indicatorIcon = new PaginationIconIndicator(this, i);
@@ -560,14 +563,13 @@ const AllView = new Lang.Class({
             this._paginationIndicator.add_actor(indicatorIcon.actor);
         }
         this.actor.connect('allocate', Lang.bind(this, this._allocate));
+        this._paginationView._pages._grid.connect('n-pages-changed', Lang.bind(this, this._updatedNPages));
     },
 
     _allocate: function(widget, box, flags) {
         let children = this.actor.get_children();
         this._paginationView.allocate(box, flags);
-        
-        let nPages = this._paginationView.nPages();
-        this._paginationIndicatorLayout._nPages = nPages;
+
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
         let childBox = new Clutter.ActorBox();
@@ -578,7 +580,13 @@ const AllView = new Lang.Class({
         childBox.y2 = availHeight;
         this._paginationIndicator.allocate(childBox, flags);
     },
-
+    
+    _updatedNPages: function(iconGrid, nPages) {
+        // We don't need a relayout because we already done it at iconGrid
+        // when pages are calculated (and then the signal is emitted before that
+        this._paginationIndicatorLayout._nPages = nPages;
+    },
+    
     _onKeyRelease: function(actor, event) {
         if (event.get_key_symbol() == Clutter.KEY_Up) {
             this._paginationView.goToNextPage();
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 7c49aa8..271daea 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -3,7 +3,9 @@
 const Clutter = imports.gi.Clutter;
 const Shell = imports.gi.Shell;
 const St = imports.gi.St;
+const Meta = imports.gi.Meta;
 
+const Signals = imports.signals;
 const Lang = imports.lang;
 const Params = imports.misc.params;
 
@@ -187,8 +189,8 @@ const IconGrid = new Lang.Class({
         
         if(this._usePagination) {
             this._nPages = 0;
-            //Set this variable properly before getPreferredHeight function is called
-            this._parentSize = [0, 0];
+            //Set this variable properly before allocate function is called
+            this._viewForPageSize = null;
             this._firstPagesItems = [];
         }
         this.actor = new St.BoxLayout({ style_class: 'icon-grid',
@@ -219,16 +221,11 @@ const IconGrid = new Lang.Class({
                                       : children.length;
         let spacing = this._spacing;
         let totalSpacing = Math.max(0, nColumns - 1) * spacing;
-        if(this._parentSize && this._parentSize[0]) {
-            alloc.min_size = this._hItemSize;
-            alloc.natural_size = this._parentSize[0];
-        } else {
             // 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;
-        }
     },
 
     _getVisibleChildren: function() {
@@ -251,9 +248,14 @@ const IconGrid = new Lang.Class({
             nColumns = children.length;
             spacing = this._spacing;
         } else {
-            [nColumns, , spacing] = this._computeLayoutOldOld(forWidth);
+            [nColumns, , spacing] = this._computeLayout(forWidth);
         }
 
+        if(this._computedSpacing)
+            spacing = this._computedSpacing;
+        else
+            this._computedSpacing = spacing;
+        
         let nRows;
         if (nColumns > 0)
             nRows = Math.ceil(children.length / nColumns);
@@ -263,19 +265,10 @@ const IconGrid = new Lang.Class({
             nRows = Math.min(nRows, this._rowLimit);
         let totalSpacing = Math.max(0, nRows - 1) * spacing;
         let height = nRows * this._vItemSize + totalSpacing;
-        
-        global.log("Old spacing " + spacing);
-        global.log("Old for width  " + forWidth);
-        if(this._usePagination) {
-            
-            this._spacePerRow = this._vItemSize + spacing;
-            this._rowsPerPage = Math.floor(this._parentSize[1] / this._spacePerRow);
-            this._nPages = Math.ceil(nRows / this._rowsPerPage);
-            this._spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize + 
spacing));
-            let spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
-            this._childrenPerPage = nColumns * this._rowsPerPage;
-            alloc.min_size = this._rowsPerPage * this._spacePerRow * this._nPages + spaceBetweenPagesTotal;
-            alloc.natural_size = this._rowsPerPage * this._spacePerRow * this._nPages + 
spaceBetweenPagesTotal;
+
+        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;
             return;
         }
         alloc.min_size = height;
@@ -289,20 +282,35 @@ const IconGrid = new Lang.Class({
             let gridBox = this.actor.get_theme_node().get_content_box(parentBox);
             box = this._grid.get_theme_node().get_content_box(gridBox);
         }
-        
+
         let children = this._getVisibleChildren();
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
-        let [nColumns, usedWidth, spacing] = this._computeLayoutOldOld(availWidth);
-        this._computedSpacing = spacing;
-        global.log("new spacing " + spacing);
-        global.log("new forwidth " + availWidth);
-        if(this._usePagination) {
-            let oldSpaceBetweenPages = this._spaceBetweenPages;
-            let oldNPages = this._nPages;
-            //Recalculate the space between pages with the new spacing
-            this._spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize + 
spacing));
+        let [nColumns, usedWidth, spacing] = this._computeLayout(availWidth);
+
+        if(this._usePagination && spacing != this._computedSpacing) {
+            this._computedSpacing = spacing;
+            // ScrollView height
+            let parentBox = this._viewForPageSize.allocation;
+            let gridBox = this.actor.get_theme_node().get_content_box(parentBox);
+            let customBox = this._grid.get_theme_node().get_content_box(gridBox);
+            let availWidth = customBox.x2 - customBox.x1;
+            let availHeightPerPage = customBox.y2 - customBox.y1;
+            let nRows;
+            if (nColumns > 0)
+                nRows = Math.ceil(children.length / nColumns);
+            else
+                nRows = 0;
+            if (this._rowLimit)
+                nRows = Math.min(nRows, this._rowLimit);
+            
+            this._calculatePaginationValues(availHeightPerPage, nColumns, nRows);
+            this.emit('n-pages-changed', this._nPages);
             
+            Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this, function() {
+                this._grid.queue_relayout();
+                return false;
+            }));
         }
 
         let leftPadding;
@@ -363,7 +371,16 @@ const IconGrid = new Lang.Class({
         }
         
     },
-
+    
+    _calculatePaginationValues: function (availHeightPerPage, nColumns, nRows) {
+        this._spacePerRow = this._vItemSize + this._computedSpacing;
+        this._rowsPerPage = Math.floor(availHeightPerPage / this._spacePerRow);
+        this._nPages = Math.ceil(nRows / this._rowsPerPage);
+        this._spaceBetweenPages = availHeightPerPage - (this._rowsPerPage * (this._vItemSize + 
this._computedSpacing));
+        this._spaceBetweenPagesTotal = this._spaceBetweenPages * (this._nPages);
+        this._childrenPerPage = nColumns * this._rowsPerPage;
+    },
+    
     _calculateChildrenBox: function(child, x, y) {
         let [childMinWidth, childMinHeight, childNaturalWidth, childNaturalHeight]
         = child.get_preferred_size();
@@ -395,7 +412,7 @@ const IconGrid = new Lang.Class({
         return this._rowLimit;
     },
     
-    _computeLayoutOldOld: function (forWidth) {
+    _computeLayout: function (forWidth) {
         let nColumns = 0;
         let usedWidth = 0;
         let spacing = this._spacing;
@@ -418,80 +435,6 @@ const IconGrid = new Lang.Class({
 
         return [nColumns, usedWidth, spacing];
     },
-    
-    _computeLayoutOld: function (forWidth, forHeight) {
-        let nColumns = 0;
-        let usedWidth = 0;
-        let spacing = this._spacing;
-        if (this._colLimit) {
-            let itemWidth = this._hItemSize * this._colLimit;
-            let emptyArea = forWidth - itemWidth;
-            spacing = Math.max(this._spacing, emptyArea / (2 * this._colLimit));
-           // We have to care that new spacing must not change number of rows per page.
-            if(this._usePagination) {
-                let spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize + 
spacing));
-                if(spaceBetweenPages < 0) {
-                    spacing += spaceBetweenPages / this._rowsPerPage;
-                }
-            }
-            spacing = Math.floor(spacing);
-        }
-
-        while ((this._colLimit == null || nColumns < this._colLimit) &&
-               (usedWidth + this._hItemSize <= forWidth)) {
-            usedWidth += this._hItemSize + spacing;
-            nColumns += 1;
-        }
-
-        if (nColumns > 0)
-            usedWidth -= spacing;
-
-        return [nColumns, usedWidth, spacing];
-    
-    },
-    _computeLayoutNew: function (forWidth, forHeight) {
-        global.log("############   START COMPUTE   ###############");
-        global.log("forWidth , forHEfith " + [forWidth, forHeight]);
-        //return [6, 800, 6];
-        let nColumns = 0;
-        let usedWidth = 0;
-        let spacing = this._spacing;
-        
-        let spacePerRow = this._vItemSize + spacing;
-        let rowsPerPage = Math.floor(forHeight / spacePerRow);
-        let itemHeithg = this._vItemSize * rowsPerPage;
-        let emptyHeigthArea = forHeight - itemHeithg;
-        let spacingForHeight = Math.max(this._spacing, emptyHeigthArea / (2 * rowsPerPage));
-        
-        let spacePerColumn = this._hItemSize + spacing;
-        let columnsPerPage;
-        if(this._colLimit) {
-            global.log("colLimit " + this._colLimit);
-            columnsPerPage = this._colLimit;
-        } else {
-            columnsPerPage = Math.floor(forWidth / spacePerColumn);
-            global.log("No colLimit "+ columnsPerPage);
-        }
-        if(columnsPerPage == 0) {
-            global.log("############   END COMPUTE 0 COLUMNS   ###############");
-            return [0, 0, this._spacing];
-        }
-        let itemWidth = this._hItemSize * columnsPerPage;
-        let emptyWidthArea = forWidth - itemWidth;
-        let spacingForWidth = Math.max(this._spacing, emptyWidthArea / (2 * columnsPerPage));
-        global.log("SpacingForWidth, spacingForHeigth " + [spacingForWidth, spacingForHeight]);
-        
-        spacing = Math.max(this._spacing, Math.min(spacingForHeight, spacingForWidth));
-        
-        usedWidth = columnsPerPage * (this._hItemSize + spacing);
-        nColumns = columnsPerPage;
-        global.log("nColumns, usedWidth, spacing " + [nColumns, usedWidth, spacing]);
-
-        if (nColumns > 0)
-            usedWidth -= spacing;
-
-        return [nColumns, usedWidth, spacing];
-    },
 
     _onStyleChanged: function() {
         let themeNode = this.actor.get_theme_node();
@@ -542,3 +485,4 @@ const IconGrid = new Lang.Class({
         return this._usedWidth;
     }
 });
+Signals.addSignalMethods(IconGrid.prototype);


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