From f1e4738f8111a11005b1f00affb6678c16059ee5 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 25 Jan 2020 05:23:05 +0100 Subject: [PATCH] [Glitch] Add number animations Port 76f1ed834efd3b58b6ebc8e951b661bbc1b7bf9b to glitch-soc Signed-off-by: Thibaut Girka --- .../glitch/components/animated_number.js | 47 +++++++++++++++++++ .../components/announcements.js | 5 +- .../status/components/detailed_status.js | 11 +++-- .../styles/components/announcements.scss | 4 +- .../glitch/styles/components/index.scss | 8 ++++ 5 files changed, 66 insertions(+), 9 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/animated_number.js diff --git a/app/javascript/flavours/glitch/components/animated_number.js b/app/javascript/flavours/glitch/components/animated_number.js new file mode 100644 index 0000000000..4d14d29248 --- /dev/null +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/util/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 ; + } + + const styles = [{ + key: value, + style: { y: spring(0, { damping: 35, stiffness: 400 }) }, + }]; + + return ( + + {items => ( + + {items.map(({ key, style }) => ( + 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}> + ))} + + )} + + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js index 0107787277..52c95441bf 100644 --- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js +++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js @@ -5,13 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import IconButton from 'flavours/glitch/components/icon_button'; import Icon from 'flavours/glitch/components/icon'; -import { defineMessages, injectIntl, FormattedMessage, FormattedDate, FormattedNumber } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl'; import { autoPlayGif } from 'flavours/glitch/util/initial_state'; import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg'; import { mascot } from 'flavours/glitch/util/initial_state'; import unicodeMapping from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light'; import classNames from 'classnames'; import EmojiPickerDropdown from 'flavours/glitch/features/emoji_picker'; +import AnimatedNumber from 'flavours/glitch/components/animated_number'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, @@ -225,7 +226,7 @@ class Reaction extends ImmutablePureComponent { return ( ); } diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index 898011c881..c4ac8f0a64 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -7,7 +7,7 @@ import StatusContent from 'flavours/glitch/components/status_content'; import MediaGallery from 'flavours/glitch/components/media_gallery'; import AttachmentList from 'flavours/glitch/components/attachment_list'; 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 'flavours/glitch/features/video'; @@ -17,6 +17,7 @@ import scheduleIdleTask from 'flavours/glitch/util/schedule_idle_task'; import classNames from 'classnames'; import PollContainer from 'flavours/glitch/containers/poll_container'; import Icon from 'flavours/glitch/components/icon'; +import AnimatedNumber from 'flavours/glitch/components/animated_number'; export default class DetailedStatus extends ImmutablePureComponent { @@ -204,7 +205,7 @@ export default class DetailedStatus extends ImmutablePureComponent { - + ); @@ -213,7 +214,7 @@ export default class DetailedStatus extends ImmutablePureComponent { - + ); @@ -224,7 +225,7 @@ export default class DetailedStatus extends ImmutablePureComponent { - + ); @@ -233,7 +234,7 @@ export default class DetailedStatus extends ImmutablePureComponent { - + ); diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index 2e559b1d7e..11d29931dc 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -168,10 +168,10 @@ &.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%); } } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index abe933860d..d97ab436d5 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.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;