[gnome-shell/wip/carlosg/appgrid-navigation: 10/11] appDisplay: Hide page hints along page switching

[Carlos Garnacho <carlosg src gnome org>]

commit 684015f02070852dcec416a5f7f7692f95832e40
Author: Carlos Garnacho <carlosg gnome org>
Date:   Tue Feb 23 17:44:23 2021 +0100

    appDisplay: Hide page hints along page switching
    
    When clicking on the page hints, the hint rectangles being visible
    in place and not moving together with the page is a bit too
    distracting.
    
    Try to alleviate that by fading the page hints out and back in
    when switching pages.

 js/ui/appDisplay.js | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8da1fdcf61..bfbfcff1a5 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -173,7 +173,20 @@ var BaseAppView = GObject.registerClass({
         this._adjustment = scroll.adjustment;
         this._adjustment.connect('notify::value', adj => {
             this._updateFade();
-            this._pageIndicators.setCurrentPosition(adj.value / adj.page_size);
+            const value = adj.value / adj.page_size;
+            this._pageIndicators.setCurrentPosition(value);
+            const distanceToPage = Math.abs(Math.round(value) - value);
+            if (distanceToPage < 0.01) {
+                this._hintContainer.ease({
+                    duration: PAGE_PREVIEW_ANIMATION_TIME,
+                    opacity: 255,
+                });
+            } else {
+                this._hintContainer.remove_transition('opacity');
+                this._hintContainer.opacity = Math.clamp(
+                    255 * (1 - distanceToPage * 2),
+                    0, this._hintContainer.opacity);
+            }
         });
 
         // Page Indicators
@@ -237,13 +250,20 @@ var BaseAppView = GObject.registerClass({
             x_align: Clutter.ActorAlign.START,
         });
 
+        this._hintContainer = new St.Widget({
+            layout_manager: new Clutter.BinLayout(),
+            x_expand: true,
+            y_expand: true,
+        });
+        this._hintContainer.add_child(this._prevPageIndicator);
+        this._hintContainer.add_child(this._nextPageIndicator);
+
         const scrollContainer = new St.Widget({
             layout_manager: new Clutter.BinLayout(),
             clip_to_allocation: true,
             y_expand: true,
         });
-        scrollContainer.add_child(this._prevPageIndicator);
-        scrollContainer.add_child(this._nextPageIndicator);
+        scrollContainer.add_child(this._hintContainer);
         scrollContainer.add_child(this._scrollView);
         scrollContainer.add_child(this._nextPageArrow);
         scrollContainer.add_child(this._prevPageArrow);