From 8e7784ec5e37b5448b84cf9cbc293fba835232c0 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 24 Jan 2020 23:59:35 +0100
Subject: [PATCH] Add number animations
---
.../mastodon/components/animated_number.js | 47 +++++++++++++++++++
.../components/announcements.js | 3 +-
.../status/components/detailed_status.js | 11 +++--
.../styles/mastodon/components.scss | 12 ++++-
4 files changed, 65 insertions(+), 8 deletions(-)
create mode 100644 app/javascript/mastodon/components/animated_number.js
diff --git a/app/javascript/mastodon/components/animated_number.js b/app/javascript/mastodon/components/animated_number.js
new file mode 100644
index 0000000000..2d359fbc60
--- /dev/null
+++ b/app/javascript/mastodon/components/animated_number.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedNumber } from 'react-intl';
+import TransitionMotion from 'react-motion/lib/TransitionMotion';
+import spring from 'react-motion/lib/spring';
+import { reduceMotion } from 'mastodon/initial_state';
+
+export default class AnimatedNumber extends React.PureComponent {
+
+ static propTypes = {
+ value: PropTypes.number.isRequired,
+ };
+
+ willEnter () {
+ return { y: -1 };
+ }
+
+ willLeave () {
+ return { y: spring(1, { damping: 35, stiffness: 400 }) };
+ }
+
+ render () {
+ const { value } = this.props;
+
+ if (reduceMotion) {
+ return <FormattedNumber value={value} />;
+ }
+
+ const styles = [{
+ key: value,
+ style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+ }];
+
+ return (
+ <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
+ {items => (
+ <span className='animated-number'>
+ {items.map(({ key, style }) => (
+ <span key={key} style={{ position: style.y > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}><FormattedNumber value={key} /></span>
+ ))}
+ </span>
+ )}
+ </TransitionMotion>
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.js b/app/javascript/mastodon/features/getting_started/components/announcements.js
index ee444e3f03..0604e696bb 100644
--- a/app/javascript/mastodon/features/getting_started/components/announcements.js
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.js
@@ -12,6 +12,7 @@ import { mascot } from 'mastodon/initial_state';
import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light';
import classNames from 'classnames';
import EmojiPickerDropdown from 'mastodon/features/compose/containers/emoji_picker_dropdown_container';
+import AnimatedNumber from 'mastodon/components/animated_number';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -225,7 +226,7 @@ class Reaction extends ImmutablePureComponent {
return (
<button className={classNames('reactions-bar__item', { active: reaction.get('me') })} onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} title={`:${shortCode}:`}>
<span className='reactions-bar__item__emoji'><Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} /></span>
- <span className='reactions-bar__item__count'><FormattedNumber value={reaction.get('count')} /></span>
+ <span className='reactions-bar__item__count'><AnimatedNumber value={reaction.get('count')} /></span>
</button>
);
}
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index d5bc827359..2fec247c16 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name';
import StatusContent from '../../../components/status_content';
import MediaGallery from '../../../components/media_gallery';
import { Link } from 'react-router-dom';
-import { FormattedDate, FormattedNumber } from 'react-intl';
+import { FormattedDate } from 'react-intl';
import Card from './card';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Video from '../../video';
@@ -14,6 +14,7 @@ import Audio from '../../audio';
import scheduleIdleTask from '../../ui/util/schedule_idle_task';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
+import AnimatedNumber from 'mastodon/components/animated_number';
export default class DetailedStatus extends ImmutablePureComponent {
@@ -172,7 +173,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
<Icon id={reblogIcon} />
<span className='detailed-status__reblogs'>
- <FormattedNumber value={status.get('reblogs_count')} />
+ <AnimatedNumber value={status.get('reblogs_count')} />
</span>
</Link>
);
@@ -181,7 +182,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
<Icon id={reblogIcon} />
<span className='detailed-status__reblogs'>
- <FormattedNumber value={status.get('reblogs_count')} />
+ <AnimatedNumber value={status.get('reblogs_count')} />
</span>
</a>
);
@@ -192,7 +193,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
<Icon id='star' />
<span className='detailed-status__favorites'>
- <FormattedNumber value={status.get('favourites_count')} />
+ <AnimatedNumber value={status.get('favourites_count')} />
</span>
</Link>
);
@@ -201,7 +202,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
<Icon id='star' />
<span className='detailed-status__favorites'>
- <FormattedNumber value={status.get('favourites_count')} />
+ <AnimatedNumber value={status.get('favourites_count')} />
</span>
</a>
);
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 8147ef28d5..7662ad4430 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3,6 +3,14 @@
-ms-overflow-style: -ms-autohiding-scrollbar;
}
+.animated-number {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: stretch;
+ overflow: hidden;
+ position: relative;
+}
+
.link-button {
display: block;
font-size: 15px;
@@ -6750,10 +6758,10 @@ noscript {
&.active {
transition: all 100ms ease-in;
transition-property: background-color, color;
- background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 90%);
+ background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
.reactions-bar__item__count {
- color: $highlight-text-color;
+ color: lighten($highlight-text-color, 8%);
}
}
}
--
GitLab