[gnome-shell/wip/paging-release2: 19/23] appDisplay: Make space on grid to fit collection when opening

[Florian Müllner <fmuellner src gnome org>]

commit cfd19d9a0addeb8beef739baeb94deaac3076af5
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Tue Jul 9 15:11:03 2013 +0200

    appDisplay: Make space on grid to fit collection when opening
    
    Move icons out of the way to make place for the FolderView
    popup before opening it. This way app collections appear as
    expansions of the main grid rather than something separate
    on top.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=706081

 js/ui/appDisplay.js |   56 ++++++++++++++++++++++++++++++++++++++++++++++----
 1 files changed, 51 insertions(+), 5 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index ba1c40c..bef866e 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -34,7 +34,7 @@ const MIN_COLUMNS = 4;
 const MIN_ROWS = 4;
 
 const INACTIVE_GRID_OPACITY = 77;
-const INACTIVE_GRID_OPACITY_ANIMATION_TIME = 0.15;
+const INACTIVE_GRID_OPACITY_ANIMATION_TIME = 0.40;
 const FOLDER_SUBICON_FRACTION = .4;
 
 const INDICATORS_ANIMATION_TIME = 0.5;
@@ -323,6 +323,8 @@ const AllView = new Lang.Class({
         }));
         this._eventBlocker.add_action(this._clickAction);
 
+        this._displayingPopup = false;
+
         this._availWidth = 0;
         this._availHeight = 0;
 
@@ -330,6 +332,14 @@ const AllView = new Lang.Class({
             function() {
                 this.goToPage(0);
             }));
+        this._grid.connect('space-opened', Lang.bind(this,
+            function() {
+                this.emit('space-ready');
+            }));
+        this._grid.connect('space-closed', Lang.bind(this,
+            function() {
+                this._displayingPopup = false;
+            }));
     },
 
     getCurrentPageY: function() {
@@ -337,6 +347,11 @@ const AllView = new Lang.Class({
     },
 
     goToPage: function(pageNumber) {
+        if (this._currentPage == pageNumber && this._displayingPopup && this._currentPopup)
+            return;
+        if (this._displayingPopup && this._currentPopup)
+            this._currentPopup.popdown();
+
         let velocity;
         if (!this._panning)
             velocity = 0;
@@ -378,7 +393,20 @@ const AllView = new Lang.Class({
         return Math.abs(currentScrollPosition - this._grid.getPageY(pageNumber));
     },
 
+    openSpaceForPopup: function(item, side, nRows) {
+        this._updateIconOpacities(true);
+        this._displayingPopup = true;
+        this._grid.openExtraSpace(item, side, nRows);
+    },
+
+    _closeSpaceForPopup: function() {
+        this._updateIconOpacities(false);
+        this._grid.closeExtraSpace();
+    },
+
     _onScroll: function(actor, event) {
+         if(this._displayingPopup)
+            return;
         let direction = event.get_scroll_direction();
         if (direction == Clutter.ScrollDirection.UP) {
             if (this._currentPage > 0)
@@ -392,6 +420,8 @@ const AllView = new Lang.Class({
     },
 
     _onPan: function(action) {
+        if (this._displayingPopup)
+            return false;
         this._panning = true;
         this._clickAction.release();
         let [dist, dx, dy] = action.get_motion_delta(0);
@@ -401,6 +431,8 @@ const AllView = new Lang.Class({
     },
 
     _onPanEnd: function(action) {
+         if (this._displayingPopup)
+            return;
         let diffCurrentPage = this._diffToPage(this._currentPage);
         if (diffCurrentPage > this._pagesBin.height * PAGE_SWITCH_TRESHOLD) {
             if (action.get_velocity(0)[2] > 0 && this._currentPage > 0)
@@ -466,6 +498,8 @@ const AllView = new Lang.Class({
                 this._eventBlocker.reactive = isOpen;
                 this._currentPopup = isOpen ? popup : null;
                 this._updateIconOpacities(isOpen);
+                if(!isOpen)
+                    this._closeSpaceForPopup();
             }));
     },
 
@@ -528,6 +562,7 @@ const AllView = new Lang.Class({
             this._folderIcons[i].adaptToSize(availWidth, availHeight);
     }
 });
+Signals.addSignalMethods(AllView.prototype);
 
 const FrequentView = new Lang.Class({
     Name: 'FrequentView',
@@ -964,8 +999,8 @@ const FolderIcon = new Lang.Class({
         this.actor.connect('clicked', Lang.bind(this,
             function() {
                 this._ensurePopup();
-                this._popup.toggle();
                 this.view.actor.vscroll.adjustment.value = 0;
+                this._openSpaceForPopup();
             }));
         this.actor.connect('notify::mapped', Lang.bind(this,
             function() {
@@ -983,6 +1018,16 @@ const FolderIcon = new Lang.Class({
         return usedHeight;
     },
 
+    _openSpaceForPopup: function() {
+        let id = this._parentView.connect('space-ready', Lang.bind(this,
+            function() {
+                this._parentView.disconnect(id);
+                this._popup.popup();
+                this._updatePopupPosition();
+            }));
+        this._parentView.openSpaceForPopup(this, this._boxPointerArrowside, 
this.view.nRowsDisplayedAtOnce());
+    },
+
     _calculateBoxPointerArrowSide: function() {
         let spaceTop = this.actor.y - this._parentView.getCurrentPageY();
         let spaceBottom = this._parentView.actor.height - (spaceTop + this.actor.height);
@@ -1007,9 +1052,9 @@ const FolderIcon = new Lang.Class({
             return;
 
         if (this._boxPointerArrowside == St.Side.BOTTOM)
-            this._popup.actor.y = this.actor.y - this._popupHeight();
+            this._popup.actor.y = this.actor.allocation.y1 + this.actor.translation_y - this._popupHeight();
         else
-            this._popup.actor.y = this.actor.y + this.actor.height;
+            this._popup.actor.y = this.actor.allocation.y1 + this.actor.translation_y + this.actor.height;
     },
 
     _ensurePopup: function() {
@@ -1114,12 +1159,13 @@ const AppFolderPopup = new Lang.Class({
             return;
 
         this.actor.show();
-        this.actor.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
 
         this._boxPointer.setArrowActor(this._source.actor);
         this._boxPointer.show(BoxPointer.PopupAnimation.FADE |
                               BoxPointer.PopupAnimation.SLIDE);
 
+        this.actor.navigate_focus(null, Gtk.DirectionType.TAB_FORWARD, false);
+
         this._isOpen = true;
         this.emit('open-state-changed', true);
     },