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

[Carlos Soriano <csoriano src gnome org>]

commit d3ac4733e6eae33dbcc4f20bc67ffb6c3e48842b
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 |   99 +++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 85 insertions(+), 14 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index eb6c768..80579af 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;
@@ -214,9 +224,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 +253,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 +266,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 +293,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 +515,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 +542,37 @@ 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) {
+        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;
+            this._pageIndicators.animateIndicatorsIn();
+        } else {
+            params.opacity = 0;
+            params.delay = 0;
+            params.onComplete = Lang.bind(this, function() { this.actor.hide() });
+            this._pageIndicators.animateIndicatorsOut();
+        }
+
+        Tweener.addTween(this._grid.actor, params);
+    },
+
     getCurrentPageY: function() {
         return this._grid.getPageY(this._currentPage);
     },
@@ -929,6 +995,14 @@ const AppDisplay = new Lang.Class({
 
     _showView: function(activeIndex) {
         for (let i = 0; i < this._views.length; i++) {
+            if (i == activeIndex)
+                this._views[i].control.add_style_pseudo_class('checked');
+            else
+                this._views[i].control.remove_style_pseudo_class('checked');
+
+            if (i == Views.ALL)
+                continue;
+
             let actor = this._views[i].view.actor;
 
             let params = { time: VIEWS_SWITCH_TIME,
@@ -939,12 +1013,9 @@ const AppDisplay = new Lang.Class({
             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[Views.ALL].view.animateSwitch(activeIndex == Views.ALL);
     },
 
     _updateFrequentVisibility: function() {