[gnome-shell/wip/background-rework: 13/13] loginDialog: add cross fade animation between states

[Ray Strode <halfline src gnome org>]

commit 48a5a9549b890114cf07d27ded8032d13d66559f
Author: Ray Strode <rstrode redhat com>
Date:   Wed Feb 6 14:18:26 2013 -0500

    loginDialog: add cross fade animation between states

 data/theme/gnome-shell.css |    1 +
 js/gdm/loginDialog.js      |   35 +++++++++++++++++++++++++++--------
 js/gdm/util.js             |   30 ++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 8 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c969f3e..b80170a 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2185,6 +2185,7 @@ StScrollBar StButton#vhandle:active {
 
 .login-dialog-user-list-item,
 .login-dialog-user-list-item:hover .login-dialog-user-list-item-name,
+.login-dialog-user-list-item:activated .login-dialog-user-list-item-name,
 .login-dialog-user-list:expanded .login-dialog-user-list-item:focus .login-dialog-user-list-item-name,
 .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
     color: white;
diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index 50bd419..be7aa54 100644
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -228,6 +228,9 @@ const UserList = new Lang.Class({
             let item = this._items[userName];
             item.actor.sync_hover();
             item.syncStyleClasses();
+
+            if (isExpanded)
+                item.actor.remove_style_pseudo_class('activated');
         }
     },
 
@@ -740,7 +743,12 @@ const LoginDialog = new Lang.Class({
         this._promptEntry.show();
         this._promptLoginHint.opacity = 0;
         this._promptLoginHint.show();
+        this._promptBox.opacity = 0;
         this._promptBox.show();
+        Tweener.addTween(this._promptBox,
+                         { opacity: 255,
+                           time: _FADE_ANIMATION_TIME,
+                           transition: 'easeOutQuad' });
 
         if (!this._user || (this._user.is_logged_in() && this._verifyingUser))
             this._sessionList.actor.show();
@@ -1044,7 +1052,7 @@ const LoginDialog = new Lang.Class({
     },
 
     _hideUserListAndLogIn: function() {
-        this._userSelectionBox.hide();
+        GdmUtil.cloneAndFadeOutActor(this._userSelectionBox);
         this._userList.updateStyle(false);
 
         let tasks = [function() {
@@ -1080,22 +1088,33 @@ const LoginDialog = new Lang.Class({
         clone.height = item.actor.height;
     },
 
+    _beginVerificationForItem: function(item) {
+        this._setPromptUserFromItem(item);
+
+        let tasks = [function() {
+                         let userName = item.user.get_user_name();
+                         return this._beginVerificationForUser(userName);
+                     }];
+        let batch = new Batch.ConsecutiveBatch(this, tasks);
+        return batch.run();
+    },
+
     _onUserListActivated: function(activatedItem) {
         let userName;
 
-        this._setPromptUserFromItem(activatedItem);
-
-        this._userSelectionBox.hide();
-        this._userList.updateStyle(false);
+        activatedItem.actor.add_style_pseudo_class('activated');
 
         let tasks = [function() {
-                         let userName = activatedItem.user.get_user_name();
-                         return this._beginVerificationForUser(userName);
+                         return GdmUtil.cloneAndFadeOutActor(this._userSelectionBox);
+                     },
+                     function() {
+                         this._userList.updateStyle(false);
                      }];
 
         this._user = activatedItem.user;
 
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
+        let batch = new Batch.ConcurrentBatch(this, [new Batch.ConsecutiveBatch(this, tasks),
+                                                     this._beginVerificationForItem(activatedItem)]);
         batch.run();
     },
 
diff --git a/js/gdm/util.js b/js/gdm/util.js
index 881d859..6b69f33 100644
--- a/js/gdm/util.js
+++ b/js/gdm/util.js
@@ -1,5 +1,6 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
+const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
@@ -15,6 +16,7 @@ const Tweener = imports.ui.tweener;
 const PASSWORD_SERVICE_NAME = 'gdm-password';
 const FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint';
 const FADE_ANIMATION_TIME = 0.16;
+const CLONE_FADE_ANIMATION_TIME = 0.25;
 
 const LOGIN_SCREEN_SCHEMA = 'org.gnome.login-screen';
 const FINGERPRINT_AUTHENTICATION_KEY = 'enable-fingerprint-authentication';
@@ -71,6 +73,34 @@ function fadeOutActor(actor) {
     return hold;
 }
 
+function cloneAndFadeOutActor(actor) {
+    // Immediately hide actor so its sibling can have its space
+    // and position, but leave a non-reactive clone on-screen,
+    // so from the user's point of view it smoothly fades away
+    // and reveals its sibling.
+    actor.hide();
+
+    let clone = new Clutter.Clone({ source: actor,
+                                    reactive: false });
+
+    Main.uiGroup.add_child(clone);
+
+    let [x, y] = actor.get_transformed_position();
+    clone.set_position(x, y);
+
+    let hold = new Batch.Hold();
+    Tweener.addTween(clone,
+                     { opacity: 0,
+                       time: CLONE_FADE_ANIMATION_TIME,
+                       transition: 'easeOutQuad',
+                       onComplete: function() {
+                           clone.destroy();
+                           hold.release();
+                       }
+                     });
+    return hold;
+}
+
 const ShellUserVerifier = new Lang.Class({
     Name: 'ShellUserVerifier',