@@ -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> | |||||
); | |||||
} | |||||
} |
@@ -5,13 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; | |||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import IconButton from 'mastodon/components/icon_button'; | import IconButton from 'mastodon/components/icon_button'; | ||||
import Icon from 'mastodon/components/icon'; | 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 { autoPlayGif } from 'mastodon/initial_state'; | ||||
import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg'; | import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg'; | ||||
import { mascot } from 'mastodon/initial_state'; | import { mascot } from 'mastodon/initial_state'; | ||||
import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light'; | import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import EmojiPickerDropdown from 'mastodon/features/compose/containers/emoji_picker_dropdown_container'; | import EmojiPickerDropdown from 'mastodon/features/compose/containers/emoji_picker_dropdown_container'; | ||||
import AnimatedNumber from 'mastodon/components/animated_number'; | |||||
const messages = defineMessages({ | const messages = defineMessages({ | ||||
close: { id: 'lightbox.close', defaultMessage: 'Close' }, | close: { id: 'lightbox.close', defaultMessage: 'Close' }, | ||||
@@ -225,7 +226,7 @@ class Reaction extends ImmutablePureComponent { | |||||
return ( | return ( | ||||
<button className={classNames('reactions-bar__item', { active: reaction.get('me') })} onClick={this.handleClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} title={`:${shortCode}:`}> | <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__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> | </button> | ||||
); | ); | ||||
} | } | ||||
@@ -6,7 +6,7 @@ import DisplayName from '../../../components/display_name'; | |||||
import StatusContent from '../../../components/status_content'; | import StatusContent from '../../../components/status_content'; | ||||
import MediaGallery from '../../../components/media_gallery'; | import MediaGallery from '../../../components/media_gallery'; | ||||
import { Link } from 'react-router-dom'; | import { Link } from 'react-router-dom'; | ||||
import { FormattedDate, FormattedNumber } from 'react-intl'; | |||||
import { FormattedDate } from 'react-intl'; | |||||
import Card from './card'; | import Card from './card'; | ||||
import ImmutablePureComponent from 'react-immutable-pure-component'; | import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
import Video from '../../video'; | import Video from '../../video'; | ||||
@@ -14,6 +14,7 @@ import Audio from '../../audio'; | |||||
import scheduleIdleTask from '../../ui/util/schedule_idle_task'; | import scheduleIdleTask from '../../ui/util/schedule_idle_task'; | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import Icon from 'mastodon/components/icon'; | import Icon from 'mastodon/components/icon'; | ||||
import AnimatedNumber from 'mastodon/components/animated_number'; | |||||
export default class DetailedStatus extends ImmutablePureComponent { | 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'> | <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'> | ||||
<Icon id={reblogIcon} /> | <Icon id={reblogIcon} /> | ||||
<span className='detailed-status__reblogs'> | <span className='detailed-status__reblogs'> | ||||
<FormattedNumber value={status.get('reblogs_count')} /> | |||||
<AnimatedNumber value={status.get('reblogs_count')} /> | |||||
</span> | </span> | ||||
</Link> | </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}> | <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}> | ||||
<Icon id={reblogIcon} /> | <Icon id={reblogIcon} /> | ||||
<span className='detailed-status__reblogs'> | <span className='detailed-status__reblogs'> | ||||
<FormattedNumber value={status.get('reblogs_count')} /> | |||||
<AnimatedNumber value={status.get('reblogs_count')} /> | |||||
</span> | </span> | ||||
</a> | </a> | ||||
); | ); | ||||
@@ -192,7 +193,7 @@ export default class DetailedStatus extends ImmutablePureComponent { | |||||
<Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'> | <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'> | ||||
<Icon id='star' /> | <Icon id='star' /> | ||||
<span className='detailed-status__favorites'> | <span className='detailed-status__favorites'> | ||||
<FormattedNumber value={status.get('favourites_count')} /> | |||||
<AnimatedNumber value={status.get('favourites_count')} /> | |||||
</span> | </span> | ||||
</Link> | </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}> | <a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}> | ||||
<Icon id='star' /> | <Icon id='star' /> | ||||
<span className='detailed-status__favorites'> | <span className='detailed-status__favorites'> | ||||
<FormattedNumber value={status.get('favourites_count')} /> | |||||
<AnimatedNumber value={status.get('favourites_count')} /> | |||||
</span> | </span> | ||||
</a> | </a> | ||||
); | ); | ||||
@@ -3,6 +3,14 @@ | |||||
-ms-overflow-style: -ms-autohiding-scrollbar; | -ms-overflow-style: -ms-autohiding-scrollbar; | ||||
} | } | ||||
.animated-number { | |||||
display: inline-flex; | |||||
flex-direction: column; | |||||
align-items: stretch; | |||||
overflow: hidden; | |||||
position: relative; | |||||
} | |||||
.link-button { | .link-button { | ||||
display: block; | display: block; | ||||
font-size: 15px; | font-size: 15px; | ||||
@@ -6754,10 +6762,10 @@ noscript { | |||||
&.active { | &.active { | ||||
transition: all 100ms ease-in; | transition: all 100ms ease-in; | ||||
transition-property: background-color, color; | 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 { | .reactions-bar__item__count { | ||||
color: $highlight-text-color; | |||||
color: lighten($highlight-text-color, 8%); | |||||
} | } | ||||
} | } | ||||
} | } | ||||