isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

userWidget: Allow vertical orientation for user avatars

Browse Source 
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
This commit is contained in:
Umang Jain 2020-01-14 20:23:36 +05:30 committed by Florian Müllner
parent 77f77b4305
commit 2fdc627257
4 changed files with 73 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
data/theme/gnome-shell-sass/widgets/_login-dialog.scss
View File

@ -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%); }
}
}

8
data/theme/gnome-shell-sass/widgets/_misc.scss
View File

@ -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;

5
js/gdm/authPrompt.js
View File

@ -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);
}
}

61
js/ui/userWidget.js
View File

@ -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);