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

[Carlos Garnacho <carlosg src gnome org>]

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

    appDisplay: Slide 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.
    
    Since the page hints are not part of the iconGrid hierarchy and
    we have just 2 general ones for prev/next page (i.e. no page
    associated), do this sliding via some smoke and mirrors: We don't
    slide the page hints, but a parent container for both of them, and
    we also control opacity so that the container is fully transparent
    mid-page. At the point it is transparent, the container can be
    snapped to the other side of the page, and faded back in as it
    slides together with it, so it always looks like it goes away and
    comes from the right sides.

 js/ui/appDisplay.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 13141e6171..80a93b7f9c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -175,7 +175,22 @@ 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.001) {
+                this._hintContainer.opacity = 255;
+                this._hintContainer.translationX = 0;
+            } else {
+                this._hintContainer.remove_transition('opacity');
+                let opacity = Math.clamp(
+                    255 * (1 - (distanceToPage * 2)),
+                    0, 255);
+
+                this._hintContainer.translationX = (Math.round(value) - value) * adj.page_size;
+                this._hintContainer.opacity = opacity;
+            }
         });
 
         // Page Indicators
@@ -239,13 +254,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);