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

[Umang Jain <uajain src gnome org>]

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

    js/userWidget: Allow vertical orientation for user avatars
    
    The plan for next 3.36 release is to revamp the unlock-reauthscreen
    screen while keeping the login screen untouched. As the userWidget
    code is shared between the two, we need to have some branching out
    for the new unlock/reauth screen.

 .../gnome-shell-sass/widgets/_login-dialog.scss    | 13 ++++--
 js/gdm/authPrompt.js                               |  3 +-
 js/ui/userWidget.js                                | 52 ++++++++++++++++------
 3 files changed, 50 insertions(+), 18 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..f5e9973058 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -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,18 @@
   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;
+  padding-top: 24px;
+}
+
 .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/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index ac42c2c960..e3a2b285ac 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -463,8 +463,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..a5c50f6b14 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,30 @@ 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 +178,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',