diff options
author | Mélanie Chauvel (ariasuni) <perso@hack-libre.org> | 2020-03-31 19:40:23 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-03-31 19:40:23 +0200 |
commit | 1fb92037e432913902a5e5c8a5b673b036d84cb8 (patch) | |
tree | 5a601621edc1537c1d6242a82f164cc95b11f91d /app/javascript/mastodon/components | |
parent | 9241cbf8616cc58e0b909326a767fc59be9a9d58 (diff) |
Improve toot clicking areas (#13327)
* Make the area to the left “Show Thread” also expand the toot in Web UI * Clicking the left part of a conversation with the avatars now opens it in Web UI
Diffstat (limited to 'app/javascript/mastodon/components')
-rw-r--r-- | app/javascript/mastodon/components/status.js | 8 | ||||
-rw-r--r-- | app/javascript/mastodon/components/status_content.js | 14 |
2 files changed, 15 insertions, 7 deletions
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 0dc00cb98..075ee1b87 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -432,16 +432,10 @@ class Status extends ImmutablePureComponent { </a> </div> - <StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} collapsable onCollapsedToggle={this.handleCollapsedToggle} /> + <StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} showThread={showThread} onExpandedToggle={this.handleExpandedToggle} collapsable onCollapsedToggle={this.handleCollapsedToggle} /> {media} - {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && ( - <button className='status__content__read-more-button' onClick={this.handleClick}> - <FormattedMessage id='status.show_thread' defaultMessage='Show thread' /> - </button> - )} - <StatusActionBar status={status} account={account} {...other} /> </div> </div> diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 5d921fd41..3200f2d82 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -20,6 +20,7 @@ export default class StatusContent extends React.PureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, expanded: PropTypes.bool, + showThread: PropTypes.bool, onExpandedToggle: PropTypes.func, onClick: PropTypes.func, collapsable: PropTypes.bool, @@ -181,6 +182,7 @@ export default class StatusContent extends React.PureComponent { const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; const renderReadMore = this.props.onClick && status.get('collapsed'); + const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']); const content = { __html: status.get('contentHtml') }; const spoilerContent = { __html: status.get('spoilerHtml') }; @@ -195,6 +197,12 @@ export default class StatusContent extends React.PureComponent { directionStyle.direction = 'rtl'; } + const showThreadButton = ( + <button className='status__content__read-more-button' onClick={this.props.onClick}> + <FormattedMessage id='status.show_thread' defaultMessage='Show thread' /> + </button> + ); + const readMoreButton = ( <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'> <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth /> @@ -229,6 +237,8 @@ export default class StatusContent extends React.PureComponent { <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} /> {!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} />} + + {renderViewThread && showThreadButton} </div> ); } else if (this.props.onClick) { @@ -237,6 +247,8 @@ export default class StatusContent extends React.PureComponent { <div className='status__content__text status__content__text--visible' style={directionStyle} dangerouslySetInnerHTML={content} /> {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />} + + {renderViewThread && showThreadButton} </div>, ]; @@ -251,6 +263,8 @@ export default class StatusContent extends React.PureComponent { <div className='status__content__text status__content__text--visible' style={directionStyle} dangerouslySetInnerHTML={content} /> {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />} + + {renderViewThread && showThreadButton} </div> ); } |