[gnome-shell] runDialog: Implement the new dialog design

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

commit 5e08c808579c4940f5ca136a862f6d0b2ce6c294
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Sun Dec 8 13:09:25 2019 +0100

    runDialog: Implement the new dialog design
    
    Implement the new design according to the mockups in
    https://gitlab.gnome.org/GNOME/gnome-shell/issues/1343.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/960

 data/theme/gnome-shell-sass/widgets/_dialogs.scss | 18 +++---
 js/ui/runDialog.js                                | 78 +++++++----------------
 2 files changed, 32 insertions(+), 64 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss 
b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index 67bbfc2113..49f231848e 100644
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -58,17 +58,15 @@
 
 /* Run Dialog */
 .run-dialog {
-  .run-dialog-entry { width: 20em; margin-bottom: 6px; }
-  .run-dialog-error-box {
-    padding-top: 16px;
-    spacing: 6px;
+  .modal-dialog-content-box {
+    margin-top: 24px;
+    margin-bottom: 14px;
   }
-
-  .run-dialog-label {
-    @include fontsize($base_font_size + 1.1);
-    font-weight: normal;
-    color: $fg_color;
-    padding-bottom: .4em;
+  .run-dialog-entry { width: 20em; }
+  .run-dialog-description {
+    @include fontsize($base_font_size - 1);
+    text-align: center;
+    color: darken($fg_color, 20%);
   }
 }
 
diff --git a/js/ui/runDialog.js b/js/ui/runDialog.js
index af500b0af0..8794f74885 100644
--- a/js/ui/runDialog.js
+++ b/js/ui/runDialog.js
@@ -3,6 +3,7 @@
 
 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 
+const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
@@ -18,8 +19,6 @@ const TERMINAL_SCHEMA = 'org.gnome.desktop.default-applications.terminal';
 const EXEC_KEY = 'exec';
 const EXEC_ARG_KEY = 'exec-arg';
 
-var DIALOG_GROW_TIME = 100;
-
 var RunDialog = GObject.registerClass(
 class RunDialog extends ModalDialog.ModalDialog {
     _init() {
@@ -56,11 +55,10 @@ class RunDialog extends ModalDialog.ModalDialog {
             },
         };
 
-        let label = new St.Label({
-            style_class: 'run-dialog-label',
-            text: _("Enter a Command"),
-        });
-        this.contentLayout.add_child(label);
+        let title = _('Run a Command');
+
+        let content = new Dialog.MessageDialogContent({ title });
+        this.contentLayout.add_actor(content);
 
         let entry = new St.Entry({
             style_class: 'run-dialog-entry',
@@ -68,42 +66,20 @@ class RunDialog extends ModalDialog.ModalDialog {
         });
         ShellEntry.addContextMenu(entry);
 
-        entry.label_actor = label;
-
         this._entryText = entry.clutter_text;
-        this.contentLayout.add_child(entry);
+        content.add_child(entry);
         this.setInitialKeyFocus(this._entryText);
 
-        this._errorBox = new St.BoxLayout({ style_class: 'run-dialog-error-box' });
-
-        this.contentLayout.add_child(this._errorBox);
+        let defaultDescriptionText = _('Press ESC to close');
 
-        let errorIcon = new St.Icon({
-            icon_name: 'dialog-error-symbolic',
-            icon_size: 24,
-            style_class: 'run-dialog-error-icon',
-            y_align: Clutter.ActorAlign.CENTER,
+        this._descriptionLabel = new St.Label({
+            style_class: 'run-dialog-description',
+            text: defaultDescriptionText,
         });
-        this._errorBox.add_child(errorIcon);
+        content.add_child(this._descriptionLabel);
 
         this._commandError = false;
 
-        this._errorMessage = new St.Label({
-            style_class: 'run-dialog-error-label',
-            y_align: Clutter.ActorAlign.CENTER,
-        });
-        this._errorMessage.clutter_text.line_wrap = true;
-
-        this._errorBox.add_child(this._errorMessage);
-
-        this._errorBox.hide();
-
-        this.setButtons([{
-            action: this.close.bind(this),
-            label: _("Close"),
-            key: Clutter.KEY_Escape,
-        }]);
-
         this._pathCompleter = new Gio.FilenameCompleter();
 
         this._history = new History.HistoryManager({
@@ -136,6 +112,18 @@ class RunDialog extends ModalDialog.ModalDialog {
             }
             return Clutter.EVENT_PROPAGATE;
         });
+        this._entryText.connect('text-changed', () => {
+            this._descriptionLabel.set_text(defaultDescriptionText);
+        });
+    }
+
+    vfunc_key_release_event(event) {
+        if (event.keyval === Clutter.KEY_Escape) {
+            this.close();
+            return Clutter.EVENT_STOP;
+        }
+
+        return Clutter.EVENT_PROPAGATE;
     }
 
     _getCommandCompletion(text) {
@@ -242,24 +230,7 @@ class RunDialog extends ModalDialog.ModalDialog {
 
     _showError(message) {
         this._commandError = true;
-
-        this._errorMessage.set_text(message);
-
-        if (!this._errorBox.visible) {
-            let [, errorBoxNaturalHeight] = this._errorBox.get_preferred_height(-1);
-
-            let parentActor = this._errorBox.get_parent();
-            let height = parentActor.height + errorBoxNaturalHeight;
-            parentActor.ease({
-                height,
-                duration: DIALOG_GROW_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                onComplete: () => {
-                    parentActor.set_height(-1);
-                    this._errorBox.show();
-                },
-            });
-        }
+        this._descriptionLabel.set_text(message);
     }
 
     _restart() {
@@ -274,7 +245,6 @@ class RunDialog extends ModalDialog.ModalDialog {
 
     open() {
         this._history.lastItem();
-        this._errorBox.hide();
         this._entryText.set_text('');
         this._commandError = false;