pageIndicator/animatedPageIndicators: Implement vertical animation

It is basically the same of animating horizontally, except on the Y axis, and
based on the height of the indicators.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1518>
This commit is contained in:
Georges Basile Stavracas Neto 2020-12-02 18:33:26 -03:00 committed by Marge Bot
parent 853644d7fe
commit 3f09876463
2 changed files with 19 additions and 9 deletions

View File

@ -161,7 +161,7 @@ var BaseAppView = GObject.registerClass({
// Page Indicators // Page Indicators
if (vertical) if (vertical)
this._pageIndicators = new PageIndicators.AnimatedPageIndicators(); this._pageIndicators = new PageIndicators.AnimatedPageIndicators(orientation);
else else
this._pageIndicators = new PageIndicators.PageIndicators(orientation); this._pageIndicators = new PageIndicators.PageIndicators(orientation);

View File

@ -40,6 +40,7 @@ var PageIndicators = GObject.registerClass({
this._currentPosition = 0; this._currentPosition = 0;
this._reactive = true; this._reactive = true;
this._reactive = true; this._reactive = true;
this._orientation = orientation;
} }
vfunc_get_preferred_height(forWidth) { vfunc_get_preferred_height(forWidth) {
@ -128,8 +129,8 @@ var PageIndicators = GObject.registerClass({
var AnimatedPageIndicators = GObject.registerClass( var AnimatedPageIndicators = GObject.registerClass(
class AnimatedPageIndicators extends PageIndicators { class AnimatedPageIndicators extends PageIndicators {
_init() { _init(orientation = Clutter.Orientation.VERTICAL) {
super._init(); super._init(orientation);
this.connect('destroy', this._onDestroy.bind(this)); this.connect('destroy', this._onDestroy.bind(this));
} }
@ -163,11 +164,12 @@ class AnimatedPageIndicators extends PageIndicators {
for (let i = 0; i < this._nPages; i++) for (let i = 0; i < this._nPages; i++)
children[i].remove_all_transitions(); children[i].remove_all_transitions();
const vertical = this._orientation === Clutter.Orientation.VERTICAL;
let offset; let offset;
if (this.get_text_direction() == Clutter.TextDirection.RTL) if (this.get_text_direction() == Clutter.TextDirection.RTL)
offset = -children[0].width; offset = vertical ? -children[0].width : -children[0].height;
else else
offset = children[0].width; offset = vertical ? children[0].width : children[0].height;
let isAnimationIn = animationDirection == AnimationDirection.IN; let isAnimationIn = animationDirection == AnimationDirection.IN;
let delay = isAnimationIn let delay = isAnimationIn
@ -182,13 +184,21 @@ class AnimatedPageIndicators extends PageIndicators {
delay -= (totalAnimationTime - maxTime) / this._nPages; delay -= (totalAnimationTime - maxTime) / this._nPages;
for (let i = 0; i < this._nPages; i++) { for (let i = 0; i < this._nPages; i++) {
children[i].translation_x = isAnimationIn ? offset : 0; const params = {
children[i].ease({
translation_x: isAnimationIn ? 0 : offset,
duration: baseTime + delay * i, duration: baseTime + delay * i,
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD, mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
delay: isAnimationIn ? ANIMATION_DELAY : 0, delay: isAnimationIn ? ANIMATION_DELAY : 0,
}); };
if (vertical) {
children[i].translation_x = isAnimationIn ? offset : 0;
params.translation_x = isAnimationIn ? 0 : offset;
} else {
children[i].translation_y = isAnimationIn ? offset : 0;
params.translation_y = isAnimationIn ? 0 : offset;
}
children[i].ease(params);
} }
} }
}); });