[gnome-shell/gbsneto/folders-as-dialogs: 31/34] appDisplay: Blur app grid when showing folders

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit c7de5b62ead0a5a47ff7bda26bbf58e219d9318f
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Thu Dec 12 17:50:20 2019 -0300

    appDisplay: Blur app grid when showing folders
    
    Makes it easier to understand the depth of the folder dialog. It
    also shows off how amazing GNOME Shell is.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/896

 js/ui/appDisplay.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8547943744..6924f98661 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1645,7 +1645,7 @@ var FolderIcon = GObject.registerClass({
         if (this._dialog)
             return;
         if (!this._dialog) {
-            this._dialog = new AppFolderDialog(this);
+            this._dialog = new AppFolderDialog(this, this._parentView);
             this._parentView.addFolderDialog(this._dialog);
             this._dialog.connect('open-state-changed', (popup, isOpen) => {
                 if (!isOpen)
@@ -1833,7 +1833,7 @@ var AppFolderDialog = GObject.registerClass({
         'open-state-changed': { param_types: [GObject.TYPE_BOOLEAN] },
     },
 }, class AppFolderDialog extends St.Widget {
-    _init(source) {
+    _init(source, parentView) {
         super._init({
             layout_manager: new Clutter.BinLayout(),
             style_class: 'app-folder-dialog-container',
@@ -1849,6 +1849,7 @@ var AppFolderDialog = GObject.registerClass({
 
         this._source = source;
         this._view = source.view;
+        this._parentView = parentView;
 
         this._isOpen = false;
         this.parentOffset = 0;
@@ -1871,6 +1872,7 @@ var AppFolderDialog = GObject.registerClass({
         this._grabHelper.addActor(Main.layoutManager.overviewGroup);
         this.connect('destroy', this._onDestroy.bind(this));
 
+        this._blur = new Shell.BlurEffect();
         this._needsZoomAndFade = false;
     }
 
@@ -1898,6 +1900,13 @@ var AppFolderDialog = GObject.registerClass({
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
 
+        this._parentView.add_effect_with_name('blur', this._blur);
+        this._parentView.ease_property('@effects.blur.blur-radius', 50, {
+            duration: 200,
+            delay: 100,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+
         this._needsZoomAndFade = false;
 
         this._sourceMappedId = this._source.connect('notify::mapped',
@@ -1938,6 +1947,14 @@ var AppFolderDialog = GObject.registerClass({
             },
         });
 
+        this._parentView.ease_property('@effects.blur.blur-radius', 0, {
+            duration: 200,
+            delay: 100,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onComplete: () => this._parentView.remove_effect(this._blur),
+        });
+
+
         this._needsZoomAndFade = false;
     }
 
@@ -1952,6 +1969,8 @@ var AppFolderDialog = GObject.registerClass({
             this._source.disconnect(this._sourceMappedId);
             this._sourceMappedId = 0;
         }
+
+        this._blur = null;
     }
 
     vfunc_allocate(box, flags) {