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

polkit: Make dialogs look more like the mockups

Browse Source 
The mockups are here

 https://live.gnome.org/GnomeShell/Design/Whiteboards/AuthorizationDialog

Detailed changes

 - Don't use an icon for root
 - For root, show Administrator in red
 - Nuke icons for info and error messages
 - Make error messages yellow
 - Use 10pt size for error and message labels, not 12px
 - Don't make the dialog change size when (single-line) error/info
   messages appear
 - Spacing fixes
 - Show "Sorry, that didn't work. Please try again" if authentication fails
 - Don't cancel the PolkitAgentSession if the session has already completed

https://bugzilla.gnome.org/show_bug.cgi?id=644737

Signed-off-by: David Zeuthen <davidz@redhat.com>
This commit is contained in:
David Zeuthen 2011-03-14 13:18:03 -03:00
parent 8b45211a8f
commit 9b55de1c6b
2 changed files with 109 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
data/theme/gnome-shell.css
View File

@ -1477,12 +1477,12 @@ StTooltip StLabel {
} }
.polkit-dialog-main-layout { .polkit-dialog-main-layout {
spacing: 10px; spacing: 24px;
padding: 10px; padding: 10px;
} }
.polkit-dialog-message-layout { .polkit-dialog-message-layout {
spacing: 10px; spacing: 16px;
} }
.polkit-dialog-headline { .polkit-dialog-headline {
@ -1506,6 +1506,10 @@ StTooltip StLabel {
padding-right: 10px; padding-right: 10px;
} }
.polkit-dialog-user-root-label {
color: #ff0000;
}
.polkit-dialog-password-label:ltr { .polkit-dialog-password-label:ltr {
padding-right: 0.5em; padding-right: 0.5em;
} }
@ -1521,33 +1525,21 @@ StTooltip StLabel {
} }
.polkit-dialog-error-label { .polkit-dialog-error-label {
font-size: 12px; font-size: 10pt;
color: white; color: #ffff00;
} padding-bottom: 8px;
.polkit-dialog-error-box {
padding-top: 15px;
spacing: 5px;
}
.polkit-dialog-checking-label {
font-size: 12px;
color: white;
}
.polkit-dialog-checking-box {
padding-top: 15px;
spacing: 5px;
} }
.polkit-dialog-info-label { .polkit-dialog-info-label {
font-size: 12px; font-size: 10pt;
color: white; padding-bottom: 8px;
} }
.polkit-dialog-info-box { /* intentionally left transparent to avoid dialog changing size */
padding-top: 15px; .polkit-dialog-null-label {
spacing: 5px; font-size: 10pt;
color: rgba(0,0,0,0);
padding-bottom: 8px;
} }

101
js/ui/polkitAuthenticationAgent.js
View File

@ -49,6 +49,8 @@ AuthenticationDialog.prototype = {
this.actionId = actionId; this.actionId = actionId;
this.message = message; this.message = message;
this.userNames = userNames; this.userNames = userNames;
this._wasDismissed = false;
this._completed = false;
let mainContentBox = new St.BoxLayout({ style_class: 'polkit-dialog-main-layout', let mainContentBox = new St.BoxLayout({ style_class: 'polkit-dialog-main-layout',
vertical: false }); vertical: false });
@ -100,17 +102,24 @@ AuthenticationDialog.prototype = {
Lang.bind(this, this._onUserChanged)); Lang.bind(this, this._onUserChanged));
// Special case 'root' // Special case 'root'
if (userName == 'root') let userIsRoot = false;
if (userName == 'root') {
userIsRoot = true;
userRealName = _('Administrator'); userRealName = _('Administrator');
}
// Work around Gdm.UserManager returning an empty string for the real name // Work around Gdm.UserManager returning an empty string for the real name
if (userRealName.length == 0) if (userRealName.length == 0)
userRealName = userName; userRealName = userName;
if (userIsRoot) {
let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-root-label',
text: userRealName }));
messageBox.add(userLabel);
} else {
let userBox = new St.BoxLayout({ style_class: 'polkit-dialog-user-layout', let userBox = new St.BoxLayout({ style_class: 'polkit-dialog-user-layout',
vertical: false }); vertical: false });
messageBox.add(userBox); messageBox.add(userBox);
this._userIcon = new St.Icon(); this._userIcon = new St.Icon();
this._userIcon.hide(); this._userIcon.hide();
userBox.add(this._userIcon, userBox.add(this._userIcon,
@ -118,7 +127,6 @@ AuthenticationDialog.prototype = {
y_fill: false, y_fill: false,
x_align: St.Align.END, x_align: St.Align.END,
y_align: St.Align.START }); y_align: St.Align.START });
let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-label', let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-label',
text: userRealName })); text: userRealName }));
userBox.add(userLabel, userBox.add(userLabel,
@ -126,6 +134,7 @@ AuthenticationDialog.prototype = {
y_fill: false, y_fill: false,
x_align: St.Align.END, x_align: St.Align.END,
y_align: St.Align.MIDDLE }); y_align: St.Align.MIDDLE });
}
this._onUserChanged(); this._onUserChanged();
@ -141,32 +150,28 @@ AuthenticationDialog.prototype = {
{expand: true }); {expand: true });
this._passwordBox.hide(); this._passwordBox.hide();
this._errorBox = new St.BoxLayout({ style_class: 'polkit-dialog-error-box' }); this._errorMessageLabel = new St.Label({ style_class: 'polkit-dialog-error-label' });
messageBox.add(this._errorBox); this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
let errorIcon = new St.Icon({ icon_name: 'dialog-error', this._errorMessageLabel.clutter_text.line_wrap = true;
icon_size: 24, messageBox.add(this._errorMessageLabel);
style_class: 'polkit-dialog-error-icon' }); this._errorMessageLabel.hide();
this._errorBox.add(errorIcon, { y_align: St.Align.MIDDLE });
this._errorMessage = new St.Label({ style_class: 'polkit-dialog-error-label' });
this._errorMessage.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
this._errorMessage.clutter_text.line_wrap = true;
this._errorBox.add(this._errorMessage, { expand: true,
y_align: St.Align.MIDDLE,
y_fill: true });
this._errorBox.hide();
this._infoBox = new St.BoxLayout({ style_class: 'polkit-dialog-info-box' }); this._infoMessageLabel = new St.Label({ style_class: 'polkit-dialog-info-label' });
messageBox.add(this._infoBox); this._infoMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
let infoIcon = new St.Icon({ icon_name: 'dialog-information', this._infoMessageLabel.clutter_text.line_wrap = true;
icon_size: 24, messageBox.add(this._infoMessageLabel);
style_class: 'polkit-dialog-info-icon' }); this._infoMessageLabel.hide();
this._infoBox.add(infoIcon, { y_align: St.Align.MIDDLE });
this._infoMessage = new St.Label({ style_class: 'polkit-dialog-info-label'}); /* text is intentionally non-blank otherwise the height is not the same as for
this._infoMessage.clutter_text.line_wrap = true; * infoMessage and errorMessageLabel - but it is still invisible because
this._infoBox.add(this._infoMessage, { expand: true, * gnome-shell.css sets the color to be transparent
y_align: St.Align.MIDDLE, */
y_fill: true }); this._nullMessageLabel = new St.Label({ style_class: 'polkit-dialog-null-label',
this._infoBox.hide(); text: 'abc'});
this._nullMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
this._nullMessageLabel.clutter_text.line_wrap = true;
messageBox.add(this._nullMessageLabel);
this._nullMessageLabel.show();
this.setButtons([{ label: _('Cancel'), this.setButtons([{ label: _('Cancel'),
action: Lang.bind(this, this.cancel), action: Lang.bind(this, this.cancel),
@ -234,8 +239,9 @@ AuthenticationDialog.prototype = {
this._session.response(response); this._session.response(response);
// When the user responds, dismiss already shown info and // When the user responds, dismiss already shown info and
// error texts (if any) // error texts (if any)
this._errorBox.hide(); this._errorMessageLabel.hide();
this._infoBox.hide(); this._infoMessageLabel.hide();
this._nullMessageLabel.show();
}, },
_onAuthenticateButtonPressed: function() { _onAuthenticateButtonPressed: function() {
@ -243,7 +249,24 @@ AuthenticationDialog.prototype = {
}, },
_onSessionCompleted: function(session, gainedAuthorization) { _onSessionCompleted: function(session, gainedAuthorization) {
this._passwordBox.hide(); if (this._completed)
return;
this._completed = true;
if (!gainedAuthorization) {
/* Unless we are showing an existing error message from the PAM
* module (the PAM module could be reporting the authentication
* error providing authentication-method specific information),
* show "Sorry, that didn't work. Please try again."
*/
if (!this._errorMessageLabel.visible && !this._wasDismissed) {
this._errorMessageLabel.set_text(_('Sorry, that didn\'t work. Please try again.'));
this._errorMessageLabel.show();
this._infoMessageLabel.hide();
this._nullMessageLabel.hide();
}
}
this._emitDone(!gainedAuthorization, false); this._emitDone(!gainedAuthorization, false);
}, },
@ -267,20 +290,25 @@ AuthenticationDialog.prototype = {
_onSessionShowError: function(session, text) { _onSessionShowError: function(session, text) {
this._passwordEntry.set_text(''); this._passwordEntry.set_text('');
this._errorMessage.set_text(text); this._errorMessageLabel.set_text(text);
this._errorBox.show(); this._errorMessageLabel.show();
this._infoMessageLabel.hide();
this._nullMessageLabel.hide();
this._ensureOpen(); this._ensureOpen();
}, },
_onSessionShowInfo: function(session, text) { _onSessionShowInfo: function(session, text) {
this._passwordEntry.set_text(''); this._passwordEntry.set_text('');
this._infoMessage.set_text(text); this._infoMessageLabel.set_text(text);
this._infoBox.show(); this._infoMessageLabel.show();
this._errorMessageLabel.hide();
this._nullMessageLabel.hide();
this._ensureOpen(); this._ensureOpen();
}, },
destroySession: function() { destroySession: function() {
if (this._session) { if (this._session) {
if (!this._completed)
this._session.cancel(); this._session.cancel();
this._session = null; this._session = null;
} }
@ -288,6 +316,7 @@ AuthenticationDialog.prototype = {
_onUserChanged: function() { _onUserChanged: function() {
if (this._user.is_loaded) { if (this._user.is_loaded) {
if (this._userIcon) {
let iconFileName = this._user.get_icon_file(); let iconFileName = this._user.get_icon_file();
let iconFile = Gio.file_new_for_path(iconFileName); let iconFile = Gio.file_new_for_path(iconFileName);
let icon; let icon;
@ -299,9 +328,11 @@ AuthenticationDialog.prototype = {
this._userIcon.set_gicon (icon); this._userIcon.set_gicon (icon);
this._userIcon.show(); this._userIcon.show();
} }
}
}, },
cancel: function() { cancel: function() {
this._wasDismissed = true;
this.close(global.get_current_time()); this.close(global.get_current_time());
this._emitDone(false, true); this._emitDone(false, true);
}, },