dany/clapper
1
0
Fork 0
mirror of https://github.com/Rafostar/clapper.git synced 2025-08-31 08:21:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

Apply rotate animation to the icon, not whole button

Browse Source
This commit is contained in:
Rafostar
2020-12-04 09:55:26 +01:00
parent a2ee14e74f
commit 64bf1dc172
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
clapper_src/revealers.js
View File

@@ -269,15 +269,15 @@ class ClapperButtonsRevealer extends Gtk.Revealer
this.get_child().append(widget); this.get_child().append(widget);
} }
_setRotateClass(button, isAdd) _setRotateClass(icon, isAdd)
{ {
const cssClass = 'buttonrotate'; const cssClass = 'halfrotate';
const hasClass = button.has_css_class(cssClass); const hasClass = icon.has_css_class(cssClass);
if(!hasClass && isAdd) if(!hasClass && isAdd)
button.add_css_class(cssClass); icon.add_css_class(cssClass);
else if(hasClass && !isAdd) else if(hasClass && !isAdd)
button.remove_css_class(cssClass); icon.remove_css_class(cssClass);
} }
_onToggleButtonClicked(button) _onToggleButtonClicked(button)
@@ -287,7 +287,7 @@ class ClapperButtonsRevealer extends Gtk.Revealer
_onRevealChild(button) _onRevealChild(button)
{ {
this._setRotateClass(button, true); this._setRotateClass(button.child, true);
} }
_onChildRevealed(button) _onChildRevealed(button)
@@ -297,6 +297,6 @@ class ClapperButtonsRevealer extends Gtk.Revealer
else else
button.setSecondaryIcon(); button.setSecondaryIcon();
this._setRotateClass(button, false); this._setRotateClass(button.child, false);
} }
}); });

6
css/styles.css
View File

@@ -127,11 +127,11 @@ scale marks {
.narrowbutton { .narrowbutton {
min-width: 8px; min-width: 8px;
} }
@keyframes halfrotate { @keyframes halfrotation {
to { transform: rotate(0.5turn); } to { transform: rotate(0.5turn); }
} }
.buttonrotate { .halfrotate {
animation-name: halfrotate; animation-name: halfrotation;
animation-duration: 200ms; animation-duration: 200ms;
animation-delay: 280ms; animation-delay: 280ms;
animation-timing-function: linear; animation-timing-function: linear;