[Glitch] Replace fav icon animation with CSS

Port 3a929dbedd to glitch-soc

And extend that to collapse button

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2019-10-24 22:47:48 +02:00 committed by Thibaut Girka
parent bde35e7878
commit 2ed48037ea
4 changed files with 160 additions and 63 deletions

View file

@ -24,7 +24,6 @@ export default class IconButton extends React.PureComponent {
disabled: PropTypes.bool, disabled: PropTypes.bool,
inverted: PropTypes.bool, inverted: PropTypes.bool,
animate: PropTypes.bool, animate: PropTypes.bool,
flip: PropTypes.bool,
overlay: PropTypes.bool, overlay: PropTypes.bool,
tabIndex: PropTypes.string, tabIndex: PropTypes.string,
label: PropTypes.string, label: PropTypes.string,
@ -39,6 +38,21 @@ export default class IconButton extends React.PureComponent {
tabIndex: '0', tabIndex: '0',
}; };
state = {
activate: false,
deactivate: false,
}
componentWillReceiveProps (nextProps) {
if (!nextProps.animate) return;
if (this.props.active && !nextProps.active) {
this.setState({ activate: false, deactivate: true });
} else if (!this.props.active && nextProps.active) {
this.setState({ activate: true, deactivate: false });
}
}
handleClick = (e) => { handleClick = (e) => {
e.preventDefault(); e.preventDefault();
@ -81,44 +95,31 @@ export default class IconButton extends React.PureComponent {
const { const {
active, active,
animate,
className, className,
disabled, disabled,
expanded, expanded,
icon, icon,
inverted, inverted,
flip,
overlay, overlay,
pressed, pressed,
tabIndex, tabIndex,
title, title,
} = this.props; } = this.props;
const {
activate,
deactivate,
} = this.state;
const classes = classNames(className, 'icon-button', { const classes = classNames(className, 'icon-button', {
active, active,
disabled, disabled,
inverted, inverted,
activate,
deactivate,
overlayed: overlay, overlayed: overlay,
}); });
const flipDeg = flip ? -180 : -360;
const rotateDeg = active ? flipDeg : 0;
const motionDefaultStyle = {
rotate: rotateDeg,
};
const springOpts = {
stiffness: this.props.flip ? 60 : 120,
damping: 7,
};
const motionStyle = {
rotate: animate ? spring(rotateDeg, springOpts) : 0,
};
if (!animate) {
// Perf optimization: avoid unnecessary <Motion> components unless
// we actually need to animate.
return ( return (
<button <button
aria-label={title} aria-label={title}
@ -135,33 +136,9 @@ export default class IconButton extends React.PureComponent {
disabled={disabled} disabled={disabled}
> >
<Icon id={icon} fixedWidth aria-hidden='true' /> <Icon id={icon} fixedWidth aria-hidden='true' />
{this.props.label}
</button> </button>
); );
} }
return (
<Motion defaultStyle={motionDefaultStyle} style={motionStyle}>
{({ rotate }) =>
(<button
aria-label={title}
aria-pressed={pressed}
aria-expanded={expanded}
title={title}
className={classes}
onClick={this.handleClick}
onMouseDown={this.handleMouseDown}
onKeyDown={this.handleKeyDown}
onKeyPress={this.handleKeyPress}
style={style}
tabIndex={tabIndex}
disabled={disabled}
>
<Icon id={icon} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />
{this.props.label}
</button>)
}
</Motion>
);
}
} }

View file

@ -103,7 +103,7 @@ class StatusIcons extends React.PureComponent {
{collapsible ? ( {collapsible ? (
<IconButton <IconButton
className='status__collapse-button' className='status__collapse-button'
animate flip animate
active={collapsed} active={collapsed}
title={ title={
collapsed ? collapsed ?

View file

@ -314,6 +314,20 @@
color: $red-bookmark; color: $red-bookmark;
} }
.no-reduce-motion .icon-button.star-icon {
&.activate {
& > .fa-star {
animation: spring-rotate-in 1s linear;
}
}
&.deactivate {
& > .fa-star {
animation: spring-rotate-out 1s linear;
}
}
}
.notification__display-name { .notification__display-name {
color: inherit; color: inherit;
font-weight: 500; font-weight: 500;
@ -1188,6 +1202,50 @@
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
} }
@keyframes spring-rotate-in {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-484.8deg);
}
60% {
transform: rotate(-316.7deg);
}
90% {
transform: rotate(-375deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes spring-rotate-out {
0% {
transform: rotate(-360deg);
}
30% {
transform: rotate(124.8deg);
}
60% {
transform: rotate(-43.27deg);
}
90% {
transform: rotate(15deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes loader-figure { @keyframes loader-figure {
0% { 0% {
width: 0; width: 0;

View file

@ -1,3 +1,47 @@
@keyframes spring-flip-in {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-242.4deg);
}
60% {
transform: rotate(-158.35deg);
}
90% {
transform: rotate(-187.5deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes spring-flip-out {
0% {
transform: rotate(-180deg);
}
30% {
transform: rotate(62.4deg);
}
60% {
transform: rotate(-21.635deg);
}
90% {
transform: rotate(7.5deg);
}
100% {
transform: rotate(0deg);
}
}
.status__content--with-action { .status__content--with-action {
cursor: pointer; cursor: pointer;
} }
@ -430,6 +474,24 @@
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }
.status__collapse-button.active > .fa-angle-double-up {
transform: rotate(-180deg);
}
}
.no-reduce-motion .status__collapse-button {
&.activate {
& > .fa-angle-double-up {
animation: spring-flip-in 1s linear;
}
}
&.deactivate {
& > .fa-angle-double-up {
animation: spring-flip-out 1s linear;
}
}
} }
.status__info__account { .status__info__account {