diff options
Diffstat (limited to 'app')
3 files changed, 16 insertions, 31 deletions
diff --git a/app/javascript/flavours/glitch/components/collapsable.js b/app/javascript/flavours/glitch/components/collapsable.js deleted file mode 100644 index 0e8b04033..000000000 --- a/app/javascript/flavours/glitch/components/collapsable.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import Motion from 'flavours/glitch/util/optional_motion'; -import spring from 'react-motion/lib/spring'; -import PropTypes from 'prop-types'; - -const Collapsable = ({ fullHeight, isVisible, children }) => ( - <Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}> - {({ opacity, height }) => - (<div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}> - {children} - </div>) - } - </Motion> -); - -Collapsable.propTypes = { - fullHeight: PropTypes.number.isRequired, - isVisible: PropTypes.bool.isRequired, - children: PropTypes.node.isRequired, -}; - -export default Collapsable; diff --git a/app/javascript/flavours/glitch/features/composer/spoiler/index.js b/app/javascript/flavours/glitch/features/composer/spoiler/index.js index a49b0e10f..d0e74b957 100644 --- a/app/javascript/flavours/glitch/features/composer/spoiler/index.js +++ b/app/javascript/flavours/glitch/features/composer/spoiler/index.js @@ -3,9 +3,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, FormattedMessage } from 'react-intl'; -// Components. -import Collapsable from 'flavours/glitch/components/collapsable'; - // Utils. import { assignHandlers, @@ -59,11 +56,8 @@ export default class ComposerSpoiler extends React.PureComponent { // The result. return ( - <Collapsable - isVisible={!hidden} - fullHeight={50} - > - <label className='composer--spoiler'> + <div className={`composer--spoiler ${hidden ? '' : 'composer--spoiler--visible'}`}> + <label> <span {...hiddenComponent}> <FormattedMessage {...messages.placeholder} /> </span> @@ -76,7 +70,7 @@ export default class ComposerSpoiler extends React.PureComponent { value={text} /> </label> - </Collapsable> + </div> ); } diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index dd21eae06..0d46297a7 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -2,7 +2,20 @@ padding: 10px; } +.no-reduce-motion .composer--spoiler { + transition: height 0.4s ease, opacity 0.4s ease; +} + .composer--spoiler { + height: 0; + transform-origin: bottom; + opacity: 0.0; + + &.composer--spoiler--visible { + height: 47px; + opacity: 1.0; + } + input { display: block; box-sizing: border-box; |