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

[Umang Jain <uajain src gnome org>]

commit 62658366d41ee605236838621e98185f3cdc86f7
Author: Umang Jain <mailumangjain gmail com>
Date:   Fri Dec 27 13:11:08 2019 +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.

 data/theme/gnome-shell-sass/_common.scss | 11 +++++--
 js/gdm/authPrompt.js                     |  7 +++--
 js/ui/userWidget.js                      | 52 ++++++++++++++++++++++++--------
 3 files changed, 53 insertions(+), 17 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 90dcff22df..be51a97aad 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -2018,18 +2018,25 @@ StScrollBar {
   }
 
   .login-dialog-username,
-  .user-widget-label {
+  .user-widget-label-horizontal {
     color: $osd_fg_color;
     font-size: 120%;
     font-weight: bold;
     text-align: left;
     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;
diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index ac42c2c960..63a087a875 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -463,8 +463,11 @@ var AuthPrompt = GObject.registerClass({
             oldChild.destroy();
 
         if (user) {
-            let userWidget = new UserWidget.UserWidget(user);
-            userWidget.x_align = Clutter.ActorAlign.START;
+                let orientation = Clutter.Orientation.HORIZONTAL;
+                if (this._mode == AuthPromptMode.UNLOCK_ONLY)
+                    orientation = Clutter.Orientation.VERTICAL;
+
+            let userWidget = new UserWidget.UserWidget(user, orientation);
             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',