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

polkitAgent: Implement new design for polkit dialog

Browse Source 
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 2020-01-20 14:55:24 +01:00 committed by Florian Müllner
parent a59da75830
commit 2f3738fae0
3 changed files with 62 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
data/theme/gnome-shell-sass/widgets/_dialogs.scss
View File

@ -84,27 +84,30 @@
/* Password or Authentication Dialog */ /* Password or Authentication Dialog */
.prompt-dialog { .prompt-dialog {
//this is the width of the entire modal popup width: 28em;
width: 34em;
.message-dialog-content { spacing: $base_spacing * 4; } .modal-dialog-content-box {
.message-dialog-title { color: lighten($fg_color,15%); } margin-bottom: 24px;
}
} }
.prompt-dialog-description:rtl { .prompt-dialog-description:rtl {
text-align: right; text-align: right;
} }
.prompt-dialog-password-box { .prompt-dialog-password-layout {
spacing: 1em; spacing: 8px;
padding-bottom: 1em; }
.prompt-dialog-password-entry {
width: 20em;
} }
.prompt-dialog-error-label, .prompt-dialog-error-label,
.prompt-dialog-info-label, .prompt-dialog-info-label,
.prompt-dialog-null-label { .prompt-dialog-null-label {
text-align: center;
@include fontsize($base_font_size - 1); @include fontsize($base_font_size - 1);
padding-bottom: 8px;
} }
.prompt-dialog-error-label { .prompt-dialog-error-label {
@ -120,23 +123,15 @@
/* Polkit Dialog */ /* Polkit Dialog */
.polkit-dialog-user-layout { .polkit-dialog-user-layout {
padding-left: 10px; text-align: center;
spacing: 10px; spacing: 8px;
&:rtl { margin-bottom: 6px;
padding-left: 0px;
padding-right: 10px; .polkit-dialog-user-icon {
border-radius: 99px;
background-size: contain;
} }
} .polkit-dialog-user-root-label { color: $warning_color; }
.polkit-dialog-user-root-label {
color: $warning_color;
}
.polkit-dialog-user-icon {
border-radius: 99px;
background-size: contain;
width: 48px;
height: 48px;
} }
/* Audio selection dialog */ /* Audio selection dialog */

2
data/theme/gnome-shell-sass/widgets/_misc.scss
View File

@ -60,8 +60,8 @@
// Caps-lock warning // Caps-lock warning
.caps-lock-warning-label { .caps-lock-warning-label {
text-align: center;
padding-bottom: 8px; padding-bottom: 8px;
padding-left: 6.2em;
@include fontsize($base_font_size - 1); @include fontsize($base_font_size - 1);
color: $warning_color; color: $warning_color;
} }

92
js/ui/components/polkitAgent.js
View File

@ -4,7 +4,6 @@
const { AccountsService, Clutter, GLib, const { AccountsService, Clutter, GLib,
GObject, Pango, PolkitAgent, Polkit, Shell, St } = imports.gi; GObject, Pango, PolkitAgent, Polkit, Shell, St } = imports.gi;
const Animation = imports.ui.animation;
const Dialog = imports.ui.dialog; const Dialog = imports.ui.dialog;
const Main = imports.ui.main; const Main = imports.ui.main;
const ModalDialog = imports.ui.modalDialog; const ModalDialog = imports.ui.modalDialog;
@ -16,9 +15,7 @@ const DialogMode = {
CONFIRM: 1, CONFIRM: 1,
}; };
var DIALOG_ICON_SIZE = 48; const DIALOG_ICON_SIZE = 64;
var WORK_SPINNER_ICON_SIZE = 16;
const DELAYED_RESET_TIMEOUT = 200; const DELAYED_RESET_TIMEOUT = 200;
@ -40,8 +37,10 @@ var AuthenticationDialog = GObject.registerClass({
let title = _("Authentication Required"); let title = _("Authentication Required");
let content = new Dialog.MessageDialogContent({ title, description }); let headerContent = new Dialog.MessageDialogContent({ title, description });
this.contentLayout.add_actor(content); this.contentLayout.add_child(headerContent);
let bodyContent = new Dialog.MessageDialogContent();
if (userNames.length > 1) { if (userNames.length > 1) {
log(`polkitAuthenticationAgent: Received ${userNames.length} ` + log(`polkitAuthenticationAgent: Received ${userNames.length} ` +
@ -59,22 +58,21 @@ var AuthenticationDialog = GObject.registerClass({
let userBox = new St.BoxLayout({ let userBox = new St.BoxLayout({
style_class: 'polkit-dialog-user-layout', 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, { this._userAvatar = new UserWidget.Avatar(this._user, {
iconSize: DIALOG_ICON_SIZE, iconSize: DIALOG_ICON_SIZE,
styleClass: 'polkit-dialog-user-icon', styleClass: 'polkit-dialog-user-icon',
}); });
this._userAvatar.x_align = Clutter.ActorAlign.CENTER;
userBox.add_child(this._userAvatar); userBox.add_child(this._userAvatar);
this._userLabel = new St.Label({ this._userLabel = new St.Label({
style_class: userName === 'root' style_class: userName === 'root'
? 'polkit-dialog-user-root-label' ? 'polkit-dialog-user-root-label'
: 'polkit-dialog-user-label', : 'polkit-dialog-user-label',
x_expand: true,
y_align: Clutter.ActorAlign.CENTER,
}); });
if (userName === 'root') if (userName === 'root')
@ -82,58 +80,57 @@ var AuthenticationDialog = GObject.registerClass({
userBox.add_child(this._userLabel); userBox.add_child(this._userLabel);
this._passwordBox = new St.BoxLayout({ vertical: false, style_class: 'prompt-dialog-password-box' }); let passwordBox = new St.BoxLayout({
content.add_child(this._passwordBox); style_class: 'prompt-dialog-password-layout',
this._passwordLabel = new St.Label({ vertical: true,
style_class: 'prompt-dialog-password-label',
y_align: Clutter.ActorAlign.CENTER,
}); });
this._passwordBox.add_child(this._passwordLabel);
this._passwordEntry = new St.PasswordEntry({ this._passwordEntry = new St.PasswordEntry({
style_class: 'prompt-dialog-password-entry', style_class: 'prompt-dialog-password-entry',
text: "", text: "",
can_focus: true, can_focus: true,
x_expand: true, visible: false,
x_align: Clutter.ActorAlign.CENTER,
}); });
ShellEntry.addContextMenu(this._passwordEntry); ShellEntry.addContextMenu(this._passwordEntry);
this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this)); this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
this._passwordEntry.bind_property('reactive', this._passwordEntry.bind_property('reactive',
this._passwordEntry.clutter_text, 'editable', this._passwordEntry.clutter_text, 'editable',
GObject.BindingFlags.SYNC_CREATE); GObject.BindingFlags.SYNC_CREATE);
this._passwordBox.add_child(this._passwordEntry); passwordBox.add_child(this._passwordEntry);
this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, { let warningBox = new St.BoxLayout({ vertical: true });
animate: true,
});
this._passwordBox.add(this._workSpinner);
this._passwordBox.hide();
let capsLockWarning = new ShellEntry.CapsLockWarning(); 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.ellipsize = Pango.EllipsizeMode.NONE;
this._errorMessageLabel.clutter_text.line_wrap = true; this._errorMessageLabel.clutter_text.line_wrap = true;
content.add_child(this._errorMessageLabel); warningBox.add_child(this._errorMessageLabel);
this._errorMessageLabel.hide();
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.ellipsize = Pango.EllipsizeMode.NONE;
this._infoMessageLabel.clutter_text.line_wrap = true; this._infoMessageLabel.clutter_text.line_wrap = true;
content.add_child(this._infoMessageLabel); warningBox.add_child(this._infoMessageLabel);
this._infoMessageLabel.hide();
/* text is intentionally non-blank otherwise the height is not the same as for /* text is intentionally non-blank otherwise the height is not the same as for
* infoMessage and errorMessageLabel - but it is still invisible because * infoMessage and errorMessageLabel - but it is still invisible because
* gnome-shell.css sets the color to be transparent * gnome-shell.css sets the color to be transparent
*/ */
this._nullMessageLabel = new St.Label({ style_class: 'prompt-dialog-null-label', this._nullMessageLabel = new St.Label({ style_class: 'prompt-dialog-null-label' });
text: 'abc' });
this._nullMessageLabel.add_style_class_name('hidden');
this._nullMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE; this._nullMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
this._nullMessageLabel.clutter_text.line_wrap = true; this._nullMessageLabel.clutter_text.line_wrap = true;
content.add_child(this._nullMessageLabel); warningBox.add_child(this._nullMessageLabel);
this._nullMessageLabel.show();
passwordBox.add_child(warningBox);
bodyContent.add_child(passwordBox);
this._cancelButton = this.addButton({ label: _("Cancel"), this._cancelButton = this.addButton({ label: _("Cancel"),
action: this.cancel.bind(this), action: this.cancel.bind(this),
@ -149,6 +146,8 @@ var AuthenticationDialog = GObject.registerClass({
this._okButton.reactive = text.get_text().length > 0; this._okButton.reactive = text.get_text().length > 0;
}); });
this.contentLayout.add_child(bodyContent);
this._doneEmitted = false; this._doneEmitted = false;
this._mode = -1; this._mode = -1;
@ -163,13 +162,6 @@ var AuthenticationDialog = GObject.registerClass({
this._onUserChanged(); this._onUserChanged();
} }
_setWorking(working) {
if (working)
this._workSpinner.play();
else
this._workSpinner.stop();
}
_initiateSession() { _initiateSession() {
this._destroySession(DELAYED_RESET_TIMEOUT); this._destroySession(DELAYED_RESET_TIMEOUT);
@ -218,7 +210,6 @@ var AuthenticationDialog = GObject.registerClass({
this._passwordEntry.reactive = false; this._passwordEntry.reactive = false;
this._okButton.reactive = false; this._okButton.reactive = false;
this._setWorking(true);
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
@ -273,19 +264,20 @@ var AuthenticationDialog = GObject.registerClass({
this._sessionRequestTimeoutId = 0; this._sessionRequestTimeoutId = 0;
} }
// Cheap localization trick // Hack: The request string comes directly from PAM, if it's "Password:"
if (request == 'Password:' || request == 'Password: ') // we replace it with our own, if it's something else we replace the
this._passwordLabel.set_text(_("Password:")); // last colon and any trailing spaces with a "…".
if (request === 'Password:' || request === 'Password: ')
this._passwordEntry.hint_text = _('Enter Password…');
else else
this._passwordLabel.set_text(request); this._passwordEntry.hint_text = request.replace(/: *$/, '…');
this._passwordEntry.password_visible = echoOn; this._passwordEntry.password_visible = echoOn;
this._passwordBox.show(); this._passwordEntry.show();
this._passwordEntry.set_text(''); this._passwordEntry.set_text('');
this._passwordEntry.reactive = true; this._passwordEntry.reactive = true;
this._okButton.reactive = false; this._okButton.reactive = false;
this._setWorking(false);
this._ensureOpen(); this._ensureOpen();
this._passwordEntry.grab_key_focus(); this._passwordEntry.grab_key_focus();
@ -332,7 +324,7 @@ var AuthenticationDialog = GObject.registerClass({
if (this.state != ModalDialog.State.OPENED) if (this.state != ModalDialog.State.OPENED)
return; return;
this._passwordBox.hide(); this._passwordEntry.hide();
this._cancelButton.grab_key_focus(); this._cancelButton.grab_key_focus();
this._okButton.reactive = false; this._okButton.reactive = false;
}; };