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

[Carlos Garnacho <carlosg src gnome org>]

commit 9d82027a89046f4e944fbf3fd290c3b5044ba1d0
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 bce085617c..cbae57f11f 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);