[gnome-shell/wip/swarm: 13/15] appDisplay: Animate on select app

[Carlos Soriano <csoriano src gnome org>]

commit 72e4d8e7f547a961fa00f89431477b2ccbcc7f9a
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Mon Jun 23 12:34:38 2014 +0200

    appDisplay: Animate on select app

 js/ui/appDisplay.js |   78 +++++++++++++++++++++++++++++++++++---------------
 1 files changed, 54 insertions(+), 24 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 40876f7..a424c55 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -48,7 +48,7 @@ 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 
+// 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;
@@ -60,6 +60,9 @@ const PAGE_SWITCH_TIME = 0.3;
 const VIEWS_SWITCH_TIME = 0.4;
 const VIEWS_SWITCH_ANIMATION_DELAY = 0.1;
 
+const APPICON_ANIMATION_OUT_SCALE = 3;
+const APPICON_ANIMATION_OUT_TIME = 0.25;
+
 function _getCategories(info) {
     let categoriesStr = info.get_categories();
     if (!categoriesStr)
@@ -467,14 +470,14 @@ const AllView = new Lang.Class({
 
         apps.forEach(Lang.bind(this, function(appId) {
             let app = appSys.lookup_app(appId);
-            let icon = new AppIcon(app);
+            let icon = new AppIcon(app, {}, { animateOnNewWindow: true });
             this.addItem(icon);
         }));
 
         this.loadGrid();
         this._refilterApps();
     },
-    
+
     animate: function(animationDirection, onCompleteOut) {
         let dashPosition = Main.overview._dash._showAppsIcon.get_transformed_position();
         let dashSize = Main.overview._dash._showAppsIcon.get_transformed_size();
@@ -765,11 +768,11 @@ const FrequentView = new Lang.Class({
         for (let i = 0; i < mostUsed.length; i++) {
             if (!mostUsed[i].get_app_info().should_show())
                 continue;
-            let appIcon = new AppIcon(mostUsed[i]);
+            let appIcon = new AppIcon(mostUsed[i], {}, { animateOnNewWindow: true });
             this._grid.addItem(appIcon, -1);
         }
     },
-    
+
     animate: function(animationDirection, onCompleteOut) {
         let dashPosition = Main.overview._dash._showAppsIcon.get_transformed_position();
         let dashSize = Main.overview._dash._showAppsIcon.get_transformed_size();
@@ -927,7 +930,7 @@ const AppDisplay = new Lang.Class({
         this._showView(initialView);
         this._updateFrequentVisibility();
     },
-    
+
     animate: function(animationDirection, onCompleteOut) {
         let view = this._views[global.settings.get_uint('app-picker-view')].view;
         view.animate(animationDirection, onCompleteOut);
@@ -1053,7 +1056,7 @@ const AppSearchProvider = new Lang.Class({
 
     createResultObject: function (resultMeta) {
         let app = this._appSys.lookup_app(resultMeta['id']);
-        return new AppIcon(app);
+        return new AppIcon(app, {}, { animateOnNewWindow: true });
     }
 });
 
@@ -1081,7 +1084,7 @@ const FolderView = new Lang.Class({
     _keyFocusIn: function(actor) {
         Util.ensureActorVisibleInScrollView(this.actor, actor);
     },
-    
+
     animate: function(animationType, animationDirection, params) {
         this._grid.animate(animationType, animationDirection, params);
     },
@@ -1415,13 +1418,13 @@ const AppFolderPopup = new Lang.Class({
         this.actor.show();
 
         this._boxPointer.setArrowActor(this._source.actor);
-        // We need to hide the icons of the view until the boxpointer animation 
+        // We need to hide the icons of the view until the boxpointer animation
         // is completed so we can animate the icons after as we like withouth
         // showing them while boxpointer is animating.
         this._view.actor.opacity = 0;
         this._boxPointer.show(BoxPointer.PopupAnimation.FADE |
                               BoxPointer.PopupAnimation.SLIDE,
-                              Lang.bind(this, 
+                              Lang.bind(this,
             function() {
                 // Restore the view opacity, so now we show the icons and animate
                 // them
@@ -1471,10 +1474,11 @@ Signals.addSignalMethods(AppFolderPopup.prototype);
 const AppIcon = new Lang.Class({
     Name: 'AppIcon',
 
-    _init : function(app, iconParams) {
+    _init : function(app, iconParams, params) {
         this.app = app;
         this.id = app.get_id();
         this.name = app.get_name();
+        this.params = Params.parse(params, { animateOnNewWindow: false });
 
         this.actor = new St.Button({ style_class: 'app-well-app',
                                      reactive: true,
@@ -1570,13 +1574,29 @@ const AppIcon = new Lang.Class({
 
     _onClicked: function(actor, button) {
         this._removeMenuTimeout();
+        let animate = this.params.animateOnNewWindow;
 
         if (button == 1) {
-            this._onActivate(Clutter.get_current_event());
+            let event = Clutter.get_current_event();
+            let modifiers = event.get_state();
+
+            if (modifiers & Clutter.ModifierType.CONTROL_MASK
+                && this.app.state == Shell.AppState.RUNNING) {
+                this.app.open_new_window(-1);
+            } else {
+                // Don't animate in any case if a new window is not created
+                //animate = false;
+                this.app.activate();
+            }
         } else if (button == 2) {
             this.app.open_new_window(-1);
-            Main.overview.hide();
         }
+
+        log("PPPPPPPPPP animate " + animate);
+        if (animate)
+            this._animateOut();
+        Main.overview.hide();
+
         return false;
     },
 
@@ -1631,17 +1651,27 @@ const AppIcon = new Lang.Class({
         this.emit('menu-state-changed', false);
     },
 
-    _onActivate: function (event) {
-        let modifiers = event.get_state();
-
-        if (modifiers & Clutter.ModifierType.CONTROL_MASK
-            && this.app.state == Shell.AppState.RUNNING) {
-            this.app.open_new_window(-1);
-        } else {
-            this.app.activate();
-        }
-
-        Main.overview.hide();
+    _animateOut: function() {
+        let actorClone = new Clutter.Clone({ source: this.icon.actor,
+                                             reactive: false });
+        let [width, height] = this.actor.get_transformed_size();
+        let [x, y] = this.actor.get_transformed_position();
+        actorClone.set_size(width, height);
+        actorClone.set_position(x, y);
+        actorClone.opacity = 255;
+        actorClone.set_pivot_point(0.5, 0.5);
+        Main.uiGroup.add_actor(actorClone);
+
+        Tweener.addTween(actorClone,
+                        { time: APPICON_ANIMATION_OUT_TIME,
+                          scale_x: APPICON_ANIMATION_OUT_SCALE,
+                          scale_y: APPICON_ANIMATION_OUT_SCALE,
+                          opacity: 0,
+                          transition: 'easeOutQuad',
+                          onComplete: function() {
+                               actorClone.destroy();
+                            }
+                        });
     },
 
     shellWorkspaceLaunch : function(params) {