forked from treehouse/mastodon
[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>
signup-info-prompt
parent
bde35e7878
commit
2ed48037ea
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 ?
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue