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

shellMountOperation: Implement new dialog design

Browse Source 
Update the layout of the ShellMountPasswordDialog dialog according to
the new dialog design:

- Center-align all the elements of the dialog
- Align the work-spinner to the right (or left with RTL layouts) of the
password entry
- Show the entry-labels as hint text of the entry

See https://gitlab.gnome.org/GNOME/gnome-shell/issues/1343

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/942
This commit is contained in:
Jonas Dreßler 2019-12-08 13:08:13 +01:00 committed by Florian Müllner
parent dc578a9e79
commit 7a1f4f9af3
2 changed files with 65 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,6 +95,19 @@
text-align: right;
}
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
.prompt-dialog-password-entry {
width: auto;
// 4px (spacing) + 16px (spinner-width)
&:ltr { margin-left: 20px; }
&:rtl { margin-right: 20px; }
}
}
.prompt-dialog-password-layout {
spacing: 8px;
}
@ -114,11 +127,6 @@
color: $warning_color;
}
.prompt-dialog-grid {
spacing-rows: 15px;
spacing-columns: 1em;
}
/* Polkit Dialog */

106
js/ui/shellMountOperation.js
View File

@ -269,21 +269,18 @@ var ShellMountPasswordDialog = GObject.registerClass({
let disksApp = Shell.AppSystem.get_default().lookup_app('org.gnome.DiskUtility.desktop');
let content = new Dialog.MessageDialogContent({ title, description });
this.contentLayout.add_actor(content);
let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
let grid = new St.Widget({ style_class: 'prompt-dialog-grid',
layout_manager: layout });
layout.hookup_style(grid);
let rtl = grid.get_text_direction() === Clutter.TextDirection.RTL;
let passwordGridLayout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
let passwordGrid = new St.Widget({
style_class: 'prompt-dialog-password-grid',
layout_manager: passwordGridLayout,
});
passwordGridLayout.hookup_style(passwordGrid);
let rtl = passwordGrid.get_text_direction() === Clutter.TextDirection.RTL;
let curGridRow = 0;
if (flags & Gio.AskPasswordFlags.TCRYPT) {
this._keyfilesLabel = new St.Label({
style_class: 'prompt-dialog-keyfiles-label',
visible: false,
y_align: Clutter.ActorAlign.CENTER,
});
this._hiddenVolume = new CheckBox.CheckBox(_("Hidden Volume"));
content.add_child(this._hiddenVolume);
@ -294,6 +291,7 @@ var ShellMountPasswordDialog = GObject.registerClass({
this._keyfilesCheckbox.connect("clicked", this._onKeyfilesCheckboxClicked.bind(this));
content.add_child(this._keyfilesCheckbox);
this._keyfilesLabel = new St.Label({ visible: false });
this._keyfilesLabel.clutter_text.set_markup(
/* Translators: %s is the Disks application */
_("To unlock a volume that uses keyfiles, use the <i>%s</i> utility instead.").format(disksApp.get_name())
@ -302,71 +300,65 @@ var ShellMountPasswordDialog = GObject.registerClass({
this._keyfilesLabel.clutter_text.line_wrap = true;
content.add_child(this._keyfilesLabel);
this._pimLabel = new St.Label({ style_class: 'prompt-dialog-password-label',
text: _("PIM Number"),
y_align: Clutter.ActorAlign.CENTER });
this._pimEntry = new St.PasswordEntry({
style_class: 'prompt-dialog-password-entry',
hint_text: _('Enter PIM Number…'),
can_focus: true,
x_expand: true,
});
this._pimEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
ShellEntry.addContextMenu(this._pimEntry);
if (rtl) {
layout.attach(this._pimEntry, 0, 0, 1, 1);
layout.attach(this._pimLabel, 1, 0, 1, 1);
} else {
layout.attach(this._pimLabel, 0, 0, 1, 1);
layout.attach(this._pimEntry, 1, 0, 1, 1);
}
this._pimErrorMessageLabel = new St.Label({ style_class: 'prompt-dialog-password-entry',
text: _("The PIM must be a number or empty."),
visible: false });
layout.attach(this._pimErrorMessageLabel, 0, 2, 2, 1);
if (rtl)
passwordGridLayout.attach(this._pimEntry, 1, curGridRow, 1, 1);
else
passwordGridLayout.attach(this._pimEntry, 0, curGridRow, 1, 1);
curGridRow += 1;
} else {
this._hiddenVolume = null;
this._systemVolume = null;
this._pimEntry = null;
this._pimErrorMessageLabel = null;
}
this._passwordLabel = new St.Label({ style_class: 'prompt-dialog-password-label',
text: _("Password"),
y_align: Clutter.ActorAlign.CENTER });
this._passwordEntry = new St.PasswordEntry({
style_class: 'prompt-dialog-password-entry',
hint_text: _('Enter Password…'),
can_focus: true,
x_expand: true,
});
this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
ShellEntry.addContextMenu(this._passwordEntry);
this.setInitialKeyFocus(this._passwordEntry);
ShellEntry.addContextMenu(this._passwordEntry);
this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
animate: true,
});
this._passwordEntry.secondary_icon = this._workSpinner;
this._capsLockWarningLabel = new ShellEntry.CapsLockWarning();
if (rtl) {
layout.attach(this._passwordEntry, 0, 1, 1, 1);
layout.attach(this._passwordLabel, 1, 1, 1, 1);
layout.attach(this._capsLockWarningLabel, 0, 2, 1, 1);
passwordGridLayout.attach(this._workSpinner, 0, curGridRow, 1, 1);
passwordGridLayout.attach(this._passwordEntry, 1, curGridRow, 1, 1);
} else {
layout.attach(this._passwordLabel, 0, 1, 1, 1);
layout.attach(this._passwordEntry, 1, 1, 1, 1);
layout.attach(this._capsLockWarningLabel, 1, 2, 1, 1);
passwordGridLayout.attach(this._passwordEntry, 0, curGridRow, 1, 1);
passwordGridLayout.attach(this._workSpinner, 1, curGridRow, 1, 1);
}
curGridRow += 1;
content.add_child(grid);
let warningBox = new St.BoxLayout({ vertical: true });
this._errorMessageLabel = new St.Label({ style_class: 'prompt-dialog-error-label',
text: _("Sorry, that didn’t work. Please try again.") });
let capsLockWarning = new ShellEntry.CapsLockWarning();
warningBox.add_child(capsLockWarning);
this._errorMessageLabel = new St.Label({
style_class: 'prompt-dialog-error-label',
opacity: 0,
});
this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
this._errorMessageLabel.clutter_text.line_wrap = true;
this._errorMessageLabel.hide();
content.add_child(this._errorMessageLabel);
warningBox.add_child(this._errorMessageLabel);
passwordGridLayout.attach(warningBox, 0, curGridRow, 2, 1);
content.add_child(passwordGrid);
if (flags & Gio.AskPasswordFlags.SAVING_SUPPORTED) {
this._rememberChoice = new CheckBox.CheckBox(_("Remember Password"));
@ -377,6 +369,8 @@ var ShellMountPasswordDialog = GObject.registerClass({
this._rememberChoice = null;
}
this.contentLayout.add_child(content);
this._defaultButtons = [{
label: _("Cancel"),
action: this._onCancelButton.bind(this),
@ -402,9 +396,10 @@ var ShellMountPasswordDialog = GObject.registerClass({
}
reaskPassword() {
this._passwordEntry.set_text('');
this._errorMessageLabel.show();
this._workSpinner.stop();
this._passwordEntry.set_text('');
this._errorMessageLabel.text = _('Sorry, that didn’t work. Please try again.');
this._errorMessageLabel.opacity = 255;
}
_onCancelButton() {
@ -417,14 +412,17 @@ var ShellMountPasswordDialog = GObject.registerClass({
_onEntryActivate() {
let pim = 0;
if (this._pimEntry !== null)
if (this._pimEntry !== null) {
pim = this._pimEntry.get_text();
if (isNaN(pim)) {
this._pimEntry.set_text('');
this._pimErrorMessageLabel.show();
return;
} else if (this._pimErrorMessageLabel !== null) {
this._pimErrorMessageLabel.hide();
if (isNaN(pim)) {
this._pimEntry.set_text('');
this._errorMessageLabel.text = _('The PIM must be a number or empty.');
this._errorMessageLabel.opacity = 255;
return;
}
this._errorMessageLabel.opacity = 0;
}
global.settings.set_boolean(REMEMBER_MOUNT_PASSWORD_KEY,