[gnome-shell/app-picker-refresh: 14/16] appDisplay: Make folder popups "view-modal"

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

commit 4f412b17b96998ba3fd2b163eb228fef1b30f619
Author: Florian Müllner <fmuellner gnome org>
Date:   Mon Feb 18 21:04:51 2013 +0100

    appDisplay: Make folder popups "view-modal"
    
    While a group is open, we want to block events on items underneath,
    but still allow interaction with components outside the app display
    as well as scrolling of the view as a whole.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=694192

 js/ui/appDisplay.js |   25 +++++++++++++++++++++++++
 1 files changed, 25 insertions(+), 0 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3570376..b4c0a63 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -31,6 +31,7 @@ const MENU_POPUP_TIMEOUT = 600;
 const SCROLL_TIME = 0.1;
 const MAX_COLUMNS = 6;
 
+const INACTIVE_GRID_OPACITY = 77;
 const FOLDER_SUBICON_FRACTION = .4;
 
 
@@ -68,6 +69,8 @@ const AlphabeticalView = new Lang.Class({
         let box = new St.BoxLayout({ vertical: true });
         this._stack = new St.Widget({ layout_manager: new Clutter.BinLayout() });
         this._stack.add_actor(this._grid.actor);
+        this._eventBlocker = new St.Widget({ x_expand: true, y_expand: true });
+        this._stack.add_actor(this._eventBlocker);
         box.add(this._stack, { y_align: St.Align.START, expand: true });
 
         this.actor = new St.ScrollView({ x_fill: true,
@@ -84,9 +87,19 @@ const AlphabeticalView = new Lang.Class({
         let action = new Clutter.PanAction({ interpolate: true });
         action.connect('pan', Lang.bind(this, this._onPan));
         this.actor.add_action(action);
+
+        this._clickAction = new Clutter.ClickAction();
+        this._clickAction.connect('clicked', Lang.bind(this, function() {
+            if (this._currentPopup) {
+                this._currentPopup.popdown();
+            }
+        }));
+        this._eventBlocker.add_action(this._clickAction);
     },
 
     _onPan: function(action) {
+        this._clickAction.release();
+
         let [dist, dx, dy] = action.get_motion_delta(0);
         let adjustment = this.actor.vscroll.adjustment;
         adjustment.value -= (dy / this.actor.height) * adjustment.page_size;
@@ -140,6 +153,9 @@ const AlphabeticalView = new Lang.Class({
         this._stack.add_actor(popup.actor);
         popup.connect('open-state-changed', Lang.bind(this,
             function(popup, isOpen) {
+                this._eventBlocker.reactive = isOpen;
+                this._currentPopup = isOpen ? popup : null;
+                this._updateIconOpacities(isOpen);
                 if (isOpen)
                     this._ensureIconVisible(popup.actor);
             }));
@@ -183,6 +199,15 @@ const AlphabeticalView = new Lang.Class({
                            transition: 'easeOutQuad' });
     },
 
+    _updateIconOpacities: function(folderOpen) {
+        for (let id in this._items) {
+            if (folderOpen && !this._items[id].actor.checked)
+                this._items[id].actor.opacity = INACTIVE_GRID_OPACITY;
+            else
+                this._items[id].actor.opacity = 255;
+        }
+    },
+
     createFolderIcon: function(size) {
         let icon = new St.Widget({ layout_manager: new Clutter.BinLayout(),
                                    style_class: 'app-folder-icon',