[gnome-shell/wip/swarm: 4/6] appDisplay: Animate indicators out

[Carlos Soriano <csoriano src gnome org>]

commit 525545b0847eb870830e88aac75fe361fc8d8cb6
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Tue Jun 17 21:31:53 2014 +0200

    appDisplay: Animate indicators out

 js/ui/appDisplay.js |   62 +++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 50 insertions(+), 12 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 9a1eeba..40876f7 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -46,6 +46,15 @@ const INDICATORS_BASE_TIME = 0.25;
 const INDICATORS_ANIMATION_DELAY = 0.125;
 const INDICATORS_ANIMATION_MAX_TIME = 0.75;
 
+// Since we will animate the page indicators only when aniamting with swarm too,
+// make the time of the animation consistent with the swarm one which is divided
+// by two to make the out animation. Also, make sure we don't exceed swarm animation 
+// total time.
+const INDICATORS_BASE_TIME_OUT = 0.125;
+const INDICATORS_ANIMATION_DELAY_OUT = 0.0625;
+const INDICATORS_ANIMATION_MAX_TIME_OUT = IconGrid.ANIMATION_TIME_OUT +
+                                          IconGrid.ANIMATION_MAX_DELAY_OUT_FOR_ITEM;
+
 const PAGE_SWITCH_TIME = 0.3;
 
 const VIEWS_SWITCH_TIME = 0.4;
@@ -199,7 +208,11 @@ const PageIndicators = new Lang.Class({
         this._currentPage = undefined;
 
         this.actor.connect('notify::mapped',
-                           Lang.bind(this, this._animateIndicators));
+                           Lang.bind(this,
+            function() {
+                if (this.actor.mapped)
+                    this._animateIndicatorsIn();
+            }));
     },
 
     setNPages: function(nPages) {
@@ -240,10 +253,7 @@ const PageIndicators = new Lang.Class({
             children[i].set_checked(i == this._currentPage);
     },
 
-    _animateIndicators: function() {
-        if (!this.actor.mapped)
-            return;
-
+    _animateIndicatorsIn: function() {
         let children = this.actor.get_children();
         if (children.length == 0)
             return;
@@ -268,6 +278,31 @@ const PageIndicators = new Lang.Class({
                                delay: VIEWS_SWITCH_ANIMATION_DELAY
                              });
         }
+    },
+
+    animateIndicatorsOut: function() {
+        let children = this.actor.get_children();
+        if (children.length == 0)
+            return;
+
+        let offset;
+        if (this.actor.get_text_direction() == Clutter.TextDirection.RTL)
+            offset = -children[0].width;
+        else
+            offset = children[0].width;
+
+        let delay = INDICATORS_ANIMATION_DELAY;
+        let totalAnimationTime = INDICATORS_BASE_TIME_OUT + INDICATORS_ANIMATION_DELAY_OUT * this._nPages;
+        if (totalAnimationTime > INDICATORS_ANIMATION_MAX_TIME_OUT)
+            delay -= (totalAnimationTime - INDICATORS_ANIMATION_MAX_TIME_OUT) / this._nPages;
+
+        for (let i = 0; i < this._nPages; i++) {
+            Tweener.addTween(children[i],
+                             { translation_x: offset,
+                               time: INDICATORS_BASE_TIME_OUT + delay * i,
+                               transition: 'easeInOutQuad'
+                             });
+        }
     }
 });
 Signals.addSignalMethods(PageIndicators.prototype);
@@ -445,13 +480,14 @@ const AllView = new Lang.Class({
         let dashSize = Main.overview._dash._showAppsIcon.get_transformed_size();
         // Design decision, 1/2 of the dash icon size.
         let dashScaledSize = [dashSize[0] / 2, dashSize[1] / 2];
-        let gridAnimationFunction = Lang.bind(this, function() {
-            this._grid.animate(IconGrid.ANIMATION_TYPE_SWARM_SPRING,
-                               animationDirection,
-                               { sourcePosition: dashPosition,
-                                 sourceSize: dashScaledSize,
-                                 page: this._currentPage })
-        });
+        let gridAnimationFunction = Lang.bind(this,
+            function() {
+                this._grid.animate(IconGrid.ANIMATION_TYPE_SWARM_SPRING,
+                                   animationDirection,
+                                   { sourcePosition: dashPosition,
+                                     sourceSize: dashScaledSize,
+                                     page: this._currentPage })
+            });
         if (animationDirection == IconGrid.ANIMATION_DIRECTION_IN) {
             let toAnimate = this._grid.actor.connect('notify::allocation', Lang.bind(this,
                 function() {
@@ -483,9 +519,11 @@ const AllView = new Lang.Class({
                 let spaceClosedId = this._grid.connect('space-closed', Lang.bind(this,
                     function() {
                         this._grid.disconnect(spaceClosedId);
+                        this._pageIndicators.animateIndicatorsOut();
                         gridAnimationFunction();
                     }));
             } else {
+                this._pageIndicators.animateIndicatorsOut();
                 gridAnimationFunction();
             }
         }