From 2fdc6272574c37d98c34a32165c57dbcff612e99 Mon Sep 17 00:00:00 2001 From: Umang Jain Date: Tue, 14 Jan 2020 20:23:36 +0530 Subject: [PATCH] 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 use 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 --- .../widgets/_login-dialog.scss | 15 +++-- .../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 b0ee8ccc0..536f635be 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 296632b33..387167349 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 4c0f8d23f..96e9e5559 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 03d4d6388..22446510a 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);