diff options
4 files changed, 66 insertions, 9 deletions
diff --git a/app/javascript/mastodon/components/animated_number.js b/app/javascript/mastodon/components/animated_number.js new file mode 100644 index 000000000..2d359fbc6 --- /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 ee444e3f0..18b1de127 100644 --- a/app/javascript/mastodon/features/getting_started/components/announcements.js +++ b/app/javascript/mastodon/features/getting_started/components/announcements.js @@ -5,13 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import IconButton from 'mastodon/components/icon_button'; import Icon from 'mastodon/components/icon'; -import { defineMessages, injectIntl, FormattedMessage, FormattedDate, FormattedNumber } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl'; import { autoPlayGif } from 'mastodon/initial_state'; import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg'; 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 d5bc82735..2fec247c1 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 6c412bc89..1e1000ff3 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; @@ -6754,10 +6762,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%); } } } |