[gnome-shell/wip/swarm: 3/5] appDisplay: Animate appIcon for new window of apps

[Carlos Soriano <csoriano src gnome org>]

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

    appDisplay: Animate appIcon for new window of apps
    
    Following design mockups, animate the icons on AllView, FrequentView,
    Dash and Search to zoom out when opening a new window of the app or when
    the app is not running and the user execute it.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=734726

 js/ui/appDisplay.js |   32 +++++++++++++++----------
 js/ui/iconGrid.js   |   64 +++++++++++++++++++++++++++++++++++++++++++++-----
 js/ui/search.js     |    9 +++++++
 3 files changed, 85 insertions(+), 20 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 02d5c8f..cdc92c3 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1696,13 +1696,7 @@ const AppIcon = new Lang.Class({
 
     _onClicked: function(actor, button) {
         this._removeMenuTimeout();
-
-        if (button == 0 || button == 1) {
-            this._onActivate(Clutter.get_current_event());
-        } else if (button == 2) {
-            this.app.open_new_window(-1);
-            Main.overview.hide();
-        }
+        this.activate(button);
     },
 
     _onKeyboardPopupMenu: function() {
@@ -1756,19 +1750,28 @@ const AppIcon = new Lang.Class({
         this.emit('menu-state-changed', false);
     },
 
-    _onActivate: function (event) {
-        let modifiers = event.get_state();
+    activate: function (button) {
+        let event = Clutter.get_current_event();
+        let modifiers = event ? event.get_state() : 0;
+        let openNewWindow = modifiers & Clutter.ModifierType.CONTROL_MASK &&
+                            this.app.state == Shell.AppState.RUNNING ||
+                            button && button == 2;
+
+        if (this.app.state == Shell.AppState.STOPPED || openNewWindow)
+            this.animateOut();
 
-        if (modifiers & Clutter.ModifierType.CONTROL_MASK
-            && this.app.state == Shell.AppState.RUNNING) {
+        if (openNewWindow)
             this.app.open_new_window(-1);
-        } else {
+        else
             this.app.activate();
-        }
 
         Main.overview.hide();
     },
 
+    animateOut: function() {
+        this.icon.animateOut();
+    },
+
     shellWorkspaceLaunch : function(params) {
         params = Params.parse(params, { workspace: -1,
                                         timestamp: 0 });
@@ -1850,6 +1853,9 @@ const AppIconMenu = new Lang.Class({
             if (this._source.app.can_open_new_window()) {
                 this._newWindowMenuItem = this._appendMenuItem(_("New Window"));
                 this._newWindowMenuItem.connect('activate', Lang.bind(this, function() {
+                    if (this._source.app.state == Shell.AppState.STOPPED)
+                        this._source.animateOut();
+
                     this._source.app.open_new_window(-1);
                     this.emit('activate-window', null);
                 }));
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index a2170da..8461a28 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -35,6 +35,9 @@ const AnimationDirection = {
     OUT: 1
 };
 
+const APPICON_ANIMATION_OUT_SCALE = 3;
+const APPICON_ANIMATION_OUT_TIME = 0.25;
+
 const BaseIcon = new Lang.Class({
     Name: 'BaseIcon',
 
@@ -58,23 +61,23 @@ const BaseIcon = new Lang.Class({
 
         this._spacing = 0;
 
-        let box = new Shell.GenericContainer();
-        box.connect('allocate', Lang.bind(this, this._allocate));
-        box.connect('get-preferred-width',
+        this._box = new Shell.GenericContainer();
+        this._box.connect('allocate', Lang.bind(this, this._allocate));
+        this._box.connect('get-preferred-width',
                     Lang.bind(this, this._getPreferredWidth));
-        box.connect('get-preferred-height',
+        this._box.connect('get-preferred-height',
                     Lang.bind(this, this._getPreferredHeight));
-        this.actor.set_child(box);
+        this.actor.set_child(this._box);
 
         this.iconSize = ICON_SIZE;
         this._iconBin = new St.Bin({ x_align: St.Align.MIDDLE,
                                      y_align: St.Align.MIDDLE });
 
-        box.add_actor(this._iconBin);
+        this._box.add_actor(this._iconBin);
 
         if (params.showLabel) {
             this.label = new St.Label({ text: label });
-            box.add_actor(this.label);
+            this._box.add_actor(this.label);
         } else {
             this.label = null;
         }
@@ -192,9 +195,56 @@ const BaseIcon = new Lang.Class({
 
     _onIconThemeChanged: function() {
         this._createIconTexture(this.iconSize);
+    },
+
+    animateOut: function() {
+        // Animate only the container box instead of the entire actor,
+        // so the styles like hover and running are not applied while
+        // animating.
+        actorZoomOut(this._box);
     }
 });
 
+function clamp(value, min, max) {
+    return Math.max(Math.min(value, max), min);
+};
+
+function actorZoomOut(actor) {
+    let actorClone = new Clutter.Clone({ source: actor,
+                                         reactive: false });
+    let [width, height] = actor.get_transformed_size();
+    let [x, y] = 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);
+
+    // Avoid monitor edges to not zoom outside the current monitor
+    let monitor = Main.layoutManager.findMonitorForActor(actor);
+    let scaledWidth = width * APPICON_ANIMATION_OUT_SCALE;
+    let scaledHeight = height * APPICON_ANIMATION_OUT_SCALE;
+    // Assume pivot point at 0.5, 0.5
+    let scaledX = x - (scaledWidth - width) / 2;
+    let scaledY = y - (scaledHeight - height) / 2;
+    let containedX = clamp(scaledX, monitor.x, monitor.x + monitor.width - scaledWidth);
+    let containedY = clamp(scaledY, monitor.y, monitor.y + monitor.height - scaledHeight);
+
+    Tweener.addTween(actorClone,
+                     { time: APPICON_ANIMATION_OUT_TIME,
+                       scale_x: APPICON_ANIMATION_OUT_SCALE,
+                       scale_y: APPICON_ANIMATION_OUT_SCALE,
+                       translation_x: containedX - scaledX,
+                       translation_y: containedY - scaledY,
+                       opacity: 0,
+                       transition: 'easeOutQuad',
+                       onComplete: function() {
+                           actorClone.destroy();
+                       }
+                    });
+}
+
 const IconGrid = new Lang.Class({
     Name: 'IconGrid',
 
diff --git a/js/ui/search.js b/js/ui/search.js
index 3046d01..02ef689 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -6,6 +6,7 @@ const Gio = imports.gi.Gio;
 const Gtk = imports.gi.Gtk;
 const Meta = imports.gi.Meta;
 const Signals = imports.signals;
+const Shell = imports.gi.Shell;
 const St = imports.gi.St;
 const Atk = imports.gi.Atk;
 
@@ -417,6 +418,7 @@ const ListSearchResults = new Lang.Class({
         this.providerIcon.connect('key-focus-in', Lang.bind(this, this._keyFocusIn));
         this.providerIcon.connect('clicked', Lang.bind(this,
             function() {
+                this.providerIcon.animateOut();
                 provider.launchSearch(this._terms);
                 Main.overview.toggle();
             }));
@@ -725,5 +727,12 @@ const ProviderIcon = new Lang.Class({
                                  gicon: provider.appInfo.get_icon() });
         this._content.add_actor(icon);
         this._content.add_actor(this.moreIcon);
+    },
+
+    animateOut: function() {
+        let appSys = Shell.AppSystem.get_default();
+        let app = appSys.lookup_app(this.provider.appInfo.get_id());
+        if (app.state == Shell.AppState.STOPPED)
+            IconGrid.actorZoomOut(this._content);
     }
 });