isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

appDisplay: Slide page hints along page switching

Browse Source 
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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>
This commit is contained in:
Carlos Garnacho 2021-02-23 17:44:23 +01:00 committed by Marge Bot
parent 9e5b357b0b
commit ec223f31d9
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
js/ui/appDisplay.js
View File

@ -175,7 +175,22 @@ var BaseAppView = GObject.registerClass({
this._adjustment = scroll.adjustment; this._adjustment = scroll.adjustment;
this._adjustment.connect('notify::value', adj => { this._adjustment.connect('notify::value', adj => {
this._updateFade(); 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 // Page Indicators
@ -239,13 +254,20 @@ var BaseAppView = GObject.registerClass({
x_align: Clutter.ActorAlign.START, 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({ const scrollContainer = new St.Widget({
layout_manager: new Clutter.BinLayout(), layout_manager: new Clutter.BinLayout(),
clip_to_allocation: true, clip_to_allocation: true,
y_expand: true, y_expand: true,
}); });
scrollContainer.add_child(this._prevPageIndicator); scrollContainer.add_child(this._hintContainer);
scrollContainer.add_child(this._nextPageIndicator);
scrollContainer.add_child(this._scrollView); scrollContainer.add_child(this._scrollView);
scrollContainer.add_child(this._nextPageArrow); scrollContainer.add_child(this._nextPageArrow);
scrollContainer.add_child(this._prevPageArrow); scrollContainer.add_child(this._prevPageArrow);