[gnome-shell/overview-relayout: 19/20] overview: Update animation

[Florian Müllner <fmuellner src gnome org>]

commit fca9d35316540ce693c398db0a585b6465addc2e
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Nov 11 18:50:19 2010 +0100

    overview: Update animation
    
    Update the animation on entering/leaving the overview to only zoom
    the window previews and fade other elements.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=634948

 js/ui/overview.js |   58 ++++++++++++++++++++++++++++++----------------------
 1 files changed, 33 insertions(+), 25 deletions(-)
---
diff --git a/js/ui/overview.js b/js/ui/overview.js
index 865a7a4..74488cb 100644
--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -126,6 +126,9 @@ Overview.prototype = {
         this._desktop = new St.Bin();
         global.overlay_group.add_actor(this._desktop);
 
+        this._zoomContainer = new St.Bin();
+        global.overlay_group.add_actor(this._zoomContainer);
+
         this._spacing = 0;
 
         this._group = new St.Group({ name: 'Overview' });
@@ -186,6 +189,7 @@ Overview.prototype = {
         this._dash.actor.add_constraint(this.viewSelector.constraintHeight);
 
         this._coverPane.lower_bottom();
+        this._zoomContainer.raise(this._group);
 
         this.workspaces = null;
     },
@@ -206,6 +210,9 @@ Overview.prototype = {
         let contentY = Panel.PANEL_HEIGHT;
         let contentHeight = primary.height - contentY - Main.messageTray.actor.height;
 
+        this._group.set_position(primary.x, primary.y);
+        this._group.set_size(primary.width, primary.height);
+
         this._coverPane.set_position(0, contentY);
         this._coverPane.set_size(primary.width, contentHeight);
 
@@ -269,12 +276,12 @@ Overview.prototype = {
 
     // Returns the current scale of the Overview.
     getScale : function() {
-        return this._group.scaleX;
+        return this._zoomContainer.scaleX;
     },
 
     // Returns the current position of the Overview.
     getPosition : function() {
-        return [this._group.x, this._group.y];
+        return [this._zoomContainer.x, this._zoomContainer.y];
     },
 
     show : function() {
@@ -301,7 +308,7 @@ Overview.prototype = {
         this._dash.show();
 
         this.workspaces = this._workspacesDisplay.workspacesView;
-        this._group.add_actor(this.workspaces.actor);
+        this._zoomContainer.set_child(this.workspaces.actor);
 
         if (!this._desktop.child)
             this._desktop.child = this._getDesktopClone();
@@ -316,16 +323,16 @@ Overview.prototype = {
                              });
         }
 
-        // Create a zoom out effect. First scale the Overview group up and
+        // Create a zoom out effect. First scale the workspaces view up and
         // position it so that the active workspace fills up the whole screen,
-        // then transform the group to its normal dimensions and position.
+        // then transform it to its normal dimensions and position.
         // The opposite transition is used in hide().
-        this._group.scaleX = this._group.scaleY = this.getZoomedInScale();
-        [this._group.x, this._group.y] = this.getZoomedInPosition();
+        this._zoomContainer.scaleX = this._zoomContainer.scaleY = this.getZoomedInScale();
+        [this._zoomContainer.x, this._zoomContainer.y] = this.getZoomedInPosition();
         let primary = global.get_primary_monitor();
-        Tweener.addTween(this._group,
-                         { x: primary.x,
-                           y: primary.y,
+        Tweener.addTween(this._zoomContainer,
+                         { x: primary.x - this._group.x,
+                           y: primary.y - this._group.y,
                            scaleX: 1,
                            scaleY: 1,
                            transition: 'easeOutQuad',
@@ -334,9 +341,9 @@ Overview.prototype = {
                            onCompleteScope: this
                           });
 
-        // Make Dash fade in so that it doesn't appear too big.
-        this._dash.actor.opacity = 0;
-        Tweener.addTween(this._dash.actor,
+        // Make the other elements fade in.
+        this._group.opacity = 0;
+        Tweener.addTween(this._group,
                          { opacity: 255,
                            transition: 'easeOutQuad',
                            time: ANIMATION_TIME
@@ -364,13 +371,18 @@ Overview.prototype = {
         }
 
         this.workspaces.hide();
+        this._zoomContainer.show();
 
-        // Create a zoom in effect by transforming the Overview group so that
+        // Create a zoom in effect by transforming the workspaces view so that
         // the active workspace fills up the whole screen. The opposite
         // transition is used in show().
+        this.workspaces.actor.hide();
+        this.workspaces.actor.reparent(this._zoomContainer);
+        this.workspaces.actor.show();
+
         let scale = this.getZoomedInScale();
         let [posX, posY] = this.getZoomedInPosition();
-        Tweener.addTween(this._group,
+        Tweener.addTween(this._zoomContainer,
                          { x: posX,
                            y: posY,
                            scaleX: scale,
@@ -381,8 +393,8 @@ Overview.prototype = {
                            onCompleteScope: this
                           });
 
-        // Make Dash fade out so that it doesn't appear to big.
-        Tweener.addTween(this._dash.actor,
+        // Make other elements fade out.
+        Tweener.addTween(this._group,
                          { opacity: 0,
                            transition: 'easeOutQuad',
                            time: ANIMATION_TIME
@@ -418,8 +430,12 @@ Overview.prototype = {
             return;
 
         this.animationInProgress = false;
+        this.workspaces.actor.reparent(this._group);
+        this.workspaces.actor.x -= this._group.x;
+        this.workspaces.actor.y -= this._group.y;
         this._desktop.hide();
         this._coverPane.lower_bottom();
+        this._zoomContainer.hide();
 
         this.emit('shown');
     },
@@ -437,14 +453,6 @@ Overview.prototype = {
         this._desktop.hide();
         this._group.hide();
 
-        // Reset the overview actor's scale/position, so that other elements
-        // can calculate their position correctly the next time the overview
-        // is shown
-        let primary = global.get_primary_monitor();
-        this._group.set_scale(1, 1);
-        this._group.set_position(primary.x, primary.y);
-        this._group.set_size(primary.width, primary.height);
-
         this.visible = false;
         this.animationInProgress = false;
         this._hideInProgress = false;