[gnome-shell/wip/gdm-shell: 9/16] ModalDialog: Generalize and rename to Dialog



commit 599342389faaa17479ac8e5c0dca3d5fa597f78a
Author: Ray Strode <rstrode redhat com>
Date:   Fri Aug 19 11:48:14 2011 -0400

    ModalDialog: Generalize and rename to Dialog
    
    Most dialogs presented in the shell right now are system modal.
    They shade out, and block input from other parts of the OS until
    the user addresses the dialog.
    
    There are cases, however, where it would be useful to show a dialog
    that doesn't desensitize other parts of the OS chrome (such as a
    user list in a future gnome-shell based GDM greeter).
    
    This commit renames ModalDialog to Dialog and adds a modal property,
    that determines whether or not to block outside events, shade outside
    the dialog with a lightbox, etc.

 data/theme/gnome-shell.css          |   14 +++---
 js/Makefile.am                      |    2 +-
 js/ui/{modalDialog.js => dialog.js} |   80 +++++++++++++++++++++++-----------
 js/ui/endSessionDialog.js           |   17 ++++----
 js/ui/polkitAuthenticationAgent.js  |   11 +++--
 js/ui/runDialog.js                  |    9 ++--
 js/ui/shellMountOperation.js        |   12 +++--
 7 files changed, 89 insertions(+), 56 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 458e5a5..ab03867 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1508,7 +1508,7 @@ StTooltip StLabel {
 }
 
 /* Modal Dialogs */
-.modal-dialog {
+.dialog {
     font-size: 12pt;
     border-radius: 24px;
     background-color: rgba(0.0, 0.0, 0.0, 0.9);
@@ -1521,11 +1521,11 @@ StTooltip StLabel {
     padding-top: 30px;
 }
 
-.modal-dialog-button-box {
+.dialog-button-box {
     spacing: 21px;
 }
 
-.modal-dialog-button {
+.dialog-button {
     border: 1px solid #8b8b8b;
     border-radius: 18px;
     font-size: 10.5pt;
@@ -1544,19 +1544,19 @@ StTooltip StLabel {
     background-gradient-end: rgba(255, 255, 255, 0);
 }
 
-.modal-dialog-button:hover {
+.dialog-button:hover {
     background-gradient-start: rgba(255, 255, 255, 0.3);
     background-gradient-end: rgba(255, 255, 255, 0.1);
 }
 
-.modal-dialog-button:active,
-.modal-dialog-button:pressed {
+.dialog-button:active,
+.dialog-button:pressed {
     border-color: #a5a5a5;
     background-gradient-start: rgba(255, 255, 255, 0);
     background-gradient-end: rgba(255, 255, 255, 0.2);
 }
 
-.modal-dialog-button:focus {
+.dialog-button:focus {
     border: 2px solid #a5a5a5;
 
     padding-left: 31px;
diff --git a/js/Makefile.am b/js/Makefile.am
index 79a81c7..7deb246 100644
--- a/js/Makefile.am
+++ b/js/Makefile.am
@@ -23,6 +23,7 @@ nobase_dist_js_DATA = 	\
 	ui/ctrlAltTab.js	\
 	ui/dash.js		\
 	ui/dateMenu.js		\
+	ui/dialog.js		\
 	ui/dnd.js		\
 	ui/docDisplay.js	\
 	ui/endSessionDialog.js	\
@@ -37,7 +38,6 @@ nobase_dist_js_DATA = 	\
 	ui/magnifierDBus.js	\
 	ui/main.js		\
 	ui/messageTray.js	\
-	ui/modalDialog.js	\
 	ui/shellMountOperation.js \
 	ui/notificationDaemon.js \
 	ui/overview.js		\
diff --git a/js/ui/modalDialog.js b/js/ui/dialog.js
similarity index 78%
rename from js/ui/modalDialog.js
rename to js/ui/dialog.js
index ab637e6..778123c 100644
--- a/js/ui/modalDialog.js
+++ b/js/ui/dialog.js
@@ -10,6 +10,8 @@ const Pango = imports.gi.Pango;
 const St = imports.gi.St;
 const Shell = imports.gi.Shell;
 const Signals = imports.signals;
+const Gettext = imports.gettext.domain('gnome-shell');
+const _ = Gettext.gettext;
 
 const Params = imports.misc.params;
 
@@ -28,21 +30,21 @@ const State = {
     FADED_OUT: 4
 };
 
-function ModalDialog() {
+function Dialog() {
     this._init();
 }
 
-ModalDialog.prototype = {
+Dialog.prototype = {
     _init: function(params) {
-        params = Params.parse(params, { styleClass: null });
+        params = Params.parse(params, { modal: null,
+                                        styleClass: null });
 
         this.state = State.CLOSED;
-        this._hasModal = false;
+        this._isModal = params.modal;
 
         this._group = new St.Group({ visible: false,
                                      x: 0,
                                      y: 0 });
-        Main.uiGroup.add_actor(this._group);
 
         let constraint = new Clutter.BindConstraint({ source: global.stage,
                                                       coordinate: Clutter.BindCoordinate.POSITION | Clutter.BindCoordinate.SIZE });
@@ -53,26 +55,35 @@ ModalDialog.prototype = {
         this._actionKeys = {};
         this._group.connect('key-press-event', Lang.bind(this, this._onKeyPressEvent));
 
-        this._lightbox = new Lightbox.Lightbox(this._group,
-                                               { inhibitEvents: true });
-
         this._backgroundBin = new St.Bin();
 
-        this._group.add_actor(this._backgroundBin);
-        this._lightbox.highlight(this._backgroundBin);
-
-        this._backgroundStack = new Shell.Stack();
-        this._backgroundBin.child = this._backgroundStack;
-
-        this._eventBlocker = new Clutter.Group({ reactive: true });
-        this._backgroundStack.add_actor(this._eventBlocker);
-
-        this._dialogLayout = new St.BoxLayout({ style_class: 'modal-dialog',
-                                                vertical:    true });
+        this._dialogLayout = new St.BoxLayout({ style_class: 'dialog',
+                                                reactive:     true,
+                                                can_focus:    true,
+                                                vertical:     true });
         if (params.styleClass != null) {
             this._dialogLayout.add_style_class_name(params.styleClass);
         }
-        this._backgroundStack.add_actor(this._dialogLayout);
+
+        if (this.isModal) {
+            Main.uiGroup.add_actor(this._group);
+            this._lightbox = new Lightbox.Lightbox(this._group,
+                                                   { inhibitEvents: true });
+            this._lightbox.highlight(this._backgroundBin);
+
+            let stack = new Shell.Stack();
+            this._backgroundBin.child = stack;
+
+            this._eventBlocker = new Clutter.Group({ reactive: true });
+            stack.add_actor(this._eventBlocker);
+            stack.add_actor(this._dialogLayout);
+        } else {
+            Main.layoutManager.addChrome(this._group);
+            this._group.lower_bottom();
+            this._backgroundBin.add_actor(this._dialogLayout);
+        }
+
+        this._group.add_actor(this._backgroundBin);
 
         this.contentLayout = new St.BoxLayout({ vertical: true });
         this._dialogLayout.add(this.contentLayout,
@@ -81,7 +92,8 @@ ModalDialog.prototype = {
                                  x_align: St.Align.MIDDLE,
                                  y_align: St.Align.START });
 
-        this._buttonLayout = new St.BoxLayout({ style_class: 'modal-dialog-button-box',
+        this._buttonLayout = new St.BoxLayout({ style_class: 'dialog-button-box',
+                                                opacity:     220,
                                                 vertical:    false });
         this._dialogLayout.add(this._buttonLayout,
                                { expand:  true,
@@ -94,6 +106,8 @@ ModalDialog.prototype = {
     },
 
     setButtons: function(buttons) {
+        let hadChildren = this._buttonLayout.get_children() > 0;
+
         this._buttonLayout.destroy_children();
         this._actionKeys = {};
 
@@ -104,7 +118,7 @@ ModalDialog.prototype = {
             let action = buttonInfo['action'];
             let key = buttonInfo['key'];
 
-            let button = new St.Button({ style_class: 'modal-dialog-button',
+            let button = new St.Button({ style_class: 'dialog-button',
                                          reactive:    true,
                                          can_focus:   true,
                                          label:       label });
@@ -127,6 +141,17 @@ ModalDialog.prototype = {
                                      x_align: x_alignment,
                                      y_align: St.Align.MIDDLE });
 
+            if (!hadChildren) {
+                this._buttonLayout.opacity = 0;
+                Tweener.addTween(this._buttonLayout,
+                                 { opacity: 255,
+                                   time: 0.33,
+                                   transition: 'easeOutQuad',
+                                   onComplete: Lang.bind(this, function() {
+                                   })
+                                 });
+            }
+
             button.connect('clicked', action);
 
             if (key)
@@ -156,7 +181,8 @@ ModalDialog.prototype = {
         this.state = State.OPENING;
 
         this._dialogLayout.opacity = 255;
-        this._lightbox.show();
+        if (this._lightbox)
+            this._lightbox.show();
         this._group.opacity = 0;
         this._group.show();
         Tweener.addTween(this._group,
@@ -222,7 +248,8 @@ ModalDialog.prototype = {
         global.gdk_screen.get_display().sync();
         this._hasModal = false;
 
-        this._eventBlocker.raise_top();
+        if (this.isModal)
+          this._eventBlocker.raise_top();
     },
 
     pushModal: function (timestamp) {
@@ -238,7 +265,8 @@ ModalDialog.prototype = {
         } else
             this._initialKeyFocus.grab_key_focus();
 
-        this._eventBlocker.lower_bottom();
+        if (this.isModal)
+          this._eventBlocker.lower_bottom();
         return true;
     },
 
@@ -272,4 +300,4 @@ ModalDialog.prototype = {
                          });
     }
 };
-Signals.addSignalMethods(ModalDialog.prototype);
+Signals.addSignalMethods(Dialog.prototype);
diff --git a/js/ui/endSessionDialog.js b/js/ui/endSessionDialog.js
index 70f996a..1ff973b 100644
--- a/js/ui/endSessionDialog.js
+++ b/js/ui/endSessionDialog.js
@@ -33,7 +33,7 @@ const Shell = imports.gi.Shell;
 const GnomeSession = imports.misc.gnomeSession
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
-const ModalDialog = imports.ui.modalDialog;
+const Dialog = imports.ui.dialog;
 const Tweener = imports.ui.tweener;
 
 let _endSessionDialog = null;
@@ -232,10 +232,11 @@ function init() {
 }
 
 EndSessionDialog.prototype = {
-    __proto__: ModalDialog.ModalDialog.prototype,
+    __proto__: Dialog.Dialog.prototype,
 
     _init: function() {
-        ModalDialog.ModalDialog.prototype._init.call(this, { styleClass: 'end-session-dialog' });
+        Dialog.Dialog.prototype._init.call(this, { modal: true,
+                                                   styleClass: 'end-session-dialog' });
 
         this._user = Gdm.UserManager.ref_default().get_user(GLib.get_user_name());
 
@@ -352,8 +353,8 @@ EndSessionDialog.prototype = {
     },
 
     _updateContent: function() {
-        if (this.state != ModalDialog.State.OPENING &&
-            this.state != ModalDialog.State.OPENED)
+        if (this.state != Dialog.State.OPENING &&
+            this.state != Dialog.State.OPENED)
             return;
 
         let dialogContent = DialogContent[this._type];
@@ -423,7 +424,7 @@ EndSessionDialog.prototype = {
     },
 
     close: function() {
-        ModalDialog.ModalDialog.prototype.close.call(this);
+        Dialog.Dialog.prototype.close.call(this);
         DBus.session.emit_signal('/org/gnome/SessionManager/EndSessionDialog',
                                  'org.gnome.SessionManager.EndSessionDialog',
                                  'Closed', '', []);
@@ -501,7 +502,7 @@ EndSessionDialog.prototype = {
         this._type = type;
 
         if (!(this._type in DialogContent))
-            throw new DBus.DBusError('org.gnome.Shell.ModalDialog.TypeError',
+            throw new DBus.DBusError('org.gnome.Shell.Dialog.TypeError',
                                      "Unknown dialog type requested");
 
         for (let i = 0; i < inhibitorObjectPaths.length; i++) {
@@ -517,7 +518,7 @@ EndSessionDialog.prototype = {
         this._updateButtons();
 
         if (!this.open(timestamp))
-            throw new DBus.DBusError('org.gnome.Shell.ModalDialog.GrabError',
+            throw new DBus.DBusError('org.gnome.Shell.Dialog.GrabError',
                                      "Cannot grab pointer and keyboard");
 
         this._updateContent();
diff --git a/js/ui/polkitAuthenticationAgent.js b/js/ui/polkitAuthenticationAgent.js
index a99cf3f..330c7f5 100644
--- a/js/ui/polkitAuthenticationAgent.js
+++ b/js/ui/polkitAuthenticationAgent.js
@@ -32,17 +32,18 @@ const Mainloop = imports.mainloop;
 const Polkit = imports.gi.Polkit;
 const PolkitAgent = imports.gi.PolkitAgent;
 
-const ModalDialog = imports.ui.modalDialog;
+const Dialog = imports.ui.dialog;
 
 function AuthenticationDialog(actionId, message, cookie, userNames) {
     this._init(actionId, message, cookie, userNames);
 }
 
 AuthenticationDialog.prototype = {
-    __proto__: ModalDialog.ModalDialog.prototype,
+    __proto__: Dialog.Dialog.prototype,
 
     _init: function(actionId, message, cookie, userNames) {
-        ModalDialog.ModalDialog.prototype._init.call(this, { styleClass: 'polkit-dialog' });
+        Dialog.Dialog.prototype._init.call(this, { modal: true,
+                                                   styleClass: 'polkit-dialog' });
 
         this.actionId = actionId;
         this.message = message;
@@ -187,7 +188,7 @@ AuthenticationDialog.prototype = {
         this._session.connect('show-error', Lang.bind(this, this._onSessionShowError));
         this._session.connect('show-info', Lang.bind(this, this._onSessionShowInfo));
 
-        // Delay focus grab to avoid ModalDialog stealing focus with
+        // Delay focus grab to avoid Dialog stealing focus with
         // its buttons
         this.connect('opened',
                      Lang.bind(this, function() {
@@ -200,7 +201,7 @@ AuthenticationDialog.prototype = {
     },
 
     _ensureOpen: function() {
-        // NOTE: ModalDialog.open() is safe to call if the dialog is
+        // NOTE: Dialog.open() is safe to call if the dialog is
         // already open - it just returns true without side-effects
         if (!this.open(global.get_current_time())) {
             // This can fail if e.g. unable to get input grab
diff --git a/js/ui/runDialog.js b/js/ui/runDialog.js
index bd6fc25..7d76ce4 100644
--- a/js/ui/runDialog.js
+++ b/js/ui/runDialog.js
@@ -11,7 +11,7 @@ const Signals = imports.signals;
 
 const FileUtils = imports.misc.fileUtils;
 const Main = imports.ui.main;
-const ModalDialog = imports.ui.modalDialog;
+const Dialog = imports.ui.dialog;
 const Tweener = imports.ui.tweener;
 const Util = imports.misc.util;
 const History = imports.misc.history;
@@ -168,9 +168,10 @@ function RunDialog() {
 }
 
 RunDialog.prototype = {
-__proto__: ModalDialog.ModalDialog.prototype,
+__proto__: Dialog.Dialog.prototype,
     _init : function() {
-        ModalDialog.ModalDialog.prototype._init.call(this, { styleClass: 'run-dialog' });
+        Dialog.Dialog.prototype._init.call(this, { modal: true,
+                                                   styleClass: 'run-dialog' });
 
         this._lockdownSettings = new Gio.Settings({ schema: LOCKDOWN_SCHEMA });
         this._terminalSettings = new Gio.Settings({ schema: TERMINAL_SCHEMA });
@@ -382,7 +383,7 @@ __proto__: ModalDialog.ModalDialog.prototype,
         if (this._lockdownSettings.get_boolean(DISABLE_COMMAND_LINE_KEY))
             return;
 
-        ModalDialog.ModalDialog.prototype.open.call(this);
+        Dialog.Dialog.prototype.open.call(this);
     },
 
 };
diff --git a/js/ui/shellMountOperation.js b/js/ui/shellMountOperation.js
index 9ccaaea..b00305e 100644
--- a/js/ui/shellMountOperation.js
+++ b/js/ui/shellMountOperation.js
@@ -10,7 +10,7 @@ const Shell = imports.gi.Shell;
 
 const Main = imports.ui.main;
 const MessageTray = imports.ui.messageTray;
-const ModalDialog = imports.ui.modalDialog;
+const Dialog = imports.ui.dialog;
 const Params = imports.misc.params;
 
 const LIST_ITEM_ICON_SIZE = 48;
@@ -197,10 +197,11 @@ function ShellMountQuestionDialog(icon) {
 }
 
 ShellMountQuestionDialog.prototype = {
-    __proto__: ModalDialog.ModalDialog.prototype,
+    __proto__: Dialog.Dialog.prototype,
 
     _init: function(icon) {
-        ModalDialog.ModalDialog.prototype._init.call(this, { styleClass: 'mount-question-dialog' });
+        Dialog.Dialog.prototype._init.call(this, { modal: true,
+                                                   styleClass: 'mount-question-dialog' });
 
         let mainContentLayout = new St.BoxLayout();
         this.contentLayout.add(mainContentLayout, { x_fill: true,
@@ -312,10 +313,11 @@ function ShellProcessesDialog(icon) {
 }
 
 ShellProcessesDialog.prototype = {
-    __proto__: ModalDialog.ModalDialog.prototype,
+    __proto__: Dialog.Dialog.prototype,
 
     _init: function(icon) {
-        ModalDialog.ModalDialog.prototype._init.call(this, { styleClass: 'show-processes-dialog' });
+        Dialog.Dialog.prototype._init.call(this, { modal: true,
+                                                   styleClass: 'show-processes-dialog' });
 
         let mainContentLayout = new St.BoxLayout();
         this.contentLayout.add(mainContentLayout, { x_fill: true,



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]