From ec223f31d98bd6e6026ab3ef7f3ad5a7e5ef0ca2 Mon Sep 17 00:00:00 2001 From: Carlos Garnacho Date: Tue, 23 Feb 2021 17:44:23 +0100 Subject: [PATCH] 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. Part-of: --- 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 c0517a5f2..94d1ef24e 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);