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:
parent
853644d7fe
commit
3f09876463
@ -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);
|
||||||
|
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user