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

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

commit f62fe6aa3145d1aabf4fabbd80552d23f711f096
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 c508335d49..489f811c7b 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -41,6 +41,7 @@ var APP_ICON_SCALE_IN_TIME = 500;
 var APP_ICON_SCALE_IN_DELAY = 700;
 
 const FOLDER_DIALOG_ANIMATION_TIME = 200;
+const FOLDER_DIALOG_BLUR_RADIUS = 50;
 
 const OVERSHOOT_THRESHOLD = 20;
 const OVERSHOOT_TIMEOUT = 1000;
@@ -1647,7 +1648,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)
@@ -1835,7 +1836,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',
@@ -1851,6 +1852,7 @@ var AppFolderDialog = GObject.registerClass({
 
         this._source = source;
         this._view = source.view;
+        this._parentView = parentView;
 
         this._isOpen = false;
         this.parentOffset = 0;
@@ -1873,6 +1875,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;
     }
 
@@ -1900,6 +1903,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',
+            FOLDER_DIALOG_BLUR_RADIUS, {
+                duration: FOLDER_DIALOG_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.LINEAR,
+            });
+
         this._needsZoomAndFade = false;
 
         this._sourceMappedId = this._source.connect('notify::mapped',
@@ -1940,6 +1950,13 @@ var AppFolderDialog = GObject.registerClass({
             },
         });
 
+        this._parentView.ease_property('@effects.blur.blur-radius', 0, {
+            duration: FOLDER_DIALOG_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.LINEAR,
+            onComplete: () => this._parentView.remove_effect(this._blur),
+        });
+
+
         this._needsZoomAndFade = false;
     }
 
@@ -1954,6 +1971,8 @@ var AppFolderDialog = GObject.registerClass({
             this._source.disconnect(this._sourceMappedId);
             this._sourceMappedId = 0;
         }
+
+        this._blur = null;
     }
 
     vfunc_allocate(box, flags) {