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

[Carlos Garnacho <carlosg src gnome org>]

commit fcd713eca57e693d8c5b76bde5ecbe10931e51e1
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 095893dff1..226c1c5bbe 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -174,7 +174,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({
+                    opacity: 255,
+                    duration: PAGE_PREVIEW_ANIMATION_TIME,
+                });
+            } else {
+                this._hintContainer.remove_transition('opacity');
+                this._hintContainer.opacity = Math.clamp(
+                    255 * (1 - distanceToPage * 2),
+                    0, this._hintContainer.opacity);
+            }
         });
 
         // Page Indicators
@@ -238,13 +251,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);