[gnome-shell] [Overview] Fade dash menus

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

commit 88be8e87acfa1ec20d41c45ffcfd81444ee7b6e7
Author: Florian Müllner <fmuellner gnome org>
Date:   Sun Jun 6 20:20:00 2010 +0200

    [Overview] Fade dash menus
    
    As the design calls for smooth transitions whenever possible, use
    a similar fade effect for the all-apps and more-docs menus as for
    the panel menus.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=620775

 js/ui/appDisplay.js |   27 ++++++++++++++++++++++++---
 js/ui/dash.js       |   21 ++++++++++++++++++---
 js/ui/overview.js   |    3 +++
 3 files changed, 45 insertions(+), 6 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 16f3aa6..471a65c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -17,7 +17,9 @@ const AppFavorites = imports.ui.appFavorites;
 const DND = imports.ui.dnd;
 const GenericDisplay = imports.ui.genericDisplay;
 const Main = imports.ui.main;
+const Overview = imports.ui.overview;
 const Search = imports.ui.search;
+const Tweener = imports.ui.tweener;
 const Workspace = imports.ui.workspace;
 
 const APPICON_SIZE = 48;
@@ -179,9 +181,28 @@ AllAppDisplay.prototype = {
     },
 
     toggle: function() {
-        this.emit('open-state-changed', !this.actor.visible);
-
-        this.actor.visible = !this.actor.visible;
+        if (this.actor.visible) {
+            Tweener.addTween(this.actor,
+                             { opacity: 0,
+                               time: Overview.PANE_FADE_TIME,
+                               transition: 'easeOutQuad',
+                               onComplete: Lang.bind(this,
+                                   function() {
+                                       this.actor.hide();
+                                       this.emit('open-state-changed',
+                                                 this.actor.visible);
+                                   })
+                             });
+        } else {
+            this.actor.show();
+            this.emit('open-state-changed', this.actor.visible);
+            this.actor.opacity = 0;
+            Tweener.addTween(this.actor,
+                             { opacity: 255,
+                               time: Overview.PANE_FADE_TIME,
+                               transition: 'easeOutQuad'
+                             });
+        }
     },
 
     close: function() {
diff --git a/js/ui/dash.js b/js/ui/dash.js
index e944f90..df0cc4b 100644
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -17,7 +17,9 @@ const DocDisplay = imports.ui.docDisplay;
 const PlaceDisplay = imports.ui.placeDisplay;
 const GenericDisplay = imports.ui.genericDisplay;
 const Main = imports.ui.main;
+const Overview = imports.ui.overview;
 const Search = imports.ui.search;
+const Tweener = imports.ui.tweener;
 
 // 25 search results (per result type) should be enough for everyone
 const MAX_RENDERED_SEARCH_RESULTS = 25;
@@ -79,16 +81,29 @@ Pane.prototype = {
         if (this._open)
             return;
         this._open = true;
-        this.actor.show();
         this.emit('open-state-changed', this._open);
+        this.actor.opacity = 0;
+        this.actor.show();
+        Tweener.addTween(this.actor,
+                         { opacity: 255,
+                           time: Overview.PANE_FADE_TIME,
+                           transition: 'easeOutQuad'
+                         });
     },
 
     close: function () {
         if (!this._open)
             return;
         this._open = false;
-        this.actor.hide();
-        this.emit('open-state-changed', this._open);
+        Tweener.addTween(this.actor,
+                         { opacity: 0,
+                           time: Overview.PANE_FADE_TIME,
+                           transition: 'easeOutQuad',
+                           onComplete: Lang.bind(this, function() {
+                               this.actor.hide();
+                               this.emit('open-state-changed', this._open);
+                           })
+                         });
     },
 
     destroyContent: function() {
diff --git a/js/ui/overview.js b/js/ui/overview.js
index 228031c..1082696 100644
--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -24,6 +24,9 @@ const WorkspacesView = imports.ui.workspacesView;
 // Time for initial animation going into Overview mode
 const ANIMATION_TIME = 0.25;
 
+// Time for pane menus to fade in/out
+const PANE_FADE_TIME = 0.1;
+
 // We divide the screen into a grid of rows and columns, which we use
 // to help us position the Overview components, such as the side panel
 // that lists applications and documents, the workspaces display, and