[gnome-shell/wip/paging-release2: 12/23] appDisplay: Animate indicators

[Carlos Soriano <csoriano src gnome org>]

commit 4d95ca79f76830a26ec36b23b71ddc36e7fffb15
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Mon Aug 26 12:47:09 2013 +0200

    appDisplay: Animate indicators
    
    Add a translation animation for indicators, following
    design reasons

 js/ui/appDisplay.js |   35 +++++++++++++++++++++++++++++++++++
 1 files changed, 35 insertions(+), 0 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 15a68cd..adbc057 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -39,6 +39,13 @@ const FOLDER_SUBICON_FRACTION = .4;
 
 const MAX_APPS_PAGES = 20;
 
+const INDICATORS_ANIMATION_TIME = 0.6;
+// 100% means indicators wait for be animated until the previous one
+// is animated completely. 0% means all animators are animated
+// at once without waits
+const INDICATORS_ANIMATION_DELAY_OFFSET_PRECENTAGE = 50;
+const INDICATOR_MOVE_OFFSET = 60;
+
 const PAGE_SWITCH_TIME = 0.3;
 
 // Recursively load a GMenuTreeDirectory; we could put this in ShellAppSystem too
@@ -294,6 +301,32 @@ const AllView = new Lang.Class({
 
         this._availWidth = 0;
         this._availHeight = 0;
+
+        this.actor.connect('notify::mapped', Lang.bind(this, this._animateIndicators));
+    },
+
+    _animateIndicators: function() {
+        let indicators = this._paginationIndicator.actor.get_children();
+        this._hideIndicators();
+
+        if (this.actor.mapped) {
+            let timeForEachIndicator = INDICATORS_ANIMATION_TIME / this._grid.nPages();
+            let delay = INDICATORS_ANIMATION_DELAY_OFFSET_PRECENTAGE / 100 * timeForEachIndicator;
+            for (let i = 0; i < this._grid.nPages(); i++) {
+                let params = { translation_x: 0,
+                               time: timeForEachIndicator,
+                               delay: delay * i,
+                               transition: 'easeOutQuad' };
+                Tweener.addTween(indicators[i], params);
+            }
+        }
+    },
+
+    _hideIndicators: function() {
+        let indicators = this._paginationIndicator.actor.get_children();
+
+        for (let i in indicators)
+            indicators[i].translation_x = INDICATOR_MOVE_OFFSET;
     },
 
     goToPage: function(pageNumber, updateIndicators, animated) {
@@ -432,6 +465,8 @@ const AllView = new Lang.Class({
         
         if (this._availWidth != availWidth || this._availHeight != availHeight || oldNPages != 
this._grid.nPages()) {
             this._paginationIndicator.nPages = this._grid.nPages();
+            // Update indicators positions
+            this._animateIndicators();
             this.goToPage(0, false, false);
             Meta.later_add(Meta.LaterType.BEFORE_REDRAW, Lang.bind(this, function() { this.goToPage(0, true, 
false); }));
         }