[gnome-shell/wip/background-rework: 9/13] loginDialog: drop animations



commit 40ae05e5d603b613c530d0d2bf3b2528672373f8
Author: Ray Strode <rstrode redhat com>
Date:   Mon Feb 4 16:50:46 2013 -0500

    loginDialog: drop animations
    
    The latest mockups don't animate between states by
    resizing actors. Instead, crossfades are employed.
    
    This commit strips out many of the existing animations
    as a first step toward implementing the new ones.

 js/gdm/loginDialog.js |  337 +++++++------------------------------------------
 1 files changed, 47 insertions(+), 290 deletions(-)
---
diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index eac2451..75025f2 100644
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -44,7 +44,6 @@ const PanelMenu = imports.ui.panelMenu;
 const Tweener = imports.ui.tweener;
 const UserMenu = imports.ui.userMenu;
 
-const _RESIZE_ANIMATION_TIME = 0.25;
 const _SCROLL_ANIMATION_TIME = 0.5;
 const _TIMED_LOGIN_IDLE_THRESHOLD = 5.0;
 const _LOGO_ICON_HEIGHT = 16;
@@ -55,39 +54,6 @@ const WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 let _loginDialog = null;
 
-function _smoothlyResizeActor(actor, width, height) {
-    let finalWidth;
-    let finalHeight;
-
-    if (width < 0)
-        finalWidth = actor.width;
-    else
-        finalWidth = width;
-
-    if (height < 0)
-        finalHeight = actor.height;
-    else
-        finalHeight = height;
-
-    actor.set_size(actor.width, actor.height);
-
-    if (actor.width == finalWidth && actor.height == finalHeight)
-        return null;
-
-    let hold = new Batch.Hold();
-
-    Tweener.addTween(actor,
-                     { width: finalWidth,
-                       height: finalHeight,
-                       time: _RESIZE_ANIMATION_TIME,
-                       transition: 'easeOutQuad',
-                       onComplete: Lang.bind(this, function() {
-                                       hold.release();
-                                   })
-                     });
-    return hold;
-}
-
 const LogoMenuButton = new Lang.Class({
     Name: 'LogoMenuButton',
     Extends: PanelMenu.Button,
@@ -245,58 +211,11 @@ const UserList = new Lang.Class({
         }
     },
 
-    _showItem: function(item) {
-        let tasks = [function() {
-                         return GdmUtil.fadeInActor(item.actor);
-                     }];
-
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
-        return batch.run();
-    },
-
     _onItemActivated: function(activatedItem) {
         this.emit('activate', activatedItem);
     },
 
-    giveUpWhitespace: function() {
-        let container = this.actor.get_parent();
-
-        container.child_set(this.actor, { expand: false });
-    },
-
-    takeOverWhitespace: function() {
-        let container = this.actor.get_parent();
-
-        container.child_set(this.actor, { expand: true });
-    },
-
-    pinInPlace: function() {
-        this._box.set_size(this._box.width, this._box.height);
-    },
-
-    shrinkToNaturalHeight: function() {
-        let oldWidth = this._box.width;
-        let oldHeight = this._box.height;
-        this._box.set_size(-1, -1);
-        let [minHeight, naturalHeight] = this._box.get_preferred_height(-1);
-        this._box.set_size(oldWidth, oldHeight);
-
-        let batch = new Batch.ConsecutiveBatch(this,
-                                               [function() {
-                                                    return _smoothlyResizeActor(this._box, -1, naturalHeight);
-                                                },
-
-                                                function() {
-                                                    this._box.set_size(-1, -1);
-                                                }
-                                               ]);
-
-        return batch.run();
-    },
-
     hideItemsExcept: function(exception) {
-        let tasks = [];
-
         for (let userName in this._items) {
             let item = this._items[userName];
 
@@ -306,94 +225,29 @@ const UserList = new Lang.Class({
             item.syncStyleClasses();
             item._timedLoginIndicator.scale_x = 0.;
             if (item != exception)
-                tasks.push(function() {
-                    return GdmUtil.fadeOutActor(item.actor);
-                });
+                item.actor.hide();
         }
 
-        let batch = new Batch.ConsecutiveBatch(this,
-                                               [function() {
-                                                    return GdmUtil.fadeOutActor(this.actor.vscroll);
-                                                },
-
-                                                new Batch.ConcurrentBatch(this, tasks),
-
-                                                function() {
-                                                    this._box.remove_style_pseudo_class('expanded');
-                                                }
-                                               ]);
-
-        return batch.run();
+        this._box.remove_style_pseudo_class('expanded');
     },
 
     hideItems: function() {
         return this.hideItemsExcept(null);
     },
 
-    _getExpandedHeight: function() {
-        let hiddenActors = [];
-        for (let userName in this._items) {
-            let item = this._items[userName];
-            if (!item.actor.visible) {
-                item.actor.show();
-                hiddenActors.push(item.actor);
-            }
-        }
-
-        if (!this._box.visible) {
-            this._box.show();
-            hiddenActors.push(this._box);
-        }
-
-        this._box.set_size(-1, -1);
-        let [minHeight, naturalHeight] = this._box.get_preferred_height(-1);
-
-        for (let i = 0; i < hiddenActors.length; i++) {
-            let actor = hiddenActors[i];
-            actor.hide();
-        }
-
-        return naturalHeight;
-    },
-
     showItems: function() {
         let tasks = [];
 
+        this._box.add_style_pseudo_class('expanded');
+
         for (let userName in this._items) {
             let item = this._items[userName];
             item.actor.sync_hover();
             item.actor.reactive = true;
             item.actor.can_focus = true;
             item.syncStyleClasses();
-            tasks.push(function() {
-                return this._showItem(item);
-            });
+            item.actor.show();
         }
-
-        let batch = new Batch.ConsecutiveBatch(this,
-                                               [function() {
-                                                    this.takeOverWhitespace();
-                                                },
-
-                                                function() {
-                                                    let fullHeight = this._getExpandedHeight();
-                                                    return _smoothlyResizeActor(this._box, -1, fullHeight);
-                                                },
-
-                                                function() {
-                                                    this._box.add_style_pseudo_class('expanded');
-                                                },
-
-                                                new Batch.ConcurrentBatch(this, tasks),
-
-                                                function() {
-                                                    this.actor.set_size(-1, -1);
-                                                },
-
-                                                function() {
-                                                    return GdmUtil.fadeInActor(this.actor.vscroll);
-                                                }]);
-        return batch.run();
     },
 
     scrollToItem: function(item) {
@@ -832,9 +686,9 @@ const LoginDialog = new Lang.Class({
 
         if (enabled && text) {
             this._bannerLabel.set_text(text);
-            this._fadeInBanner();
+            this._bannerLabel.show();
         } else {
-            this._fadeOutBanner();
+            this._bannerLabel.hide();
         }
     },
 
@@ -865,19 +719,20 @@ const LoginDialog = new Lang.Class({
         if (message) {
             this._promptMessage.text = message;
             this._promptMessage.styleClass = styleClass;
-            GdmUtil.fadeInActor(this._promptMessage);
+            this._promptMessage.show();
         } else {
-            GdmUtil.fadeOutActor(this._promptMessage);
+            this._promptMessage.hide();
         }
     },
 
     _showLoginHint: function(verifier, message) {
         this._promptLoginHint.set_text(message)
-        GdmUtil.fadeInActor(this._promptLoginHint);
+        this._promptLoginHint.show();
+        this._promptLoginHint.opacity = 255;
     },
 
     _hideLoginHint: function() {
-        GdmUtil.fadeOutActor(this._promptLoginHint);
+        this._promptLoginHint.hide();
         this._promptLoginHint.set_text('');
     },
 
@@ -888,53 +743,21 @@ const LoginDialog = new Lang.Class({
             this._reset();
     },
 
-    _fadeInPrompt: function() {
-        let tasks = [function() {
-                         return GdmUtil.fadeInActor(this._promptLabel);
-                     },
-
-                     function() {
-                         return GdmUtil.fadeInActor(this._promptEntry);
-                     },
-
-                     function() {
-                         // Show it with 0 opacity so we preallocate space for it
-                         // in the event we need to fade in the message
-                         this._promptLoginHint.opacity = 0;
-                         this._promptLoginHint.show();
-                     },
-
-                     function() {
-                         return GdmUtil.fadeInActor(this._promptBox);
-                     },
-
-                     function() {
-                         if (this._user && this._user.is_logged_in())
-                             return null;
-
-                         if (!this._verifyingUser)
-                             return null;
-
-                         return GdmUtil.fadeInActor(this._sessionList.actor);
-                     },
+    _showPrompt: function(forSecret) {
+        this._sessionList.actor.hide();
+        this._promptLabel.show();
+        this._promptEntry.show();
+        this._promptLoginHint.opacity = 0;
+        this._promptLoginHint.show();
+        this._promptBox.show();
 
-                     function() {
-                         this._promptEntry.grab_key_focus();
-                     }];
+        if (!this._user || (this._user.is_logged_in() && this._verifyingUser))
+            this._sessionList.actor.show();
 
-        this._sessionList.actor.hide();
-        let batch = new Batch.ConcurrentBatch(this, tasks);
-        return batch.run();
-    },
+        this._promptEntry.grab_key_focus();
 
-    _showPrompt: function(forSecret) {
         let hold = new Batch.Hold();
-
         let tasks = [function() {
-                         return this._fadeInPrompt();
-                     },
-
-                     function() {
                          this._prepareDialog(forSecret, hold);
                      },
 
@@ -1010,26 +833,16 @@ const LoginDialog = new Lang.Class({
             this._promptEntryTextChangedId = 0;
         }
 
-        let tasks = [function() {
-                         this._setWorking(false);
-
-                         return GdmUtil.fadeOutActor(this._promptBox);
-                     },
-
-                     function() {
-                         this._promptLoginHint.hide();
-
-                         this._updateSensitivity(true);
-                         this._promptEntry.set_text('');
-
-                         this.clearButtons();
-                         this._workSpinner = null;
-                         this._signInButton = null;
-                     }];
+        this._setWorking(false);
+        this._promptBox.hide();
+        this._promptLoginHint.hide();
 
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
+        this._updateSensitivity(true);
+        this._promptEntry.set_text('');
 
-        return batch.run();
+        this.clearButtons();
+        this._workSpinner = null;
+        this._signInButton = null;
     },
 
     _setWorking: function(working) {
@@ -1225,22 +1038,10 @@ const LoginDialog = new Lang.Class({
     },
 
     _hideUserListAndLogIn: function() {
+        this._userList.hideItems();
+        this._userList.actor.hide();
+        this._notListedButton.hide();
         let tasks = [function() {
-                         return this._userList.hideItems();
-                     },
-
-                     function() {
-                         return this._userList.giveUpWhitespace();
-                     },
-
-                     function() {
-                         this._userList.actor.hide();
-                     },
-
-                     new Batch.ConcurrentBatch(this, [this._fadeOutTitleLabel,
-                                                      this._fadeOutNotListedButton]),
-
-                     function() {
                          return this._askForUsernameAndLogIn();
                      }];
 
@@ -1249,42 +1050,15 @@ const LoginDialog = new Lang.Class({
     },
 
     _showUserList: function() {
-        let tasks = [this._hidePrompt,
-
-                     new Batch.ConcurrentBatch(this, [this._fadeInTitleLabel,
-                                                      this._fadeInNotListedButton]),
-
-                     function() {
-                         this._sessionList.close();
-                         this._promptLoginHint.hide();
-                         this._userList.actor.show();
-                         this._userList.actor.opacity = 255;
-                         return this._userList.showItems();
-                     },
-
-                     function() {
-                         this._userList.actor.reactive = true;
-                         this._userList.actor.grab_key_focus();
-                     }];
-
-        let batch = new Batch.ConsecutiveBatch(this, tasks);
-        batch.run();
-    },
-
-    _fadeInBanner: function() {
-        return GdmUtil.fadeInActor(this._bannerLabel);
-    },
-
-    _fadeOutBanner: function() {
-        return GdmUtil.fadeOutActor(this._bannerLabel);
-    },
-
-    _fadeInNotListedButton: function() {
-        return GdmUtil.fadeInActor(this._notListedButton);
-    },
-
-    _fadeOutNotListedButton: function() {
-        return GdmUtil.fadeOutActor(this._notListedButton);
+        this._hidePrompt();
+        this._sessionList.close();
+        this._promptLoginHint.hide();
+        this._userList.actor.show();
+        this._userList.actor.opacity = 255;
+        this._notListedButton.show();
+        this._userList.showItems();
+        this._userList.actor.reactive = true;
+        this._userList.actor.grab_key_focus();
     },
 
     _beginVerificationForUser: function(userName) {
@@ -1298,29 +1072,12 @@ const LoginDialog = new Lang.Class({
     _onUserListActivated: function(activatedItem) {
         let userName;
 
-        let tasks = [function() {
-                         this._userList.actor.reactive = false;
-                         return this._userList.pinInPlace();
-                     },
-
-                     function() {
-                         return this._userList.hideItemsExcept(activatedItem);
-                     },
-
-                     function() {
-                         return this._userList.giveUpWhitespace();
-                     },
-
-                     new Batch.ConcurrentBatch(this, [this._fadeOutTitleLabel,
-                                                      this._fadeOutNotListedButton]),
-
-                     function() {
-                         return this._userList.shrinkToNaturalHeight();
-                     },
-
-                     function() {
-                         userName = activatedItem.user.get_user_name();
+        this._userList.actor.reactive = false;
+        this._userList.hideItemsExcept(activatedItem);
+        this._notListedButton.hide();
 
+        let tasks = [function() {
+                         let userName = activatedItem.user.get_user_name();
                          return this._beginVerificationForUser(userName);
                      }];
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]