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

[Carlos Garnacho <carlosg src gnome org>]

commit dcebe4ff7da7417e2162c1e48e4d915ff3dabe7b
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 | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 7e8cd0be47..d9174b7d3c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -173,7 +173,11 @@ 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 minDistanceToPage = Math.abs(Math.round(value) - value);
+            this._hintContainer.opacity = Math.max(
+                0, 255 * (1 - minDistanceToPage * 2));
         });
 
         // Page Indicators
@@ -239,13 +243,20 @@ var BaseAppView = GObject.registerClass({
         });
         this._prevPageArrow.add_style_class_name('page-navigation-arrow');
 
+        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);