[gnome-shell] Use UserAvatarWidget to display user avatars
- From: Giovanni Campagna <gcampagna src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell] Use UserAvatarWidget to display user avatars
- Date: Fri, 31 Aug 2012 21:31:46 +0000 (UTC)
commit 5e46abfa038cb544443a23a3481cc5d30ca3ae21
Author: Giovanni Campagna <gcampagna src gnome org>
Date: Fri Aug 31 23:18:26 2012 +0200
Use UserAvatarWidget to display user avatars
Replace duplicate custom code with a common widget.
https://bugzilla.gnome.org/show_bug.cgi?id=683137
data/theme/gnome-shell.css | 9 ++++++
js/gdm/loginDialog.js | 53 +++-------------------------------
js/ui/endSessionDialog.js | 55 +++++++----------------------------
js/ui/polkitAuthenticationAgent.js | 25 ++++++----------
js/ui/unlockDialog.js | 2 +-
js/ui/userMenu.js | 11 ++++--
6 files changed, 43 insertions(+), 112 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 80e7da2..5ce232b 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1686,6 +1686,7 @@ StButton.popup-menu-item:insensitive {
border-radius: 5px;
width: 32px;
height: 32px;
+ background-size: contain;
}
.end-session-dialog-shutdown-icon {
@@ -1885,6 +1886,14 @@ StButton.popup-menu-item:insensitive {
color: #ff0000;
}
+.polkit-dialog-user-icon {
+ border: 2px solid #8b8b8b;
+ border-radius: 5px;
+ background-size: contain;
+ width: 48px;
+ height: 48px;
+}
+
/* Network Agent Dialog */
.network-dialog-secret-table {
diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index 8975c1e..ee8b8c9 100644
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -39,6 +39,7 @@ const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main;
const ModalDialog = imports.ui.modalDialog;
const Tweener = imports.ui.tweener;
+const UserMenu = imports.ui.userMenu;
const _RESIZE_ANIMATION_TIME = 0.25;
const _SCROLL_ANIMATION_TIME = 0.5;
@@ -96,8 +97,9 @@ const UserListItem = new Lang.Class({
x_align: St.Align.START,
x_fill: true });
- this._iconBin = new St.Bin();
- layout.add(this._iconBin);
+ this._userAvatar = new UserMenu.UserAvatarWidget(this.user,
+ { styleClass: 'login-dialog-user-list-item-icon' });
+ layout.add(this._userAvatar.actor);
let textLayout = new St.BoxLayout({ style_class: 'login-dialog-user-list-item-text-box',
vertical: true });
layout.add(textLayout, { expand: true });
@@ -125,55 +127,10 @@ const UserListItem = new Lang.Class({
_onUserChanged: function() {
this._nameLabel.set_text(this.user.get_real_name());
- this._updateIcon();
+ this._userAvatar.update();
this._updateLoggedIn();
},
- _setIconFromFile: function(iconFile, styleClass) {
- if (styleClass)
- this._iconBin.set_style_class_name(styleClass);
- this._iconBin.set_style(null);
-
- this._iconBin.child = null;
- if (iconFile) {
- this._iconBin.show();
- // We use background-image instead of, say, St.TextureCache
- // so the theme writers can add a rounded frame around the image
- // and so theme writers can pick the icon size.
- this._iconBin.set_style('background-image: url("' + iconFile + '");' +
- 'background-size: contain;');
- } else {
- this._iconBin.hide();
- }
- },
-
- _setIconFromName: function(iconName, styleClass) {
- if (styleClass)
- this._iconBin.set_style_class_name(styleClass);
- this._iconBin.set_style(null);
-
- if (iconName != null) {
- let icon = new St.Icon();
- icon.set_icon_name(iconName)
-
- this._iconBin.child = icon;
- this._iconBin.show();
- } else {
- this._iconBin.child = null;
- this._iconBin.hide();
- }
- },
-
- _updateIcon: function() {
- let iconFileName = this.user.get_icon_file();
- let gicon = null;
-
- if (GLib.file_test(iconFileName, GLib.FileTest.EXISTS))
- this._setIconFromFile(iconFileName, 'login-dialog-user-list-item-icon');
- else
- this._setIconFromName('avatar-default-symbolic', 'login-dialog-user-list-item-icon');
- },
-
syncStyleClasses: function() {
this._updateLoggedIn();
diff --git a/js/ui/endSessionDialog.js b/js/ui/endSessionDialog.js
index d4b4c43..887d5ca 100644
--- a/js/ui/endSessionDialog.js
+++ b/js/ui/endSessionDialog.js
@@ -34,6 +34,7 @@ const GnomeSession = imports.misc.gnomeSession;
const Main = imports.ui.main;
const ModalDialog = imports.ui.modalDialog;
const Tweener = imports.ui.tweener;
+const UserMenu = imports.ui.userMenu;
let _endSessionDialog = null;
@@ -303,40 +304,6 @@ const EndSessionDialog = new Lang.Class({
this._user.disconnect(this._userChangedId);
},
- _setIconFromFile: function(iconFile, styleClass) {
- if (styleClass)
- this._iconBin.set_style_class_name(styleClass);
- this._iconBin.set_style(null);
-
- this._iconBin.child = null;
- if (iconFile) {
- this._iconBin.show();
- this._iconBin.set_style('background-image: url("' + iconFile + '");' +
- 'background-size: contain;');
- } else {
- this._iconBin.hide();
- }
- },
-
- _setIconFromName: function(iconName, styleClass) {
- if (styleClass)
- this._iconBin.set_style_class_name(styleClass);
- this._iconBin.set_style(null);
-
- if (iconName != null) {
- let textureCache = St.TextureCache.get_default();
- let icon = textureCache.load_icon_name(this._iconBin.get_theme_node(),
- iconName,
- _DIALOG_ICON_SIZE);
-
- this._iconBin.child = icon;
- this._iconBin.show();
- } else {
- this._iconBin.child = null;
- this._iconBin.hide();
- }
- },
-
_updateDescription: function() {
if (this.state != ModalDialog.State.OPENING &&
this.state != ModalDialog.State.OPENED)
@@ -385,16 +352,16 @@ const EndSessionDialog = new Lang.Class({
return;
let dialogContent = DialogContent[this._type];
-
- if (this._user.is_loaded && !dialogContent.iconName) {
- let iconFile = this._user.get_icon_file();
- if (GLib.file_test(iconFile, GLib.FileTest.EXISTS))
- this._setIconFromFile(iconFile, dialogContent.iconStyleClass);
- else
- this._setIconFromName('avatar-default-symbolic', dialogContent.iconStyleClass);
- } else if (dialogContent.iconName) {
- this._setIconFromName(dialogContent.iconName,
- dialogContent.iconStyleClass);
+ if (dialogContent.iconName) {
+ this._iconBin.child = new St.Icon({ icon_name: dialogContent.iconName,
+ icon_size: _DIALOG_ICON_SIZE,
+ style_class: dialogContent.iconStyleClass });
+ } else {
+ let avatarWidget = new UserMenu.UserAvatarWidget(this._user,
+ { iconSize: _DIALOG_ICON_SIZE,
+ styleClass: dialogContent.iconStyleClass });
+ this._iconBin.child = avatarWidget.actor;
+ avatarWidget.update();
}
this._updateDescription();
diff --git a/js/ui/polkitAuthenticationAgent.js b/js/ui/polkitAuthenticationAgent.js
index 1f1ef75..92e4c6a 100644
--- a/js/ui/polkitAuthenticationAgent.js
+++ b/js/ui/polkitAuthenticationAgent.js
@@ -35,6 +35,9 @@ const PolkitAgent = imports.gi.PolkitAgent;
const ModalDialog = imports.ui.modalDialog;
const ShellEntry = imports.ui.shellEntry;
+const UserMenu = imports.ui.userMenu;
+
+const DIALOG_ICON_SIZE = 48;
const AuthenticationDialog = new Lang.Class({
Name: 'AuthenticationDialog',
@@ -117,9 +120,11 @@ const AuthenticationDialog = new Lang.Class({
let userBox = new St.BoxLayout({ style_class: 'polkit-dialog-user-layout',
vertical: false });
messageBox.add(userBox);
- this._userIcon = new St.Icon();
- this._userIcon.hide();
- userBox.add(this._userIcon,
+ this._userAvatar = new UserMenu.UserAvatarWidget(this._user,
+ { iconSize: DIALOG_ICON_SIZE,
+ styleClass: 'polkit-dialog-user-icon' });
+ this._userAvatar.actor.hide();
+ userBox.add(this._userAvatar.actor,
{ x_fill: true,
y_fill: false,
x_align: St.Align.END,
@@ -314,18 +319,8 @@ const AuthenticationDialog = new Lang.Class({
_onUserChanged: function() {
if (this._user.is_loaded) {
- if (this._userIcon) {
- let iconFileName = this._user.get_icon_file();
- let iconFile = Gio.file_new_for_path(iconFileName);
- let icon;
- if (iconFile.query_exists(null)) {
- icon = new Gio.FileIcon({file: iconFile});
- } else {
- icon = new Gio.ThemedIcon({name: 'avatar-default-symbolic'});
- }
- this._userIcon.set_gicon (icon);
- this._userIcon.show();
- }
+ this._userAvatar.update();
+ this._userAvatar.actor.show();
}
},
diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index fb510fc..a4d666d 100644
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -33,7 +33,7 @@ const UserWidget = new Lang.Class({
this.actor = new St.BoxLayout({ style_class: 'unlock-dialog-user-name-container',
vertical: false });
- this._avatar = new UserMenu.UserAvatarWidget(user, { reactive: false });
+ this._avatar = new UserMenu.UserAvatarWidget(user);
this.actor.add(this._avatar.actor,
{ x_fill: true, y_fill: true });
diff --git a/js/ui/userMenu.js b/js/ui/userMenu.js
index 8fec394..bc09df8 100644
--- a/js/ui/userMenu.js
+++ b/js/ui/userMenu.js
@@ -48,9 +48,12 @@ const UserAvatarWidget = new Lang.Class({
_init: function(user, params) {
this._user = user;
- params = Params.parse(params, { reactive: true });
+ params = Params.parse(params, { reactive: false,
+ iconSize: DIALOG_ICON_SIZE,
+ styleClass: 'status-chooser-user-icon' });
+ this._iconSize = params.iconSize;
- this.actor = new St.Bin({ style_class: 'status-chooser-user-icon',
+ this.actor = new St.Bin({ style_class: params.styleClass,
track_hover: params.reactive,
reactive: params.reactive });
},
@@ -67,7 +70,7 @@ const UserAvatarWidget = new Lang.Class({
} else {
this.actor.style = null;
this.actor.child = new St.Icon({ icon_name: 'avatar-default-symbolic',
- icon_size: DIALOG_ICON_SIZE });
+ icon_size: this._iconSize });
}
}
});
@@ -143,7 +146,7 @@ const IMStatusChooserItem = new Lang.Class({
this._userManager = AccountsService.UserManager.get_default();
this._user = this._userManager.get_user(GLib.get_user_name());
- this._avatar = new UserAvatarWidget(this._user);
+ this._avatar = new UserAvatarWidget(this._user, { reactive: true });
this._iconBin = new St.Button({ child: this._avatar.actor });
this.addActor(this._iconBin);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
