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

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

commit 6be90b9be95e773460f1a46298b79624ec49344f
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 | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c508335d49..21a6eabcf9 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -41,6 +41,8 @@ var APP_ICON_SCALE_IN_TIME = 500;
 var APP_ICON_SCALE_IN_DELAY = 700;
 
 const FOLDER_DIALOG_ANIMATION_TIME = 200;
+const FOLDER_DIALOG_GRID_BLUR_RADIUS = 20;
+const FOLDER_DIALOG_BACKGROUND_BLUR_RADIUS = 50;
 
 const OVERSHOOT_THRESHOLD = 20;
 const OVERSHOOT_TIMEOUT = 1000;
@@ -1647,7 +1649,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 +1837,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 +1853,7 @@ var AppFolderDialog = GObject.registerClass({
 
         this._source = source;
         this._view = source.view;
+        this._parentView = parentView;
 
         this._isOpen = false;
         this.parentOffset = 0;
@@ -1873,6 +1876,11 @@ var AppFolderDialog = GObject.registerClass({
         this._grabHelper.addActor(Main.layoutManager.overviewGroup);
         this.connect('destroy', this._onDestroy.bind(this));
 
+        this._viewBox.add_effect(new Shell.BlurEffect({
+            mode: Shell.BlurMode.BACKGROUND,
+            blur_radius: FOLDER_DIALOG_BACKGROUND_BLUR_RADIUS,
+        }));
+        this._blur = new Shell.BlurEffect();
         this._needsZoomAndFade = false;
     }
 
@@ -1900,6 +1908,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_GRID_BLUR_RADIUS, {
+                duration: FOLDER_DIALOG_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.LINEAR,
+            });
+
         this._needsZoomAndFade = false;
 
         this._sourceMappedId = this._source.connect('notify::mapped',
@@ -1940,6 +1955,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 +1976,8 @@ var AppFolderDialog = GObject.registerClass({
             this._source.disconnect(this._sourceMappedId);
             this._sourceMappedId = 0;
         }
+
+        this._blur = null;
     }
 
     vfunc_allocate(box, flags) {