[gnome-shell/gbsneto/quick-settings-arrow: 2/2] quickSettings: Rotate menu arrows

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 0f86e844e81bce64ab6ceeca81ed7328758866fb
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Mon Aug 22 18:46:20 2022 -0300

    quickSettings: Rotate menu arrows
    
    Static arrows representing menus are inconsistent with the rest of
    the platform, where we rotate arrows to represent that the menu is
    open. Make quick settings arrows do the same.

 js/ui/quickSettings.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js
index ad9033c795..f4c1bb6028 100644
--- a/js/ui/quickSettings.js
+++ b/js/ui/quickSettings.js
@@ -115,6 +115,7 @@ var QuickMenuToggle = GObject.registerClass({
             child: new St.Icon({
                 style_class: 'quick-toggle-arrow',
                 icon_name: 'go-next-symbolic',
+                pivot_point: new Graphene.Point({x: 0.5, y: 0.5}),
             }),
             style_class: 'quick-toggle-arrow-button',
             x_expand: false,
@@ -133,6 +134,19 @@ var QuickMenuToggle = GObject.registerClass({
             if (this.menuEnabled)
                 this.menu.open();
         });
+
+        this.menu.connect('open-state-changed', (popup, isOpen) => {
+            if (!this.menuEnabled)
+                return;
+
+            const ltr = this.text_direction !== Clutter.TextDirection.RTL;
+            const angle = isOpen ? (ltr ? 90 : -90) : 0;
+            this._menuButton.child.ease({
+                rotationAngleZ: angle,
+                delay: isOpen ? 0 : POPUP_ANIMATION_TIME / 2,
+                duration: POPUP_ANIMATION_TIME / 2,
+            });
+        });
     }
 });
 
@@ -200,7 +214,10 @@ var QuickSlider = GObject.registerClass({
         sliderBin.connect('event', (bin, event) => this.slider.event(event, false));
 
         this._menuButton = new St.Button({
-            child: new St.Icon({icon_name: 'go-next-symbolic'}),
+            child: new St.Icon({
+                icon_name: 'go-next-symbolic',
+                pivot_point: new Graphene.Point({x: 0.5, y: 0.5}),
+            }),
             style_class: 'icon-button',
             can_focus: true,
             x_expand: false,
@@ -216,6 +233,19 @@ var QuickSlider = GObject.registerClass({
             if (this.menuEnabled)
                 this.menu.open();
         });
+
+        this.menu.connect('open-state-changed', (popup, isOpen) => {
+            if (!this.menuEnabled)
+                return;
+
+            const ltr = this.text_direction !== Clutter.TextDirection.RTL;
+            const angle = isOpen ? (ltr ? 90 : -90) : 0;
+            this._menuButton.child.ease({
+                rotationAngleZ: angle,
+                delay: isOpen ? 0 : POPUP_ANIMATION_TIME / 2,
+                duration: POPUP_ANIMATION_TIME / 2,
+            });
+        });
     }
 });