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

[Carlos Soriano <csoriano src gnome org>]

commit 385cd41e4e92438a80be5e6efa5ff5fe9a1d7ad7
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.
    Also make possible animating indicators between view changes as well.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=734726

 js/ui/appDisplay.js |  104 +++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 84 insertions(+), 20 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c80f1bc..9ca0146 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;
 
+// Follow iconGrid animations approach and divide by 2 to animate out to
+// not annoy the user when the user wants to quit appDisplay.
+// Also, make sure we don't exceed iconGrid animation total time or
+// views switch time.
+const INDICATORS_BASE_TIME_OUT = 0.125;
+const INDICATORS_ANIMATION_DELAY_OUT = 0.0625;
+const INDICATORS_ANIMATION_MAX_TIME_OUT =
+    Math.min (VIEWS_SWITCH_TIME,
+              IconGrid.ANIMATION_TIME_OUT + IconGrid.ANIMATION_MAX_DELAY_OUT_FOR_ITEM);
+
 const PAGE_SWITCH_TIME = 0.3;
 
 const VIEWS_SWITCH_TIME = 0.4;
@@ -179,6 +189,25 @@ const BaseAppView = new Lang.Class({
                 this.selectApp(id);
             }));
         }
+    },
+
+    animateSwitch: function(active) {
+        Tweener.removeTweens(this.actor);
+        Tweener.removeTweens(this._grid.actor);
+
+        let params = { time: VIEWS_SWITCH_TIME,
+                       transition: 'easeOutQuad' };
+        if (active) {
+            this.actor.show();
+            params.opacity = 255;
+            params.delay = VIEWS_SWITCH_ANIMATION_DELAY;
+        } else {
+            params.opacity = 0;
+            params.delay = 0;
+            params.onComplete = Lang.bind(this, function() { this.actor.hide() });
+        }
+
+        Tweener.addTween(this._grid.actor, params);
     }
 });
 Signals.addSignalMethods(BaseAppView.prototype);
@@ -214,9 +243,6 @@ const PageIndicators = new Lang.Class({
         this.actor = new PageIndicatorsActor();
         this._nPages = 0;
         this._currentPage = undefined;
-
-        this.actor.connect('notify::mapped',
-                           Lang.bind(this, this._animateIndicators));
     },
 
     setNPages: function(nPages) {
@@ -246,7 +272,9 @@ const PageIndicators = new Lang.Class({
                 children[i].destroy();
         }
         this._nPages = nPages;
-        this.actor.visible = (this._nPages > 1);
+
+        // Show them if necessary
+        this.animateIndicatorsIn();
     },
 
     setCurrentPage: function(currentPage) {
@@ -257,14 +285,13 @@ 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)
+        if (children.length <= 1)
             return;
 
+        this.actor.show();
+
         let offset;
         if (this.actor.get_text_direction() == Clutter.TextDirection.RTL)
             offset = -children[0].width;
@@ -285,6 +312,38 @@ const PageIndicators = new Lang.Class({
                                delay: VIEWS_SWITCH_ANIMATION_DELAY
                              });
         }
+    },
+
+    animateIndicatorsOut: function() {
+        let children = this.actor.get_children();
+        if (children.length <= 1) {
+            this.actor.hide();
+            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++) {
+            let isLastItem = i == this._nPages -1;
+            Tweener.addTween(children[i],
+                             { translation_x: offset,
+                               time: INDICATORS_BASE_TIME_OUT + delay * i,
+                               transition: 'easeInOutQuad',
+                               onComplete: Lang.bind(this, function() {
+                                   if (isLastItem)
+                                       this.actor.hide();
+                               })
+                             });
+        }
     }
 });
 Signals.addSignalMethods(PageIndicators.prototype);
@@ -475,6 +534,9 @@ const AllView = new Lang.Class({
                                      page: this._currentPage });
             });
         if (animationDirection == IconGrid.AnimationDirection.IN) {
+            if (this._grid.actor.mapped)
+                this._pageIndicators.animateIndicatorsIn();
+
             let toAnimate = this._grid.actor.connect('notify::allocation', Lang.bind(this,
                 function() {
                     if (this._grid.actor.mapped) {
@@ -499,14 +561,25 @@ 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();
             }
         }
     },
 
+    animateSwitch: function(active) {
+        this.parent(active);
+
+        if (active)
+            this._pageIndicators.animateIndicatorsIn();
+        else
+            this._pageIndicators.animateIndicatorsOut();
+    },
+
     getCurrentPageY: function() {
         return this._grid.getPageY(this._currentPage);
     },
@@ -937,21 +1010,12 @@ const AppDisplay = new Lang.Class({
 
     _showView: function(activeIndex) {
         for (let i = 0; i < this._views.length; i++) {
-            let actor = this._views[i].view.actor;
-
-            let params = { time: VIEWS_SWITCH_TIME,
-                           opacity: (i == activeIndex) ? 255 : 0,
-                           delay: (i == activeIndex) ? VIEWS_SWITCH_ANIMATION_DELAY : 0 };
-            if (i == activeIndex)
-                actor.visible = true;
-            else
-                params.onComplete = function() { actor.hide(); };
-            Tweener.addTween(actor, params);
-
             if (i == activeIndex)
                 this._views[i].control.add_style_pseudo_class('checked');
             else
                 this._views[i].control.remove_style_pseudo_class('checked');
+
+            this._views[i].view.animateSwitch(i == activeIndex);
         }
     },