[gnome-shell] shellMountOperation: Implement new dialog design

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

commit 7a1f4f9af32832d613d2c6107714887bc2f50e5f
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Sun Dec 8 13:08:13 2019 +0100

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

 data/theme/gnome-shell-sass/widgets/_dialogs.scss |  18 +++-
 js/ui/shellMountOperation.js                      | 106 +++++++++++-----------
 2 files changed, 65 insertions(+), 59 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss 
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index 88f28d76a6..01615e24ab 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -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 */
 
diff --git a/js/ui/shellMountOperation.js b/js/ui/shellMountOperation.js
index b2aa2ac47a..f5754c6e2e 100644
--- a/js/ui/shellMountOperation.js
+++ b/js/ui/shellMountOperation.js
@@ -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);
 
-        if (flags & Gio.AskPasswordFlags.TCRYPT) {
-            this._keyfilesLabel = new St.Label({
-                style_class: 'prompt-dialog-keyfiles-label',
-                visible: false,
-                y_align: Clutter.ActorAlign.CENTER,
-            });
+        let rtl = passwordGrid.get_text_direction() === Clutter.TextDirection.RTL;
+        let curGridRow = 0;
 
+        if (flags & Gio.AskPasswordFlags.TCRYPT) {
             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;
+
+        let warningBox = new St.BoxLayout({ vertical: true });
 
-        content.add_child(grid);
+        let capsLockWarning = new ShellEntry.CapsLockWarning();
+        warningBox.add_child(capsLockWarning);
 
-        this._errorMessageLabel = new St.Label({ style_class: 'prompt-dialog-error-label',
-                                                 text: _("Sorry, that didn’t work. Please try again.") });
+        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,