[gnome-shell] networkAgent: Implement new dialog design

[Florian Müllner <fmuellner src gnome org>]

commit dbaf5687dd1f21a2d9932f31d4b167956e582410
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Tue Jan 21 10:27:03 2020 +0100

    networkAgent: Implement new dialog design
    
    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

 data/theme/gnome-shell-sass/widgets/_dialogs.scss | 11 ------
 js/ui/components/networkAgent.js                  | 44 ++++++-----------------
 2 files changed, 11 insertions(+), 44 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss 
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index 01615e24ab..2f7d1ba71b 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -91,10 +91,6 @@
   }
 }
 
-.prompt-dialog-description:rtl {
-  text-align: right;
-}
-
 .prompt-dialog-password-grid {
   spacing-rows: 8px;
   spacing-columns: 4px;
@@ -171,10 +167,3 @@
 .access-dialog {
   spacing: 30px;
 }
-
-/* Network Agent Dialog */
-
-.network-dialog-secret-table {
-  spacing-rows: 15px;
-  spacing-columns: 1em;
-}
diff --git a/js/ui/components/networkAgent.js b/js/ui/components/networkAgent.js
index 6351630d4b..2d8ed545da 100644
--- a/js/ui/components/networkAgent.js
+++ b/js/ui/components/networkAgent.js
@@ -33,38 +33,26 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
             title: this._content.title,
             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 pos = 0;
         for (let i = 0; i < this._content.secrets.length; 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 entryParams = {
                 style_class: 'prompt-dialog-password-entry',
+                hint_text: secret.label,
                 text: secret.value,
                 can_focus: reactive,
                 reactive,
-                x_expand: true,
+                x_align: Clutter.ActorAlign.CENTER,
             };
             if (secret.password)
                 secret.entry = new St.PasswordEntry(entryParams);
             else
                 secret.entry = new St.Entry(entryParams);
             ShellEntry.addContextMenu(secret.entry);
+            contentBox.add_child(secret.entry);
 
             if (secret.validate)
                 secret.valid = secret.validate(secret);
@@ -89,36 +77,26 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
             } else {
                 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)) {
-            this._capsLockWarningLabel = new ShellEntry.CapsLockWarning();
-            if (rtl)
-                layout.attach(this._capsLockWarningLabel, 0, pos, 1, 1);
-            else
-                layout.attach(this._capsLockWarningLabel, 1, pos, 1, 1);
+            let capsLockWarning = new ShellEntry.CapsLockWarning();
+            contentBox.add_child(capsLockWarning);
         }
 
-        contentBox.add_child(secretTable);
-
         if (flags & NM.SecretAgentGetSecretsFlags.WPS_PBC_ACTIVE) {
-            let descriptionLabel = new St.Label({ style_class: 'prompt-dialog-description',
-                                                  text: _("Alternatively you can connect by pushing the 
“WPS” button on your router.") });
+            let descriptionLabel = new St.Label({
+                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.ellipsize = Pango.EllipsizeMode.NONE;
 
             contentBox.add_child(descriptionLabel);
         }
 
+        this.contentLayout.add_child(contentBox);
+
         this._okButton = {
             label: _("Connect"),
             action: this._onOk.bind(this),