[gnome-shell] pageIndicator/animatedPageIndicators: Implement vertical animation

[Marge Bot <marge-bot src gnome org>]

commit 3f09876463c318379df6f6960e9be536d6e7e56a
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Dec 2 18:33:26 2020 -0300

    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>

 js/ui/appDisplay.js     |  2 +-
 js/ui/pageIndicators.js | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 9 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c5fa78ee61..a86f32a3b0 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -161,7 +161,7 @@ var BaseAppView = GObject.registerClass({
 
         // Page Indicators
         if (vertical)
-            this._pageIndicators = new PageIndicators.AnimatedPageIndicators();
+            this._pageIndicators = new PageIndicators.AnimatedPageIndicators(orientation);
         else
             this._pageIndicators = new PageIndicators.PageIndicators(orientation);
 
diff --git a/js/ui/pageIndicators.js b/js/ui/pageIndicators.js
index 8ac44d4b2b..91a1ef2cfd 100644
--- a/js/ui/pageIndicators.js
+++ b/js/ui/pageIndicators.js
@@ -40,6 +40,7 @@ var PageIndicators = GObject.registerClass({
         this._currentPosition = 0;
         this._reactive = true;
         this._reactive = true;
+        this._orientation = orientation;
     }
 
     vfunc_get_preferred_height(forWidth) {
@@ -128,8 +129,8 @@ var PageIndicators = GObject.registerClass({
 
 var AnimatedPageIndicators = GObject.registerClass(
 class AnimatedPageIndicators extends PageIndicators {
-    _init() {
-        super._init();
+    _init(orientation = Clutter.Orientation.VERTICAL) {
+        super._init(orientation);
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
@@ -163,11 +164,12 @@ class AnimatedPageIndicators extends PageIndicators {
         for (let i = 0; i < this._nPages; i++)
             children[i].remove_all_transitions();
 
+        const vertical = this._orientation === Clutter.Orientation.VERTICAL;
         let offset;
         if (this.get_text_direction() == Clutter.TextDirection.RTL)
-            offset = -children[0].width;
+            offset = vertical ? -children[0].width : -children[0].height;
         else
-            offset = children[0].width;
+            offset = vertical ? children[0].width : children[0].height;
 
         let isAnimationIn = animationDirection == AnimationDirection.IN;
         let delay = isAnimationIn
@@ -182,13 +184,21 @@ class AnimatedPageIndicators extends PageIndicators {
             delay -= (totalAnimationTime - maxTime) / this._nPages;
 
         for (let i = 0; i < this._nPages; i++) {
-            children[i].translation_x = isAnimationIn ? offset : 0;
-            children[i].ease({
-                translation_x: isAnimationIn ? 0 : offset,
+            const params = {
                 duration: baseTime + delay * i,
                 mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
                 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);
         }
     }
 });