diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 6c595c712f..90c689a75a 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -285,7 +285,7 @@ class Status extends ImmutablePureComponent { - + {media} diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 81013747ef..f221474f39 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -6,6 +6,8 @@ import { FormattedMessage } from 'react-intl'; import Permalink from './permalink'; import classnames from 'classnames'; +const MAX_HEIGHT = 322; // 20px * 16 (+ 2px padding at the top) + export default class StatusContent extends React.PureComponent { static contextTypes = { @@ -17,10 +19,12 @@ export default class StatusContent extends React.PureComponent { expanded: PropTypes.bool, onExpandedToggle: PropTypes.func, onClick: PropTypes.func, + collapsable: PropTypes.bool, }; state = { hidden: true, + collapsed: null, // `collapsed: null` indicates that an element doesn't need collapsing, while `true` or `false` indicates that it does (and is/isn't). }; _updateStatusLinks () { @@ -53,6 +57,16 @@ export default class StatusContent extends React.PureComponent { link.setAttribute('target', '_blank'); link.setAttribute('rel', 'noopener'); } + + if ( + this.props.collapsable + && this.props.onClick + && this.state.collapsed === null + && node.clientHeight > MAX_HEIGHT + && this.props.status.get('spoiler_text').length === 0 + ) { + this.setState({ collapsed: true }); + } } componentDidMount () { @@ -113,6 +127,11 @@ export default class StatusContent extends React.PureComponent { } } + handleCollapsedClick = (e) => { + e.preventDefault(); + this.setState({ collapsed: !this.state.collapsed }); + } + setRef = (c) => { this.node = c; } @@ -132,12 +151,19 @@ export default class StatusContent extends React.PureComponent { const classNames = classnames('status__content', { 'status__content--with-action': this.props.onClick && this.context.router, 'status__content--with-spoiler': status.get('spoiler_text').length > 0, + 'status__content--collapsed': this.state.collapsed === true, }); if (isRtl(status.get('search_index'))) { directionStyle.direction = 'rtl'; } + const readMoreButton = ( + + ); + if (status.get('spoiler_text').length > 0) { let mentionsPlaceholder = ''; @@ -167,17 +193,23 @@ export default class StatusContent extends React.PureComponent { ); } else if (this.props.onClick) { - return ( + const output = [
- ); + />, + ]; + + if (this.state.collapsed) { + output.push(readMoreButton); + } + + return output; } else { return (