polkitAgent: Implement new design for polkit dialog
Implement the new design for the polkit according to the mockups in https://gitlab.gnome.org/GNOME/gnome-shell/issues/1343: - Center-align all the parts of the dialog - Use a larger user avatar - Remove the work-spinner because requests usually finish fast enough - Show the entry-labels as hint text of the entry https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/942
This commit is contained in:
Jonas Dreßler
Florian Müllner
parent
a59da75830
commit
2f3738fae0
@ -84,27 +84,30 @@
|
||||
/* Password or Authentication Dialog */
|
||||
|
||||
.prompt-dialog {
|
||||
//this is the width of the entire modal popup
|
||||
width: 34em;
|
||||
width: 28em;
|
||||
|
||||
.message-dialog-content { spacing: $base_spacing * 4; }
|
||||
.message-dialog-title { color: lighten($fg_color,15%); }
|
||||
.modal-dialog-content-box {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-description:rtl {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.prompt-dialog-password-box {
|
||||
spacing: 1em;
|
||||
padding-bottom: 1em;
|
||||
.prompt-dialog-password-layout {
|
||||
spacing: 8px;
|
||||
}
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label,
|
||||
.prompt-dialog-info-label,
|
||||
.prompt-dialog-null-label {
|
||||
text-align: center;
|
||||
@include fontsize($base_font_size - 1);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label {
|
||||
@ -120,23 +123,15 @@
|
||||
/* Polkit Dialog */
|
||||
|
||||
.polkit-dialog-user-layout {
|
||||
padding-left: 10px;
|
||||
spacing: 10px;
|
||||
&:rtl {
|
||||
padding-left: 0px;
|
||||
padding-right: 10px;
|
||||
text-align: center;
|
||||
spacing: 8px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.polkit-dialog-user-icon {
|
||||
border-radius: 99px;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.polkit-dialog-user-root-label {
|
||||
color: $warning_color;
|
||||
}
|
||||
|
||||
.polkit-dialog-user-icon {
|
||||
border-radius: 99px;
|
||||
background-size: contain;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
.polkit-dialog-user-root-label { color: $warning_color; }
|
||||
}
|
||||
|
||||
/* Audio selection dialog */
|
||||
|
||||
@ -60,8 +60,8 @@
|
||||
|
||||
// Caps-lock warning
|
||||
.caps-lock-warning-label {
|
||||
text-align: center;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 6.2em;
|
||||
@include fontsize($base_font_size - 1);
|
||||
color: $warning_color;
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
const { AccountsService, Clutter, GLib,
|
||||
GObject, Pango, PolkitAgent, Polkit, Shell, St } = imports.gi;
|
||||
|
||||
const Animation = imports.ui.animation;
|
||||
const Dialog = imports.ui.dialog;
|
||||
const Main = imports.ui.main;
|
||||
const ModalDialog = imports.ui.modalDialog;
|
||||
@ -16,9 +15,7 @@ const DialogMode = {
|
||||
CONFIRM: 1,
|
||||
};
|
||||
|
||||
var DIALOG_ICON_SIZE = 48;
|
||||
|
||||
var WORK_SPINNER_ICON_SIZE = 16;
|
||||
const DIALOG_ICON_SIZE = 64;
|
||||
|
||||
const DELAYED_RESET_TIMEOUT = 200;
|
||||
|
||||
@ -40,8 +37,10 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
|
||||
let title = _("Authentication Required");
|
||||
|
||||
let content = new Dialog.MessageDialogContent({ title, description });
|
||||
this.contentLayout.add_actor(content);
|
||||
let headerContent = new Dialog.MessageDialogContent({ title, description });
|
||||
this.contentLayout.add_child(headerContent);
|
||||
|
||||
let bodyContent = new Dialog.MessageDialogContent();
|
||||
|
||||
if (userNames.length > 1) {
|
||||
log(`polkitAuthenticationAgent: Received ${userNames.length} ` +
|
||||
@ -59,22 +58,21 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
|
||||
let userBox = new St.BoxLayout({
|
||||
style_class: 'polkit-dialog-user-layout',
|
||||
vertical: false,
|
||||
vertical: true,
|
||||
});
|
||||
content.add_child(userBox);
|
||||
bodyContent.add_child(userBox);
|
||||
|
||||
this._userAvatar = new UserWidget.Avatar(this._user, {
|
||||
iconSize: DIALOG_ICON_SIZE,
|
||||
styleClass: 'polkit-dialog-user-icon',
|
||||
});
|
||||
this._userAvatar.x_align = Clutter.ActorAlign.CENTER;
|
||||
userBox.add_child(this._userAvatar);
|
||||
|
||||
this._userLabel = new St.Label({
|
||||
style_class: userName === 'root'
|
||||
? 'polkit-dialog-user-root-label'
|
||||
: 'polkit-dialog-user-label',
|
||||
x_expand: true,
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
});
|
||||
|
||||
if (userName === 'root')
|
||||
@ -82,58 +80,57 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
|
||||
userBox.add_child(this._userLabel);
|
||||
|
||||
this._passwordBox = new St.BoxLayout({ vertical: false, style_class: 'prompt-dialog-password-box' });
|
||||
content.add_child(this._passwordBox);
|
||||
this._passwordLabel = new St.Label({
|
||||
style_class: 'prompt-dialog-password-label',
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
let passwordBox = new St.BoxLayout({
|
||||
style_class: 'prompt-dialog-password-layout',
|
||||
vertical: true,
|
||||
});
|
||||
this._passwordBox.add_child(this._passwordLabel);
|
||||
|
||||
this._passwordEntry = new St.PasswordEntry({
|
||||
style_class: 'prompt-dialog-password-entry',
|
||||
text: "",
|
||||
can_focus: true,
|
||||
x_expand: true,
|
||||
visible: false,
|
||||
x_align: Clutter.ActorAlign.CENTER,
|
||||
});
|
||||
ShellEntry.addContextMenu(this._passwordEntry);
|
||||
this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
|
||||
this._passwordEntry.bind_property('reactive',
|
||||
this._passwordEntry.clutter_text, 'editable',
|
||||
GObject.BindingFlags.SYNC_CREATE);
|
||||
this._passwordBox.add_child(this._passwordEntry);
|
||||
passwordBox.add_child(this._passwordEntry);
|
||||
|
||||
this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
|
||||
animate: true,
|
||||
});
|
||||
this._passwordBox.add(this._workSpinner);
|
||||
let warningBox = new St.BoxLayout({ vertical: true });
|
||||
|
||||
this._passwordBox.hide();
|
||||
let capsLockWarning = new ShellEntry.CapsLockWarning();
|
||||
content.add_child(capsLockWarning);
|
||||
warningBox.add_child(capsLockWarning);
|
||||
|
||||
this._errorMessageLabel = new St.Label({ style_class: 'prompt-dialog-error-label' });
|
||||
this._errorMessageLabel = new St.Label({
|
||||
style_class: 'prompt-dialog-error-label',
|
||||
visible: false,
|
||||
});
|
||||
this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
|
||||
this._errorMessageLabel.clutter_text.line_wrap = true;
|
||||
content.add_child(this._errorMessageLabel);
|
||||
this._errorMessageLabel.hide();
|
||||
warningBox.add_child(this._errorMessageLabel);
|
||||
|
||||
this._infoMessageLabel = new St.Label({ style_class: 'prompt-dialog-info-label' });
|
||||
this._infoMessageLabel = new St.Label({
|
||||
style_class: 'prompt-dialog-info-label',
|
||||
visible: false,
|
||||
});
|
||||
this._infoMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
|
||||
this._infoMessageLabel.clutter_text.line_wrap = true;
|
||||
content.add_child(this._infoMessageLabel);
|
||||
this._infoMessageLabel.hide();
|
||||
warningBox.add_child(this._infoMessageLabel);
|
||||
|
||||
/* 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: 'prompt-dialog-null-label',
|
||||
text: 'abc' });
|
||||
this._nullMessageLabel.add_style_class_name('hidden');
|
||||
this._nullMessageLabel = new St.Label({ style_class: 'prompt-dialog-null-label' });
|
||||
this._nullMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
|
||||
this._nullMessageLabel.clutter_text.line_wrap = true;
|
||||
content.add_child(this._nullMessageLabel);
|
||||
this._nullMessageLabel.show();
|
||||
warningBox.add_child(this._nullMessageLabel);
|
||||
|
||||
passwordBox.add_child(warningBox);
|
||||
bodyContent.add_child(passwordBox);
|
||||
|
||||
this._cancelButton = this.addButton({ label: _("Cancel"),
|
||||
action: this.cancel.bind(this),
|
||||
@ -149,6 +146,8 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
this._okButton.reactive = text.get_text().length > 0;
|
||||
});
|
||||
|
||||
this.contentLayout.add_child(bodyContent);
|
||||
|
||||
this._doneEmitted = false;
|
||||
|
||||
this._mode = -1;
|
||||
@ -163,13 +162,6 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
this._onUserChanged();
|
||||
}
|
||||
|
||||
_setWorking(working) {
|
||||
if (working)
|
||||
this._workSpinner.play();
|
||||
else
|
||||
this._workSpinner.stop();
|
||||
}
|
||||
|
||||
_initiateSession() {
|
||||
this._destroySession(DELAYED_RESET_TIMEOUT);
|
||||
|
||||
@ -218,7 +210,6 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
|
||||
this._passwordEntry.reactive = false;
|
||||
this._okButton.reactive = false;
|
||||
this._setWorking(true);
|
||||
|
||||
this._session.response(response);
|
||||
// When the user responds, dismiss already shown info and
|
||||
@ -273,19 +264,20 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
this._sessionRequestTimeoutId = 0;
|
||||
}
|
||||
|
||||
// Cheap localization trick
|
||||
if (request == 'Password:' || request == 'Password: ')
|
||||
this._passwordLabel.set_text(_("Password:"));
|
||||
// Hack: The request string comes directly from PAM, if it's "Password:"
|
||||
// we replace it with our own, if it's something else we replace the
|
||||
// last colon and any trailing spaces with a "…".
|
||||
if (request === 'Password:' || request === 'Password: ')
|
||||
this._passwordEntry.hint_text = _('Enter Password…');
|
||||
else
|
||||
this._passwordLabel.set_text(request);
|
||||
this._passwordEntry.hint_text = request.replace(/: *$/, '…');
|
||||
|
||||
this._passwordEntry.password_visible = echoOn;
|
||||
|
||||
this._passwordBox.show();
|
||||
this._passwordEntry.show();
|
||||
this._passwordEntry.set_text('');
|
||||
this._passwordEntry.reactive = true;
|
||||
this._okButton.reactive = false;
|
||||
this._setWorking(false);
|
||||
|
||||
this._ensureOpen();
|
||||
this._passwordEntry.grab_key_focus();
|
||||
@ -332,7 +324,7 @@ var AuthenticationDialog = GObject.registerClass({
|
||||
if (this.state != ModalDialog.State.OPENED)
|
||||
return;
|
||||
|
||||
this._passwordBox.hide();
|
||||
this._passwordEntry.hide();
|
||||
this._cancelButton.grab_key_focus();
|
||||
this._okButton.reactive = false;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user