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

[Umang Jain <uajain src gnome org>]

commit 923072789e5b6387cdbb14625d8b82092ead404f
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    | 20 +++++++--
 js/gdm/authPrompt.js                               |  5 ++-
 js/ui/userWidget.js                                | 51 ++++++++++++++++------
 3 files changed, 57 insertions(+), 19 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..966f948f64 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -72,7 +72,7 @@
 
 .login-dialog-logo-bin { padding: 24px 0px; }
 .login-dialog-banner { color: darken($osd_fg_color,10%); }
-.login-dialog-button-box { spacing: 5px; }
+.login-dialog-button-box { width: 23em; spacing: 5px; }
 .login-dialog-message-warning { color: $warning_color; }
 .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
 .login-dialog-user-selection-box { padding: 100px 0px; }
@@ -114,7 +114,7 @@
 }
 
 .login-dialog-username,
-.user-widget-label {
+.user-widget-label-horizontal {
   color: $osd_fg_color;
   @include fontsize($base_font_size + 2);
   font-weight: bold;
@@ -122,11 +122,19 @@
   padding-left: 15px;
 }
 
-.user-widget-label {
+.user-widget-label-horizontal {
   &:ltr { padding-left: 14px; }
   &:rtl { padding-right: 14px; }
 }
 
+.user-widget-label-vertical {
+  color: $osd_fg_color;
+  font-size: 16pt;
+  text-align: center;
+  font-weight: normal;
+  padding-top: 16px;
+}
+
 .login-dialog-prompt-layout {
   padding-top: 24px;
   padding-bottom: 12px;
@@ -134,6 +142,10 @@
   width: 23em;
 }
 
+.login-dialog-prompt-entry {
+  width: 262px;
+}
+
 .login-dialog-prompt-label {
   color: darken($osd_fg_color, 20%);
   @include fontsize($base_font_size + 1);
@@ -148,4 +160,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/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..fa80273100 100644
--- a/js/ui/userWidget.js
+++ b/js/ui/userWidget.js
@@ -8,6 +8,7 @@ const { Clutter, GLib, GObject, St } = imports.gi;
 const Params = imports.misc.params;
 
 var AVATAR_ICON_SIZE = 64;
+var AVATAR_ICON_SIZE_VERTICAL = 128;
 
 // Adapted from gdm/gui/user-switch-applet/applet.c
 //
@@ -16,20 +17,31 @@ var AVATAR_ICON_SIZE = 64;
 
 var Avatar = GObject.registerClass(
 class Avatar extends St.Bin {
-    _init(user, params) {
+    _init(user, params, orientation = Clutter.Orientation.HORIZONTAL) {
         let themeContext = St.ThemeContext.get_for_stage(global.stage);
-        params = Params.parse(params, { reactive: false,
-                                        iconSize: AVATAR_ICON_SIZE,
-                                        styleClass: 'user-icon' });
+
+        if (orientation == Clutter.Orientation.HORIZONTAL) {
+            params = Params.parse(params, { reactive: false,
+                                            iconSize: AVATAR_ICON_SIZE,
+                                            styleClass: 'user-icon',
+                                            x_align: Clutter.ActorAlign.START });
+        } else {
+            params = Params.parse(params, { reactive: false,
+                                            iconSize: AVATAR_ICON_SIZE_VERTICAL,
+                                            styleClass: 'user-icon',
+                                            x_align: Clutter.ActorAlign.CENTER });
+        }
 
         super._init({
             style_class: params.styleClass,
             reactive: params.reactive,
             width: params.iconSize * themeContext.scaleFactor,
             height: params.iconSize * themeContext.scaleFactor,
+            x_align: params.x_align,
         });
 
         this._iconSize = params.iconSize;
+        this._xAlign = params.x_align;
         this._user = user;
 
         this.bind_property('reactive', this, 'track-hover',
@@ -73,23 +85,29 @@ class Avatar extends St.Bin {
         } else {
             this.style = null;
             this.child = new St.Icon({ icon_name: 'avatar-default-symbolic',
-                                       icon_size: this._iconSize });
+                                       icon_size: this._iconSize,
+                                       x_expand: true,
+                                       x_align: this._xAlign });
         }
     }
 });
 
 var UserWidgetLabel = GObject.registerClass(
 class UserWidgetLabel extends St.Widget {
-    _init(user) {
+    _init(user, orientation = Clutter.Orientation.HORIZONTAL) {
         super._init({ layout_manager: new Clutter.BinLayout() });
 
         this._user = user;
 
-        this._realNameLabel = new St.Label({ style_class: 'user-widget-label',
+        let styleClass = 'user-widget-label-horizontal';
+        if (orientation == Clutter.Orientation.VERTICAL)
+            styleClass = 'user-widget-label-vertical';
+
+        this._realNameLabel = new St.Label({ style_class: styleClass,
                                              y_align: Clutter.ActorAlign.CENTER });
         this.add_child(this._realNameLabel);
 
-        this._userNameLabel = new St.Label({ style_class: 'user-widget-label',
+        this._userNameLabel = new St.Label({ style_class: styleClass,
                                              y_align: Clutter.ActorAlign.CENTER });
         this.add_child(this._userNameLabel);
 
@@ -159,17 +177,24 @@ 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;
+
+        super._init({
+            style_class: 'user-widget',
+            vertical,
+            x_align: align,
+        });
+
         this.connect('destroy', this._onDestroy.bind(this));
 
-        this._avatar = new Avatar(user);
+        this._avatar = new Avatar(user, {}, orientation);
         this.add_child(this._avatar);
 
-        this._label = new UserWidgetLabel(user);
+        this._label = new UserWidgetLabel(user, orientation);
         this.add_child(this._label);
 
         this._label.bind_property('label-actor', this, 'label-actor',