[gnome-shell] gdm: Adjust timed-login indicator

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

commit 6a615f30dc7d7533da4215171ac04138eb4f8c81
Author: Florian MÃllner <fmuellner gnome org>
Date:   Sat Jul 14 00:43:58 2012 +0200

    gdm: Adjust timed-login indicator
    
    Until the recent style changes, the same element was used to indicate
    both item focus and progress for timed logins. As focus is now indicated
    by the item's background style, rename the indicator from focusBin to
    timedLoginIndicator and make some minor adjustments to better fit the
    new style:
      - move it next to the icon below the text
      - give it a white color and a shadow
      - update animation to grow from the left instead of the center
    
    https://bugzilla.gnome.org/show_bug.cgi?id=660913

 data/theme/gnome-shell.css |   10 ++++----
 js/gdm/loginDialog.js      |   56 ++++++++++++++++++++++----------------------
 2 files changed, 33 insertions(+), 33 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f567ab1..507e349 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2083,17 +2083,17 @@ StButton.popup-menu-item:insensitive {
     background-color: rgba(255,255,255,0.33);
 }
 
-.login-dialog-user-list-item-vertical-layout {
-    spacing: 2px;
+.login-dialog-user-list-item-text-box {
+    padding: 0 0.5em;
 }
 
-.login-dialog-user-list-item .login-dialog-user-list-item-focus-bin {
+.login-dialog-user-list-item .login-dialog-timed-login-indicator {
     background-color: rgba(0,0,0,0.0);
     height: 2px;
 }
 
-.login-dialog-user-list-item:focus .login-dialog-user-list-item-focus-bin {
-    background-color: #666666;
+.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
+    background-color: #8b8b8b;
 }
 
 .login-dialog-user-list-item-icon {
diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index 8359fda..31c7208 100644
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -88,42 +88,34 @@ const UserListItem = new Lang.Class({
         this._userChangedId = this.user.connect('changed',
                                                  Lang.bind(this, this._onUserChanged));
 
-        this._verticalBox = new St.BoxLayout({ style_class: 'login-dialog-user-list-item-vertical-layout',
-                                               vertical: true });
-
+        let layout = new St.BoxLayout({ vertical: false });
         this.actor = new St.Button({ style_class: 'login-dialog-user-list-item',
                                      can_focus: true,
-                                     child: this._verticalBox,
+                                     child: layout,
                                      reactive: true,
                                      x_align: St.Align.START,
                                      x_fill: true });
-        let layout = new St.BoxLayout({ vertical: false });
-
-        this._verticalBox.add(layout,
-                              { y_fill: true,
-                                x_fill: true,
-                                expand: true });
-
-        this._focusBin = new St.Bin({ style_class: 'login-dialog-user-list-item-focus-bin' });
-        this._focusBin.scale_gravity = Clutter.Gravity.CENTER;
-        this._verticalBox.add(this._focusBin,
-                              { x_fill: true,
-                                x_align: St.Align.MIDDLE,
-                                y_fill: false,
-                                expand: true });
 
         this._iconBin = new St.Bin();
         layout.add(this._iconBin);
         let textLayout = new St.BoxLayout({ style_class: 'login-dialog-user-list-item-text-box',
                                             vertical:    true });
-        layout.add(textLayout,
-                   { y_fill: false,
-                     y_align: St.Align.MIDDLE,
-                     expand: true });
+        layout.add(textLayout, { expand: true });
 
         this._nameLabel = new St.Label({ text:        this.user.get_real_name(),
                                          style_class: 'login-dialog-user-list-item-name' });
-        textLayout.add(this._nameLabel);
+        textLayout.add(this._nameLabel,
+                       { y_fill: false,
+                         y_align: St.Align.MIDDLE,
+                         expand: true });
+
+        this._timedLoginIndicator = new St.Bin({ style_class: 'login-dialog-timed-login-indicator',
+                                                 scale_x: 0 });
+        textLayout.add(this._timedLoginIndicator,
+                       { x_fill: true,
+                         x_align: St.Align.MIDDLE,
+                         y_fill: false,
+                         y_align: St.Align.END });
 
         this._updateIcon();
 
@@ -199,12 +191,11 @@ const UserListItem = new Lang.Class({
         return GdmUtil.fadeInActor(this._nameLabel);
     },
 
-    showFocusAnimation: function(time) {
+    showTimedLoginIndicator: function(time) {
         let hold = new Batch.Hold();
 
-        Tweener.removeTweens(this._focusBin);
-        this._focusBin.scale_x = 0.;
-        Tweener.addTween(this._focusBin,
+        this.hideTimedLoginIndicator();
+        Tweener.addTween(this._timedLoginIndicator,
                          { scale_x: 1.,
                            time: time,
                            transition: 'linear',
@@ -214,6 +205,11 @@ const UserListItem = new Lang.Class({
                            onCompleteScope: this
                          });
         return hold;
+    },
+
+    hideTimedLoginIndicator: function() {
+        Tweener.removeTweens(this._timedLoginIndicator);
+        this._timedLoginIndicator.scale_x = 0.;
     }
 });
 Signals.addSignalMethods(UserListItem.prototype);
@@ -310,6 +306,7 @@ const UserList = new Lang.Class({
             item.actor.reactive = false;
             item.actor.can_focus = false;
             item.syncStyleClasses();
+            item._timedLoginIndicator.scale_x = 0.;
             if (item != exception)
                 tasks.push(function() {
                     return GdmUtil.fadeOutActor(item.actor);
@@ -1019,7 +1016,7 @@ const LoginDialog = new Lang.Class({
 
     _showTimedLoginAnimation: function() {
         this._timedLoginItem.actor.grab_key_focus();
-        return this._timedLoginItem.showFocusAnimation(this._timedLoginAnimationTime);
+        return this._timedLoginItem.showTimedLoginIndicator(this._timedLoginAnimationTime);
     },
 
     _blockTimedLoginUntilIdle: function() {
@@ -1087,6 +1084,9 @@ const LoginDialog = new Lang.Class({
             this._timedLoginBatch = null;
         }
 
+        if (this._timedLoginItem)
+            this._timedLoginItem.hideTimedLoginIndicator();
+
         let userName = this._timedLoginItem.user.get_user_name();
 
         if (userName)