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);