From 64bf1dc172e33e1c2ee0642b9f0c6d62dfdd1d79 Mon Sep 17 00:00:00 2001
From: Rafostar <40623528+Rafostar@users.noreply.github.com>
Date: Fri, 4 Dec 2020 09:55:26 +0100
Subject: [PATCH] Apply rotate animation to the icon, not whole button

---
 clapper_src/revealers.js | 14 +++++++-------
 css/styles.css           |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/clapper_src/revealers.js b/clapper_src/revealers.js
index 2e515a10..84251cf6 100644
--- a/clapper_src/revealers.js
+++ b/clapper_src/revealers.js
@@ -269,15 +269,15 @@ class ClapperButtonsRevealer extends Gtk.Revealer
         this.get_child().append(widget);
     }
 
-    _setRotateClass(button, isAdd)
+    _setRotateClass(icon, isAdd)
     {
-        const cssClass = 'buttonrotate';
-        const hasClass = button.has_css_class(cssClass);
+        const cssClass = 'halfrotate';
+        const hasClass = icon.has_css_class(cssClass);
 
         if(!hasClass && isAdd)
-            button.add_css_class(cssClass);
+            icon.add_css_class(cssClass);
         else if(hasClass && !isAdd)
-            button.remove_css_class(cssClass);
+            icon.remove_css_class(cssClass);
     }
 
     _onToggleButtonClicked(button)
@@ -287,7 +287,7 @@ class ClapperButtonsRevealer extends Gtk.Revealer
 
     _onRevealChild(button)
     {
-        this._setRotateClass(button, true);
+        this._setRotateClass(button.child, true);
     }
 
     _onChildRevealed(button)
@@ -297,6 +297,6 @@ class ClapperButtonsRevealer extends Gtk.Revealer
         else
             button.setSecondaryIcon();
 
-        this._setRotateClass(button, false);
+        this._setRotateClass(button.child, false);
     }
 });
diff --git a/css/styles.css b/css/styles.css
index a13f24d2..79591ccf 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -127,11 +127,11 @@ scale marks {
 .narrowbutton {
   min-width: 8px;
 }
-@keyframes halfrotate {
+@keyframes halfrotation {
   to { transform: rotate(0.5turn); }
 }
-.buttonrotate {
-  animation-name: halfrotate;
+.halfrotate {
+  animation-name: halfrotation;
   animation-duration: 200ms;
   animation-delay: 280ms;
   animation-timing-function: linear;