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

[Carlos Garnacho <carlosg src gnome org>]

commit 32b9cbceddd940998d1487fc1b6e1f706affa5a6
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 | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 3 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index a1809050f4..18f97e7eae 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -175,7 +175,19 @@ 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.opacity = 255;
+                this._slideHints();
+            } else {
+                this._hintContainer.remove_transition('opacity');
+                this._hintContainer.opacity = Math.clamp(
+                    255 * (1 - distanceToPage * 2),
+                    0, this._hintContainer.opacity);
+            }
         });
 
         // Page Indicators
@@ -239,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);
@@ -1129,6 +1148,41 @@ var BaseAppView = GObject.registerClass({
         return (translationX - baseOffset) * page;
     }
 
+    _slideHints() {
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
+        if (this._grid.currentPage != this._grid.nPages - 1 &&
+            this._pagesShown & SidePages.NEXT) {
+            const translationX = rtl ? -100 : 100;
+            this._nextPageIndicator.set({
+                opacity: 0,
+                translation_x: this._getIndicatorOffset(
+                    1, 0, this._pageIndicatorOffset - this._nextPageIndicator.width),
+            });
+            this._nextPageIndicator.ease({
+                opacity: 255,
+                translation_x: this._getIndicatorOffset(
+                    1, 1, this._pageIndicatorOffset - this._nextPageIndicator.width),
+                duration: PAGE_INDICATOR_FADE_TIME,
+            });
+        }
+
+        if (this._grid.currentPage != 0 &&
+            this._pagesShown & SidePages.PREVIOUS) {
+            const translationX = rtl ? 100 : -100;
+            this._prevPageIndicator.set({
+                opacity: 0,
+                translation_x: this._getIndicatorOffset(
+                    -1, 0, this._pageIndicatorOffset - this._nextPageIndicator.width),
+            });
+            this._prevPageIndicator.ease({
+                opacity: 255,
+                translation_x: this._getIndicatorOffset(
+                    -1, 1, this._pageIndicatorOffset - this._nextPageIndicator.width),
+                duration: PAGE_INDICATOR_FADE_TIME,
+            });
+        }
+    }
+
     _getPagePreviewAdjustment(page) {
         const previewedPage = this._previewedPages.get(page);
         return previewedPage?.adjustment;