[gnome-shell/gbsneto/folders-as-dialogs: 20/20] appDisplay: Blur overview when showing folders

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

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

    appDisplay: Blur overview when showing folders
    
    Just to show off how amazing GNOME Shell is.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/896

 js/ui/appDisplay.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index e0cfe79a85..1e1fa54cd9 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1561,6 +1561,8 @@ var AppFolderDialog = GObject.registerClass({
             primary: true,
         }));
 
+        this._blurEffect = null;
+
         this._source = source;
         this._view = source.view;
 
@@ -1594,6 +1596,19 @@ var AppFolderDialog = GObject.registerClass({
         let [dialogX, dialogY] =
             this.get_transformed_position();
 
+        this._blurEffect = new Shell.BlurEffect({
+            name: 'blur',
+            blur_radius: 0,
+            brightness: 1,
+        });
+        Main.overview.viewSelector.add_effect(this._blurEffect);
+
+        Main.overview.viewSelector.ease_property(
+            '@effects.blur.blur_radius', 40, {
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                duration: 250,
+            });
+
         this.set({
             translation_x: sourceX - dialogX,
             translation_y: sourceY - dialogY,
@@ -1623,6 +1638,7 @@ var AppFolderDialog = GObject.registerClass({
             return;
 
         if (!this._source.mapped) {
+            this._removeBlur();
             this.hide();
             return;
         }
@@ -1632,6 +1648,14 @@ var AppFolderDialog = GObject.registerClass({
         let [dialogX, dialogY] =
             this.get_transformed_position();
 
+        Main.overview.viewSelector.ease_property(
+            '@effects.blur.blur_radius', 0, {
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                delay: 50,
+                duration: 250,
+                onComplete: () => this._removeBlur(),
+            });
+
         this.ease({
             translation_x: sourceX - dialogX,
             translation_y: sourceY - dialogY,
@@ -1655,6 +1679,13 @@ var AppFolderDialog = GObject.registerClass({
         this._needsZoomAndFade = false;
     }
 
+    _removeBlur() {
+        if (this._blurEffect) {
+            Main.overview.viewSelector.remove_effect(this._blurEffect);
+            this._blurEffect = null;
+        }
+    }
+
     _onDestroy() {
         if (this._isOpen) {
             this._isOpen = false;