[gnome-shell/uajain/adapt-user-avatar-part2: 40/62] userWidget: Allow vertical orientation for user avatars

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

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

    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     |  8 +++
 js/gdm/authPrompt.js                               |  5 +-
 js/ui/userWidget.js                                | 61 ++++++++++++++++++----
 4 files changed, 73 insertions(+), 16 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 296632b33f..3871673499 100644
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -37,6 +37,14 @@
   }
 }
 
+.user-widget.vertical .user-icon {
+  icon-size: 128px;
+}
+
+.user-widget.horizontal .user-icon {
+  icon-size: 64px;
+}
+
 // Input Source Switcher
 .input-source-switcher-symbol {
   font-size: 34pt;
diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index 4c0f8d23fa..96e9e55594 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -47,6 +47,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;
@@ -455,8 +457,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..22446510a4 100644
--- a/js/ui/userWidget.js
+++ b/js/ui/userWidget.js
@@ -7,6 +7,7 @@ const { Clutter, GLib, GObject, St } = imports.gi;
 
 const Params = imports.misc.params;
 
+const UNKNOWN_AVATAR_ICON_SIZE = -1;
 var AVATAR_ICON_SIZE = 64;
 
 // Adapted from gdm/gui/user-switch-applet/applet.c
@@ -18,9 +19,11 @@ var Avatar = GObject.registerClass(
 class Avatar extends St.Bin {
     _init(user, params) {
         let themeContext = St.ThemeContext.get_for_stage(global.stage);
-        params = Params.parse(params, { reactive: false,
-                                        iconSize: AVATAR_ICON_SIZE,
-                                        styleClass: 'user-icon' });
+        params = Params.parse(params, {
+            styleClass: 'user-icon',
+            reactive: false,
+            iconSize: UNKNOWN_AVATAR_ICON_SIZE,
+        });
 
         super._init({
             style_class: params.styleClass,
@@ -44,6 +47,23 @@ class Avatar extends St.Bin {
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
+    vfunc_style_changed() {
+        super.vfunc_style_changed();
+
+        let node = this.get_theme_node();
+        let [found, iconSize] = node.lookup_length('icon-size', false);
+
+        if (!found)
+            return;
+
+        let themeContext = St.ThemeContext.get_for_stage(global.stage);
+
+        // node.lookup_length() returns a scaled value, but we
+        // need unscaled
+        this._iconSize = iconSize / themeContext.scaleFactor;
+        this.update();
+    }
+
     _onDestroy() {
         if (this._scaleFactorChangeId) {
             let themeContext = St.ThemeContext.get_for_stage(global.stage);
@@ -52,28 +72,40 @@ class Avatar extends St.Bin {
         }
     }
 
+    _getIconSize() {
+        if (this._iconSize !== UNKNOWN_AVATAR_ICON_SIZE)
+            return this._iconSize;
+        else
+            return AVATAR_ICON_SIZE;
+    }
+
     setSensitive(sensitive) {
         this.reactive = sensitive;
     }
 
     update() {
+        let iconSize = this._getIconSize();
+
         let iconFile = this._user.get_icon_file();
         if (iconFile && !GLib.file_test(iconFile, GLib.FileTest.EXISTS))
             iconFile = null;
 
         if (iconFile) {
             this.child = null;
+
             let { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
             this.set_size(
-                this._iconSize * scaleFactor,
-                this._iconSize * scaleFactor);
+                iconSize * scaleFactor,
+                iconSize * scaleFactor);
             this.style = `
                 background-image: url("${iconFile}");
                 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: iconSize,
+            });
         }
     }
 });
@@ -159,14 +191,23 @@ 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 xAlign = vertical ? Clutter.ActorAlign.CENTER : Clutter.ActorAlign.START;
+        let styleClass = vertical ? 'user-widget vertical' : 'user-widget horizontal';
+
+        super._init({
+            styleClass,
+            vertical,
+            xAlign,
+        });
+
         this.connect('destroy', this._onDestroy.bind(this));
 
         this._avatar = new Avatar(user);
+        this._avatar.x_align = Clutter.ActorAlign.CENTER;
         this.add_child(this._avatar);
 
         this._label = new UserWidgetLabel(user);