From 5e46abfa038cb544443a23a3481cc5d30ca3ae21 Mon Sep 17 00:00:00 2001 From: Giovanni Campagna Date: Fri, 31 Aug 2012 23:18:26 +0200 Subject: [PATCH] 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 80e7da2e8..5ce232b44 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 8975c1eaa..ee8b8c9e2 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 d4b4c4310..887d5ca35 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 1f1ef75e2..92e4c6aa0 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 fb510fcbc..a4d666dab 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 8fec3946e..bc09df8de 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);