polkit: Make dialogs look more like the mockups
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
parent
8b45211a8f
commit
9b55de1c6b
@ -1477,12 +1477,12 @@ StTooltip StLabel {
|
||||
}
|
||||
|
||||
.polkit-dialog-main-layout {
|
||||
spacing: 10px;
|
||||
spacing: 24px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.polkit-dialog-message-layout {
|
||||
spacing: 10px;
|
||||
spacing: 16px;
|
||||
}
|
||||
|
||||
.polkit-dialog-headline {
|
||||
@ -1506,6 +1506,10 @@ StTooltip StLabel {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.polkit-dialog-user-root-label {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.polkit-dialog-password-label:ltr {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
@ -1521,33 +1525,21 @@ StTooltip StLabel {
|
||||
}
|
||||
|
||||
.polkit-dialog-error-label {
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 10pt;
|
||||
color: #ffff00;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.polkit-dialog-info-label {
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
font-size: 10pt;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.polkit-dialog-info-box {
|
||||
padding-top: 15px;
|
||||
spacing: 5px;
|
||||
/* intentionally left transparent to avoid dialog changing size */
|
||||
.polkit-dialog-null-label {
|
||||
font-size: 10pt;
|
||||
color: rgba(0,0,0,0);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -49,6 +49,8 @@ AuthenticationDialog.prototype = {
|
||||
this.actionId = actionId;
|
||||
this.message = message;
|
||||
this.userNames = userNames;
|
||||
this._wasDismissed = false;
|
||||
this._completed = false;
|
||||
|
||||
let mainContentBox = new St.BoxLayout({ style_class: 'polkit-dialog-main-layout',
|
||||
vertical: false });
|
||||
@ -100,17 +102,24 @@ AuthenticationDialog.prototype = {
|
||||
Lang.bind(this, this._onUserChanged));
|
||||
|
||||
// Special case 'root'
|
||||
if (userName == 'root')
|
||||
let userIsRoot = false;
|
||||
if (userName == 'root') {
|
||||
userIsRoot = true;
|
||||
userRealName = _('Administrator');
|
||||
}
|
||||
|
||||
// Work around Gdm.UserManager returning an empty string for the real name
|
||||
if (userRealName.length == 0)
|
||||
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',
|
||||
vertical: false });
|
||||
messageBox.add(userBox);
|
||||
|
||||
this._userIcon = new St.Icon();
|
||||
this._userIcon.hide();
|
||||
userBox.add(this._userIcon,
|
||||
@ -118,7 +127,6 @@ AuthenticationDialog.prototype = {
|
||||
y_fill: false,
|
||||
x_align: St.Align.END,
|
||||
y_align: St.Align.START });
|
||||
|
||||
let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-label',
|
||||
text: userRealName }));
|
||||
userBox.add(userLabel,
|
||||
@ -126,6 +134,7 @@ AuthenticationDialog.prototype = {
|
||||
y_fill: false,
|
||||
x_align: St.Align.END,
|
||||
y_align: St.Align.MIDDLE });
|
||||
}
|
||||
|
||||
this._onUserChanged();
|
||||
|
||||
@ -141,32 +150,28 @@ AuthenticationDialog.prototype = {
|
||||
{expand: true });
|
||||
this._passwordBox.hide();
|
||||
|
||||
this._errorBox = new St.BoxLayout({ style_class: 'polkit-dialog-error-box' });
|
||||
messageBox.add(this._errorBox);
|
||||
let errorIcon = new St.Icon({ icon_name: 'dialog-error',
|
||||
icon_size: 24,
|
||||
style_class: 'polkit-dialog-error-icon' });
|
||||
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._errorMessageLabel = new St.Label({ style_class: 'polkit-dialog-error-label' });
|
||||
this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
|
||||
this._errorMessageLabel.clutter_text.line_wrap = true;
|
||||
messageBox.add(this._errorMessageLabel);
|
||||
this._errorMessageLabel.hide();
|
||||
|
||||
this._infoBox = new St.BoxLayout({ style_class: 'polkit-dialog-info-box' });
|
||||
messageBox.add(this._infoBox);
|
||||
let infoIcon = new St.Icon({ icon_name: 'dialog-information',
|
||||
icon_size: 24,
|
||||
style_class: 'polkit-dialog-info-icon' });
|
||||
this._infoBox.add(infoIcon, { y_align: St.Align.MIDDLE });
|
||||
this._infoMessage = new St.Label({ style_class: 'polkit-dialog-info-label'});
|
||||
this._infoMessage.clutter_text.line_wrap = true;
|
||||
this._infoBox.add(this._infoMessage, { expand: true,
|
||||
y_align: St.Align.MIDDLE,
|
||||
y_fill: true });
|
||||
this._infoBox.hide();
|
||||
this._infoMessageLabel = new St.Label({ style_class: 'polkit-dialog-info-label' });
|
||||
this._infoMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
|
||||
this._infoMessageLabel.clutter_text.line_wrap = true;
|
||||
messageBox.add(this._infoMessageLabel);
|
||||
this._infoMessageLabel.hide();
|
||||
|
||||
/* text is intentionally non-blank otherwise the height is not the same as for
|
||||
* infoMessage and errorMessageLabel - but it is still invisible because
|
||||
* gnome-shell.css sets the color to be transparent
|
||||
*/
|
||||
this._nullMessageLabel = new St.Label({ style_class: 'polkit-dialog-null-label',
|
||||
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'),
|
||||
action: Lang.bind(this, this.cancel),
|
||||
@ -234,8 +239,9 @@ AuthenticationDialog.prototype = {
|
||||
this._session.response(response);
|
||||
// When the user responds, dismiss already shown info and
|
||||
// error texts (if any)
|
||||
this._errorBox.hide();
|
||||
this._infoBox.hide();
|
||||
this._errorMessageLabel.hide();
|
||||
this._infoMessageLabel.hide();
|
||||
this._nullMessageLabel.show();
|
||||
},
|
||||
|
||||
_onAuthenticateButtonPressed: function() {
|
||||
@ -243,7 +249,24 @@ AuthenticationDialog.prototype = {
|
||||
},
|
||||
|
||||
_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);
|
||||
},
|
||||
|
||||
@ -267,20 +290,25 @@ AuthenticationDialog.prototype = {
|
||||
|
||||
_onSessionShowError: function(session, text) {
|
||||
this._passwordEntry.set_text('');
|
||||
this._errorMessage.set_text(text);
|
||||
this._errorBox.show();
|
||||
this._errorMessageLabel.set_text(text);
|
||||
this._errorMessageLabel.show();
|
||||
this._infoMessageLabel.hide();
|
||||
this._nullMessageLabel.hide();
|
||||
this._ensureOpen();
|
||||
},
|
||||
|
||||
_onSessionShowInfo: function(session, text) {
|
||||
this._passwordEntry.set_text('');
|
||||
this._infoMessage.set_text(text);
|
||||
this._infoBox.show();
|
||||
this._infoMessageLabel.set_text(text);
|
||||
this._infoMessageLabel.show();
|
||||
this._errorMessageLabel.hide();
|
||||
this._nullMessageLabel.hide();
|
||||
this._ensureOpen();
|
||||
},
|
||||
|
||||
destroySession: function() {
|
||||
if (this._session) {
|
||||
if (!this._completed)
|
||||
this._session.cancel();
|
||||
this._session = null;
|
||||
}
|
||||
@ -288,6 +316,7 @@ AuthenticationDialog.prototype = {
|
||||
|
||||
_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;
|
||||
@ -299,9 +328,11 @@ AuthenticationDialog.prototype = {
|
||||
this._userIcon.set_gicon (icon);
|
||||
this._userIcon.show();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
cancel: function() {
|
||||
this._wasDismissed = true;
|
||||
this.close(global.get_current_time());
|
||||
this._emitDone(false, true);
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user