[gnome-shell/wip/swarm: 5/10] appDisplay: Animate indicators out

[Carlos Soriano <csoriano src gnome org>]

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

    appDisplay: Animate indicators out
    
    Given that we animate indicator in, it makes sense to animate them out
    as well.

 js/ui/appDisplay.js |   48 ++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 42 insertions(+), 6 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index f2460a5..72bb08b 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -45,6 +45,16 @@ 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 animating with
+// iconGrid animations too, make the time of the animation consistent
+// with the iconGrid animations which are divided by two to make the out
+// animation.  Also, make sure we don't exceed iconGrid 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;
@@ -215,8 +225,10 @@ const PageIndicators = new Lang.Class({
         this._nPages = 0;
         this._currentPage = undefined;
 
-        this.actor.connect('notify::mapped',
-                           Lang.bind(this, this._animateIndicators));
+        this.actor.connect('notify::mapped', Lang.bind(this, function() {
+                if (this.actor.mapped)
+                    this._animateIndicatorsIn();
+            }));
     },
 
     setNPages: function(nPages) {
@@ -257,10 +269,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;
@@ -285,6 +294,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);
@@ -500,9 +534,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();
             }
         }