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

networkAgent: Implement new dialog design

Browse Source 
Use a completely vertical layout instead of the ClutterGridLayout based
layout to implement the new design for dialogs in the shell:

- Center-align all the elements of the dialog
- Remove the work-spinner
- 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 2020-01-21 10:27:03 +01:00 committed by Florian Müllner
parent 20895c7791
commit dbaf5687dd
2 changed files with 11 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,10 +91,6 @@
} }
} }
.prompt-dialog-description:rtl {
text-align: right;
}
.prompt-dialog-password-grid { .prompt-dialog-password-grid {
spacing-rows: 8px; spacing-rows: 8px;
spacing-columns: 4px; spacing-columns: 4px;
@ -171,10 +167,3 @@
.access-dialog { .access-dialog {
spacing: 30px; spacing: 30px;
} }
/* Network Agent Dialog */
.network-dialog-secret-table {
spacing-rows: 15px;
spacing-columns: 1em;
}

44
js/ui/components/networkAgent.js
View File

@ -33,38 +33,26 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
title: this._content.title, title: this._content.title,
description: this._content.message, description: this._content.message,
}); });
this.contentLayout.add_actor(contentBox);
let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
let secretTable = new St.Widget({ style_class: 'network-dialog-secret-table',
layout_manager: layout });
layout.hookup_style(secretTable);
let rtl = secretTable.get_text_direction() == Clutter.TextDirection.RTL;
let initialFocusSet = false; let initialFocusSet = false;
let pos = 0;
for (let i = 0; i < this._content.secrets.length; i++) { for (let i = 0; i < this._content.secrets.length; i++) {
let secret = this._content.secrets[i]; let secret = this._content.secrets[i];
let label = new St.Label({ style_class: 'prompt-dialog-password-label',
text: secret.label,
x_align: Clutter.ActorAlign.START,
y_align: Clutter.ActorAlign.CENTER });
label.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
let reactive = secret.key != null; let reactive = secret.key != null;
let entryParams = { let entryParams = {
style_class: 'prompt-dialog-password-entry', style_class: 'prompt-dialog-password-entry',
hint_text: secret.label,
text: secret.value, text: secret.value,
can_focus: reactive, can_focus: reactive,
reactive, reactive,
x_expand: true, x_align: Clutter.ActorAlign.CENTER,
}; };
if (secret.password) if (secret.password)
secret.entry = new St.PasswordEntry(entryParams); secret.entry = new St.PasswordEntry(entryParams);
else else
secret.entry = new St.Entry(entryParams); secret.entry = new St.Entry(entryParams);
ShellEntry.addContextMenu(secret.entry); ShellEntry.addContextMenu(secret.entry);
contentBox.add_child(secret.entry);
if (secret.validate) if (secret.validate)
secret.valid = secret.validate(secret); secret.valid = secret.validate(secret);
@ -89,36 +77,26 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
} else { } else {
secret.valid = true; secret.valid = true;
} }
if (rtl) {
layout.attach(secret.entry, 0, pos, 1, 1);
layout.attach(label, 1, pos, 1, 1);
} else {
layout.attach(label, 0, pos, 1, 1);
layout.attach(secret.entry, 1, pos, 1, 1);
}
pos++;
} }
if (this._content.secrets.some(s => s.password)) { if (this._content.secrets.some(s => s.password)) {
this._capsLockWarningLabel = new ShellEntry.CapsLockWarning(); let capsLockWarning = new ShellEntry.CapsLockWarning();
if (rtl) contentBox.add_child(capsLockWarning);
layout.attach(this._capsLockWarningLabel, 0, pos, 1, 1);
else
layout.attach(this._capsLockWarningLabel, 1, pos, 1, 1);
} }
contentBox.add_child(secretTable);
if (flags & NM.SecretAgentGetSecretsFlags.WPS_PBC_ACTIVE) { if (flags & NM.SecretAgentGetSecretsFlags.WPS_PBC_ACTIVE) {
let descriptionLabel = new St.Label({ style_class: 'prompt-dialog-description', let descriptionLabel = new St.Label({
text: _("Alternatively you can connect by pushing the “WPS” button on your router.") }); text: _('Alternatively you can connect by pushing the “WPS” button on your router.'),
style_class: 'message-dialog-description',
});
descriptionLabel.clutter_text.line_wrap = true; descriptionLabel.clutter_text.line_wrap = true;
descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE; descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
contentBox.add_child(descriptionLabel); contentBox.add_child(descriptionLabel);
} }
this.contentLayout.add_child(contentBox);
this._okButton = { this._okButton = {
label: _("Connect"), label: _("Connect"),
action: this._onOk.bind(this), action: this._onOk.bind(this),