[gnome-shell/wip/paging-release: 5/38] Added pages indicators

[Carlos Soriano <csoriano src gnome org>]

commit a8b53f1f2ed0a88bce972c3d6bea0ce8f4a3f2a8
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Mon Aug 12 19:09:43 2013 +0200

    Added pages indicators
    
    AllView: pagination indicator reworked
    
    pagesindicator css: change spacing
    
    PaginationIconIndicator: change icon name
    
    AllView, indicator layout, paginationScrollView: fixed allocation cycle hidding actors of indicators
    
    IndicatorLayout: fixed allocation
    
    No more hacking to Indicator
    
    before implementing with StBin

 data/theme/gnome-shell.css |    4 +
 js/ui/appDisplay.js        |  159 ++++++++++++++++++++++++++++++++++----------
 2 files changed, 128 insertions(+), 35 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c1a3fcc..ae633a0 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -905,6 +905,10 @@ StScrollBar StButton#vhandle:active {
     padding: 8px 88px;
 }
 
+.pages-indicator {
+       spacing: 30px;
+}
+
 .app-folder-icon {
     padding: 5px;
 }
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index a10ad05..05460b7 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -330,7 +330,47 @@ const PaginationScrollView = new Lang.Class({
 
         child.allocate(childBox, flags);
     },
+
+   vfunc_get_preferred_height: function (forWidht) {
+        global.log(this.get_parent().allocation.y2 - this.get_parent().allocation.y1);
+        
+        let parentBox = this.get_parent().allocation;
+        let gridBox = this.get_theme_node().get_content_box(parentBox);
+        global.log("padding " + this.get_theme_node().get_length('padding'));
+        let availWidth = gridBox.x2 - gridBox.x1;
+        let availHeight = gridBox.y2 - gridBox.y1;
+        global.log("availWidth " + availWidth);
+        
+        global.log("availHeight " + availHeight);
+        
+        return [0, 0];
+    },
+
+    vfunc_get_preferred_width: function(forHeight) {
+        let parentBox = this.get_parent().allocation;
+        let gridBox = this.get_theme_node().get_content_box(parentBox);
+        global.log("padding " + this.get_theme_node().get_length('padding'));
+        let availWidth = gridBox.x2 - gridBox.x1;
+        let availHeight = gridBox.y2 - gridBox.y1;
+        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];
+        childBox.x1 = 0;
+        childBox.y1 = 0;
+        childBox.x2 = availWidth;
+        childBox.y2 = availHeight;   
+
+        child.allocate(childBox, flags);
+    },
+
     vfunc_get_preferred_height: function (container, forWidht) {
         return [0, 0];
     },
@@ -356,9 +396,6 @@ const PaginationScrollView = new Lang.Class({
         
         this._pages.setGridParentSize([availWidth, availHeight]);
         child.allocate(childBox, flags);
-        if(this._pages.nPages() > 0) {
-            this._parent.goToPage(0);
-       }
     },
     
     goToPage: function(pageNumber) {
@@ -396,11 +433,6 @@ const PaginationScrollView = new Lang.Class({
                     this._eventBlocker.reactive = isOpen;
                     this._currentPopup = isOpen ? popup : null;
                     this._updateIconOpacities(isOpen);
-                    if (isOpen) {
-                        this._pages._grid.actor.y = popup.parentOffset;
-                    } else {
-                        this._pages._grid.actor.y = 0;
-                    }
                 }));
     },
     
@@ -420,10 +452,10 @@ const PaginationIconIndicator = new Lang.Class({
     _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',
+                                     button_mask: St.ButtonMask.ONE || St.ButtonMask.TWO,
+                                     toggle_mode: true,
+                                     can_focus: true });
+        this._icon = new St.Icon({ icon_name: 'process-stop-symbolic',
                                    icon_size: 32,
                                    style_class: 'show-apps-icon',
                                    track_hover: true});
@@ -435,10 +467,10 @@ const PaginationIconIndicator = new Lang.Class({
     },
 
     _createIcon: function(size) {
-        this._icon = new St.Icon({ icon_name: 'view-grid-symbolic',
-                                    icon_size: size,
-                                    style_class: 'show-apps-icon',
-                                    track_hover: true });
+        this._icon = new St.Icon({ icon_name: 'process-stop-symbolic',
+                                   icon_size: size,
+                                   style_class: 'show-apps-icon',
+                                   track_hover: true });
         return this._icon;
     },
 
@@ -452,49 +484,106 @@ const PaginationIconIndicator = new Lang.Class({
     }
 });
 
+const IndicatorLayout = Lang.Class({
+    Name:'IndicatorLayout',
+    Extends: Clutter.BoxLayout,
+
+    vfunc_get_preferred_width: function(container, forHeight) {
+        let [minWidth, natWidth] = container.get_children()[0].get_preferred_width(forHeight);
+        let totalWidth = natWidth + this.spacing * 2;
+        return [totalWidth, totalWidth];
+    },
+
+    vfunc_allocate: function(container, box, flags) {
+        let children = container.get_children();
+        if(children.length < 1)
+            return;
+        let availHeight = box.y2 - box.y1;
+        let availWidth = box.x2 - box.x1;
+        let [minHeight, natHeight] = children[0].get_preferred_height(availWidth);
+        let totalUsedHeight = this._nPages  * this.spacing * 2  - this.spacing + this._nPages * natHeight;
+        let heightPerChild = totalUsedHeight / this._nPages;
+        let [minWidth, natWidth] = children[0].get_preferred_width(natHeight);
+        let widthPerChild = natWidth + this.spacing * 2;
+        let firstPosition = [this.spacing, availHeight / 2 - totalUsedHeight / 2];
+
+        for(let i = 0; i < this._nPages; i++) {
+            let childBox = new Clutter.ActorBox();
+            childBox.x1 = 0;
+            childBox.x2 = availWidth;
+            childBox.y1 = firstPosition[1] + i * heightPerChild;
+            childBox.y2 = childBox.y1 + heightPerChild;
+            children[i].allocate(childBox, flags);
+        }
+    },
+
+    vfunc_set_container: function(container) {
+        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'); }));
+        this._container = container;
+    }
+});
 
 const AllView = new Lang.Class({
     Name: 'AllView',
    
     _init: function() {
-        this._paginationView = new PaginationScrollView(this);
-        let paginationIndicatorLayout = new Clutter.BoxLayout({orientation: Clutter.Orientation.VERTICAL});
-        //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 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, x_expand:true, y_expand:true});
+        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);
             if(i == 0) {
                 indicatorIcon.setChecked(true);
             }
-            indicatorIcon.actor.hide();
-            this._paginationIndicator.add_actor(indicatorIcon.actor);
+            this._paginationIndicator.add_child(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();
+        this._paginationIndicatorLayout._nPages = nPages;
+        let availWidth = box.x2 - box.x1;
+        let availHeight = box.y2 - box.y1;
+        let childBox = new Clutter.ActorBox();
+        let [minWidth, natWidth] = this._paginationIndicator.get_preferred_width(availHeight);
+        childBox.x1 = availWidth - natWidth;
+        childBox.x2 = availWidth;
+        childBox.y1 = 0;
+        childBox.y2 = availHeight;
+
+        this._paginationIndicator.allocate(childBox, flags);
         
-        if(nPages > 1) {
-            for(let i = 0; i < nPages; i++) {
-                this._paginationIndicator.get_child_at_index(i).show();
-            }         
-        }
-        this._paginationIndicator.allocate(box, 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();