[gnome-shell/wip/paging-release: 5/85] appDisplay: Added pagination indicator



commit fc9708a46e8ab6e0a222835c00f43545ec7ea127
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Mon Jun 24 12:26:10 2013 +0200

    appDisplay: Added pagination indicator
    
    Fails:
    -Spacing between frequent and all view different.

 js/ui/appDisplay.js |  159 +++++++++++++++++++++++++++++++--------------------
 js/ui/iconGrid.js   |  101 ++++++++++++++++++++++----------
 2 files changed, 167 insertions(+), 93 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index b15c789..aed4c72 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -35,6 +35,8 @@ const MAX_COLUMNS = 6;
 const INACTIVE_GRID_OPACITY = 77;
 const FOLDER_SUBICON_FRACTION = .4;
 
+const MAX_APPS_PAGES = 20;
+
 
 // Recursively load a GMenuTreeDirectory; we could put this in ShellAppSystem too
 function _loadCategory(dir, list) {
@@ -119,8 +121,9 @@ const FolderView = new Lang.Class({
     _init: function() {
         this._grid = new IconGrid.IconGrid({ xAlign: St.Align.MIDDLE,
             columnLimit: MAX_COLUMNS });
-     // Standard hack for ClutterBinLayout
+     
         this.actor = this._grid.actor;
+        //Standard hack for ClutterBinLayout
         this._grid.actor.x_expand = true;
 
         this._items = {};
@@ -252,7 +255,7 @@ const PaginationScrollView = new Lang.Class({
     Name: 'PaginationScrollView',
     Extends: St.ScrollView,
     
-    _init: function() {
+    _init: function(parent) {
         this.parent();
         
         this._stack = new St.Widget({layout_manager: new Clutter.BinLayout()});        
@@ -267,7 +270,8 @@ const PaginationScrollView = new Lang.Class({
         this.add_actor(this._box);
         
         this._currentPage = 0;
-
+        this._parent = parent;
+        
         this.connect('scroll-event', Lang.bind(this, this._onScroll));
     },
     
@@ -288,7 +292,6 @@ const PaginationScrollView = new Lang.Class({
         let childBox = new Clutter.ActorBox();
         //Get the  boxLayout inside scrollView
         let child = this.get_children()[2];
-        let childWidth = child.get_preferred_width(availHeight)[1];
 
         childBox.x1 = 0;
         childBox.y1 = 0;
@@ -296,36 +299,34 @@ const PaginationScrollView = new Lang.Class({
         childBox.y2 = availHeight;   
         
         this._pages.setGridParentSize([availWidth, availHeight]);
-
         child.allocate(childBox, flags);
-        
-        if(this._pages.nPages > 0) {
-            this.vscroll.adjustment.set_value(this._pages.getPagePosition(0)[1]);
+        if(this._pages.nPages() > 0) {
+            this._parent.goToPage(0);
        }
     },
     
-    goToNextPage: function() {
-        if(this._currentPage < this._pages.nPages())
-        {
-            this._currentPage+=1;
+    goToPage: function(pageNumber) {
+        
+        if(pageNumber < this._pages.nPages() && pageNumber >= 0) {
+            this._currentPage = pageNumber;
             this.vscroll.adjustment.set_value(this._pages.getPagePosition(this._currentPage)[1]);
         }
     },
     
-    goToPreviousPage: function() {
-        if(this._currentPage > 0)
-        {
-            this._currentPage-=1;
-            this.vscroll.adjustment.set_value(this._pages.getPagePosition(this._currentPage)[1]);
-        }
+    nPages: function() {
+      return this._pages.nPages();  
+    },
+    
+    currentPage: function() {
+        return this._currentPage;
     },
     
     _onScroll: function(actor, event) {
         let direction = event.get_scroll_direction();
         if (direction == Clutter.ScrollDirection.UP)
-            this.goToPreviousPage();
+            this._parent.goToPage(this._currentPage - 1);
         if (direction == Clutter.ScrollDirection.DOWN)
-            this.goToNextPage();
+            this._parent.goToPage(this._currentPage + 1);
     },
     
     addFolderPopup: function(popup) {
@@ -353,57 +354,85 @@ const PaginationScrollView = new Lang.Class({
     }
 });
 
+const PaginationIconIndicator = new Lang.Class({
+    Name: 'PaginationIconIndicator',
+    
+    _init: function(parent, index) {
+
+        this.actor = new St.Button({ style_class: 'show-apps',
+                                        button_mask: St.ButtonMask.ONE || St.ButtonMask.TWO,
+                                        toggle_mode: true,
+                                        can_focus: true });
+        this._icon = new St.Icon({ icon_name: 'view-grid-symbolic',
+                                   icon_size: 32,
+                                   style_class: 'show-apps-icon',
+                                   track_hover: true});
+        this.actor.connect('clicked', Lang.bind(this, this._onClicked));
+        this.actor.set_child(this._icon);
+        this.actor._delegate = this;
+        this._parent = parent;
+        this._index = index;
+    },
+
+    _createIcon: function(size) {
+        this._icon = new St.Icon({ icon_name: 'view-grid-symbolic',
+                                    icon_size: size,
+                                    style_class: 'show-apps-icon',
+                                    track_hover: true });
+        return this._icon;
+    },
+
+    _onClicked: function(actor, button) {
+        this._parent.goToPage(this._index); 
+        return false;
+    },
+    
+    setChecked: function (checked) {
+        this.actor.set_checked(checked);
+    }
+});
+
+
 const AllView = new Lang.Class({
     Name: 'AllView',
    
     _init: function() {
-        this._paginationView = new PaginationScrollView();
-        let layout = new Clutter.BinLayout();
-        this.actor = new St.Widget({layout_manager: layout, x_expand:true, y_expand:true});
-        
-        let color = new Clutter.Color({blue:200, red:100, green:100, alpha: 200});
-        let ac= new Clutter.Actor({background_color: color, x_align:2, y_align: 2, x_expand: true, y_expand: 
true});
-        ac.set_size(100, 100);
-        
-        let color2 = new Clutter.Color({blue:100, red:200, green:100, alpha: 200});
+        this._paginationView = new PaginationScrollView(this);
         let paginationIndicatorLayout = new Clutter.BoxLayout({orientation: Clutter.Orientation.VERTICAL});
-        //let ac2= new Clutter.Actor({layout_manager: paginationIndicatorLayout, x_align:3, y_align: 2, 
x_expand:true, y_expand:true});
-        
-        let ac2= new St.Widget({layout_manager: paginationIndicatorLayout, x_align:3, y_align: 2, 
x_expand:true, y_expand:true, style_class: 'pages-indicator'});
+        //FIXME: hardcoded spacing
         paginationIndicatorLayout.spacing = 40;
+        this._paginationIndicator = new St.Widget({layout_manager: paginationIndicatorLayout, x_align:3, 
y_align: 2, x_expand:true, y_expand:true, style_class: 'pages-indicator'});
         
-        let wraper = new St.Bin({x_expand: true, y_expand:true});
-        let wraper2 = new St.Bin({x_expand: true, y_expand:true});
-        let wraper3 = new St.Bin({x_expand: true, y_expand:true});
-        let wraper4 = new St.Bin({x_expand: true, y_expand:true});
-        //let ac2 = new St.BoxLayout({vertical:true, x_align:St.Align.END, y_align:St.Align.MIDDLE});
-        //wraper.child = ac2;
-        
-        let image = new Clutter.Texture();
-        image.set_from_file("testselected.svg");
-        //wraper.child = image;
-        //wraper.set_size(48,48);
-        let image2 = new Clutter.Texture();
-        //image2.set_size(48,48);
-        image2.set_from_file("testnormal.svg");
-        //wraper2.child = image2;
-        let image3 = new Clutter.Texture();
-        image3.set_from_file("testnormal.svg");
-       // wraper3.child = image3;
-        //image3.set_size(48,48);
-        let image4 = new Clutter.Texture();
-        //image4.set_size(48,48);
-        image4.set_from_file("testnormal.svg");
-       // wraper4.child = image4;
-
-        ac2.add_actor(image);
-        ac2.add_actor(image2);
-        ac2.add_actor(image3);
-        ac2.add_actor(image4);
-        //ac2.add_actor(ac);
+        let layout = new Clutter.BinLayout();
+        this.actor = new Shell.GenericContainer({layout_manager: layout, x_expand:true, y_expand:true});
         
         layout.add(this._paginationView, 2,2);
-        layout.add(ac2, 2,3);
+        layout.add(this._paginationIndicator, 2,3);
+
+        for(let i = 0; i < MAX_APPS_PAGES; i++) {
+
+            let indicatorIcon = new PaginationIconIndicator(this, i);
+            if(i == 0) {
+                indicatorIcon.setChecked(true);
+            }
+            indicatorIcon.actor.hide();
+            this._paginationIndicator.add_actor(indicatorIcon.actor);
+        }
+        this.actor.connect('allocate', Lang.bind(this, this._allocate));
+    },
+        
+    _allocate: function(widget, box, flags) {
+        let children = this.actor.get_children();
+        this._paginationView.allocate(box, flags);
+        
+        let nPages = this._paginationView.nPages();
+        
+        if(nPages > 1) {
+            for(let i = 0; i < nPages; i++) {
+                this._paginationIndicator.get_child_at_index(i).show();
+            }         
+        }
+        this._paginationIndicator.allocate(box, flags);
     },
     
     _onKeyRelease: function(actor, event) {
@@ -452,6 +481,12 @@ const AllView = new Lang.Class({
 
     loadGrid: function() {
         this._paginationView._pages.loadGrid();
+    },
+    
+    goToPage: function(index) {
+        this._paginationIndicator.get_child_at_index(this._paginationView.currentPage()).set_checked(false);
+        this._paginationView.goToPage(index);
+        this._paginationIndicator.get_child_at_index(this._paginationView.currentPage()).set_checked(true);
     }
 });
 
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 908877a..3155cf3 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -245,7 +245,7 @@ const IconGrid = new Lang.Class({
             nColumns = children.length;
             spacing = this._spacing;
         } else {
-            [nColumns, , spacing] = this._computeLayout(forWidth);
+            [nColumns, , spacing] = this._computeLayoutOld(forWidth);
         }
 
         let nRows;
@@ -285,7 +285,7 @@ const IconGrid = new Lang.Class({
         let children = this._getVisibleChildren();
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
-        let [nColumns, usedWidth, spacing] = this._computeLayout(availWidth, availHeight);
+        let [nColumns, usedWidth, spacing] = this._computeLayoutOld(availWidth);
         if(this._usePagination) {
             //Recalculate the space between pages with the new spacing
             this._spaceBetweenPages = this._parentSize[1] - (this._rowsPerPage * (this._vItemSize + 
spacing));
@@ -347,6 +347,7 @@ const IconGrid = new Lang.Class({
                 x += this._hItemSize + spacing;
             }
         }
+        
     },
 
     _calculateChildrenBox: function(child, x, y) {
@@ -379,12 +380,70 @@ const IconGrid = new Lang.Class({
     getRowLimit: function() {
         return this._rowLimit;
     },
+    
+    _computeLayoutOldOld: function (forWidth) {
+        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));
+            spacing = Math.round(spacing);
+        }
+
+        while ((this._colLimit == null || nColumns < this._colLimit) &&
+               (usedWidth + this._hItemSize <= forWidth)) {
+            usedWidth += this._hItemSize + spacing;
+            nColumns += 1;
+        }
+
+        if (nColumns > 0)
+            usedWidth -= spacing;
 
-    _computeLayout: function (forWidth, forHeight) {
+        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;
@@ -394,42 +453,27 @@ const IconGrid = new Lang.Class({
         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;
-        /*
-        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);
-            global.log("Spacing adjusted " + spacing)
-        }
+        global.log("nColumns, usedWidth, spacing " + [nColumns, usedWidth, spacing]);
 
-        while ((this._colLimit == null || nColumns < this._colLimit) &&
-               (usedWidth + this._hItemSize <= forWidth)) {
-            usedWidth += this._hItemSize + spacing;
-            nColumns += 1;
-        }*/
-        
         if (nColumns > 0)
             usedWidth -= spacing;
 
@@ -467,11 +511,6 @@ const IconGrid = new Lang.Class({
         return this._nPages;
     },
 
-    currentPagePosition: function() {
-        let childBox = this._firstPagesItems[this._currentPage].get_allocation_box();
-        return [childBox.x1, childBox.y1];
-    },
-    
     getPagePosition: function(pageNumber) {
         if(!this._nPages)
             return;


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