[gnome-shell/uajain/adapt-user-avatar-part2: 95/105] js/userWidget: Allow vertical orientation for user avatars

[Umang Jain <uajain src gnome org>]

commit 193246cec44b1e8a8acd873dcaf26fb45b2af005
Author: Umang Jain <mailumangjain gmail com>
Date:   Tue Jan 14 20:23:36 2020 +0530

    js/userWidget: Allow vertical orientation for user avatars
    
    Allow vertical orientation for the userWidget so that the user-avatar
    can be centered and user's name can be placed below it. The plan
    for 3.36 is to user this vertical userWidget layout for both lock
    and login screen.
    
    The userWidget is also used while creating the user-selection list
    at the login, hence we still need to keep the horizontal layout
    for userWidget in place.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/922

 .../gnome-shell-sass/widgets/_login-dialog.scss    | 15 ++++--
 data/theme/gnome-shell-sass/widgets/_misc.scss     | 10 ++++
 js/gdm/authPrompt.js                               |  5 +-
 js/ui/userWidget.js                                | 54 +++++++++++++++-------
 4 files changed, 62 insertions(+), 22 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss 
b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
index b0ee8ccc07..536f635bec 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -113,20 +113,27 @@
   &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
 }
 
-.login-dialog-username,
 .user-widget-label {
   color: $osd_fg_color;
+}
+
+.user-widget.horizontal .user-widget-label {
   @include fontsize($base_font_size + 2);
   font-weight: bold;
   text-align: left;
   padding-left: 15px;
-}
 
-.user-widget-label {
   &:ltr { padding-left: 14px; }
   &:rtl { padding-right: 14px; }
 }
 
+.user-widget.vertical .user-widget-label {
+  @include fontsize($base_font_size + 5);
+  text-align: center;
+  font-weight: normal;
+  padding-top: 16px;
+}
+
 .login-dialog-prompt-layout {
   padding-top: 24px;
   padding-bottom: 12px;
@@ -148,4 +155,4 @@
   color: darken($osd_fg_color,30%);
   &:hover,&:focus { color: $osd_fg_color; }
   &:active { color: darken($osd_fg_color, 50%); }
-}
\ No newline at end of file
+}
diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index f05436dc57..19cd89f3c4 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -37,6 +37,16 @@
   }
 }
 
+.user-widget.vertical .user-icon {
+  height: 128px;
+  width: 128px;
+}
+
+.user-widget.horizontal .user-icon {
+  height: 64px;
+  width: 64px;
+}
+
 // Input Source Switcher
 .input-source-switcher-symbol {
   font-size: 34pt;
diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index ac42c2c960..d40a0e6fd5 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -51,6 +51,8 @@ var AuthPrompt = GObject.registerClass({
         super._init({
             style_class: 'login-dialog-prompt-layout',
             vertical: true,
+            x_expand: true,
+            x_align: Clutter.ActorAlign.CENTER,
         });
 
         this.verificationStatus = AuthPromptStatus.NOT_VERIFYING;
@@ -463,8 +465,7 @@ var AuthPrompt = GObject.registerClass({
             oldChild.destroy();
 
         if (user) {
-            let userWidget = new UserWidget.UserWidget(user);
-            userWidget.x_align = Clutter.ActorAlign.START;
+            let userWidget = new UserWidget.UserWidget(user, Clutter.Orientation.VERTICAL);
             this._userWell.set_child(userWidget);
         }
     }
diff --git a/js/ui/userWidget.js b/js/ui/userWidget.js
index 03d4d6388f..5075ea93d2 100644
--- a/js/ui/userWidget.js
+++ b/js/ui/userWidget.js
@@ -7,7 +7,7 @@ const { Clutter, GLib, GObject, St } = imports.gi;
 
 const Params = imports.misc.params;
 
-var AVATAR_ICON_SIZE = 64;
+var AVATAR_ICON_SIZE = -1;
 
 // Adapted from gdm/gui/user-switch-applet/applet.c
 //
@@ -63,6 +63,16 @@ class Avatar extends St.Bin {
 
         if (iconFile) {
             this.child = null;
+
+            // Check CSS for avatar size if params are defaulting to AVATAR_ICON_SIZE
+            if (this._iconSize == AVATAR_ICON_SIZE){
+                let themeNode = this.get_theme_node();
+
+               // FIXME: Ideally themeNode.get_length('icon-size') should work here.
+               // FIXME2: This causes a avatar size jump when the system is powered on.
+               //         The Lock-screen/re-login list seems fine but still might be buggy.
+                this._iconSize = themeNode.get_width();
+            }
             let { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
             this.set_size(
                 this._iconSize * scaleFactor,
@@ -72,8 +82,10 @@ class Avatar extends St.Bin {
                 background-size: cover;`;
         } else {
             this.style = null;
-            this.child = new St.Icon({ icon_name: 'avatar-default-symbolic',
-                                       icon_size: this._iconSize });
+            this.child = new St.Icon({
+                icon_name: 'avatar-default-symbolic',
+                icon_size: 128,
+            });
         }
     }
 });
@@ -159,26 +171,36 @@ class UserWidgetLabel extends St.Widget {
 
 var UserWidget = GObject.registerClass(
 class UserWidget extends St.BoxLayout {
-    _init(user) {
-        super._init({ style_class: 'user-widget', vertical: false });
-
+    _init(user, orientation = Clutter.Orientation.HORIZONTAL) {
         this._user = user;
 
+        let vertical = orientation == Clutter.Orientation.VERTICAL;
+        let align = vertical ? Clutter.ActorAlign.CENTER : Clutter.ActorAlign.START;
+        let style_class = vertical ? 'user-widget vertical' : 'user-widget horizontal';
+
+        super._init({
+            style_class,
+            vertical,
+            x_align: align,
+        });
+
         this.connect('destroy', this._onDestroy.bind(this));
 
         this._avatar = new Avatar(user);
         this.add_child(this._avatar);
 
-        this._label = new UserWidgetLabel(user);
-        this.add_child(this._label);
-
-        this._label.bind_property('label-actor', this, 'label-actor',
-                                  GObject.BindingFlags.SYNC_CREATE);
-
-        this._userLoadedId = this._user.connect('notify::is-loaded', this._updateUser.bind(this));
-        this._userChangedId = this._user.connect('changed', this._updateUser.bind(this));
-        this._updateUser();
-    }
+        this._userLoadedId = 0;
+        this._userChangedId = 0;
+        if (user) {
+            this._label = new UserWidgetLabel(user);
+            this.add_child(this._label);
+
+            this._label.bind_property('label-actor', this, 'label-actor',
+                                      GObject.BindingFlags.SYNC_CREATE);
+            this._userLoadedId = this._user.connect('notify::is-loaded', this._updateUser.bind(this));
+            this._userChangedId = this._user.connect('changed', this._updateUser.bind(this));
+            this._updateUser();
+        }
 
     _onDestroy() {
         if (this._userLoadedId != 0) {